1. GCE Applied ICT G053: Lesson 07 Design Tools and Techniques
Mr C Johnston

2. Learning Outcome
Understand different tools and techniques which can be used to design a website
Understand the benefits of using a template within website design,
Understand best practice for template design and level of annotation required,
Use tool and techniques to produce design documentation for your proposed website

3. Design Stages Initial Ideas
9/8/2018
Design Stages
Initial Ideas
Template Design – including defining house style
Storyboard Designs
Structure Diagram 3

4. 9/8/2018
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 4

6. Design Stages Initial Ideas
9/8/2018
Design Stages
Initial Ideas
Template Design – including defining house style
Storyboard Designs
Structure Diagram 6

7. 9/8/2018
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. 7

8. Common Webpage Layouts
9/8/2018
Common Webpage Layouts
Navigation Bar
Area For Content
Header – Company Name / Logo
Footer – Contact details / terms and conditions 8

9. 9/8/2018
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.
Fold paper in half off centre
A3 Paper
Fold paper in half off centre
Draw round a piece of A4 to create an outline for your template 9

10. 9/8/2018
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. 10

11. 9/8/2018
Add Annotation
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
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. 11

12. 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

13. Activity
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 !
Remember to include ideas from task a – revisit the websites if you have forgotten.

14. Design Stages Initial Ideas
9/8/2018
Design Stages
Initial Ideas
Template Design – including defining house style
Storyboard Designs
Structure Diagram 14

15. 9/8/2018
Storyboard Designs
Storyboard designs will show the content of each page 15

16. 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

17. Activity
Use a blank template and duplicate it for the number of pages needed
Add content within the content areas – content needs to be fully planned for the award of mark band 3
Annotation needs to be added to the design which justifies all your design decisions !
Remember to include ideas from task a – revisit the websites if you have forgotten.

18. Design Stages Initial Ideas
9/8/2018
Design Stages
Initial Ideas
Template Design – including defining house style
Storyboard Designs
Structure Diagram 18

19. Final Structure Diagram
9/8/2018
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, , 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 19

20. In a mesh structure number of arrows from each page should be:
9/8/2018
Example
In a mesh structure number of arrows from each page should be:
NUMBER OF PAGES -1
process.asp
ABOUT
PAGE
ORDER
PAGE
ORDER
FILE
HOME
PAGE
INTERNET
MENU
PAGE
Using the method shown on this slide draw a final structure diagram showing your website
Draw box for each page with the page name in
Link each page with double arrow – start in top left and work around clockwise
Add one way arrows for any external links and addresses
Add any database connectivity – each form will have its own process script and database file 20

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