Planning Your Web site

1
Planning Your Web site
2
Navigation

• Choose your navigation and create a site map
• Linear
• Hierarchical
• Matrix

3
Navigation
LINEAR
4
Navigation
HIERARCHIAL
5
Navigation
index.html
MATRIX
6
Creating Your File List

• File name
• Type
• Content
• Links

7
FILE CONVETIONS

• The homepage is usually called index.html
• Do not use spaces
• Keep file names lowercase
• Do not use symbols
• Use appropriate file names to identify the
  content
• List ALL of the files that you intend to include
  on your site
• Include the extension, e.g. .css or .html

8
Storyboarding the Page
LOGO
Company Name
gallery 3
contact
sales
gallery 2
gallery 1
Overview of the company and products ____________
Overview of the company and products Overview of
the company and products Overview of the company
and products Overview of the company and products
Overview of the company and products Overview of
the company and products Overview of the company
and products Overview of the company and
products Overview of the company and products
Overview of the company and products Overview of
the company and products Overview of the company
and products Overview of the company and products
Overview of the company and products
9
Storyboarding the Page
Annotation
background image
10
Design specifications

• Single document covering the specification and
  content of each page, including the external css
• Can include sections of code if you think it is
  necessary
• Be as precise as possible - assume that the
  person developing the site does not know what the
  finished site will look like other than through
  the information you are providing
• Do not write out long sentences, be brief, list.

11
The rationale

• This explains the reasoning behind your designs
• Use and identify technical language
• Refer to theories and concepts that you have
  used, as well as features of relevant web sites
  that you studied

12
Example rationale

• Rather thangrey and green are great colours for
  this site because it makes the images stand out
• I am expecting ..The base colour for my site is
  a dark grey which will harmonise with the images
  used on the homepage. I have chosen a
  complimentary colour using a colour wheel to add
  a lighter panel allowing a dark green text to
  contrast effectively.

13
Example rationale

• Rather thanI have put all of the buttons on the
  top because that is where they are on all new web
  sites
• I am expecting ..Following gestalt principles,
  I have grouped the link buttons together so that
  they can be easily identified as a navbar. As
  this is commonly positioned at the top of sites
  relating to the subject, I have positioned this
  bar at the top of my page and left white space
  before and after it so that it is prominent