Planning Your Web Site
Designing a Web Site Private versus Commercial use
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
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
1
You will Need





A strategy for identifying the look and feel of your site
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.)
2
Design Process
External Design
 Formative testing
 The creative brief
 Create a paper based design
 Decide on a navigation model
 Create your “Wireframe”
 Develop you initial prototype
Internal Design
 Directory Structure
 Site Map
 Style Sheets and Templates
3
Formative Testing
Before you begin making any decisions on the design of your site it is a very good idea to
take a look at what similar products already exist. This is especially helpful if the site
you are creating is based on an existing concept.
If your site is based for example on the film King Kong, you may want to take a look at
existing graphics and media related to the film.
Film posters of both the original and new films may help to inform your design.
First we will consider the film poster for the most recent version of the film.
4
The first thing to note is the font used.
Font Selection
The two main types of fonts are those with serifs or not (sans) serif.
5
Sans serif
Serif
T
T
In the case of the King Kong poster above we need to be thinking in terms of a suitable
sans serif font...
However there is more to font selection than this.
It is worth looking at font catalogues on-line to see what we can find that is close to what
we want.
The next thing to notice is the colour palette
Colour Selection
One approach to thinking about colour is to think in terms of a colour wheel.
6
If we look at the King Kong poster we can get some idea of the kind of colours used and
use that as a guide to the colours we use in our design.
In this case we are very much in the Blue - Green part of the wheel with quite a lot of
dark earthy colours.
If however we consider the original King Kong poster we would see a different set of
rules being applied in our colour wheel.
7
In this case we have contrasting colours reds and blues which are on opposite sides of the
wheel.
Identifying the colour palette and fonts used can go a long way to capturing the look and
feel of a particular style.
It is also worth looking at art from a particular period to get a sense of how it may inform
our design.
The original King Kong film came out in 1933. If we look at art of the period for
example art deco we see the following images.
8
This again may be helpful in identifying styles and colours that may be helpful in our
design.
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
9
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.
10
Navigation Models
Think about how the pages will link to each other, the Navigation Model.
Linear Navigation Model (Slide show)

Useful if you wish to control the user’s movement through the site

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
11
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
May be frustrating making links to associated ideas on different pages
12
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
13
Paper based design
Couldn't be more non technical
Paper – Pencil
"Rough out" your initial plans
Start with the main page and think about how it might look.
14
Wire-framing your site






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
The important tasks of the Wireframe are:
 To illustrate how the site is navigated
 To indicate proposed layout
15
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 & Style Sheets
Graphics
16
The main goals are:
 Design a structure that makes sense so content may be located.
 Try to make sure that only one copy of an item of content exists. (Avoid
redundancy and duplication.)
17
Templates / Style Sheet
Templates define layout for similar pages.
CSS defines colours fonts (plus more) for specific areas.
Web page
(html file)
Web page
(html file)
Web page
(html file)
Web page
(html file)
Template
(dwt file)
Web page
(html file)
Web page
(html file)
External
CSS
Web page
(html file)
Without templates / external CSS
Changing the background colour on 100 pages requires 100 modifications.
With templates / external CSS it requires a single change.
18