Transcript
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
5
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
28
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
31
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
35
36
37
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
42
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
44
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
47
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
49
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
51
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
53
54
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
56
57
58
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
top related