Resources / Web Design Guide

Web design that
earns its keep.

Seven principles behind every site we ship. No trends, no jargon — the boring fundamentals that quietly decide whether a website grows a business or just decorates it.

Start with the job, not the pixels

Every page exists to move a visitor one step forward — book a call, buy, subscribe, learn enough to trust you. Before any design decision, write down that one job in a sentence. Everything on the page either helps it or fights it.

Do

Define one primary action per pageWrite the headline before opening a design toolDesign the empty, loading, and error states too

Avoid

Three CTAs competing for the same clickDesigning the homepage first (it's the hardest page)Copying a competitor's layout without their strategy

Takeaway — A pretty page with no job converts worse than an ugly page with a clear one.

Hierarchy does the guiding

Visitors don't read — they scan. Size, weight, contrast, and position tell the eye where to go and in what order. If everything shouts, nothing gets heard: one hero message, one supporting layer, one action.

Do

Make the most important element unmistakably biggestGroup related things close together (proximity is meaning)Use whitespace as a design element, not leftover space

Avoid

Ten items in the main navigationSame font size for headings and bodyCentering long paragraphs of text

Takeaway — Squint at your page. Whatever you still see is your hierarchy — make sure it's the right thing.

Typography carries the brand

Type is 90% of web design because words are 90% of the web. Two typefaces maximum, a consistent scale, and generous line height beat any decorative flourish.

Do

Body text 16px minimum, 1.5–1.7 line heightKeep lines 45–75 characters widePick one display font with character, one workhorse for body

Avoid

Grey 12px text on white (design Twitter lied to you)More than two font families on one siteALL CAPS for anything longer than a label

Takeaway — If reading feels effortless, the typography is working. Nobody compliments it — that's the point.

Colour: one voice, one accent

Strong palettes are dominated by one colour with a sharp accent reserved for actions. When the accent colour only ever appears on buttons and links, visitors learn what's clickable without thinking.

Do

60/30/10 split: dominant, supporting, accent4.5:1 contrast ratio minimum for textReserve the accent colour for interactive elements

Avoid

Rainbow section backgroundsColour as the only signal (fails for colour-blind users)Pure black on pure white — soften one of them

Takeaway — Steal confidence from nature: mostly green forest, occasional bright flower. That contrast is why the flower works.

Speed is a design decision

Every second of load time costs roughly 7% of conversions. The heaviest thing on most sites is an image someone exported carelessly. Performance isn't the developer's cleanup job — it's a constraint the design starts with.

Do

Compress and lazy-load every imageSet image dimensions so the layout never jumpsTest on a mid-range phone over mobile data

Avoid

Autoplaying background video on mobileFive font weights when you use twoA carousel (nobody sees slide 2)

Takeaway — The fastest-feeling sites aren't the most minimal — they're the ones that never make you wait to act.

Design for thumbs first

Most of your traffic is a thumb on a phone in a queue. Mobile-first isn't shrinking the desktop design — it's forcing every element to justify itself on a small screen, then letting bigger screens breathe.

Do

Tap targets at least 44pxPrimary action reachable by thumb (bottom half)Test forms on a real phone, with real thumbs

Avoid

Hover-only interactions (thumbs can't hover)Sticky bars eating a third of the viewportTiny close buttons on popups (they feel deliberate)

Takeaway — If it works one-handed on a phone in a taxi, it works everywhere.

Trust converts, cleverness impresses

Visitors decide in seconds whether a site feels legitimate. Real client names, plain pricing signals, specific numbers, and fast replies beat clever copywriting every time. Say what you do, prove it, ask for the next step.

Do

Put social proof next to the CTA, not in a ghetto sectionCut form fields to the minimum you'd ask a strangerUse specific numbers ("3× growth", not "amazing results")

Avoid

Stock photos of handshakes"We are a synergistic solutions provider"Hiding contact details behind a form

Takeaway — Clarity is the highest-converting design pattern ever invented.

Want a site built on these principles?

This guide is the theory. Our development page is the practice — or skip straight to telling us about your project.

Start a project