G053 - Lecture 07

Designing Your Web Pages

Mr C JohnstonICT Teacher

www.computechedu.co.uk

Session Objectives

Understand different tools and techniques which can be used to design a website

Understand the benefits of using a template within website design,

Know common layouts for websites, Understand best practice for template design and level

of annotation required, Produce a template design for your website.

Design Stages

1. Initial Ideas

2. Template Design – including defining house style

3. Storyboard Designs

4. Structure Diagram

Initial Ideas

Recording all your ideas down no matter how strange and then considering which to use,

Spider diagram / mind map is useful – can be either paper based or created using software,

Freemind and Easy Draw software both allow simple diagrams to be created and are available from the G048 page.

Mind map for a website homepage

Design Stages

1. Initial Ideas

2. Template Design – including defining house style

3. Storyboard Designs

4. Structure Diagram

What is a template?? Templates are used to ensure all pages on a website are

consistent, They show the layout, colours and the position of graphics and

text which will appear on each page, You only need to make your template once – then its used as a

starting point for all other pages, They save time as you don’t have to start each page from

scratch and if a change to the template is made all pages change,

Before you can design your template you need to decide upon a layout for your pages – what will be fixed and what will change on each page.

Common Webpage Layouts

Navigation BarArea For ContentHeader – Company Name / Logo

Footer – Contact details / terms and conditions

My Template Design

Take a piece of A3 paper, hole punch and fold off centre so it will fit in your folder,

Draw around a piece of A4 to create an outline which you template can be drawn inside.

A3 Paper

Fold paper in half off centre

Draw round a piece of A4 to create an outline for your template

Fold paper in half off centre

Draw the Design

Ensure your design is detailed enough so somebody else could make it – remember only items which will appear on every page should be included.

Add Annotation

Main content of each page will go here

Colour scheme used – Green, white and red because these are the colours of the Italian flag and pizzas come from Italy.

Menu bar with hyperlinks – modern shape for buttons to give a trendy feel – buttons have roll over effect and turn black background with green writing when mouse is over so know which option is about to be pressed.

Small pictures of food which look tasty – to tantalise taste buds, remind customers what we sell and encourage them to purchase

Depth of Annotation Required

Mark Band #1 Limited annotation with little justification for the choice of font

style, graphics, colour and hyperlinks planned. Mark Band #2

Some annotation with justification for the choice of font style, graphics, colour and hyperlinks planned.

Mark Band #3 Full annotation which clearly explains the choice of font style,

graphics, colour and hyperlinks planned.

!You may want to make these notes on a separate sheet so you have enough room for the level of detail required for band 3. Another suggestion could be to type the notes in text boxes, cut them out and glue them onto your designs

Topic Task

Create a template design for your website – use colours and annotate in enough depth to achieve your target grade.

You will need to present your plan to the rest of the group so use your time wisely.

Design a page layout for each of your proposed pages in your site.

!Remember to include ideas from task a – revisit the websites if you have forgotten.

Final Structure Diagram

Shows how all the pages will link together, Most people will have a menu bar so every page will

link to every other page to form a mesh, Needs to also include any links, email, and databases

on your site Diagram is made up of boxes for pages and arrows to

show what links to what – take care with the arrow heads – some will be double as can go

back and forth, other will be one way

Example

HOME PAGE

ORDER PAGE

MENU PAGE

ABOUT PAGE

1. Draw box for each page with the page name in2. Link each page with double arrow – start in top left and work around clockwise3. Add one way arrows for any external links and email addresses4. Add any database connectivity – each form will have its own process script and

database file

INTERNETINTERNET

www.goats.co.ukEmail

ORDERFILE

process.asp

In a mesh structure number of arrows from each page should

be:NUMBER OF PAGES -1

Using the method shown on this slide draw a final structure diagram showing your website

www.maps.co.uk

Topic Task

Create a final structure diagram for your site. Lay the diagram out neatly so its clear.