Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

Designing WebsitesWhat are the steps in the

Web Design process?

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

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

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

Scenario – Today OnlyThis 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

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

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

Activity 2 – User Requirements• The purpose of the

website • 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

• A list of features that should be included

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

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

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

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