Planning a Website: Outline Plans, Sitemaps, Wireframes and Prototypes

Nobody builds a school block by pouring concrete first and deciding where the classrooms go later. They draw a plan, then a detailed drawing of each floor, and maybe a small model to show the board. Websites are planned the same way: a web outline plan, a sitemap, wireframes for each page and a prototype to try out, all before the expensive coding starts.

Year 1: Planning a website

The role of a web designer

Web designers are responsible for a website's layout, ease of use and visual appearance: its images, colours and fonts, following the brand's identity. They may design new sites from scratch or update existing ones. Designers create the visual concept; developers then write the code to build it. An important part of a designer's work is the web outline plan.

The web outline plan

A web outline plan is a detailed blueprint of a website's structure, content and functions, made before it is built. It is iterative: steps are repeated and improved, for example after people try a prototype and give feedback. It starts from the requirements agreed with the client. The steps are:

1. Identify the goals and target audience. What should the site achieve (more visitors, more online sales?) and who is it for?

2. Create user personas. A persona is an imaginary but realistic person who might use the site, for example "Akosua, 16, an SHS learner who browses on her phone and wants past questions quickly." Personas guide content and design decisions.

3. Categorise the information. Group the content into logical categories and subcategories; this decides the pages and their names.

4. Create a sitemap showing the structure and hierarchy of pages.

5. Create a content outline: a detailed, page-by-page list of every content section and function, for example a homepage with a header and logo, a hero image with a call to action, testimonials, a form and a footer.

6. Wireframing and prototyping to show the layout of each page.

A call to action (CTA) is a prompt encouraging visitors to do something, usually a button with a clear command such as "Register now" or "Buy today".

Sitemaps

Think of a sitemap as a family tree of the website's pages. A sitemap shows the pages and how they are related, without any visual design. Search engines use sitemaps to explore sites efficiently, and designers use them as a guide. A visual sitemap is a diagram of labelled boxes for pages, arranged horizontally or vertically, drawn on paper, in Word, or with special software. The general advice is that no page should be more than four levels deep; otherwise users struggle to reach it.