Web design: Beautiful by design.

What makes web design work

Starting from the content

We begin with what a page actually has to say and do, and shape the layout around it. Before a pixel is placed we work out the hierarchy: what a visitor needs to see first, what comes next, and what can wait. A page with two things competing to be the most important thing has already failed, whatever colours sit on top of it.

Less is more, and the discipline of taking things away

Dieter Rams, the industrial designer whose ten principles for good design still shape most serious design conversations, put the case as plainly as it can be put: good design is as little design as possible. On a website that means every border, badge, gradient and extra button has to earn its place, competing as it is for the same attention as the headline, the product, the button that gets someone in touch. Our method is closer to editing than decorating: draft a page, then look for what can come out without it losing meaning. If removing an element makes it harder to use, it stays. If the page reads the same without it, it goes. Reduction isn't a style choice on a business site; it's what stops a visitor's attention leaking away from the one thing you actually want them to do.

White space is doing more work than you think

White space, or negative space, is the space around and between elements that isn't carrying its own message, and it's one of the few tools in design that costs nothing and rarely looks wrong when there's more of it than seems necessary. It works at two scales: macro white space is the breathing room around whole sections, the gap above a hero, the margin either side of a block of text; micro white space is the tighter spacing between a label and its field, a heading and the paragraph beneath it. Both tell the eye what belongs together without a line or a box needed to say so. Generous space also reads, fairly reliably, as confidence: a tight, crowded page looks worried something won't fit, and a page with room to breathe looks like it knows what it's doing.

How the eye decides what belongs together

Long before anyone reads a word, they group what they're looking at. That's simply how human vision works, and the Gestalt psychologists who described it a century ago gave the mechanisms names designers still use. Things placed close together read as related, a principle called proximity. Things sharing a colour, shape or size read as a set even when spread across the page: similarity. A shared background or border reads as one unit: common region. A line that keeps going, even briefly interrupted, reads as continuous: continuity. A shape with a gap in it still reads as whole: closure. And whatever holds the strongest contrast against its background reads as the thing in front, with everything else falling back behind it: figure and ground. We design with these: a related set of facts sits inside consistent spacing, a card is a card because it shares a background, and the one button we want clicked carries enough contrast that it reads unmistakably as the button.

Hierarchy and contrast: one dominant thing per screen

A screen needs one thing that's obviously first set apart by size, weight, colour or position, ideally by more than one of those at once. Contrast is what makes that difference legible; it isn't decoration, it's the mechanism that tells a reader which element to look at before any other. A useful test, and one we run on our own pages, is to squint at the screen, or blur it, and see what still reads. If two elements are still fighting for attention, or nothing stands out at all, the hierarchy isn't finished, whatever the pieces look like close up. Most pages that feel unfinished aren't badly drawn; they simply never decided what mattered most, so nothing does.

Where the eye goes first, and how we point it there

Eye-tracking studies of real web pages found that, left to their own devices, people scan in a rough F shape: along the top, partway along a line below it, then down the left edge, picking up less as they go further down. That's a description of what happens by default, not a rule to design around. Nielsen Norman Group's research found the F-pattern shows up specifically on pages without subheadings, bullets or any other route through the content; give a page a clearer path and people tend to follow it instead. Sparser pages built around one idea and one action, such as a landing page, tend to pull the eye more in a Z: across the top, diagonally down, across the bottom to the call to action. Either way, a page without a designed route gets scanned in whatever pattern is left over, and the F-pattern is usually what's left.

Directional cues do a surprising amount of this work, and one of the simplest is a face. People follow where a face is looking almost reflexively, so a character glancing off the edge of the screen takes a reader's attention with it. It's why the hamsters on this site face inward. The homepage hero was mirrored so that it looks at the headline and the button beneath it instead of off the edge of the screen, and wherever a hamster sits to the side of the text, its artwork is turned so that it looks at the words beside it. It's a small piece of art direction, and it earns its place because it works.

Balance, alignment and a working grid

Balance comes from visual weight: a large pale shape and a small dark one can sit in balance either side of a page, and that kind of asymmetrical balance usually reads as more confident than a page mirrored down the middle, which can look static. Alignment does more of the daily work: elements gridded onto a shared edge read as considered even when nobody notices the grid itself, while elements that don't line up register as a fault before a viewer can say why. Repetition turns a page into a system, the same spacing, corner radius and underline weight repeated until a whole site feels like one decision. The designer Robin Williams named this set — contrast, repetition, alignment, proximity — as the four things most people get wrong without knowing it.

Colour as a system

A palette that works starts with restraint: one dominant neutral doing most of the work, one accent used sparingly for what needs to be found, such as a link or a button, and everything else built as tints and shades of those two decisions. A rough 60-30-10 split, most of a page neutral, a smaller share a secondary tone, a slim remainder pure accent, is a useful starting ratio, to be broken when the content asks for it. Building the palette in a perceptually even colour space such as OKLCH, instead of hex codes that look right alone and turn out uneven side by side, makes it possible to build a genuine tonal ramp: the same hue held across ten or twelve lightness steps, so the right shade is always to hand instead of guessed fresh each time. None of that matters if the result can't be read: the W3C sets a minimum contrast ratio of 4.5:1 for ordinary text, and colour should never be the only signal carrying meaning, an error or a sold-out badge needs a shape or a word doing the work too. This site's own palette follows the same discipline, a warm near-black and a warm off-white doing almost everything, with one amber-to-coral-to-pink gradient kept back as the single accent.

Texture and depth, used sparingly

A flat interface can look sterile once you notice it, which is one reason Beaird's The Principles of Beautiful Web Design gives texture its own chapter alongside layout, colour and type: not skeuomorphism, but a light hand with shadow, gradient and grain giving an interface a sense of material without pretending to be a physical object. We treat shadow as a small, consistent vocabulary: one soft shadow for a card resting on the page, a slightly deeper one for something lifted above it, such as a dialog, and nothing heavier than that. A little, applied consistently, communicates more than a lot applied once.

Typography and imagery, in brief

Typography carries most of a page's character before a single image has loaded, in the type scale, the measure of a line, the weight given to a heading over its body copy, and it deserves a page of its own. Imagery follows the same logic: one consistent illustration or photography style holds a site together far better than good pictures chosen one at a time. Every hamster on this site is drawn in the same style, with the same light and finish, so a new one looks like it has always been part of the family.

One system across every page

Every bespoke web design we produce runs on a small set of rules: one spacing scale, one type scale, one palette with defined roles, one shadow and motion vocabulary. Fewer permitted values make a site look considered rather than assembled, and they make it far cheaper to extend later, because the next page follows the existing rules instead of inventing new ones.

Designed for the states most sites forget

A button has a rest, hover, focus, active, disabled and loading state; a form has an empty state and an error state. We design every one of them, including the ones no screenshot ever shows, because production users hit empty search results and long product names long before anyone reads a case study.

• Hierarchy and page structure agreed before any visual styling starts
• One documented set of spacing, type and colour rules per project
• A designed look for every interactive state

The bar we hold it to

We hold our work to a published bar that anyone can check. Every page we ship is tested with Google's Lighthouse tool for accessibility, performance, best practice and SEO before it goes live, so nothing reaches a client that PageSpeed Insights would have caught first. We also design with the aesthetic-usability effect research from Nielsen Norman Group in mind: people forgive small usability rough edges on a site that looks well made, but the underlying structure still has to hold, which is why we check Core Web Vitals alongside the visual review rather than instead of it.