How I plan a website before opening Figma
The design tool is not where a good website starts. Before I draw a single box, I work out who the site is for, what they search for and what they need to do. Here is that planning process, step by step.
It is tempting to start a website by opening a design tool and making something that looks good. I understand the appeal. Visuals feel like progress, and they are fun to share.
But when a site is started that way, the structure gets decided by whatever looked nice in the first mockup. Then content is squeezed in to fit the boxes, and SEO gets bolted on at the end. The result often looks great in a presentation and brings in very few enquiries.
So before I open Figma, I spend time on a plan. It is usually a shared document and a rough sitemap, nothing pretty. Here is what goes into it.
1. Who is this site actually for?
I start by writing down the two or three kinds of people who will land on the site, in plain language. Not "demographics", but situations. For an equipment supplier it might be an engineer comparing specifications, and a buyer who needs a quote by Friday. For a plumber it might be someone with an emergency, and a homeowner planning a new boiler.
Each of those people wants something different from the first screen. Writing them down stops the design from trying to please everyone at once.
2. What are they typing into Google?
Next comes keyword research, but I think of it as listening. What words do real customers use to describe their problem? They rarely use the industry's own jargon. "Boiler making a banging noise" gets searched far more than the technical name for the fault.
This research does two jobs. It tells me which pages the site needs, and it gives me the words to use in headings so that people instantly recognise they are in the right place.
3. Sitemap: one clear job per page
With the audience and searches in hand, I sketch the sitemap. My main rule is that every important service or product group gets its own page, with one clear job.
When I worked on the VEMAG Australia site, the key decision was organising the equipment the way buyers shop: by machinery, industry, application and service. That structure came from how customers search and decide, and it was settled long before any visual design existed.
A good sitemap also makes SEO far easier later. Google can only rank a page for a service if that page exists.
4. What should each page get someone to do?
For every page I write one line: the main action I want a visitor to take. Call. Request a quote. Book a visit. Download a spec sheet. Then a secondary action for people who are not ready yet.
This sounds obvious, but it changes the design. If the main action on a page is "call", the phone number becomes the most prominent element, not an afterthought in the footer.
5. Content before layout
This is the step people most want to skip, and the one that makes the biggest difference. I draft the real content, or at least the real headings and key points, before designing the page. Even rough copy tells me how much space each section needs, what order makes sense and where the proof, like reviews and photos of real work, should go.
Designing with placeholder text hides problems. Designing with real words exposes them early, when they are cheap to fix.
6. Wireframes, then design
Only now do I open Figma, and even then I start with simple grey boxes. Wireframes let me test the order of sections and the path to the main action without anyone getting distracted by colours and photos.
Once the wireframes work on mobile and desktop, the visual design goes on top. By this point it is much faster, because the hard questions are already answered.
Why this saves money
Planning adds a week or so at the start. It saves far more than that later: fewer rounds of redesign, no late surprises about missing pages, and a site that is ready for search from day one instead of needing an expensive rescue six months in.
If you are about to start a new site, try answering the questions above before you talk to any designer, including me. You will get better quotes, and a better website, because of it.
By Mkpoikana Otu. More articles
