A design that works on every screen.

For more than seven years I’ve worked on both sides of design: building other designers’ Figma files into live sites, and designing sites and interfaces myself. Building other people’s designs taught me where a layout breaks between Figma and the browser. Designing my own taught me why each of those decisions gets made, and what it costs when it’s made badly.

What a web design project gives you

• Mockups for phone, tablet and desktop, not a desktop design with the rest left to guesswork.
• Two or three directions at the start, so you choose between real options instead of approving the only one you were shown.
• A clickable prototype to try the flow on your own phone before anything is built.
• Rounds of changes, each with the reasoning written down, until the design does what it should.
• A Figma file built to last: components, colour and type styles and spacing rules that any developer, or I, can turn into a site without guessing.

Design practices I follow, and the ones I avoid

Some choices look good in a mockup and work against the people using the site. I design around these:

• One main action per screen, visible without hunting for it.
• Body text at 16 pixels or more, with enough contrast to read in sunlight (WCAG AA as the minimum).
• Tap targets big enough for a thumb, and spacing that prevents tapping the wrong link.
• Forms that ask only for what you’ll use. Every extra field costs submissions.
• Real content in the mockups, because a headline that wraps to four lines in German or Spanish breaks a layout designed around one line of placeholder text.

And I avoid what usability research keeps showing doesn’t work: carousels on the home page, where few visitors ever see the second slide; grey text on grey backgrounds; popups that appear before the visitor has read anything; custom cursors and scroll effects that take control away from the visitor.

How a design behaves on different screens

A layout isn’t designed at three sizes and done. Text reflows, images crop, navigation runs out of room, and the worst problems show up at the widths between breakpoints. I check every page from a small phone to a wide monitor, with long words, short words and real images, and design the changes in Figma, where they’re cheap, instead of discovering them in the browser, where they aren’t.

Usability and conversion, not only appearance

A design is finished when visitors can do what they came for. That means navigation labels in your customers’ words rather than internal names, a clear next step on every page, reassurance placed where people hesitate (reviews next to the form, prices before the contact button), and landing pages without the distractions that pull visitors away from the one thing you want them to do.

A/B tests: letting the numbers decide

When two directions both look right, the visitors can decide:

1. A question from real data: for example, why most visitors leave the pricing page without clicking.
2. Two versions in Figma that answer it differently: another layout, another order, another call to action.
3. Both versions built, with traffic split between them by a testing tool such as Webflow Optimize or VWO, or by the site’s own code, and measured in Google Analytics.
4. Enough time to be sure. A test stopped at the first difference usually picks the wrong winner.
5. The winner shipped, and the result written down for the next decision.

My honest caveat: A/B tests need traffic. With a few hundred visitors a month, a test can run for months without a clear answer. In that case, watching five real people use the design tells you more, and I’ll recommend that instead.