Basics of Good Web Page Design: Notes

Basics of Good Web Page Design May 2000
Basics of Good Web Page Design
Revised May 2000
Notes
1
basics of good web design.ppt
What is a Web page?

◆ A document available on the World Wide
Web that is created using HTML (Hypertext
Markup Language) and viewed with an
Internet browser (Netscape or Internet
Explorer). It can contain text, graphics,
links and other multimedia components.
◆ A Web page can be made up of one or
several separate documents.
Notes
A Web page is usually a collection of documents that make up a
Web site.
A home page is usually the main or cover page of a Web document

that contains an index or table of contents to the rest of the
document.
2
What makes a good Web

page?
◆ Using the right combination of text,
graphics, links and multimedia.
◆ Making the page accessible and useful to as
many users as possible.
◆ Sounds easy, doesn’t it?
Notes
3
The First Steps

◆ Content, Content, Content
◆ Design
◆ Storyboard
◆ Author
◆ Test
Notes
You will notice that there is much to be done before an HTML editor
is used. Taking the time to plan your page well in the beginning will
save you a great deal of headaches later on.
4
Content Rules
◆ Content is the single most important aspect
of any Web page.
◆ Content must be well organized, engaging,
and contain useful, valid links to other Web
resources.
◆ Content will guide many aspects of the
design of the page.
Notes
5
What are you are trying to

say?
◆ Who is your audience?
◆ What is the intent of your document . . .
◆ to inform?
◆ to educate?
◆ to persuade?
◆ to question?
◆ Create an outline of your content.
Notes
6
Design Considerations
◆ Navigational Flow
◆ Graphics
◆ Text
◆ Use of Color
◆ Backgrounds
◆ Multimedia
Notes
Not all users have GUI (graphical user interface) browsers. Many
are still using text only browsers.
Keep this in mind as you design your page. Try to provide a text
only version of your page.
At the very least, provide alternative text for every one of your
graphics.
7
Navigational Flow
◆ Content dictates this step.
◆ Three main choices:
◆ Hierarchy or Tree
◆ Linear
◆ Hot List
◆ Create a flowchart showing the relationship
among your pages.
Notes
8
Hierarchy or Tree
◆ Most widely used and easy to navigate
flow.
◆ Your content outline gives
you a built-in flowchart.
◆ Information progresses from most general
to most detailed.
◆ Provides multiple paths for multiple
audiences.
Notes
9
Hierarchy or Tree Structure
Home Page
Always include links at the top and bottom of

each page back to your home page.
Notes
10
Linear
◆ Moves in progression from the first page to
the last, like a book.
◆ Works well when content presents a series
of steps or follows a process from start to
finish.
Notes
11
Linear Structure
Home Page
This structure offers a good place to use links

for previous page, next page and top of page.
Of course, we will always include a link back
to the home page.
Notes
12
Hot List
◆ All links are included on a main home page.
◆ For complex pages, include a flowchart or
image that shows the organization of the
entire document on the orientation page for
your site.
Notes
13
Hot List Structure

Who you are
What you do
Personal history
Home Page
Your family
Hobbies
Sports
Favorite links
Notes
14
The Home Page

◆ Each of the previous structures makes use of
a home page, the beginning page of
your Web site. It should contain:
◆A clearly defined index or table of contents.
◆ Navigational buttons or links to other parts of
the document.
◆ A footer portion.
Notes
15
Jumping Around
◆ Your home page needs to answer these questions:
◆ Who is this?
◆ What kind of content is it?
◆ Where is it located?
◆ Why does it exist?
◆ How do you find the content?
◆ Try to limit to three screens of information per page.
◆ Your users should not have to make more than
three jumps to find the information they are
looking for.
Notes
16
The Footer
◆ The footer portion of a Web page contains
importa nt information about you
and/or your organization:
◆ Author’s name, company, phone number, e-mail and/or
mailing address
◆ Page owner’s name, phone number, e-mail and/or
mailing address
◆ Legal disclaimer and/or official seal
◆ Last revised date, copyright notice, URL of page
◆ E-mail contact link
Notes
17
Graphics
◆ Use graphics sparingly
◆ They should enhance text, not distract from it.
◆ Keep image size small
◆ For larger images, use thumbnails that link to a
larger image. Be sure to include file size in the text
description of the graphic.
◆ Keep image file size small.
◆ Use compressed .gifs and .jpgs.
◆ Use fewer colors when creating graphics.
Notes
18
Text
◆ Plenty of white space
◆ Don’t use too much text
◆ Use short, well-written paragraphs
◆ Use moderate size headings consistently

◆ Use emphasized text sparingly
◆ Split long pages (more than five screens of
text or links) into multiple pages
◆ Always proofread and check spelling
Notes
19
Copyright Issues
◆ All HTML documents on the Web are
published and should be considered the same
as print publications.
◆ Copyrights apply to the Internet. Go to the
Copyright Office Homepage for information:
http://lcweb.loc.gov/copyright
◆ Be aware of your organization’s policies for
Web publishing.
Notes
20
Use of Color
◆ Keep colors simple - not too many
◆ Not everyone can even see colors
◆ Not every user’s system can support colors
as you author them
◆ Don’t use different shades of the same color
◆ Remember that color is a personal
preference
Notes
21
Backgrounds
◆ Keep it simple
◆ Graphic backgrounds add more download
time to the page and can detract from
your text, making it hard to see and read
◆ Color backgrounds can also make text hard to
read
◆ Backgrounds can clash with text and
graphic colors
Notes
22
Other Multimedia
◆ Sounds, Animation, Movies
◆ Always give users a choice to take advantage of
these options. Provide as much information as
possible in the text description of each item.
◆ File format
◆ File size
◆ Possible download time
◆ Plug-in needed
◆ Not everyone will be able to take advantage of

these features
Notes
23
Storyboard
◆ Once your flowchart is created and other
design elements determined, create a
detailed sketch of the contents of each page.
◆ All text, each graphic, every link, all

navigational buttons
◆ Create both a graphic version and a
text only version
Notes
24
Author
◆ Create pages in HTML from your
storyboard
◆ Use the editor of your choice
◆ Use standard HTML, not browser-specific
◆ Be sure to check your spelling
◆ Test pages in a browser as you go
◆ Find HTML 3.2 standards at:
http://www.htmlhelp.com/reference/wilbur
Notes
Find HTML 3.2 standards at:
http://www.htmlhelp.com/reference/wilbur/
25
Test
◆ Testing as you go is part of the authoring
process, but more testing remains
◆ Test pages with different browsers
◆ Use online validation checkers for syntax

checking, link checking, etc.
◆ For links to validators go to:
http://www.htmlhelp.com/links/validators.htm
Notes
For links to validators go to:
http://www.htmlhelp.com/links/validators.htm
26
Design for Everyone

◆ Meet Bobby, the Web-based program designed by
CAST (Center for Applied Special Technology) to
help developers evaluate how well
their Web pages meet guidelines for
disability access.
◆ Find Bobby at: http://www.cast.org/bobby/
◆ Some users might use text only browsers, so
provide a text only version of your page.
◆ Use alternative text descriptions for each of your
graphics.
Notes
27
Common HTML Tags
Notes
28
Netscape
Presentation
of Common
HTML Tags
Notes
29
Remember to view your pages

with as many browsers as
possible.
Why?. . .
Notes
30
Notes
31
Notes
32
Notes
33
Notes
34
Tricks of the Trade

◆ Use the browser’s built-in “View Source”
option to study the way others have used
HTML commands to create certain effects.
◆ If you see something you want to use,
contact the author of the page and ask
for permission.
◆ Be sure to honor copyright laws.
Notes
35
Bad Design
◆ http://www.useit.com/alertbox/9605.html
◆ http://www.webpagesthatsuck.com
Notes
36
Some Good Examples

◆ http://www.ims.columbia.k12.mo.us/
◆ http://oseda.missouri.edu/schoolweb/
◆ http://services.dese.state.mo.us/
◆ http://www.virtualflorist.com/
◆ http://www.gsh.org/
Notes
37

Basics of Good Web Page Design: Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basics of Good Web Page Design: Notes

Uploaded by

Copyright:

Available Formats

Basics of Good Web Page Design May 2000

Basics of Good Web Page Design

Revised May 2000

What is a Web page?

A home page is usually the main or cover page of a Web document

What makes a good Web

The First Steps

What are you are trying to

◆ Create an outline of your content.

Hierarchy or Tree Structure

Always include links at the top and bottom of

This structure offers a good place to use links

Hot List Structure

The Home Page

◆ Use compressed .gifs and .jpgs.

◆ Use fewer colors when creating graphics.

◆ Use moderate size headings consistently

◆ Not everyone will be able to take advantage of

◆ All text, each graphic, every link, all

◆ Test pages with different browsers

◆ Use online validation checkers for syntax

Design for Everyone

Common HTML Tags

Remember to view your pages

Tricks of the Trade

Some Good Examples

You might also like