1. Unit 17 Website Development
Storyboards
House Style
Prototype

2. Storyboards
Are a series of pictures of what the site will look like. Usually sketched by hand on paper. It should show:
the layout of the home page and other pages
links on the main navigation bar
use of colours for background and text
use of images for information and decoration
It should be reviewed with the client to make sure it meets their needs.

3. Heading Link Images Text Hyperlinks etc
STORYBOARD
Designer:
Date:
Page No:
Page Purpose/Description:
Screen Size (Pixels) x
Width Height
Files used:
Links: (including links to other pages, bookmarks, external websites, )
Styles (including font size, style, colour)
Production Notes (including background colour, background image, link colours)
Heading
Link
Images
Text
Hyperlinks etc
(depends what is on your page – each page will be different.)
Link
Link
Link
Link

4. House Style
Most organisations have rules about how their documentation should look. A house style helps to create an impression of the organisation known as corporate image. They may specify:
a logo to be used on all letters, leaflets, adverts
the position and size of the logo
colours for the background, text and highlights
font styles and font sizes
where items of text should be placed (eg where the date should appear on a letter)
level of language

5. House Style Where Used Style Size Colour Justification Font Title
Where Used
Style
Size
Colour
Justification
Font
Title
Bold/Modern/
Arial 10
Black
Centre aligned
Main body text
Modern/Arial 6
Grey
Left aligned
Main menu down left had side of page
Modern Arial
Blue
Bullet Points
Main body to list main areas of the website
Circular bullet points
Background Colour
All pages
Green

6. House Style Black and white or colour? Style of image Position on page
Black and white or colour?
Style of image
Position on page
Size on page
Images
Colour images
Photographs of different ways to recycle
Within a table 6 rows by 6 columns on the home page
80x80 pixels
Banner
Colour
Gif image created in Paintshop pro. Include a recycle bin and the name of the company
Top left corner of each page
60x60 pixels

7. Prototype
A prototype is a set of sample pages from the site which can be used to check whether the design works and the client likes it. It will normally consist of the home page and a small number of other key pages. Once the client has approved the prototype, the remaining pages can be created in full.

8. Any Questions?