Every perfume website runs into the same problem: a scent cannot travel through a screen. Visitors cannot smell anything, so they read about top, heart and base notes and a list of ingredients. Many fragrance sites fill the gap with model shoots and lighting that set a mood but say little about the scent itself.
This breakdown looks at SEN from the Foundax case library, a fictional botanical perfume brand with one product, the fig eau de parfum FIG. 01. Instead of describing the scent, it translates it into a sequence of images: a fig becomes a clear drop, the drop opens into a splash of water, and the scent is finally held in a cut-glass bottle.
Why fragrance websites are hard
- Scent cannot be shown. A screen carries only pictures and words, so visitors have to imagine.
- Note vocabulary is abstract. Terms like "green woody" or "soft woods" mean little to most people.
- Mood images look the same everywhere. Models, light and petals would fit any brand.
- Single-product brands lack content. With only one perfume, a site easily shrinks to one product page.
So the design goal for SEN is: let visitors see where the scent comes from and what it feels like through a sequence they follow as they scroll, then hand them over to the product page.
The idea: from fig to feeling
The home page is one long pinned scroll in five chapters. Each chapter has one image and one verb:
- From fig to feeling. A cut fig and an open leaf introduce the ingredient.
- Extract. The green condenses into a clear drop.
- Unfold. The drop falls into water and opens out, like a scent unfolding on skin.
- Enclose. A cut-glass bottle holds the fragrance.
- Finally, a little of you. The bottle gets its label and becomes something to own.
Each chapter says one thing, and continuous transformations link the images so visitors never lose their place.
Visual language: white space saved for one object
The page uses almost one background colour and one text colour, and the centre of the frame always holds a single subject: the fig, the drop, the splash or the bottle. Generous white space and a slow pace express the restraint of the scent.
- Mist white
#F1F2EEPage background, like a clean blotter strip - Ink green
#2C322AHeadings and body text, softer than black - Moss grey
#73796ESecondary text and chapter labels - Pale sage
#CCD0C7Dividers and the progress bar
| Use | Typeface | Why |
|---|---|---|
| Headings and chapter verbs | Libre Baskerville, roman and italic | A classical serif with the feel of a botanical plate, with italics for verbs such as Extract and Unfold |
| Chinese | Noto Serif SC, Songti | Matches the character of the English serif |
Four signature moments
Fruit
Start with the ingredient
The first screen holds a cut fig and a leaf, with the large line "From fig to feeling" setting the direction of the journey.
Drop
Green, held in a drop
The fig fades and a clear drop falls from above, with the chapter verb "Extract." in italics on the left.
Splash
Opening in a single drop
The drop hits the water and throws up a crown of droplets. The splash is rendered live with WebGL rather than played as a video.
Bottle
Held in glass
A cut-glass bottle forms from transparency, the cap lands and the label appears, turning the scent into an object to own.
The six-act storyboard
01
Opening: Another life for a little fig
The centre of the frame holds only a fig and a leaf. The headline, the large English line and a quiet introduction leave plenty of space.
02
Extract: A little green, held in a drop
The fig leaves and a clear drop falls. Only one subject remains, and the progress bar at the bottom shows which chapter visitors are in.
03
Unfold: A moment, an opening world
The drop hits the water and splashes into a crown. It stands for the layers of a scent opening on skin and is the most dynamic moment of the journey.
04
Enclose: Held in glass, opened by light
The cut-glass bottle takes shape with its cap hovering above. Clear liquid and facets hold what cannot be seen.
05
Finish: Finally, a little of you
The bottle carries its SEN / FIG. 01 label, the notes read "fig · green leaf · soft wood", and a link leads to the product.
06
Product: FIG. 01
A large bottle image sits beside the notes, volume and price. "Discover this scent" opens the product page, and visitors can replay the journey below.
From experience to order
As soon as the journey ends, a complete product card follows: notes, 50 ml volume and price, with a button into Foundax's native product page, cart and checkout. Delivery and returns information and a brand journal entry about fig and leaf sit below. To learn more, visit Foundax features.
Long scroll stories need to respect visitors who prefer no animation. With reduced motion turned on, SEN collapses the journey into one still screen while product information and the buy button stay available, following W3C WCAG 2.2 guidance that motion should be possible to turn off.
A checklist you can reuse
- Instead of describing a scent, choose a few images that stand for it: ingredient, form and texture.
- Give each chapter one subject and one verb so a long scroll stays clear.
- Use white space and pace to express the brand, which is more distinctive than stacked mood images.
- Show progress so visitors never get lost in a long story.
- Follow the journey immediately with product information and a way to buy.
- Prepare a complete still version for reduced motion.
FAQ
Is a long home page worth it for a single product?
Single-product brands need content even more to stand out. SEN's scroll has only five chapters and leads straight to the product, so buyers never wait long.
Will the splash effect slow the website down?
The splash is rendered with WebGL only during the scent journey. It does not load with reduced motion turned on or inside the editor.
Is SEN a real brand?
No. SEN is a fictional brand created by the Foundax team. Shopping and orders in the case are a demo. Nothing is charged or shipped.
Can I start my own website from this design?
Yes. On the SEN case page, choose "Start with this template". After signing up, a website is created from this case, ready for your own products and brand content. For design methods across industries, see the brand website design guide.