Introduction and Planning your Site

Planning Your Web SiteWhen 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 ProcessExternal Design

Formative TestingThe Creative BriefDecide on a Navigation ModelCreate a paper based designCreate your “Wireframe”Develop you initial prototype

Internal Design

Directory StructureSite MapStyle Sheets & Templates

Formative TestingLook at similar and related material already

in existence.Guide lines forFontColour schemeLook and feel

Find related art work

Colours Fonts and Tone

The Creative BriefSpecifies 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 SummaryKing 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.

  ToneSince 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 ModelCommon on the Web, with a main page and

then sub pages linked off it and so on into the site

Hub and Spoke Navigation ModelUser enters the central hub, the home pageAny page is available from the home pageEach page leads back to the home pageNever more than a couple of clicks from the

home page

Full Web Navigation ModelEach 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

Paper based designCouldn'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 siteA 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 SiteHow are your files to be stored?

Remember - The folder is your friend

Use a logical structure

Use folders that DreamWeaver can recogniseTemplatesGraphics

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)

Web page (html file)

Web page (html file)

Web page (html file) Web page

(html file)

Web page (html file)