Appearance
B1 · Client Requirements & Planning
Spec reference: Learning Aim B - Design a Website to Meet Client Requirements Key idea: Before writing a single line of code, you must understand what the client needs and plan your solution thoroughly.
What is a client brief?
A client brief is a document provided by the client that describes what they want from the website. It typically includes:
- Background on the business/organisation
- The purpose of the website
- The target audience
- Required pages and features
- Branding guidelines (colours, fonts, logos)
- Any technical requirements
Assignment 2 context
In your assignment, you will be given a client brief (e.g. Sweet Delights bakery or a similar scenario). Everything you design and build must trace back to that brief.
Analysing a client brief
When you receive a brief, you need to extract:
| Element | Questions to ask |
|---|---|
| Purpose | Why does the client need a website? What should it achieve? |
| Target audience | Who will use it? What do they need? |
| Required pages | What pages must the site include? |
| Required features | What functionality is needed? (contact form, gallery, map, etc.) |
| Branding | What colours, fonts and imagery should be used? |
| Constraints | Any restrictions? (budget, deadline, hosting, accessibility requirements) |
Example: Sweet Delights bakery brief analysis
| Element | Extracted from brief |
|---|---|
| Purpose | Online presence for a local artisan bakery |
| Target audience | Local community, food lovers, people wanting to order baked goods |
| Required pages | Homepage, product gallery (4+ categories), blog, contact page |
| Required features | Image banner, offers section, product descriptions, review section, contact form with map |
| Branding | Warm browns and creams, pastel pink, handwritten heading font, clean body font, cupcake logo |
| Constraints | Must reflect existing branding, high-quality food photography |
Research - analysing similar websites
Before designing, you should research 2-3 similar websites and evaluate them. This helps you:
- Identify best practices in your sector
- Understand what the target audience expects
- Find design ideas and features to adopt or avoid
For each website you analyse:
- Identify its purpose and target audience
- Evaluate it against the design principles (from A2)
- Note specific features that work well or poorly
- Explain what you would adopt or avoid in your own design
Site map
A site map is a diagram showing the structure of the website - all the pages and how they connect to each other. It is the first planning document you create.
Homepage
├── Products
│ ├── Cakes
│ ├── Breads
│ ├── Cookies
│ └── Seasonal
├── Blog
├── About Us
└── ContactA site map helps you:
- Plan navigation - what links are needed on each page
- Ensure no page is unreachable (orphaned)
- Communicate structure to the client before building
Colour scheme
Your colour scheme should:
- Reflect the client's brand identity
- Meet accessibility contrast requirements (minimum 4.5:1 ratio for normal text)
- Use a limited palette (typically 3 colours: primary, secondary, accent)
- Be consistent across every page
| Colour role | Purpose | Sweet Delights example |
|---|---|---|
| Primary | Main background or dominant colour | Warm cream #F5F0E8 |
| Secondary | Headings, key elements | Warm brown #6B3F2A |
| Accent | Buttons, highlights, calls to action | Pastel pink #F4A7B9 |
Tools for checking contrast: WebAIM Contrast Checker (webaim.org/resources/contrastchecker/)
Typography choices
Document your font choices with justification:
| Element | Font | Reason |
|---|---|---|
| Headings | 'Pacifico' (Google Fonts) - handwritten style | Reflects the warm, personal feel of the bakery brand |
| Body text | 'Lato' (Google Fonts) - clean sans-serif | Easy to read at small sizes, modern and professional |
| Minimum size | 16px body, 24px+ headings | Accessibility - readable for all users |
Wireframes
A wireframe is a simple, low-detail sketch or diagram of a web page's layout. It shows:
- Where elements will be positioned (header, nav, content, footer)
- The rough size and shape of sections
- The flow and hierarchy of content
Wireframes do not show:
- Real colours
- Actual fonts
- Final images
They are a planning tool - created quickly to test ideas before investing time in real design.
Wireframe elements
┌─────────────────────────────────────┐
│ LOGO NAV MENU │ ← Header
├─────────────────────────────────────┤
│ │
│ HERO IMAGE BANNER │ ← Hero section
│ Headline + CTA button │
├─────────────────────────────────────┤
│ Feature 1 │ Feature 2 │ Feature 3│ ← 3-column section
├─────────────────────────────────────┤
│ FOOTER - links/contact │ ← Footer
└─────────────────────────────────────┘Tools for wireframing
- Paper and pencil - fastest for initial ideas
- Figma (free) - professional digital wireframing
- Balsamiq - specifically designed for wireframes
- draw.io (free, browser-based)
Design documentation
Your planning document should include:
| Section | Content |
|---|---|
| Client brief summary | What the client needs |
| Target audience analysis | Who the site is for |
| Research findings | Analysis of similar websites |
| Site map | Page structure diagram |
| Wireframes | Layout sketches for each page |
| Colour scheme | Chosen colours with hex codes and justification |
| Typography | Font choices with justification |
| Asset list | Images, icons and other media needed |
Summary
| Term | Meaning |
|---|---|
| Client brief | Document describing what the client wants from the website |
| Site map | Diagram showing the structure and hierarchy of all website pages |
| Wireframe | Low-detail layout sketch showing element positions |
| Colour scheme | The set of colours chosen for the website |
| Asset | Any image, video, icon or other media used on the site |
Test Yourself
Question 1 of 5
What is the purpose of a site map in website planning?