Planning your website

DESIGN BASICS
Planning your website
WEB SITE DEVELOPMENT PROCESS

2
STEP 1: DEFINE THE PURPOSE
List the goals of the Web site
Decide on a topic for the Web site

List your objectives

3
STEP 2: IDENTIFY THE AUDIENCE
Define the needs of the audience
Develop a preliminary audience profile

4
STEP 3: PLAN THE CONTENT
Content is critical to the success of a Web site
Value-Added Content
Develop relevant, informative, and timely content
Do not duplicate content created for print on Web
pages - Repurpose the content so it will add value
The content of the site includes:
Text
Photographs
Multimedia & Video
Audio
We will explore some recommended guidelines for
these. 5
STEP 3: PLAN THE CONTENT
Text
Primary component of a Web site
Guidelines to consider
Abbreviate text
Chunk information

Add hyperlinks to explanatory or detailed information

Use active voice / friendly tone

Remove transitional words Above all; Finally; Another

Do not use Web clichs - e.g. Cat got your tongue?; When
you have lemons make lemonade; Fit as fiddle etc. Here is
a list of clichs and suggested alternatives

6
STEP 3: PLAN THE CONTENT
Photographs
Most commonly included content element on Web
sites
Can personalize and familiarize the unknown
Can help deliver a message or prompt an action
Select high-quality, relevant pictures
http://www.jeep.com/en/2014/wrangler/

7
STEP 3: PLAN THE CONTENT
Multimedia
Adds action, excitement, and interactivity to your
Web site The following site illustrates the use of
multimedia http://www.pepsiworld.com/

Viewers are intrigued and entertained by multimedia

presentations
Multimedia presentations can be interactive
Users can participate
Helper Applications

May require plug-ins

8
STEP 3: PLAN THE CONTENT
Animations
Widely used to attract attention and liven Web pages
Adds interest and appeal to Web pages
Overuse of animations can become distracting and
annoying
Animated GIF
Gives the appearance of moving pictures
visit:
www.costaatt.edu.tt
www.hpu.edu

9
STEP 3: PLAN THE CONTENT
Audio
Low-bandwidth alternative to video
Incorporate audio into a Web site to personalize a
message, enhance recall, set a mood, or sell a product
or service

10
STEP 3: PLAN THE CONTENT
Video
Video clips incorporate movement and sound
Extremely large sizes of video
Downloadable vs. Streaming Video
Download = it's simply a file copy. When you download a

file you're just making a copy of that file which is stored

on a server, to your local machine.
With streaming there is no copying of the file. A stream is

simply a stream of data, 1's and 0's, that are being sent
from some server to your machine

11
STEP 3: PLAN THE CONTENT
Dynamically Generated Content
Served up to your Web site visitor triggered by a
specific event
Frequently called up from a database
Active Server Pages
Scripting languages

12
STEP 3: PLAN THE CONTENT

13
STEP 4: PLAN THE STRUCTURE
Outline your Web Site
Choose the method that you find most flexible and
comfortable
Linear (sequence)
Hierarchical structure (hub & spoke; tree)

Mesh

14
LINEAR STRUCTURE
Presents information in a specific order
Training website

15
HIERARCHICAL STRUCTURE (HUB)
Presents information without a specific order
Use only for small Web sites

16
HIERARCHICAL STRUCTURE (TREE)
Organizes information
into categories and
subcategories
Best used in
organizational / topical
Web sites

17
HIERARCHICAL STRUCTURE

18
PREPARING FOR STEP 5
Home Page
First page visitors will see
Indicate to visitors what they have accessed
Might include the following:
Image maps
Search function

Directory

19
PREPARING FOR STEP 5

20
PREPARING FOR STEP 5
Splash Page
Provides elements of interest that draws visitors to
your Web site
Might contain powerful multimedia such as graphics,
sound, and movements
Some visitors consider splash pages a nuisance

Visit: www.7up.com

21
PREPARING FOR STEP 5
Underlying pages
Connects and combines the Web site
Underlying pages should:
Have a look that shows a definite visual connection with the
home page and other underlying pages
Clearly display the Web site name

Provide a link to the home page

22
PREPARING FOR STEP 5

23
PAGE SIZE AND INFORMATION
PLACEMENT
The initial, visible
screen area is
extremely valuable
space
Place the most critical
information above the
scroll line
Avoid a cluttered
appearance

24
ESTABLISH A VISUAL CONNECTION
Create a consistent look and feel
Inconsistent appearances confuse visitors

Be careful not to over apply consistency

Overly applied consistency makes pages boring and
uninteresting

25
ESTABLISH A VISUAL CONNECTION

26
COLOR SCHEME
Color schemes create unity
Limit the number of colors in your scheme to
three
Apply color scheme to the background, text, and
graphic elements
Background color should increase legibility of
text
Choose graphics that match your color scheme

27
 The Heinz Web site utilizes an
COLOR SCHEME effective color scheme to create
a sense of unity

28
LAYOUT
Consistent layout creates unity
A well-designed layout creates a sense of balance
and order
Display certain items consistently (in the same
place) on all pages
Main navigation bar
Main content area
Auxiliary links

29
LAYOUT

30
GRIDS
Underlying layout
structure that arranges
a page into rows and
columns
Allows you consistently
placed items on your
pages

31
TABLES
Contains cells aligned into rows and columns
Two common uses
Create rows and columns of data
Create Web page templates

32
TABLES

33
TABLES
Position text and other elements
Cell spacing
Cell padding

cell
spacing

cell
padding 34
STYLE SHEETS
Cascading Style Sheets allow Web designers to
attach to their HTML/XHTML specific
information regarding the appearance of their
Web pages
Styles can:
Define measurements of elements
Set margins
Indicate page breaks
Specify other layout features

35
STYLE SHEETS
Allow you to define several attributes all
at once to elements with the same HTML
tag
Internal Style Sheet
Provides styles for individual Web pages
External Style Sheet
Used for multiple pages
Created in a separate
file
.css extension 36
STEP 5: PLAN THE WEB PAGES
SAMPLE PLAN

37
STEP 6: PLAN THE NAVIGATION
Well-designed navigation pulls the visitor down
the home page
Draws them deeper into the Web site

Design should be both user-based and user-

controlled

38
USER-BASED NAVIGATION
Navigation is user-based if you followed the
guidelines for creating the outline structure (Step
4)
Major navigational paths are determined by the
sites outline structure

39
USER-CONTROLLED NAVIGATION
Offer alternatives to navigating your Web
site only through its major paths
Most visitors use browser navigation
features
Back and Forward
Search
History
Favorites
Well-designed navigation is essential to
the success of your Web site
40
NAVIGATION ELEMENTS
Relative and absolute Menus
URLs Site index
Text Search feature
Buttons

Image maps

41
NAVIGATION ELEMENTS
Linking takes visitors to a different section of the
page, a different page on the site, or another Web
site
Relative URL - Points to another location in relation
to the current location
Use for pages within your site
<a href=investmentform.html>Investment Form</a>

Absolute URL - Points to another location by specifying the

protocol, server, path name, and file name
Use for pages located on another server

<a href=http://www.aarp.com/moneyguide/moneybooks>Money
Guides<a>
42
TEXT & BUTTONS
Linked text is the most common navigation
element
Settings for linked text
Unvisited link; Active link; Visited link; Underlining;
Rollover effect
Buttons are the second most common navigation
element
Add special effects to buttons by adding scripts to
XHTML
Buttons can be downloaded, purchased, or designed
from scratch
Icons, small, symbolic images, can serve as links
Avoid excessive use of icons 43
BUTTONS

44
IMAGE MAPS & MENUS
Image Maps are Graphics that link to more than
once place
Designated hot areas are defined by x and y
coordinates with the <map> and <area> tags
Can also be created using mapping software

Menus offer visitors several navigation options in

a relatively small amount of space
Various types
Pull-down; Pop-up; Scrolling

45
MENUS

46
SITE INDEX
Contains hyperlinked text to specific locations
within the Web site
Organized alphabetically, or as an outline of the
site
Generally preferred over site maps (graphic
representation)

47
SITE INDEX

48
SEARCH FEATURES
Popular navigational tool for large, complex Web
sites
Search process is the same for both large and
small-scale sites
Gives visitors much desired flexibility and control

49
SEARCH FEATURE

50
NAVIGATION GUIDELINES
Consistently place your primary navigation
elements in the same location on all pages
Underlying pages should include
Link back to home page
Logo or site identifier

Ensure that links on your Web page are

Functional
Relative and worthwhile

Choose link terminology that gives a realistic

expectation of the content to be found if the link
is visited
51
Indicate to visitors clear link options
NAVIGATION GUIDELINES
Consider visitors who have graphics turned off in
their browsers
Use the ALT attribute
Provide text links in addition to graphic elements

52
STEP 6: PLAN THE NAVIGATION
SAMPLE PLAN

53
DESIGN PLAN CHECKLIST
Define the purpose
Identify the audience

Plan the content

Plan the structure

Plan the web pages

Plan the navigation

54