Planning a Useful Website

Start with purpose, audience and content so design decisions solve a real problem.

What you will learn

• Define the website goal and audience
• Plan pages and visitor journeys
• Sketch a clear page hierarchy

Before you begin

Create a separate practice folder and use non-sensitive sample content. Keep backup copies before restructuring files. Browser interfaces vary, so use the browser developer tools available on your computer.

Define the goal

A website should help a particular audience complete a task. Write one sentence explaining who the site serves, what they need and the result the site should produce.

Separate essential information from optional ideas. A small site with clear content is more useful than a large site whose purpose is difficult to understand.

Organise the content

Create a simple site map showing pages such as Home, About, Services and Contact. Group related information and give every page a descriptive name.

Plan the path from arrival to the main action. Important information should not require visitors to guess which link to follow.

Sketch before coding

Draw a mobile and desktop wireframe using boxes for header, navigation, main content and footer. Focus on order and emphasis rather than decoration.

Use real or realistic content when possible. Placeholder text can hide problems with long names, headings and descriptions.

Guided practice

1. Write the goal and primary audience for a five-page site.
2. Draw a site map and one visitor journey.
3. Sketch the homepage at mobile and desktop widths.

Knowledge check

1. What should a website goal identify?
2. Why use realistic content in a wireframe?
3. What does a visitor journey describe?

Completion standard

Continue when you can complete the guided practice and explain the knowledge-check answers in your own words.