1. Storyboard, Design, Layout

2.  Create storyboards  Decide upon navigation  Prepare short page summaries

3.  Helps the designer decide how the user will move around the site  It should be:  Easy for your user to learn  Consistent  Provide feedback  Provide clear visual messages  Consider alternative navigation

4.  Should represent the movement through the site  Can use multiple diagrams ▪ To identify movement through main sections ▪ To identify movement within sections  Otherwise known as a structure chart

5. Intro Drinks About us Contact Sandwiches White Wraps French Wholemea l Herbal Cold Hot Home All pages link back to the home page

6.  The structure adopted might be:  Linear  Hierarchical  Mixture  It should be logical  Ensure you  Illustrate navigation flow ( arrows )  All boxes are appropriately named

7.  How many clicks to get to a page?  How many choices for your user? Wraps Drinks About us Contact Sandwiches White French Wholemeal Herbal Cold Hot Home Drinks About us Contact Sandwiches White Wraps French Wholemeal Herbal Cold Hot Home Order

10.  To show your client?  To help you plan your layout?  Usually paper based  Should compliment the navigation diagram  Identify elements such as: ▪ Layout and colour schemes ▪ Font size and style ▪ The use of other media elements (sound, video) ▪ Interactivity

11. Paper  Portrait layout Hand-drawn contents Project details Script Project Title:Date: Page Title: Filename: Script

13. Project details Hand-drawn contents Script

14.  Once drawn use to plan your website  Tables? Sizes?  Frames? Sizes?  Colours?  Fonts?  Size and type of images

15.  Layout shared by more than one page  Create one page, the template  Copy and paste content for each page into the template file and use Save As to give the file a new name

17.  Plan table layout  Screen grab of browser

18.  All major features should appear on screen  Preferably no scrolling at all  Might include  Name of the site/business  Primary message  Indication of what the site is about  Main navigational options

19.  Should contain:  Consistent navigation  Link to the home page  Consistent colour scheme  If scrolling, links at the bottom of the page  May be a different layout from the home page

20.  Resolution – The number of dots displayed by the monitor  Consider the resolution of your site users monitor  640 x 480  800 x 600  1024 x 768 ▪ At present the majority of monitors  1152 x 864  1280 x 1024 and more …..

24.  Fixed design  layout remains the same  Better control of layout  May require horizontal scrolling  May get large areas of white space  Flexible design  The whole window is filled  Don ’ t need to worry about monitor resolutions  Length of text may get too long (on large monitors)  Less coherent or predictable design

25. Good practice to:  Call Home page index.htm  Store images in a separate folder  Store other media in separate folder  If large site create folders for pages  Use short meaningful names ▪ No spaces ▪ Be consistent - use lowercase ▪ Use relative path names

26.  www.webstyleguide.com www.webstyleguide.com  www.lynda.com/hext.html www.lynda.com/hext.html  www.7sisters.com www.7sisters.com