This document outlines the steps in the web design process, including creating a site map, defining user requirements, sketching page layouts, and creating wireframes. It provides an example scenario of designing a website for a tree surgeon business and guides students through activities to practice each step, such as planning a site map for the example business, defining the purpose, audience, and desired features of the site, sketching sample page layouts, and converting sketches to digital wireframes. The overall goal is for students to learn and apply different web design tools and techniques.

1. Designing Websites
What are the steps in the
Web Design process?
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

2. Objectives
• Practice the use of different web
design tools
• Decide which tools are most
effective for my own use
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

3. Activity 1: Site Map
• You will need to create a site map for
your assignment
• It should contain all the pages of
your site and show how they are
connected
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

4. Scenario – Today Only
This is a practice scenario to help us get
used to these tools
• Joe Jones is a tree surgeon who also
trims shrubs etc.
• He wants a web page that advertises his
services and provides a contact form to
allow customers to email him. He would
like one page for each service he offers
plus one that has examples of his work
– before and after photos
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

5. Activity 1 – Site Map
• Plan out a site map (on paper or
computer) for Joe’s website
• Link up each page to the home page
or to other pages
• Think about what pages will be on
the navigation bar – displayed on
every page
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

6. Activity 2 – User Requirements
“This should include the purpose of the
website in detail, the target audience –
gender, age, economic groups, geographic
location, etc), the style of the website –
level of language to use, types and size of
graphics, colours, fonts and sizes, layout,
and a list of features that should be
included including interactive elements.”
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

7. Activity 2 – User Requirements
• The purpose of the • The style of the
website
website
– level of language to
• The target audience
– gender
– age
– economic groups
– geographic location
– Etc.
use
– types and size of
graphics,
– colours,
– fonts and sizes,
– layout
• A list of features that
should be included
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

8. Activity 3 - Sketches
• Sketch (on paper!) the layout for at
least 2 pages of the website
• Annotate with colours, images (e.g.
what the image will be), fonts etc.
• Try some alternative layouts!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

9. Activity 4 - Wireframes
• The tools linked on the VLE only
work in modern browsers (e.g.
chrome…)
• You can also wireframe in MS Office
programs etc.
• Convert your sketches to wireframes!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

10. You are now ready…
• Read through assignment 4 carefully
• You need to choose a topic – either
from the scenarios given or your own
idea
• Start by writing the user
requirements or by coming up with
ideas in a mindmap
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20