You are on page 1of 62

Website Designing


Chapter 3 : Planning the Site


There are numerous steps in the web site design and

development process. From gathering initial information, to
the creation of your web site, and finally to maintenance to
keep your web site up to date and current.

The exact process will vary slightly from designer to

designer, but the basics are generally the same.

2 of 35

Phase One: Information Gathering

Needs a solid understanding of the company/product it is created for ; what

are the business goals and dreams are, and how the web can be utilized to help
the client achieve those goals.
Things to consider:
Purpose - What is the purpose of the site? Do you want to provide
information, promote a service, sell a product?
Goals - What do you hope to accomplish by building this web site? Two of
the more common goals are either to make money or share information.
Target Audience - Is there a specific group of people that will help you
reach your goals? It is helpful to picture the ideal person you want to visit
your web site. Consider their age, gender or interests
Content - What kind of information will the target audience be looking for
on your site? Are they looking for specific information, a particular product
or service, online ordering?
3 of 35

Analyzing Your Audience

Produce an audience definition:

What is it that users want when they come to your

How can you attract them and entice them to return
for repeat visits?
What type of computer and connection speed do
your typical visitors have?

Analyzing Your Audience

Who are the typical members of your audience?

Are they male or female?

What level of education do they have?
What is their reading and vocabulary level?
What level of technical aptitude do they have?

Why do people come to your site?

Do they want information?

Do they want to download files?
Are they looking for links to other web sites?

Phase Two: Planning

a site map is developed. (a flowchart)

The site map is a list of all main topic areas of the site, as
well as sub-topics, if applicable.
This serves as a guide as to what content will be on the site,
and is essential to developing a consistent, easy to
understand navigational system
Elements such as interactive forms, ecommerce, flash, etc.
are also discussed

7 of 35

Example of a sitemap flowchart

8 of 9

Phase Three: Design

Know your target audience

it is also important to incorporate elements such as the company
logo or colors to help strengthen the identity of the company on
the web site
The web designer will create prototype designs for your web site
in a .jpg image of what the final design will look like or a mock
up then when edited will become wireframe
Wireframes document a more stable page design
Wireframes offer a more complete view of what the final design
will look like

9 of 35

Mock up

10 of 35


11 of 35

Phase Three: Design

The designer should allow the client to view the

project throughout the design and development

The most important reason for this is that it gives the

client the opportunity to express likes and dislikes on
the site design. (give feedback)

In this phase, communication between designer and

the client is crucial to ensure that the final web site
will match the clients needs and taste
12 of 35

Phase Four: Development

At this time, web designer will take all of the individual graphic
elements from the prototype and use them to create the
actual, functional site.
This is typically done by first developing the home page,
followed by a shell for the interior pages.
The shell serves as a template for the content pages of your
site, as it contains the main navigational structure for the web
site. Once the shell has been created, designer will take the
content and distribute it throughout the site, in the
appropriate areas.
Elements such as interactive contact forms, flash animations or
ecommerce shopping carts are implemented and made
functional during this phase, as well.
13 of 35

Template shell
Logo and title

Content 1
Content 2
Content 3
Content 4

Content displayed here

One of the popular ways of distributing content in a website : frames

14 of 35

Phase Five: Testing and Delivery

will test things such as the complete functionality of forms or other

scripts, as well last testing for last minute compatibility issues
(viewing differences between different web browsers), ensuring that
your web site is optimized to be viewed properly in the most recent
browser versions.
As part of testing, you should check to be sure that all of the code
written for your web site validates.
Valid code means that your site meets the current web development
standards this is helpful when checking for issues such as crossbrowser compatibility as mentioned above.
Once the client gave the final approval, it is time to deliver the site.
An FTP (File Transfer Protocol) program is used to upload the web
site files to your server.

15 of 35


16 of 35

Feedback Questions

Did you find the information you needed?

Was it easy or difficult to access the information you
Did you find the web site visually attractive?
Did you find the content easy to read?
Did you find the web site easy to navigate?
Did you think the information was presented correctly?
Did the information have enough depth?
What area of the web site did you like the best? Why?
What area of the web site did you like the least? Why?
Would you recommend the web site to others?

Phase Six: Maintenance

The development of your web site is not necessarily over

If the client prefers to be more hands on, and update
their own content, there is something called a CMS
(Content Management System)
A web site driven by a CMS gives the client the ability to
edit the content areas of the web site themselves
Other maintenance type items include SEO (Search
Engine Optimization) and SES (Search Engine Submission).
This is the optimization of the web site with elements
such as title, description and keyword tags which can help
the web site achieve higher rankings in the search engines
18 of 35

G3Group CMS online

19 of 35

Planning Site Navigation

Website navigation models

Your navigation model depends on your website and its

content and is often a combination of two or more designs.

We will examine three different website navigation

methods and see how they work.

They are; linear navigation, database navigation and

hierarchical navigation.

21 of 35

Linear navigation

Linear navigation is used for a website when you want the

visitor to go from one step to another in a particular order.
The idea here is that the visitor follows the pages in a
predefined order or sequence determined by you
This is particularly useful for tutorials

22 of 35

Linear reciprocal navigation links

Sometimes you might want your visitor to view a thread of

information in a linear fashion with the option of back clicking.
Reciprocal navigation, just like linear navigation, follows a straight line
through a website.
But, it allows the visitor to move back and forth between a series of

23 of 35

Database navigation

The database or grid design of website navigation is made up of

multiple main divisions and each division is linked to its own
This type of navigation can be used effectively when large
amounts of data are required in the website design
With database navigation the visitor begins by selecting the main
heading that best serves their purpose.
From there they can drill down deeper and deeper into the
selected database to locate the information they seek
Database navigation is the type of website structure used by
most online merchants to classify and store information on their
24 of 35

Database navigation

Examples of database navigation

An auto parts site might use this configuration when they develop their
website so that their customers can locate a specific part from a
particular category. The main divisions could be starters, engine parts,
fluids,etc. and the databases would contain information as to specific
vehicle, year, etc

25 of 35

Hierarchical navigation

The Hierarchical navigation model goes from the general to the

specific; from a homepage to main sections to subsections and
A visitor could easily go from the homepage to other areas of
the website and back again.
The goal of any hierarchical/website navigation system is to offer
the user a clear and simple way to access all pages in a site easily
and to do so quickly from anywhere in the website
This type of navigation is most commonly used by most
webmasters and is often referred to as web navigation.
It is a combination of linear and database structures which are
interconnected to provide access to any page in the website

Planning Site Navigation

Dont skimp on navigation cues, options, and contextual


Most modern web sites use primarily text-based graphics

If you choose to use graphics keep them simple and reuse

them consistently



Orienting the User

Provide enough location information to let the user answer

the following navigation questions:
Where am I?
Where can I go?
How do I get there?
How do I get back to where I started?

To answer these questions, provide the following information:

Let users know what page they are on and what type of
content they are viewing
Let users know where they are in relation to the rest of
the site

Orienting the User

Provide consistent, easy-to-understand links

Provide an alternative to the browsers Back button that
lets users return to their starting point
The linked breadcrumb path at the top of the page
shows the users location within the site hierarchy.
Users can click any link in the path to move through the
content structure.



Limiting Information Overload

Create manageable information segments

Break your content into smaller files, and then link them
Provide logical groupings of choices.
Keep a flat hierarchy.
Users should not have to click more than two or three times
to see the information they desire.

Control page length


Do not make users scroll through never-ending pages.

Provide plenty of internal links to help users get around, and keep the
pages short.

Limiting Information Overload

User hypertext to connect facts, relationships and


33 of 9

Provide contextual linking to related concepts, facts, or definitions,

letting the users make the choices they want.
Know your material, and try to anticipate the users information

Designing Navigation for Mobile Devices

Limiting information overload is especially important for

mobile web sites
Minimize the number of clicks or taps
Use universal navigation symbols
Simplify the users choices





Using Graphics for Navigation and


If you use graphics for navigation, use the same

graphics consistently throughout your site

These provide predictable navigation cues for the


Reusing graphics minimizes download time


Using the alt Attribute

Provide alternate text-based links in addition to
graphical links
Include alt attributes in your <img> tags
The alt attribute is important to accessibility
The alt attribute is highlighted in the following

<a href="index.html"><img src="home.gif"

alt="home page image" width="50" height="20"></a>


Building Text-Based Navigation

Text-based linking is often the most effective way to

provide navigation on your site

Always provide a text-based set of links as an alternate

means of navigation


Adding Contextual Linking

Contextual links allow users to jump to related ideas or

cross-references by clicking the word or item that
interests them

These are links that you can embed directly in the flow of
your content by choosing the key terms and concepts
you anticipate your users will want to follow



Using Lists for Navigation

The HTML list elements are the preferred element for containing
navigation links
Lists provide an easy way to create navigation that can be styled with CSS
<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="how.html">How it Works</a></li>
<li><a href="clubs.html">Balloon Clubs</a></li>
<li><a href="festivals.html">Festivals</a></li>
<li><a href="rides.html">Where to Ride</a></li>
<li><a href="faq.html">FAQ</a></li>



Removing Default Padding and Margin

Most lists have built-in padding or margin values

When creating navigation lists, you will need to remove
this default spacing
Set the margin padding properties to zero for the UL
element as shown

ul#navlist {
padding: 0;
margin: 0;

Removing Default Bullets

HTML lists come with built-in bullets

When creating lists for navigation, you can remove the
default bullets
Use the list-style-type property as shown
ul#navlist {
padding-left: 0;
margin-left: 0;
list-style-type: none;



Horizontal Navigation Bars

In a standard list, each item is on its own line

To create a horizontal navigation bar using the list, you
need to set the list item display setting to
This allows the list to display on one line
ul#navlist li{
display: inline;



Customizing the Horizontal

Navigation Bar

You can customize the basic list navigation with CSS


For example, you can:


Add borders, background colors, or images

Set space between buttons


Building Vertical Navigation Bars

Use a standard list structure without changing the display

type as you did for a horizontal navigation bar

The <a> elements in the list must be set to a block display

property value




Using Background Color and Graphics To

Enhance Navigation

You can use background colors and graphics in a variety

of ways to enhance your navigation

You can indicate location with graphic or background


You can create interactive hovers that change when the

user points to a link





Changing Text Color and Background

Color on Hover

The :hover pseudo-class lets you add interactivity when

users scroll over your navigation links
In this example, when the user hovers the mouse over
the link:


The text color changes to white (#fff)

The background color changes to bright blue (#0033cc)

Changing Text Color and Background

Color on Hover

ul#navlist a:hover {
color: #fff;
background-color: #0033cc;
font-weight: bold;

Changing Background Images on Hover

When the user hovers the pointer over a navigation button, the button color


Underlining on Hover

You can use the hover pseudo-class to turn underlining

on when the user points to a link

a:hover {text-decoration: