Bring your brand into the way your website works

Translate brand words into observable choices

Start with three qualities the business wants to express, then explain what each means on a page. “Approachable” might mean plain language, clear next steps and photographs with a human scale. “Precise” might mean careful typography, consistent labels and detailed explanations. Avoid approving adjectives without agreeing what a visitor will actually see.

Choose one audience and one important task for the first design review. A professional services enquiry page gives you more useful evidence than a moodboard alone because the design must communicate a real offer.

Create roles for colour and typography

Assign colours to jobs: primary text, page backgrounds, links, main actions and status messages. A brand colour that works in a large illustration may need a darker companion for small text. Check combinations in the actual interface, including buttons, errors and keyboard focus.

W3C’s contrast guidance sets different minimum contrast requirements for ordinary and large text, with specific exceptions. Use that guidance when reviewing the palette. Then test the type system with long service names, real paragraphs, numbers and narrow screens. Confirm font licensing and the fallback appearance before committing to a visual direction.

Give photographs a clear editorial purpose

For each image, decide what it helps a visitor understand. A product detail, a documented project and a decorative atmosphere photograph do different jobs. Build a short image brief covering subjects, crops, lighting and where text may overlap. This helps new images feel connected without making every page look identical.

Label stock imagery and illustrative concepts where their context could otherwise suggest a real team, office or client project. W3C’s images tutorial explains that text alternatives depend on an image’s purpose. Write the description for the information or function conveyed, rather than adding a list of search keywords.

Carry the voice through the complete journey

Write sample copy for a homepage introduction, a service explanation, a form error and a confirmation message. These moments reveal whether the voice works beyond headlines. A welcoming brand still needs to state required fields clearly; a playful brand still needs an unambiguous delivery status.

Use the same service names across navigation, forms and follow-up messages. Where a Canadian project needs more than one language, review the meaning and layout in each language. Plan for different text lengths instead of treating translation as the final copy-and-paste step.

Hand over a system people can maintain

Document a small set of reusable examples: a service page, article, campaign graphic and enquiry confirmation. Include approved colours, type roles, image guidance, voice examples and asset locations. Note which rules are essential and which can vary, so the team can make new material without guessing.

Review the finished journey as a customer would: arrive from search, read a service, compare the evidence and ask a question. Look for abrupt changes in tone or visual treatment. The goal is a recognisable experience that remains clear when new services, people and content are added.

Your planning checklist

• Translate brand qualities into page-level choices.
• Check colour and type in real interface states.
• Define image purpose, provenance and text alternatives.
• Provide examples the team can reuse after launch.

Common questions