What Years of Building Websites Taught Me About Design

Quick Summary
- Most design decisions come from real content, constraints and whoever maintains the site after launch, with taste deciding what's left.
- Design with the longest, shortest and missing content, keep controls consistent, draw every state, and treat performance as a design decision.
- Build what clients can maintain, design and build in the same head, and practice restraint, since simple means the decisions were made.
Taste gets too much credit, and most of my web design lessons come back to that.
After 12+ years of building for the web, across WordPress sites, WooCommerce and Shopify stores and the Figma work that comes before the code, I think most design decisions are made by things that aren’t taste at all: the real content, the constraints, and the person who keeps the site running after launch. Taste decides what’s left. These seven web design lessons follow from that.
1. Real content breaks pretty layouts
Every mockup is a best case. The headline runs exactly two lines, every card has a strong photo, every testimonial is three tidy sentences. Then real content arrives: a service name twice as long as the placeholder, a project with no usable image, a review that runs for a paragraph.
It happened on my own site. In the testimonial carousel, one long review made its card look odd beside the others. The fix wasn’t clever CSS. The carousel now shows hand-picked testimonials, which is a content decision, not a styling one.
Design with the longest, the shortest and the missing version of every field. If a layout only works with ideal content, it doesn’t work.
2. In web design, consistency beats novelty
A new kind of navigation, a clever button shape, a scroll interaction nobody has seen before: each one costs the visitor a moment of learning. People arrive with habits from every other site they use, and a site that fights those habits makes them work for nothing.
Novelty has a place. A hero, a loader, one memorable moment; my own site has a portrait loader and a custom cursor, and I like them. The controls around those moments should be predictable to the point of boring. A button should look and behave like the same button on every page, in every state.
On a store this matters even more. Shoppers already know how a product page, a cart and a checkout work, whether the store runs on WooCommerce or Shopify. Every surprise between Add to cart and payment is a small reason to stop, like an add to cart error that sends shoppers to the product page.
Consistency is also what makes a site feel designed rather than decorated.
3. Every state needs a design
A frame in Figma is one moment. A real interface is a set of states: empty, loading, error, success, disabled, half-filled and far too full.
The happy path gets designed because it’s what gets presented. The other states get improvised during development, by whoever is writing the code at the end of a long day. That’s usually where a site starts to feel cheap.
My rule is simple: if a component can fetch, filter, submit or fail, its other states belong in the design file next to it. It costs a few extra frames, and many of the small details that make a site feel premium live in exactly those frames.
The words are part of those states. “Something went wrong” is a design decision, and usually the wrong one. “That email is already registered, log in instead” is a better one, because it says what happened and what to do next.
4. Performance is a web design decision
By the time a developer starts optimizing, most of a page’s weight has already been chosen in the design: the autoplaying video, the fourth font weight, the full-bleed photo carousel, the effect that needs a large script.
So speed belongs in the design review, not only in a report after launch. Ask what each heavy element does for the visitor, and design the loading order: what appears first, what can wait, what the page looks like before the images arrive.
Images are usually where the weight hides, so they deserve design attention too: the right size for each slot, lazy-loaded below the fold, with width and height set so the layout doesn’t jump when they arrive.
Build choices follow from that. On my rebuild, each page loads only the scripts its sections use, so the home hero’s script doesn’t ship with pages that have no home hero. It’s a small decision, and it’s easy because the design was already broken into clear sections.
5. Build what the client can maintain
The real test of a design comes months after launch, when the client edits it alone. A layout that depends on a headline being exactly the right length won’t survive the first content update.
That’s why, for most custom sites, I prefer structured editing to freeform page building: fields for what changes, a fixed layout where the design depends on it. On my own site, content that repeats across pages, like services, process, pricing and FAQ, lives once in an options page, so one edit updates every page that shows it. It’s one of the things ACF does well on custom WordPress sites.
The editing screen is part of the design as well. Field labels written in the client’s language, a line of instructions where a choice isn’t obvious, sensible defaults: that’s the interface the client actually uses every week.
A design the client can’t maintain isn’t finished. It’s on a timer.
6. Design and build in the same head
Most of what goes wrong between a design and a live site happens at the handoff: spacing that was “about right”, a breakpoint nobody drew, a hover state nobody specified, a font nobody weighed before choosing it.
I design the interface and build it too, so what a client approves is exactly what goes live. That’s the core of how I work, and it’s more than positioning. When the person moving boxes in Figma also has to build them, problems surface early: which idea needs a script, which will fall apart on a phone, which a client won’t be able to edit in WordPress.
The handoff doesn’t disappear. It moves inside one person’s head, where it’s cheap.
7. Restraint is the web design lesson that takes longest to learn
The instinct is always to add: another section, another animation, another accent color, another plugin. Each addition looks harmless alone. Together they make a site louder, slower and harder to maintain.
Restraint means one strong idea per page, with everything else supporting it. It means cutting the section that’s only there because the template had one, and using the accent color on purpose. It applies to the build as well: on my rebuild, several plugins were replaced by small pieces of theme code or removed outright.
Restraint is hard to sell because the result looks simple. It should. Simple is what a site looks like when the decisions were actually made.
None of this makes taste irrelevant. Taste is what makes the final choices good ones. It just works best when it arrives last, after the content is real, the constraints are known and you know who will be editing the page next year. Beauty is the last layer, not the foundation, which is also why good UX isn’t about making a site look beautiful.

