Website design process: from brief to handing mockups off to development

The client says "make it look nice," and the designer opens Figma. Three weeks later the mockups are ready, and the client says "that's not it." Everyone starts over. That isn't the designer failing or the client being difficult. It's what happens when a website design process skips the first three of its seven stages. Here's what actually sits between the brief and a finished mockup when the work is done right.

Why "doing the design" is not a single task

In a client's head, website design often looks like "draw a nice-looking page." In practice, it's seven separate stages, each with its own deliverables, roles, and timelines. Skip any of the first four, and you either do the work twice or build the wrong thing.

In order.

Stage 1. Brief and research — Output: a spec and a goals map

Design doesn't start in Figma. It starts with understanding the problem. At this stage, the team figures out:

• The business goal of the site. What should the user do? Submit a request, buy, call, book, download something?
• The audience. Who comes to the site and what are they looking for? B2B or B2C? Mobile or desktop? Young people or 40+?
• Competitors. What's already out there? Where do we match them, and where do we do better?
• Constraints. Brand guidelines, brand colors, technical requirements for the handoff.

Output: a brief document, a goals map, and a list of competitors to analyze. Without these, the designer draws "their own interpretation" instead of a solution to the problem.

Stage 2. Competitor and behavior analysis — Output: insights and recommendations

You analyze competitors not to copy them, but to avoid repeating their mistakes and to find UX gaps nobody has filled yet.

In parallel, if the site already exists, you look at how current users behave: heatmaps, session recordings, Google Analytics. Where do people stop? Where do they leave? Which button does nobody click?

Output: a report with specific findings. "Competitors show prices above the fold, so either we do too, or we have a solid reason not to." "80% of sessions are mobile, and the current site isn't responsive." That's data, not a guess.

Stage 3. Information architecture (IA) — Output: a page map and navigation

IA is the structure of the site: how many pages, how they connect, what the navigation looks like, what lives where. It sounds boring, but a mistake here is expensive. If the structure is wrong, you end up reworking finished mockups.

Output: a sitemap, a navigation diagram, and a content hierarchy. This is what the client signs off on before the prototype starts.

Stage 4. Prototype (wireframe) — Output: the skeleton of every page

A prototype is a black-and-white frame: where the headline goes, where the benefits block sits, where the form is, where the button is. No colors, no images, no real copy. Just logic and layout.

Why do it before drawing the UI? To test the logic without spending time on looks. Moving blocks around in a wireframe takes 5 minutes. Moving them in a finished UI mockup takes half a day.

Output: a wireframe of every key page in Figma. This is what gets approved by the client before moving on to UI.

Stage 5. UI design — Output: finished page mockups

Only now does the color palette come out. UI design is colors, typography, illustrations, icons, photos, animations. It's what most clients picture when they hear the word "design."

The rule: once the prototype is approved, UI revisions deal with the visual side, not with moving blocks around. That's how timelines stay predictable.

Output: mockups of all key pages in Figma for desktop (1440px), tablet (768px), and mobile (375px). At least three breakpoints.

Stage 6. Design system — Output: a component library and guidelines

A design system is a set of reusable components (buttons, cards, forms, icons, a type scale, color tokens) documented in one place.

Why do you need one? Without it, a developer spends time guessing what the spacing between a field and its label should be, and makes up their own version. With a design system, they take a ready component and build it exactly as drawn.

Output: a Figma component library plus a "how to use it" document.

Stage 7. Handoff to development — Output: production-ready assets and a spec

The final stage isn't "send a Figma link." It's a structured handoff that includes:

• prepared illustrations and icons (SVG, PNG in the right sizes);
• an animation protocol (if there are animations, describe them in words or with Principle/After Effects);
• Figma Dev Mode with tokens set up for the developer;
• a spec for spacing, sizes, and how components behave in different states.

Output: a package a developer can take and build from without constantly pinging the designer.

How long each stage takes

Timelines depend on project complexity, the number of pages, and how fast the client approves things. The longest "unplanned" stage is approval: if feedback comes back in a week instead of a day, everything shifts.

Long read: website design in 2026

The website design process in 2026 looks quite different from five years ago. First, mobile traffic dominates: in most niches, 60-80% of sessions come from phones. So design has to start mobile-first, not get ported to mobile after the fact. Second, AI tools have changed the prep work: competitor analysis, draft copy for wireframes, work on illustrations all move noticeably faster now.

But the core hasn't changed, and honestly, I doubt it will: the quality of UI design still comes down to the quality of work in the first four stages. Skip research, and you'll draw something beautiful that doesn't sell. Skip IA, and you'll be reworking the structure after the developer has already written half the code.

We build design around exactly these seven stages, from brief to asset handoff. You can read more about how our web design process works and which tools we use on the service page. If you're planning a new site or a redesign, let's talk. The first step is a 30-minute brief call.

What's next

• UI/UX design: what it is and why UI and UX are not the same thing
• What a UX/UI designer does and what you pay them for
• UI/UX design trends 2026: what works and what's already worn out
• Brand identity: what it is and why a business needs one
• Website and UI/UX design (service)

FAQ