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

Basics of Good Web Page Design

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. x A Web page can be made up of one or several separate documents.
x

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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

What makes a good Web page?
Using the right combination of text, graphics, links and multimedia. x Making the page accessible and useful to as many users as possible. x Sounds easy, doesn’t it?
x

Notes

3 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

The First Steps
Content, Content, Content x Design x Storyboard x Author x Test
x

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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Content Rules
Content is the single most important aspect of any Web page. x Content must be well organized, engaging, and contain useful, valid links to other Web resources. x Content will guide many aspects of the design of the page.
x

Notes

5 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

What are you are trying to say?
Who is your audience? x What is the intent of your document . . .
x
x to

inform? x to educate? x to persuade? x to question?
x

Create an outline of your content.

Notes

6 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Design Considerations
Navigational Flow x Graphics x Text x Use of Color x Backgrounds x Multimedia
x

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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Navigational Flow
Content dictates this step. x Three main choices:
x
x Hierarchy x Linear x Hot

or Tree

List

x

Create a flowchart showing the relationship among your pages.

Notes

8 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Hierarchy or Tree
Most widely used and easy to navigate flow. x Your content outline gives you a built-in flowchart. x Information progresses from most general to most detailed. x Provides multiple paths for multiple audiences.
x

Notes

9 basics of good web design.ppt

Basics of Good Web Page Design

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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Linear
Moves in progression from the first page to the last, like a book. x Works well when content presents a series of steps or follows a process from start to finish.
x

Notes

11 basics of good web design.ppt

Basics of Good Web Page Design

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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Hot List
All links are included on a main home page. x For complex pages, include a flowchart or image that shows the organization of the entire document on the orientation page for your site.
x

Notes

13 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Hot List Structure
Who you are What you do Personal history

Home Page

Your family Hobbies Sports Favorite links

Notes

14 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

The Home Page
x

Each of the previous structures makes use of a home page, the beginning page of your Web site. It should contain:
xA

clearly defined index or table of contents. x Navigational buttons or links to other parts of the document. x A footer portion.

Notes

15 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Jumping Around
x

x x

Your home page needs to answer these questions: x Who is this? x What kind of content is it? x Where is it located? x Why does it exist? x 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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

The Footer
x

The footer portion of a Web page contains importa nt information about you and/or your organization:
x x

x x x

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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Graphics
x x

Use graphics sparingly
x

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. x Keep image file size small. x Use compressed .gifs and .jpgs. x Use fewer colors when creating graphics.
x

Notes

18 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Text
x

Plenty of white space
Don’t use too much text x Use short, well-written paragraphs
x

x

Use moderate size headings consistently x Use emphasized text sparingly x Split long pages (more than five screens of text or links) into multiple pages x Always proofread and check spelling

Notes

19 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Copyright Issues
All HTML documents on the Web are published and should be considered the same as print publications. x Copyrights apply to the Internet. Go to the Copyright Office Homepage for information: http://lcweb.loc.gov/copyright x Be aware of your organization’s policies for Web publishing.
x

Notes

20 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Use of Color
Keep colors simple - not too many x Not everyone can even see colors x Not every user’s system can support colors as you author them x Don’t use different shades of the same color x Remember that color is a personal preference
x

Notes

21 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Backgrounds
Keep it simple x Graphic backgrounds add more download time to the page and can detract from your text, making it hard to see and read x Color backgrounds can also make text hard to read x Backgrounds can clash with text and graphic colors
x

Notes

22 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Other Multimedia
x

Sounds, Animation, Movies
x Always

give users a choice to take advantage of these options. Provide as much information as possible in the text description of each item. x File format
File size x Possible download time x Plug-in needed
x

x Not

everyone will be able to take advantage of these features

Notes

23 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Storyboard
x

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 x Create both a graphic version and a text only version
x

Notes

24 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Author
Create pages in HTML from your storyboard x Use the editor of your choice x Use standard HTML, not browser-specific x Be sure to check your spelling x Test pages in a browser as you go
x
x 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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Test
x

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.
x For

x

x

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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Design for Everyone
x

x x

x

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 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Common HTML Tags

Notes

28 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Netscape Presentation of Common HTML Tags

Notes

29 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Remember to view your pages with as many browsers as possible. Why?. . .

Notes

30 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Notes

31 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Notes

32 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Notes

33 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Notes

34 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

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. x If you see something you want to use, contact the author of the page and ask for permission. x Be sure to honor copyright laws.
x

Notes

35 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Bad Design
http://www.useit.com/alertbox/9605.html x http://www.webpagesthatsuck.com
x

Notes

36 basics of good web design.ppt

Basics of Good Web Page Design

May 2000

Some Good Examples
http://www.ims.columbia.k12.mo.us/ x http://oseda.missouri.edu/schoolweb/ x http://services.dese.state.mo.us/ x http://www.virtualflorist.com/ x http://www.gsh.org/
x

Notes

37 basics of good web design.ppt

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.