Lecture 3 Planning

Website Designing

IT104N

Chapter 3 : Planning the Site

Overview

2 of 35

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.

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

site?

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?

4

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?

6

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

Wireframe

11 of 35

Phase Three: Design

The designer should allow the client to view the

project throughout the design and development

stages.

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 cross-

browser 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

WS_FTP

16 of 35

Feedback Questions

Did you find the information you needed?

Was it easy or difficult to access the information you needed?

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?

17

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

pages.

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

database.

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

products.

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

databases

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

links.

Most modern web sites use primarily text-based graphics

If you choose to use graphics keep them simple and reuse

them consistently

27

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

29

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.

30

Limiting Information Overload

Create manageable information segments

Break your content into smaller files, and then link them

together.

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.

32

Limiting Information Overload

33 of 9

User hypertext to connect facts, relationships and

concepts

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

needs.

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

34

Using Graphics for Navigation and

Linking

If you use graphics for navigation, use the same

graphics consistently throughout your site

These provide predictable navigation cues for the

user

Reusing graphics minimizes download time

38

Using the alt Attribute

Provide alternate text-based links in addition to

graphical links

Include alt attributes in your tags

The alt attribute is important to accessibility

The alt attribute is highlighted in the following

code:

39

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

40

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

41

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

Home

History

How it Works

Balloon Clubs

Festivals

Where to Ride

FAQ

43

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;

}

45

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;

}

46

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

in-line

This allows the list to display on one line

ul#navlist li{

display: inline;

}

48

Customizing the Horizontal

Navigation Bar

You can customize the basic list navigation with CSS

properties

For example, you can:

Add borders, background colors, or images

Set space between buttons

50

Building Vertical Navigation Bars

Use a standard list structure without changing the display

type as you did for a horizontal navigation bar

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

property value

52

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

color

You can create interactive hovers that change when the

user points to a link

55

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)

59

Changing Text Color and Background

Color on Hover

ul#navlist a:hover {

color: #fff;

background-color: #0033cc;

font-weight: bold;

}

60

61

Changing Background Images on Hover

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

changes

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:

underline;}

62

Documents

Lecture 3 Planning