One project.
Every direction.
The current record of the creative routes, latest refinements and decisions. Previous versions remain available for comparison.
Glass, in motion.
The supplied perfume video replaces the hero background and added bottle renders. The headline sits at the bottom; muted looping playback includes a pause control. Each collage photograph has its own scroll speed and direction, while the central headline stays anchored. Four large capability panels reveal product photography with white headlines and arrow actions on hover or keyboard focus; touch devices show the imagery immediately. V12 and v12.b remain separate options.
Explore version 12.c →LATEST HERO ALTERNATIVE / 12.BGlass, at scale.
An oversized single bottle, cropped at the bottom, with the headline layered over a softly frosted dark gradient. V12 remains the three-product composition.
Explore version 12.b →LATEST EDITORIAL EXPLORATION / 12Material & Meaning.
A three-product hero with a larger, lower headline that scales consistently across desktop widths, plus oversized, cropped perfume, spirits and healthcare renders, a rising curtain transition, a centred scroll headline and changing bottle studies with inset product photography over Stoelzle’s warm studio and timber settings.
Explore the new editorial direction →LATEST STRUCTURE-FAITHFUL VERSION / 11Client structure.
The seven branches and nested navigation match the proposed workbook. Homepage coverage follows the UX/UI brief; deeper routes are navigation prototypes.
Explore the client-structure version →EARLIER EDITORIAL EXPLORATION / 10Editorial v2.
The original Editorial design, with a scroll-driven introduction inspired by Petpak.
Explore the new opening →PREFERRED MOTION REFERENCE / 08Product & story.
The confirmed layout reference: product left, fixed copy and CTA right. This is a preference for the interaction, rather than final client sign-off.
Open the reference →CURRENT BOTTLE EXPLORATION / 09Pinned glass story.
One continuous full-width scene stays pinned through a long scroll. Bottle and copy remain anchored while the glass expression and story change, with a soft frosted area behind the copy.
Open the current version →Premium presence.
Clear next steps.
The client brief asks for a premium, innovative image and qualified leads. The website must help prospects find packaging, explore a bespoke project, request a quote or sample, and contact an expert. It also serves creative partners, existing accounts and candidates.
The shared foundation.
- Headlines
- LFS Adelia Regular, in all caps.
- Other text
- Basis Grotesque for body copy, navigation, buttons and captions.
- Readability
- The latest combined route uses larger copy, prominent tertiary actions and generous click areas.
- Bottle stories
- Products sit on the left, with grouped headline, description and CTA on the right. Gentle rotation adds depth. Text does not slide across the bottles.
- Film panel
- Pure black continues from the heading into the product film.
- Motion
- Motion supports the story; mobile uses simpler layouts and chapter controls where appropriate. Reduced-motion visitors receive a calmer presentation.
- Version history
- Original directions, Futura iterations, pre-brandbook copies and previous interaction experiments are retained. The rejected moving-copy experiment is under Preserved copies.
Twelve studies + two hero alternatives.
| No. | Version | Creative emphasis / status | What it explores |
|---|---|---|---|
| 01 | Editorial ↗ | Brand & reputation | Original editorial homepage, with subtle brandbook category accents. |
| 02 | The atelier ↗ | Product & co-creation | Architectural hero and interactive bottle customisation. |
| 03 | The glass story ↗ | Brand & business | Full-width storytelling based on the client structure. |
| 04 | Glass in motion ↗ | Immersive & experiential | Parallax opening and a horizontal bottle sequence. |
| 05 | Bare wireframe ↗ | Structure & journeys | Eight structural templates, sitemap and key journeys. |
| 06 | Shaping possibilities ↗ | Brand & business | Combined direction with early market paths and a bespoke-project tool. |
| 07 | Larger type ↗ | Readability refinement | Larger body text and stronger tertiary actions; scroll corrected with product-left / fixed-copy-right layout. |
| 08 | Product & story ↗ | Preferred motion reference | Product left; fixed, grouped headline, text and CTA right. Gentle 3D rotation. |
| 09 | Long scroll + frost ↗ | Current bottle exploration | A long pinned brochure scene; anchored bottle and fading copy; softly frosted text area; black film panel. |
| 10 | Editorial v2 ↗ | Earlier editorial exploration | Scroll-driven intro inspired by Petpak: glass movement, progressive text reveal and a natural handoff into markets. |
| 11 | Client structure ↗ | Exact proposed hierarchy | Seven navigation branches and nested entries from the workbook, plus every required homepage block. Catalogue links continue to current services; deeper routes are prototypes. |
| 12 | Material & Meaning ↗ | Brand & material / editorial | Fluid Glass-inspired parallax hero and curtain handoff; a centred headline over the collage zoom; three distinct bottle studies with inset product photography and warm client settings inspired by Studio D. Subtle staggered card and text reveals. |
| 12.b | Material & Meaning — oversized hero ↗ | Hero alternative | One oversized, cropped bottle with a soft frosted dark gradient behind the overlapping headline. Same editorial journey below; v12 is unchanged. |
| 12.c | Material & Meaning — video hero ↗ | Hero alternative | Supplied perfume film, no added hero bottle renders, headline at the bottom, muted loop and pause control. Independent collage photo speeds and a fixed central headline continue the editorial journey below. |
These are our creative-route labels. The client brief combines brand and conversion objectives; it does not prescribe these categories.
Distinct worlds.
One visual language.
Corporate blue anchors the identity. Market sections use light category washes, fine rules and considered accents; product imagery keeps its natural light and material character.
Colours are approximate samples from the supplied screenshot. Darker derived tones keep small text and buttons readable. Final production should use the master brandbook values.
Photography follows three pillars: premium products, authentic people and real industry. Use each in its relevant story rather than treating texture as decoration. The bare wireframe stays neutral.
Review all twelve studies and their preserved originals →Seven primary branches.
Our company · Your market · Make your product unique · Creating value: innovation · Sustainable impact · Careers- Join us · Contact us.
The four markets are Beauty, Spirits, Healthcare and Consumer.
Review the exact hierarchy and homepage coverage →Four useful paths.
- Known product need → catalogue → product → sample or quote.
- Bespoke project → capabilities → case studies → contact an expert.
- Creative partner → case studies → customisation → early project contact.
- Candidate → careers → job detail → application.
Working explorations.
Twelve interactive studies and v12.b / v12.c hero alternatives, including a new structure-faithful homepage and full sitemap navigation, plus a structural wireframe, supplied films, illustrative 3D glass studies and preserved versions. Enquiry actions connect onward to Stoelzle’s existing contact service.
From direction to system.
Select the final route, develop the full 20-template system and four complete journeys, then prepare components, responsive rules and the Figma handoff in the client’s workspace. Designs have not yet been transferred to Figma.
Client sitemap and UX/UI brief define structure and journeys. The technical tender informs the delivery context. Cartier informs the luxury storytelling and product/copy relationship; Petpak informs Editorial v2’s scroll-driven opening. Material & Meaning adds references from Fluid Glass, Exo Ape’s St. Regis Venice project and Studio D. Its backgrounds reframe Stoelzle’s warm studio and timber product photography; its isolated bottle is an illustrative AI-generated glass study. Client fonts and supplied video excerpts are used in the concepts.