Clifton Clothing. Truly custom clothing.

UI and UX wireframes · Draft for the site build

Clifton, one screen at a time.

Simple desktop and mobile wireframes for the buying journey, with the thinking behind every block. They show structure and priority, not final design. Tap a pin on any screen to see what it is, why it's there and what it means for the build.

Before you start

How to read these.

Clifton makes clothing from scratch, and the site has to show that quality, make the choices clear and make approval easy. These wireframes are Tandem's proposal for how the journey should be laid out. They come from an audit of the live site and a walkthrough of it on 1 November.

Tap the pins

Every numbered pin on a screen opens a note on the right: what the block is, why it's there, and anything the build has to respect. Tapping the block works too.

Switch device

Use Desktop or Mobile in the bar. The numbering stays the same, and each note says what changes on a phone. Phones are where most of the friction is, so they are designed first, not shrunk down.

Read the layout, not the look

Colours, type and photography come later. Here, grey means content, the claret button is the one main action on a screen, and anything dashed is optional or still to be confirmed.

Content block Primary action Secondary action Optional or to confirm 1Tap for the thinking

Five principles behind every screen

Garment first, process secondShow what's being bought before explaining how it's made.
One decision at a timeAnd say what each choice costs, where the choice is made.
Preview and price stay in viewNobody should have to close a panel to see what they've built.
Plain words, one storyProof, payment, approval and delivery are described the same way everywhere.
Phone firstThumb-height buttons, sticky actions, and nothing covering a button.

The journey

← Presentation hub