Multimedia and Internet Technology Introduction and Planning your Site

Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There is no cut off point as to the completion date You are able to experiment with different styles of interaction Rough edges don't really matter You may be the only person to ever be involved with the source code

However… When Designing a Site for a Client: You are not in control of certain aspects of the site. (Corporate Image – Content) You are working to a deadline, after which the site will "go live" You need to get the styles of interaction, look and feel correct from the site's launch Customers don't look kindly on "experimental" features Rough edges do matter Other people may be involved with your source code

To address these issues you will need: A design strategy to make sure the Web site's design is correct early on in the design process Documentation to ensure that other people will understand what you have done Procedures for testing your design to make sure it works as intended Interaction with the client and the user. (To make sure you are getting it right.)

Design Process External Design Testing The Creative Brief Decide on a Navigation Model Create a paper based design Create your “Wireframe” Develop you initial prototype

Internal Design Directory Structure Site Map Style Sheets & Templates

Initial Testing Look at similar and related material already in existence. Guide lines for Font Colour scheme Look and feel Find related art work

Colours Fonts and Tone

The Creative Brief Specifies the overall direction of the project Gets the creative juices flowing Outlines the audience Expectations of the site The content of the site

King Kong Fan Site Creative brief 8th June 2012 Project Summary King Kong is a widely known film. This site will be a tribute to the film in the form of a single page comic. The selected scene from the film will be the film’s climax where Kong falls from the Empire State Building.   Target Audience  The site will be aimed at a wide audience however fans of the films will be targeted. Tone Since there are many versions of the film it will by mainly inspired by the 1930s original. However there will be tonal elements taken from the Peter Jackson version. The written style will be appropriate to the films content.

Linear Navigation Model (Slide show) Useful if you wish to control the users movement through the site e.g. Good for a tutorial or presentation

Hierarchical Navigation Model Common on the Web, with a main page and then sub pages linked off it and so on into the site

Hub and Spoke Navigation Model User enters the central hub, the home page Any page is available from the home page Each page leads back to the home page Never more than a couple of clicks from the home page

Full Web Navigation Model Each page links to every other page Risk of getting lost

Which navigation model? No specific model works best Many sites are a mix of different models Giving us a final model - Hybrid

Paper based design Couldn't be more non technical Paper – Pencil "Rough out" your initial plans Start with the main pages and think about how they might look

Wire-framing your site A Wireframe is a digital rendering of the storyboard A "bare bones" model of your site No written content No graphics Just blank pages linked to each other identifying The intention of each page The means by which the pages are navigated

Internal Structure of the Site How are your files to be stored? Remember - The folder is your friend Use a logical structure Use folders that DreamWeaver can recognise Templates Graphics

Use Templates / External Cascading Style Sheet (CSS) Templates define layout for similar pages. CSS defines colours, fonts (plus more) for specific areas Template (dwt file) External CSS Web page (html file)