G053 - Lecture 07 Designing Your Web Pages Mr C Johnston ICT Teacher

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 Bar Area For Content Header – 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, , 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 in 2.Link each page with double arrow – start in top left and work around clockwise 3.Add one way arrows for any external links and addresses 4.Add any database connectivity – each form will have its own process script and database file INTERNET ORDER FILE 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

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