Unit 17 Website Development Storyboards House Style Prototype

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.

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, email) 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

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

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

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

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.

Any Questions?