Forme

Overview

The idea behind
Forme.

An independent personal-audio website built around a four-product collection and a shared material character. Large product imagery leads into a filterable shop, individual product pages, an editorial design story, keyboard-operated listening modes and a complete multi-item bag experience. Developed from the saved Forme brand imagery and original showcase film.

The brief

A product worth getting closer to.

The brief was to build a product website where the object carries the identity. The experience needed depth beyond a strong first screen: materials to explore, finishes to compare and a selection that stays intact as someone moves between pages.

The direction

A collection, with a common language.

F01 headphones lead the homepage, while a filterable shop introduces earbuds, a home speaker and a travel case. Each product has its own detail page. Design and listening pages explain the thinking; support and a multi-item bag complete the journey.

The design

Precision in the quiet details.

Near-black surfaces, silver type and a cool neutral action colour keep the interface close to the metal and cushions in the imagery. Close crops give small details a larger presence. Product motion follows the scroll; finish changes use an interruptible image crossfade.

Palette

Night · Silver · Cool steel

Structure

Ten pages around a four-product collection

Interaction

Finishes · Listening modes · Persistent bag

The build

Keep the choice all the way through.

Finish and listening selections are reflected in the URL. A validated session cart carries product identity, finish and quantity between pages. Mixed-product totals, individual quantity changes, removal and undo stay consistent. Browser storage failures receive useful feedback. The review does not place an order or collect payment details.

The listening interface illustrates the product direction; it does not process audio or claim measured noise-cancellation performance. This is independent design and development work, with no client endorsement or physical product sale.

What it does

Details that make
the product.

• Ten complete pages: home, shop, four products, design, listening, support and bag
• URL-linked Silver and Midnight finishes with a crossfade between product views
• Keyboard-operated listening tabs with deep links
• Multi-product session bag with quantity changes, totals, removal, undo and review
• Restrained product motion with a reduced-motion fallback

Under the surface

Built with.

• Semantic HTML, CSS Grid and vanilla JavaScript
• Progressive CSS scroll timelines
• Native controls and Intl currency formatting
• Next.js hosting and portfolio integration