Seeing Your Website Before It's Built

Most website projects go off the rails not because the developer can't code, but because the client and the designer never quite agreed on what they were building. Six weeks in, you see a staging site and your stomach drops: "that's not what I had in mind."

The fix is to show you exactly what your website will look like before anything is coded.

What a design mockup actually is

A mockup is a pixel-perfect picture of your website. Every page, every button, every spacing decision, laid out so you can scroll through it and click on it as if it were the real thing. Nothing is built yet: we're working in pictures, not code.

That matters because changing a picture is fast and cheap. Changing a half-built website is slow and expensive.

The tool I use: Figma

I use Figma, a cloud-based design tool that's become the industry standard. From your end it's just a webpage: I send you a link, you open it in your browser, nothing to install. From there you can:

• See every page of your site as it will look when launched
• Click through it like a real website to test the navigation flow
• View the mobile and desktop layouts side by side
• Leave comments directly on any part of the design — pointing at the exact button or paragraph you want to change

That last one matters most. Instead of an email saying "the green is wrong, but the green in the box on the homepage, not the green in the menu," you click the green and type "this should be darker." I see exactly what you mean.

Why this saves you money

The further along a project gets, the more expensive changes become. Catching a layout problem in Figma takes me ten minutes. Catching the same problem after the site is built and integrated with your CMS could take half a day. Multiply that across a dozen "small" tweaks and the cost difference adds up fast.

Reviewing a design in Figma is also more useful than reviewing a half-broken staging site. You're looking at the finished design. You can show it to your business partner, your spouse, your team. The feedback you get back is sharper because everyone is reacting to something that already looks like a real website.

What this looks like in practice

For most projects I run, the rough flow is:

1. We talk about your business, your customers, and what the site needs to do.
2. I design the homepage in Figma and share the link with you.
3. You leave comments. I update the design.
4. Once the homepage is signed off, I design the inner pages.
5. Only when the full design is locked in do I start building the actual website.

By the time code gets written, you already know what you're getting. No surprises at launch.

The bottom line

If a web designer wants to start coding before showing you a design, ask why. Building before designing is how budgets blow out and projects miss the mark.

Get in touch if you'd like to talk through a design-first approach for your site.