Blooming Within — Ning Zhang

Blooming Within is a three-day experiment from June 2025. I took a portrait I had made with Midjourney the year before and built a landing page around it, laid out like a poster. A glowing flower over the model’s eye is the only thing on the page that moves. I finished it as a desktop and a mobile prototype in Figma.

The desktop prototype. Watch the flower over the eye. Open in Figma ↗

The mobile prototype. Open in Figma ↗

Context

Posters put big type and a strong image together, and you take them in at once. Most landing pages split the same content into a banner and a stack of sections. I wanted to know whether a web page could hold on to the poster’s impact and still do a site’s job, with navigation and buttons.

My reference was Savio Joseph’s poster Wonderstruck, which pairs heavy type with a portrait. The page is for a fictional community about women’s personal growth, with workshops, stories and resources. Its slogan is “Grow stronger, bloom brighter.”

A Midjourney portrait of a young woman with short dark hair, lit in blue and red, with an orange flower over one eye — The starting point: a portrait I made with Midjourney in 2024.

Case 1 · The page reads in the same order as a poster

Options: A standard landing page with a hero banner and stacked sections; one screen laid out like a poster
Trade-off: A banner and sections would lose the poster's impact, and keeping that impact was the point of the experiment.
Decision: Lay the page out like a poster: the name first, then the navigation, then the slogan beside the portrait.

The site name runs across the top in heavy white type, and the portrait overlaps it. The navigation is a short list on the left. The slogan and two buttons sit to the right of the face. A reader meets the title first, then the image, then the smaller details, the same order a poster sets up.

Everything else stays flat: one blue background and white type. The buttons, the menu and the social icons are Figma components, so the same parts work at both sizes. On the phone the name breaks onto two lines above the portrait, and the list folds into a menu button.

Figma component with one state of the navigation menu for each page — The menu, with a state for each page.

Case 2 · Only the flower moves, so the title and slogan stay easy to read

Options: Animate the whole portrait; animate one element in it
Trade-off: Movement across the whole image would compete with the name and the slogan for attention.
Decision: Cut the flower out as its own layer and give it a slow glow, and keep the face still.

In Photoshop I masked the figure out of its dark background. Then I removed the flower from the face to get a clean base image, and the flower became a separate layer.

The portrait cut out from its background, with the flower still on the face — The figure masked out of the background.

The same cut-out portrait with the flower removed from the face — The base image, with the flower removed.

In Figma the flower is a component with three colour states, from red through orange to pale yellow. The prototype moves between them, so the flower seems to glow and breathe. It is the one thing that changes on the page, and it ties to the theme: growth that happens inside a person and shows slowly.

A Figma component with three states of the flower, from red to yellow — The three states of the flower component.

The flower in red and orange — One key frame of the glow.

How I built it

I worked alone over three days, June 1 to 3, 2025. The portrait came from an earlier Midjourney project in 2024. I did the masking and retouching in Photoshop, and the layout, components and animation in Figma.

Outcome

The project ended as two Figma prototypes, one for desktop and one for mobile. I did not build the site, so there is no usage data.

Reflection

The flower taught me how little animation a page needs. One small movement, tied to what the page is about, draws the eye to the face and leaves the title and buttons easy to read.