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
May 2000
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
May 2000
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, doesnt it?
Notes
3
May 2000
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
May 2000
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
May 2000
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
May 2000
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
May 2000
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
May 2000
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
May 2000
Hierarchy or Tree Structure
Home Page
Always include links at the top and bottom of

each page back to your home page.
Notes
10
May 2000
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
May 2000
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
May 2000
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
May 2000
Hot List Structure

Who you are
What you do
Personal history
Home Page
Your family
Hobbies
Sports
Favorite links
Notes
14
May 2000
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
May 2000
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
May 2000
The Footer
The footer portion of a Web page contains

importa nt information about you
and/or your organization:
Authors name, company, phone number, e-mail and/or

mailing address
Page owners 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
May 2000
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
May 2000
Text
Plenty of white space

Dont 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
May 2000
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 organizations policies for
Web publishing.
Notes
20
May 2000
Use of Color
Keep colors simple - not too many
Not everyone can even see colors
Not every users system can support colors
as you author them
Dont use different shades of the same color
Remember that color is a personal
preference
Notes
21
May 2000
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
May 2000
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
May 2000
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
May 2000
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
May 2000
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
May 2000
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
May 2000
Common HTML Tags
Notes
28
May 2000
Netscape
Presentation
of Common
HTML Tags
Notes
29
May 2000
Remember to view your pages

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

Use the browsers 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
May 2000
Bad Design
http://www.useit.com/alertbox/9605.html
http://www.webpagesthatsuck.com
Notes
36
May 2000
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

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Basics of Good Web Page Design

Hochgeladen von

Copyright:

Verfügbare Formate

May 2000