A website project can go wrong in two opposite ways. It can start with visuals and end up as a beautiful page nobody can use. Or it can start with a feature list and end up as a working site nobody wants to look at. The order you do things in is what prevents both.
Start with what people came to do
Before sketching anything, write down who visits the site and what each of them is trying to do. A potential client wants to know what you do, whether you've done it before and how to get in touch. A job seeker wants something else entirely. Each of those goals should have a clear path through the site.
This is also where content starts. Real headings and real text change layouts. Designing around placeholder text hides problems until they're expensive to fix.
Why wireframe before designing visuals?
Wireframes are rough on purpose. Grey boxes and plain text keep everyone focused on structure: what's on each page, in what order, and how people move between pages. It's much easier to agree that the contact button belongs higher up when nobody is attached to a colour scheme yet.
A good wireframe answers three questions:
- What's the one thing this page needs to get across?
- What should the visitor do next?
- What happens on a phone?
A design system, not a pile of pages
Once the structure holds, visual design gives it character. We design a small system first: type sizes, colours, spacing and the handful of components the site repeats, like buttons, cards and section headings. Pages are then assembled from those parts.
That keeps the site consistent and makes every new page faster to build. It also makes changes cheap. Adjust the button once, and every button updates. We wrote more about this in spacing, components and the quiet work of a design system.
Build it so it stays fast
Performance is part of the design, not a clean-up job at the end. A few habits make most of the difference:
- render pages on the server, so content appears without waiting for JavaScript
- size and compress images properly, and load the ones further down the page later
- keep animation light, and respect people who ask their device for reduced motion
- set a performance budget and check the site against it before launch
Our own site is built this way with Next.js. There's a write-up in how we built the Nexentra website.
Make it findable
Search engines and AI assistants need the same clarity people do: one main heading per page, descriptive titles and link text, a sitemap, and structured data describing what each page is. Most of it is invisible, but it decides whether anyone finds the site in the first place.
Launch is a checkpoint, not the finish line
Test every form end to end. Check every page on a real phone. Confirm redirects work and that the contact form actually reaches a person. Then keep improving the site based on how people really use it.
If you're planning a new site, our web development work follows this sequence, and we're happy to talk it through.
- #Web development
- #UX
- #Wireframes
- #Design systems
- #Performance
