Topic hub

Website Design Fundamentals

Good website design makes information and actions easier to understand. It is not a layer of decoration applied after the content: hierarchy, spacing, typography, colour, imagery, interaction and performance all…

3 published guides0 subtopicsUpdated 21 July 2026

Start here

The main guide for this topic

Practical guide

Website Header and Footer Design

The header and footer are repeated navigation systems. Their job is to provide orientation, priority routes and essential organisational information without occupying so much space that the page conte…

Open the complete guide →

Published guides

Articles in this section

Practical guide2 November 2026

Website Header and Footer Design

The header and footer are repeated navigation systems. Their job is to provide orientation, priority routes and essential organisa…

Read guide →

Practical guide16 October 2026

Website Colour and Typography

Colour and typography should make content easier to recognise, read and navigate. Brand personality is important, but it cannot de…

Read guide →

Practical guide14 October 2026

Video on Business Websites

Video can demonstrate a process, introduce a person or explain a product, but it adds production, accessibility, hosting, privacy …

Read guide →

About this section

Information checked: 21 July 2026.

In brief: Design the reading and decision path first; visual personality should support it rather than compete with it.

Five foundations

Design foundations
Foundation	Question to ask	Evidence
Hierarchy	Can a visitor see what matters first?	Heading, summary and action remain clear without colour alone
Readability	Can people comfortably read and scan?	Adequate size, line length, spacing and contrast
Consistency	Do repeated controls behave predictably?	Shared components and labels across templates
Responsiveness	Does the task work from 320 px upward?	No hidden actions or page-level horizontal scrolling
Resilience	Does the design survive real content and failure states?	Long titles, missing images, errors and zoom are tested

Design with real content

Prototype with actual service names, price explanations, legal text, long customer questions and realistic photographs. Placeholder text hides layout failures and encourages design decisions that later force content into unnatural shapes.

Use interaction sparingly

Links should look like links, not ordinary text.
Buttons should describe the result of the action.
Hover must never be the only way to reveal essential information.
Animation should respect reduced-motion preferences and not delay tasks.
A component should have documented empty, loading, error and success states.

Final verification

Test the main templates with keyboard navigation, 200% zoom, a narrow mobile viewport and slow loading. The task should remain understandable before every image or script has loaded.

Where businesses get caught out

Designs often look strong in a static mock-up but fail with real content: a long title overlaps a button, an error message has no space, zoom hides navigation or a missing photograph collapses the card. These are predictable states and should be designed rather than treated as later development defects.

Operational records

Component inventory with states
Approved content examples and limits
Keyboard, zoom and mobile test log
Accessibility exceptions and remediation owner
Design decisions linked to customer tasks

First implementation step

Take the most important page template and test it with the longest realistic title, no image, an error message, 200% zoom and a 320 px viewport. Fix the component rules before applying them site-wide.

Sources and date checked

This practical guidance was checked against the following primary sources. Date checked: 21 July 2026.