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

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

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

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

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

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

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/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

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

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

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

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.

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

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

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

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.

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

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, 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 19

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 www.maps.co.uk ORDER FILE HOME PAGE INTERNET MENU PAGE Email www.goats.co.uk 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 email addresses Add any database connectivity – each form will have its own process script and database file 20

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