One project.
Every direction.
The current record of the creative routes, latest refinements and decisions. Previous versions remain available for comparison. ★ marks the earlier design recommendation on v09. ✓ marks the client-structure directions, v11 and v12.d; neither marker indicates client approval.
One structure.
A connected story.
The client’s seven branches in order, all required homepage blocks and four distinct capability chapters. Connecting copy, next-section links and a direct catalogue path help visitors move from intent to the right next step. The earlier button and tertiary-link styling is restored, with the original section dividers. Ornamental eyebrows remain removed, and the market action sits with the collage headline. The video footer remains; the earlier footer-only study is preserved.
Explore the connected journey →LATEST HERO ALTERNATIVE / 12.CGlass, 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 homepage covering the brief’s required content and proposed 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.
Version 11 colour update: full category fills with white type, a burgundy innovation panel and capability cards on the main background with thin dividers. The earlier pale treatment remains preserved.
Scope, journeys & search
The sitemap defines the navigation. The PDF separately defines homepage content and four end-to-end journeys. The current concepts cover homepage directions, navigation and initial journey paths. They do not yet constitute the complete 20-template system or Figma handoff.
v12.d now demonstrates site-wide search entry, mixed editorial and selected catalogue results, type/market filters and empty/unavailable recovery. The full WordPress index and catalogue wrapper remain implementation work.
Search across the concepts
Every current version now has a search icon opening an empty field with suggested-search pills. Suggestions reveal sample matches and lead into the same search-results pattern. Preserved snapshots retain the earlier treatment.