5. planning. assignment 2 made up of 2 pass, 2 merit & 2 distinction criteria: p4 – design an...
TRANSCRIPT
5. PLANNING
ASSIGNMENT 2Made up of 2 Pass, 2 Merit & 2 Distinction criteria:
P4 – Design an interactive website to meet a client needP5 – Create an interactive website to meet a client need
M1 – Explain the tools and techniques used to create websiteM2 – 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 - SHOPPING
SITE LAYOUTS – FAN SITES
STORYBOARDSStoryboards
Filename Used: Home.htm Page 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
CONTACT SITE
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)
STORYBOARDSThink 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
doesn’t attract users they won’t 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 http://www.dokimos.org/ajff/ .
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.- http://kuler.adobe.com
STORYBOARDS- Fonts – don’t 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 -
www.etre.com/tools/accessibilitycheck- Download a toolbar which simulates the experiences of different
types of user www.visionaustralia.org.au/ais/toolbar
NAVIGATION EXAMPLES
Drop Down Menu
Jump Menu
Image Links
NAVIGATION EXAMPLES
Text Links
NAVIGATION EXAMPLES
Alternative Navigation
NAVIGATION EXAMPLESDrop 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