5. PLANNING

ASSIGNMENT 2 Made up of 2 Pass, 2 Merit & 2 Distinction criteria: P4 – Design an interactive website to meet a client need P5 – Create an interactive website to meet a client need M1 – Explain the tools and techniques used to create website M2 – Improve the effectiveness of the website following a client review D2 – Discuss the techniques that can aid user access to information D3 – Demonstrate the website meets defined requirements

P4 Create a mood board, storyboard and site plan

SITE PLAN Site plan should show how the site will all link together – with arrows showing the directions you can move in. External links are also shown.

MOOD BOARD A mood board is an A3 poster that consists of images, text and samples of objects to do with your design. They are used to communicate your ideas and design concepts to others. It can include colours to be used, content ideas, magazine clippings…

SITE LAYOUTS - NEWS

SITE LAYOUTS - SHOPPING

SITE LAYOUTS – FAN SITES

STORYBOARDS Storyboards Filename Used: Home.htmPage Title: Home Background colour - Font – Heading (Type, Size, Colour) - Font – Body Text (Type, Size, Colour) - Font – Link Text (Type, Size, Colour) - Images - Sound - Video - Animation - Links (Internal) - Links (External) - Accessibility Features - Meta Tags - HOME ACCESS NEW NEWS FURTHER USING LATEST NEWS CONTACTSITE FAQ INTRODUCTION WEBSITE LOGO IMAGE OF PASSPORT Consider the layout of the pages, styles and the content that will be included – you will need to make one of these for each of your pages. This should not include actual content but descriptions of what will go where (detail is everything)

STORYBOARDS Think very carefully about the layout – sketch out some ideas. -Web pages usually have a logo in the top left corner that acts as a link back to the home page. -A navigation bar – usually horizontal or vertical – sometimes with a separate list of pages available on the left side.

STORYBOARDS -Home page is the most important page – first impression – if it doesnt attract users they wont stay on the site. -Think of images/videos you want to use, new sites benefit from being constantly updated.

STORYBOARDS -Website name is important – avoid punctuation, unconventional spellings, long names. -Should be a link to the home page on every page (usually the logo), should be the same logo on each page to avoid confusion, and should not be a link on the home page.

STORYBOARDS -Bad practice for links to open in a new window – unless a link to another website. -Avoid images for navigation as can be mistaken for advertising. -Breadcrumb trails – allow users more choice where they go.

STORYBOARDS -Limit the content – tempting to try to offer everything as a one- stop website. Best to limit the content to specialise in an error you know about rather than give an incomplete experience of a lot of areas. -If there is a website that is already best in the business – you should not try to make a similar but inferior site as it will look bad in comparison. -Pages should be short – large pages with lots of text and images make it hard for readers to locate the information relevant to them. -Stick to one design for all pages – so not confusing

STORYBOARDS -Vertical scrolling should be kept to a minimum -Blogs are the only exception as you expect to scroll, with most recent posts at the top. -Horizontal scrolling should be avoided -Keeping designs narrow is a good idea. -Limiting pages – include next button for pages with a lot of content, combine those with minimal content. -Language of the site – if it is scientists, a conservative style would be expected, if it is young people, it can be more relaxed and informal. -Avoid patronising or vague language.

STORYBOARDS -Colour schemes – using only a few colours is most effective as it can emphasise certain parts of the site and draw attention to elements. -

STORYBOARDS -Fonts – dont use more fonts that you need to – limit to only two throughout the site. -Traditional fonts are best – Times New Roman, Georgia, Arial, Tahoma. -Ideal to have one Serif (Garamond, Georgia, Times New Roman) font and one Sans-Serif (Arial, Tahoma). -One font should be used for headings, the other for body text -Also be consistent when using bold, italic, font sizes.

STORYBOARDS -Images should aim to be placed in the same position on each page – can change dimensions before including them. -Text should flow around images, and if images have captions, text should be the same font and size.

STORYBOARDS -Browsers – different browsers support different web standards – important to test compatibility – will cover in detail later. -Text – no spelling or grammatical errors in your website. Often overlooked – copy or type text in Word and run spelling/grammar checks, as well as proof reading. -Limit pointless paragraphs – a study in Germany 2005 by students found web users spend an average of 12.5 seconds per web page, skimming for keywords and phrases. If there are filler paragraphs, casual users will not stay.

STORYBOARDS -Accessibility – visual disabilities. Some people use screen readers that read words aloud. -User friendly navigation important – using JavaScript or Flash for navigation can hide it from screen readers. -Including ALT tags for each image – give a description of the images. -Keyboard shortcuts – access keys. -Different tools to check Web Accessibility Download a toolbar which simulates the experiences of different types of user

NAVIGATION EXAMPLES Drop Down Menu Jump Menu Image Links

NAVIGATION EXAMPLES Text Links

NAVIGATION EXAMPLES Alternative Navigation

NAVIGATION EXAMPLES Drop Down Box Rollover buttons Text links Image links Image Links Rollover buttons

NAVIGATION EXAMPLES Image links Rollover buttons Image Links Text Links Drop down menu