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."

This is solvable. The fix is showing you exactly what your website is going to look and feel 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 see it, scroll through it, and click on it as if it were the real thing. The catch is that nothing is built yet. We're working in pictures, not code.

That distinction 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 works exactly like opening a webpage — I send you a link, you click it in your browser, no software 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 is the killer feature. 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 the design in Figma is also genuinely useful, in a way that reviewing a half-broken staging site isn't. You're looking at the finished product. 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. A proper design phase using a modern tool like Figma costs almost nothing extra and makes the difference between a site you tolerate and one you're proud of.

Get in touch if you'd like an honest conversation about what a proper design-first process could do for your business.