Beaux Vetements

Landing Page
UI Design
Figma
2017
Concept

Intro

A fashion homepage has to do two contradictory things: sell a mood and sell specific items. Editorial imagery creates desire but hides the products; a product grid shows everything and feels like a catalogue. I built the page as alternating colour bands, where each band pairs one full-bleed editorial image with one overlapping product panel — mood and merchandise in the same visual unit.

Visual direction

Each section owns a colour — turquoise, pink, mauve, white — and the photography inside it is duotoned to match. That single move ties a model shot and a product carousel into one composition without any borders or containers. Typography pairs wide-tracked condensed caps with an italic serif on the second line (TRENDS / Spring, CASUAL / Style), with a short rule underneath: one pattern, repeated in every band, that stays recognisable at any scroll position. The wordmark is set in outline type, which lets it sit over imagery without blocking it.

‍

‍

‍

‍

Design decisions

  • Icon-led category sidebar. Outdoor, Formal, Casual, Cocktail, Active, Clubbing, Accessories — each with a custom line icon of the garment type. Eleven categories in a text list would be a wall; as an icon grid it reads in one glance and stays open permanently, so the whole range is always one click away.
  • Duotone as a structural device, not a filter. Tinting photography to the section colour is what makes overlapping white panels read as foreground. It solves layering without shadows or outlines.
  • Product panels overlap the band edges. Cards break across the colour boundary, which stops the page from reading as stacked rectangles and pulls the eye forward through the sections.
  • Consistent product metadata. Brand in caps, item name below in lighter grey — the same two-line lockup in every carousel, so 30+ items from different brands don't produce 30 different layouts.
  • Icon system reused at the bottom. The same garment icons return in the closing category strip, closing the page with the language it opened with.

‍

‍

Get in touch

Let's work together. Submit your details in this form and I will get back to you ASAP.

Thank you!

I’ll contact you soon. 

Oops! Something went wrong while submitting the form :(