Appearance
A2 · Design Principles
Spec reference: Learning Aim A - Principles of Website Development Key idea: Good websites follow consistent design principles that make them easy and pleasant to use.
Principles of Web Design
The 12 principles
1. Usability / Simplicity
How simple the website is to understand and how easily users can find the information they want.
- Good: Google's homepage - one search box, nothing else to distract
- Bad: A page with 15 different menu options, no clear hierarchy, competing buttons everywhere
- Ask yourself: Can a first-time visitor complete their goal within a few clicks?
2. White Space
The empty space between elements on a page that gives the eyes a chance to rest.
- White space does NOT mean the space must be white - it refers to any unfilled area
- Too little white space: content feels crowded and overwhelming
- Too much white space: users must scroll excessively to find content
- Good example: Apple's product pages - minimal text surrounded by generous spacing
3. Site Layout
How the information is structured and flows on the page. Includes the arrangement of columns, rows, headers and content blocks.
Common layouts:
| Layout | Description |
|---|---|
| Single column | One central column - common on blogs and mobile |
| Two column | Content on one side, sidebar on the other |
| Grid | Multiple columns and rows - common on news and e-commerce sites |
| F-pattern | Users scan in an F shape - important content goes top-left |
4. Accessibility
Designing websites so that people with disabilities can use them. This is not optional - it is a legal requirement under the Equality Act 2010.
| Accessibility feature | Who it helps |
|---|---|
| Alt text on images | Visually impaired users using screen readers |
| High colour contrast | Users with colour blindness or low vision |
| Larger font sizes / scalable text | Users with visual impairments |
| Keyboard navigation | Users who cannot use a mouse |
| Captions on videos | Deaf or hard of hearing users |
| Simple language | Users with cognitive disabilities |
Legal requirement
The Equality Act 2010 and Public Sector Bodies Accessibility Regulations 2018 require websites to meet accessibility standards (WCAG 2.1 AA). Inaccessible websites can result in legal action.
5. Spacing
How content is spread across pages, both vertically and horizontally. Related to but distinct from white space.
- Too little spacing: content feels bunched together - hard to read
- Too much spacing: increases unnecessary scrolling - wastes user time
- Consistent padding and margins create a professional, ordered appearance
6. Navigation
How users move between pages and sections of a website. Can use menus, buttons, links and breadcrumbs.
Principles of good navigation:
- Consistent - same position on every page (usually top or left)
- Clear labels - users know what they'll find before they click
- Limited options - too many menu items overwhelms users (7 ± 2 rule)
- Breadcrumbs - show users where they are in the site hierarchy
- Search function - essential for large sites
INFO
Frustrated users who cannot find what they are looking for will simply leave the site. Poor navigation = lost visitors.
7. Typography
The style, appearance and arrangement of text on a page. Font choices communicate meaning and affect readability.
| Element | Guidance |
|---|---|
| Font family | Use 2 fonts maximum - one for headings, one for body |
| Font size | Body text: minimum 16px for readability |
| Line height | 1.5× font size for comfortable reading |
| Contrast | Dark text on light background (or vice versa) - minimum 4.5:1 ratio |
| Font personality | Serif (formal/traditional), Sans-serif (modern/clean), Script (creative/personal) |
- Good: A law firm using a clean serif font - conveys authority and professionalism
- Bad: A business website using Comic Sans - undermines credibility
8. Alignment
How elements are positioned relative to each other and the page. Options: left, centre, right, justified.
- Left alignment is the default for body text - most readable in Western cultures
- Centre alignment works for headings and short pieces of text
- Consistent alignment creates visual order - mixing alignments randomly looks messy
- Grid systems (e.g. CSS Flexbox, Grid) make alignment consistent and professional
9. Clarity
How clear and understandable the information is. Relates to layout, white space and alignment - but also to the words used.
- Use plain language - avoid jargon unless your audience expects it
- Break long text into shorter paragraphs with subheadings
- Use bullet points for lists
- Ensure the most important information is immediately visible
10. Consistency
Using the same design choices across the whole website - colours, fonts, button styles, spacing.
Why it matters:
- Users build up familiarity with the site - they learn where things are
- Inconsistencies break that trust and create jarring experiences
- A consistent style also reinforces brand identity
Example: If your primary button is blue on the homepage, it should be blue on every page. Switching to green on the checkout page confuses users.
11. Accuracy
The information on the website is correct, up-to-date and from trustworthy sources.
- Inaccurate content erodes user trust
- Outdated prices, phone numbers or hours frustrate users and lose business
- For news and informational sites, accuracy is fundamental to credibility
12. Content
The actual text, images, and videos that users came to the site for. Content must be:
- Relevant - gives users what they need
- Current - regularly updated, no stale articles or old promotions
- Appropriate format - text for reference, video for demonstrations, images for inspiration
TIP
Old content drives users away. If a visitor sees a "Latest News" article from 3 years ago, they will assume the entire site - and business - is neglected.
Applying principles to real websites
In Assignment 1, you'll analyse real websites against these principles. A strong answer:
- Names the principle
- Describes a specific example from the website
- Explains the impact on the user
Weak answer: "The BBC News website has good navigation."
Strong answer: "BBC News uses clear, consistent navigation with a horizontal menu bar fixed at the top of every page, categorised by topic (News, Sport, Business, etc.). This means users can immediately identify where to find specific content without scrolling, reducing frustration and improving usability."
Summary
| Principle | One-line summary |
|---|---|
| Usability/Simplicity | Easy to understand and use |
| White space | Breathing room between elements |
| Site layout | Structure and flow of content |
| Accessibility | Usable by people with disabilities (legal requirement) |
| Spacing | Distribution of content across the page |
| Navigation | How users move around the site |
| Typography | Font choices and text styling |
| Alignment | How elements are positioned |
| Clarity | How clearly information is presented |
| Consistency | Same design choices throughout |
| Accuracy | Correct and up-to-date information |
| Content | Relevant, current, appropriate media |
Test Yourself
Question 1 of 5
A website uses three different font styles on different pages and the main button is blue on the homepage but green on the contact page. Which design principle is being violated?