Planning Your Web Site.
Download
Report
Transcript Planning Your Web Site.
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
Formative 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
Formative 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
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
Web page
(html file)
Web page
(html file)
Web page
(html file)
Web page
(html file)
Template
(dwt file)
Web page
(html file)
External
CSS
Web page
(html file)