Storyboard, Design, Layout

Create storyboardsDecide upon navigationPrepare short page summaries

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

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

IntroIntro

DrinksDrinksAbout usAbout usContactContactSandwichesSandwiches

WhiteWhiteWrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

All pages link back to the home pageAll pages link back to the home page

The structure adopted might be: Linear Hierarchical Mixture

It should be logical Ensure you

Illustrate navigation flow (arrows) All boxes are appropriately named

How many clicks to get to a page?

How many choices for your user?

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

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

Paper Portrait layout

Hand-drawn contents

Project detailsScriptProject Title: Date:

Page Title: Filename:

 

Script

Project details

Hand-drawn contents

Script

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

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

Plan table layout

Screen grab of browser

All major features should appear on screen

Preferably no scrolling at allMight include

Name of the site/business Primary message Indication of what the site is about Main navigational options

Should contain: Consistent navigation Link to the home page Consistent colour scheme If scrolling, links at the bottom of the

pageMay be a different layout from the

home page

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

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

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

www.webstyleguide.comwww.lynda.com/hext.htmlwww.7sisters.com