Website branding is often treated as a logo and a colour palette. Plenty of sites get those right and still feel off-brand. What gives them away is everything else: headlines any competitor could have written, stock photos of handshakes, a contact form that sounds like a tax office, a “premium” promise on a page that takes an age to load.
Done properly, website branding makes the whole site look, sound and behave like your business, on every page and in every language you publish in. That’s why it can’t be left to the visual design stage: it runs through strategy, content, UX, development and performance, the same ingredients that decide what makes a good website.
The short answer
Website branding is how a website expresses a brand through three layers working together:
- Visual identity: how it looks. Logo, colour, typography, imagery, icons, layout and motion.
- Verbal identity: how it sounds. Positioning, messaging, tone of voice and the small words on buttons, forms and error messages.
- Experience: how it behaves. Speed, clarity, navigation and how easy it is to get in touch.
A site is on-brand when all three tell the same story. A simple test: cover the logo, and a regular customer should still recognise the site as yours.
The three layers of website branding
An identity designed for business cards and signage covers only part of the first layer. Visitors don’t just look at a website; they read it, use it and judge you by how it treats them.
Visual identity: how it looks
On a website, the logo is the smallest part of the visual identity. The rest is a system: which colour marks an action and which a background, how headings step down in size, how much space surrounds each block, what photos look like and how things move.
Screens test identities in ways print never does. The same logo must work as a favicon about 16 pixels square in a browser tab, in a phone header and over a hero photo. Brand typefaces need web licences and support for every script you publish in (see our guide to web typography).
Colour must pass accessibility rules too. At level AA, WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The visual cues that identify controls, such as form field borders and focus indicators, need at least 3:1 against the colours next to them. Pale yellows, mid-greys and light blues often fail as text on white. The fix is usually a darker tint for text, not a new brand; colour contrast and readable text shows how.
Verbal identity: how it sounds
Verbal identity is what you say and how you say it: your positioning line, the message each page must land, your tone and your terminology. Do you say “clients” or “customers”, “quote” or “proposal”? Decide once and use it everywhere.
It includes microcopy too: button labels, form hints, error messages, the confirmation page and the automatic email after an enquiry. This is where many sites suddenly sound like a different company, because the words were left to whoever built the form.
Your voice stays constant while your tone adapts: the homepage can be bold, an error message calm and helpful. The Nielsen Norman Group describes tone along four dimensions: funny to serious, formal to casual, respectful to irreverent and enthusiastic to matter-of-fact. Placing your brand on each scale helps pin it down.
Experience: how it behaves
Your online brand experience is the sum of how the site treats people. A brand that promises precision undermines itself with a pricing page that breaks on a phone. A brand that promises personal service does the same with a form that fails without a word. Speed, clear structure, honest navigation labels and an easy way to get in touch are brand decisions as much as technical ones.
Brand projects often leave this layer out, yet it separates a site that looks premium from one that feels it. Premium website design explains that difference, and website credibility covers how visitors decide whether to trust you.
How to brand a website, step by step
Off-brand sites are often designed from the outside in: colours first, words last. Work the other way.
1. Start with positioning, not colours
Before anyone opens a design tool, write down who the site is for, what you do differently and why a visitor should believe it. Then choose three brand attributes and define what each means on the website.
If one attribute is “precise”, the site shows specifications in tables, states response times exactly and avoids vague claims like “quality service”. If another is “approachable”, the menu uses customers’ words, not internal jargon. This is website brand strategy in miniature: every later decision can be judged against it.
2. Turn the identity into a screen-ready system
Translate your brand guidelines into what a website uses:
- Colour roles: text, backgrounds, links, buttons, focus outlines, success and error states.
- A type scale: sizes and weights for headings, body text and buttons.
- Spacing rules: consistent gaps between elements and sections.
- Core components: buttons, cards, forms, navigation and calls to action.
Test each at small sizes, on light and dark backgrounds, in every language. Brand guidelines for websites lists what your web team needs from you.
3. Write down the voice, with examples
Adjectives alone don’t help writers. A voice guide that works has four parts:
- We are, we are not. “Confident, not arrogant. Plain, not casual.”
- Sounds like, doesn’t sound like. A before-and-after rewrite of one of your own sentences.
- A word list. Preferred terms, banned terms and the exact names of your services.
- Microcopy patterns. How buttons, errors and confirmations are phrased.
On a multilingual site, add a glossary per language and have native speakers review key pages for voice, not just accuracy. Website storytelling shows how to carry one voice from headlines to case studies.
4. Choose imagery with a point of view
Real photos of your people, work and places build recognition that stock can’t. Write a short art direction brief (light, framing, colour treatment, which subjects appear and which never do) and use it for every shoot. Hold any stock to the same brief, and keep icons and illustrations to one style.
5. Let structure and interaction express the brand
Personality lives in how the site works: the order of the menu, which proof sits beside each call to action, how a form confirms it was sent, what the 404 page says. Motion should match the brand’s temperament; a calm brand suits short, gentle transitions. Micro-interactions and motion design covers movement that helps rather than distracts.
Keep personality out of places where it costs usability. Clever menu labels, low-contrast brand colours and custom cursors feel distinctive for a moment and get in the way for the rest of the visit.
6. Review before launch, then protect it
Before launch, go through every page template in every language on a real phone, reading as a customer. Check what sits outside the pages too: favicon, social share images, notification emails and PDFs.
After launch, the risk is drift, as new editors, campaign pages and languages pull the site off-brand. Reusable components with locked styles, a content style guide and a regular brand review keep it consistent; website design systems explains how to set that up.
Where website branding usually goes wrong
A logo dropped onto a template
A template brings its own structure, image style and personality, and a logo can’t override them. The result looks like every other site built on it, with a different badge. Templates can work if you adapt type, colour roles, imagery and layout to your system; custom website vs template explains when each makes sense.
Guidelines written only for print
Print colour values with no screen equivalents, no small or single-colour logo, a typeface without a web licence, nothing on buttons, links or forms. Designers fill the gaps by guessing, and every guess is a small inconsistency.
A voice that changes from page to page, or language to language
The homepage was written by a copywriter, service pages by sales, the blog by whoever had time, translations by a tool. Together they sound like four companies. A voice guide only fixes this if every writer and translator actually uses it.
Brand in the hero, defaults everywhere else
A common gap in brand website design: effort goes into the homepage banner while service pages, forms and confirmation messages fall back to defaults. Visitors from search often land on those pages first.
Is your website on-brand? A checklist
Every guide in the brand and experience series
| If you need to… | Read |
|---|---|
| Hand the right assets to your web team | Brand guidelines for websites |
| Earn visitors’ trust before they get in touch | Website credibility |
| Tell your story on the about page and in case studies | Website storytelling |
| Decide whether premium design is worth paying for | Premium website design |
| Change your brand without losing customers or rankings | Rebranding your website |
| Get content written and approved on time | Preparing content for a new website |
| Plan languages, translation and the language switcher | Planning a multilingual website |
Frequently asked questions
What is the difference between branding and web design?
Branding defines who you are, how you look and how you sound wherever people meet you. Web design applies that identity to a website and adds layout, navigation, interaction and a structure that guides people to act. Good web design makes a brand usable, not just visible.
Do I need brand guidelines before building a website?
Not a full brand book, but some decisions must come first: positioning, logo files, screen colour values, typefaces and a few sentences on tone of voice. Settling them mid-build often means redesigning pages that were already approved.
How do I keep a multilingual website on-brand?
Treat each language as the same brand, not the same words: adapt headlines and calls to action so they land with the same tone, and check that layouts still work when translated text runs longer or shorter.
Where to start
Start with the checklist. The unticked boxes show which layer needs work: how the site looks, sounds or behaves. Many fixes, such as rewriting microcopy, replacing stock photos or correcting contrast, can be made on the site you already have. If most are unticked, the problem lies in how the site was planned and built.
Planning a new site? Our website design and development work applies your identity to every page, approved by you before anything is built, on WordPress your team can edit without breaking the look. If your current site no longer reflects the business, a website redesign rebuilds it around your brand while keeping what works. Changing the brand itself? Read rebranding your website first, or talk to us about what your website needs.