A website should feel like your brand

A website is usually where a brand is tested hardest. It is interactive, so it has to make decisions in public. It is easy to leave, so it has to be legible immediately. And it runs on hardware the studio did not choose, in conditions nobody planned for.

Putting an identity onto it is not a matter of applying the mark and the brand colours. Those are the least load-bearing parts. The identity arrives through four things.

Navigation

The structure of a site is an argument about what matters. A studio that calls itself selective and then offers eleven top-level menu items has contradicted itself before a single sentence is read. A business whose value is genuine breadth, and which hides all of it behind one collapsed accordion, has done the same in the other direction.

Deciding what appears in the header, and in what order, is an identity decision rather than an administrative one. It deserves to be made by the same people, at the same time, using the same reasoning as the rest of the brand.

Typography

On a website, type is the interface. It is what a visitor spends nearly all their attention on, so the typographic decisions from the identity have to survive the translation: the same family, the same relationships between sizes, the same sense of how tightly things are set.

That translation is not automatic. A scale that looks composed on a poster can be unreadable in a paragraph on a phone. The honest version of “use the brand typeface” is: use it, then re-tune the scale for reading rather than for display.

Hierarchy

Every page makes a claim about what to read first. When that claim matches what the business actually wants to say, the page feels coherent. When it does not — when the most prominent element is decorative, or three things compete to be loudest — a visitor experiences it as noise, even if they could not name the cause.

Hierarchy is also where restraint becomes visible. A page with one clear first thing, one clear second thing, and room between them reads as confident. The same content with everything enlarged reads as anxious.

Interaction

What an interface does when it responds is part of its character. A control that changes state immediately and without ornament suggests precision. A page that reveals its content in staggered animations as you scroll suggests something else — usually that the content needed help.

A useful test is whether a piece of movement tells the visitor something true: that a control was pressed, that a panel opened, that a value changed. Movement that only announces the site was designed is decoration, and it ages badly.

Two hypothetical sites

Imagine two businesses with the same services and the same mark. The first sets its site in one family at three sizes, gives every page a single clear opening statement, and puts four links in the header. The second uses five type sizes per page, opens with a full-screen image, and reveals each section on scroll.

Both have applied their logo correctly. Only one of them has applied its identity.