PROJECT 02JEWELLERY BRAND WEBSITE

A jewellery brand with a story worth exploring.

An eleven-page brand experience connecting collections, heritage and store appointments.

My role: Brand-led interface, content architecture and motion
Scope: Eleven-page brand and collection website

01 — The challenge

Different intentions deserve different paths.

Browsing a collection, choosing a gift and booking a store visit are different journeys. The brand's history and practical store information needed their own place too.

I shaped these journeys into connected, purposeful pages.

02 — Site architecture

Eleven pages, each with a reason to exist.

Full page and section scope

01Home
Introduces the brand and guides visitors into the site.
02Collection
Gives the collection a clear overview.
03Product
Presents product details in a consistent page template.
04Bridal
Curates the pieces created for weddings.
05Gifts
Brings gift ideas together.
06The brand
Explains the identity behind the pieces.
07Heritage
Tells the brand story through a timeline.
08Journal
Collects the brand's published stories.
09Article
Gives each story a shared editorial template.
10Contact
Brings contact details together.
11Appointment
Offers a direct route to book a store appointment.

03 — Art direction

A palette drawn from the jewellery itself.

Deep navy and a neutral stone base let ruby and gold accents, drawn from the product photography, carry the character. Gold is used sparingly in details and on dark backgrounds.

A classic serif gives headlines presence; a clean sans serif keeps longer reading comfortable. Scale and spacing adapt from phone to wide desktop.

04 — Motion & interaction

A polished rhythm across eleven pages.

Opening: The logotype comes into focus as a restrained glow appears. This introduction runs once per session.
Page transitions: An arched curtain bridges pages while the next view is prepared, keeping transitions composed.
Scroll-led imagery: Image frames are tied to scroll position for a more controlled visual sequence than scrubbing through video.
Collection rail: The collection can be explored by wheel, drag, arrow buttons or keyboard, independently of page scrolling.
Type & imagery: Headlines reveal by letter, paragraphs by line and images through a scaling mask.

05 — Performance & access

Built to keep the first visit light.

Multi-page architecture: The Vite multi-page build shares the header, navigation and footer through a small template plugin.
Video: Video loads when it enters view, pauses when it leaves and uses smaller files on mobile. Autoplay was removed.
Typography: Fonts are served locally, split by language subset and preloaded where needed.
First paint: Critical styles load early to avoid a flash of unstyled white during the opening.
Reduced motion: Reduced-motion preferences remove animation and keep the content readable in place.

06 — The result

A brand system designed to grow.

Collection, bridal, gift and appointment pages share a visual and interaction system, allowing future pages to use the same foundation.

NEXT PROJECT · PROJECTS 04 + 06 · FIELD SALES CATALOGUE A sales catalogue that works offline.

Have a project with similar ambitions? Tell me what you're building and where you need help.

Let's talk on Fiverr ↗Email me

← All projects