Web · Deep dive 08
Web Design
The design craft before the code — research, UX, visual direction, and a design system in Figma that engineering can build without guessing.
The scope
Design-led work where how it looks and feels is the point: discovery and UX, visual direction tied to your brand, interaction and motion, and a component library handed over as a real system — tokens, states, and specs — not a folder of pretty screens. We design for the build, so what we draw is what ships.
Does this sound familiar?
-
The site looks like a template because it is one, and it shows.
-
Every page was designed in isolation, so nothing feels like the same product.
-
Beautiful mockups that fell apart the moment a real engineer touched them.
-
Your brand looks sharp on the deck and generic on the live site.
-
Nobody can say what the 'design system' actually is — there's just a Figma graveyard.
The customer payoff
What changes for you
What you feel once it’s running.
A look that's unmistakably yours, not the nearest Dribbble trend.
-
One coherent system across every page, breakpoint, and state.
-
Designs annotated and tokenised so engineering builds them as drawn.
-
Faster decisions — prototypes you can click instead of arguments about taste.
-
A design library your team can keep growing after we leave.
Phases
⏱ 3–8 weeks typicalHow Web Design actually runs.
-
01
Discover
Audience, goals, and a hard look at the current experience. We map the journeys that matter before drawing a single screen.
-
02
Direction
Two or three visual routes — type, colour, motion, tone — pressure-tested on real content. We pick a direction together, not in a vacuum.
-
03
System
Tokens, components, and layouts built once and reused everywhere. Interactive prototype so you feel the product before it's coded.
-
04
Handover
Specs, states, and accessibility notes wired for engineering. We stay close through the build so nothing gets lost in translation.
The hand-off
You get
What lands in your hands — every artefact, nothing hidden.
-
UX flows and wireframes for the journeys that matter
-
Visual design system (type, colour, spacing, motion) as tokens
-
Figma component library with variants and states
-
Clickable prototype of the core flows
-
Responsive layouts from mobile to wide desktop
-
Accessibility-checked colour and contrast (WCAG 2.2 AA)
-
Developer handover specs and annotations
Common questions
-
Q·01 How is this different from Frontend Development?
Web Design is the design craft — research, UX, visual direction, and the system in Figma. Frontend Development is building that in code. They pair naturally: design here, build there, with the same team carrying it across so nothing gets lost between the two.
-
Q·02 Do you work in Figma?
Yes — Figma is home base. We build with components, variants, and tokens so the file stays a living system, and so it maps cleanly onto code (shadcn / radix, Tailwind tokens) when it's time to build.
-
Q·03 Can you work with our existing brand?
Absolutely. If you have a brand, we extend it to the web honestly — same voice, sharper on screen. If you don't, we can shape a light visual identity as part of the work.
-
Q·04 Will you also build it?
Usually yes, with our frontend team — that's the cleanest path. But the handover is built to be buildable by anyone, so if you have in-house engineers, they'll have everything they need.
-
Q·05 Do you design for accessibility?
From the start, not as a cleanup pass. Contrast, focus order, and touch targets are designed in and checked against WCAG 2.2 AA before handover.
Ready to start
Make it look like you mean it.
A short design sprint, two honest directions, and a clear read on what your product should feel like. Let's design something that's actually yours.
Start a design engagementThe wider map
Every service page at a glance.
Each link below opens a dedicated page on that specific piece of one of our four service pillars. Jump sideways — different service, same way of working.