From Reference Site to Bespoke Brand: A Rapid Mockup Workflow

"Can you make something like this site, but for us?" is one of the most common briefs in web design. The client has found a competitor or aspirational example, listed their services, and wants to see something before committing. The challenge: turning that into a specific, actionable design without burning days on something the client will reject in the first review.

This is the five-stage workflow TDA uses to go from a reference link and a service list to a client-ready homepage mockup in a single working session.

Stage 1: Audit the Reference Site — 20 Minutes

Don't copy the reference site. Understand why it works. Look for structure (how many sections, in what order, what job does each one do?), visual language (is the palette corporate or expressive?), and gaps — anything the reference site does poorly is an opportunity to do it better. This audit takes twenty minutes and prevents the most common mistake: designing something that looks like the reference site rather than something that works better than it.

Stage 2: Build the Section Map Before Any Pixels

Write the section structure first as a plain list: Hero (single promise, one CTA), Services (3–5, with short descriptions), Why us (3 specific differentiators), Proof (testimonials or client logos), Process (3 steps), FAQ (questions that actually come up in sales), Contact (one form field if possible).

Show the client this list before designing anything. It is faster to change a list than to change a design.

It is faster to change a list than to change a design. Get agreement on structure before touching a pixel.

Stage 3: Palette and Typography From Their Assets

Extract the palette from the client's existing logo or brand assets. If not available, propose from the reference site's mood — not its specific colours. One primary (brand), one accent (CTA), one neutral is usually enough. For typography: one display font for headings, one readable font for body. The combination signals positioning.

Stage 4: Build Section by Section, Not All at Once

Design the hero first and share it before touching the rest. If the hero is directionally wrong — wrong tone, wrong imagery, wrong layout — you have lost an hour, not a day. Get a clear "yes, this is the right feel" before continuing. Work to a consistent grid and spacing system from the start. Inconsistent spacing is the single most common reason a mockup looks "off" without the client being able to name why.

Stage 5: The Revision Protocol

Share the mockup via a link, not an attachment. Use section-by-section framing: "Section 2 — Services: we've used the descriptions you sent; let us know if any need rewording." Set a revision limit upfront: two rounds is standard. This protects the project timeline and trains the client to give considered feedback.

What Makes It Bespoke Rather Than a Clone

The reference site is a starting point for structure and quality bar. Everything else — colour, type, copy tone, section order, photography style — should be derived from the client's own context: their sector, their clients, their positioning, their personality.

A mockup that could be any company in the sector is not a brand. A mockup that could only be this company is.