May 2000
Basics of Good Web Page Design
Basics of Good Web Page Design
Revised May 2000
Notes
1 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
What is a Web page? x
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, graphics, links and other multimedia components.
x
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 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
What makes a good Web page? x
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?
Notes
3 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
The First Steps x
Content, Content, Content
x
Design
x
Storyboard
x
Author
x
Test
Notes You will notice that there is much to be done before an HTML editor is used. Taking the time to to plan your page well well in the beginning will 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 x
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 t he design of the page.
Notes
5 basics of good web design.ppt
Basics of Good Web Page Design
May 2000
What are you are trying to say? x
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?
Create an outline of your content.
Notes
6 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
Design Considerations x
Navigational Flow
x
Graphics
x
Text
x
Use of Color
x
Backgrounds
x
Multimedia
Notes Not all users have GUI (graphical user interface) interface) browsers. browsers. Many are still using text only browsers. Keep this in mind as you design design your page. Try to provide 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 x
Content dictates this step.
x
Three main choices:
x
x
Hierarchy or Tree
x
Linear
x
Hot List
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 x
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.
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 x
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.
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
May 2000
Basics of Good Web Page Design
Hot List x
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.
Notes
13 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
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
May 2000
Basics of Good Web Page Design
The Home Page x
Each of the previous structures makes use of a home page, the beginning page of your Web site. It should should contain: contain: x
A 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
May 2000
Basics of Good Web Page Design
Jumping Around 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?
x
Try to limit to three screens of information per page.
x
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
May 2000
Basics of Good Web Page Design
The Footer x
The footer portion of a Web page contains important information about you and/or your organization: x
Author’ Author’s name, company, phone number, e-mail and/or mailing address
x
Page owner’ owner’s name, phone number, e-mail and/or mailing address
x
Legal disclaimer and/or official seal
x
Last revised date, copyright notice, URL of page
x
E-mail contact link
Notes
17 basics of good web design.ppt
Basics of Good Web Page Design
May 2000
Graphics x
Use graphics sparingly x
x
They should enhance text, not distract from it.
Keep image size small x
For larger images, use thumbnails that link to a larger image. image. Be sure to include file file size in in the text description of the graphic.
x
Keep image file size small. small.
x
Use compressed .gifs and .jpgs. .jpgs .
x
Use fewer colors when creating graphics. graphics.
Notes
18 basics of good web design.ppt
Basics of Good Web Page Design
May 2000
Text x
Plenty of white space x
Don’ Don’t use too much text
x
Use short, well-written w ell-written paragraphs
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 check spelling
Notes
19 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
Copyright Issues x
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: information: http://lcweb.loc.gov/copyright
x
Be aware of your organization’ organization’s policies for Web publishing.
Notes
20 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
Use of Color x
Keep colors simple - not too many
x
Not everyone can even see colors
x
Not every user’ user’s system can support colors as you author them
x
Don’ Don’t use different shades of the same color
x
Remember that color is a personal preference
Notes
21 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
Backgrounds x
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
Notes
22 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
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. item.
x
File format
x
x
File size
x
Possible download time
x
Plug-in needed
Not everyone will be able to take advantage of these features
Notes
23 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
Storyboard x
Once your flowchart is created and other design elements determined, determined, create a detailed sketch of the contents of each page.
x
All text, each graphic, every link, all navigational buttons
x
Create both a graphic version and a text only version
Notes
24 basics of good web design.ppt
Basics of Good Web Page Design
May 2000
Author x
Create pages in HTML from your storyboard
x
Use the editor of your choice
x
Use standard HTML, not browserbrowser-specific
x
Be sure to check your spelling
x
Test pages in a browser as you go 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
x
Test pages with different browsers
x
Use online validation checkers for syntax checking, link checking, etc. x
For links to validators go to: http://www.htmlhelp.com http://www.htmlhelp.com/links/valida /links/validators.htm tors.htm
Notes For links to validators go to: http://www.htmlhelp.com/links/validators.htm
26 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
Design for Everyone 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.
x
Find Bobby at: at: http://www.cast.org/bobby /
x
Some users might use use text only browsers, so provide a text only version of your page.
x
Use alternative text descriptions for each of your graphics. 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
May 2000
Basics of Good Web Page Design
Netscape Presentation of Common HTML Tags
Notes
29 basics of good web design.ppt
May 2000
Basics of Good Web Page Design
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 x
Use the browser’ browser’s built-in “View Source” 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.
Notes
35 basics of good web design.ppt
Basics of Good Web Page Design
May 2000
Bad Design
x
http://www.useit.com/alertbox/9605.html
x
http://www.webpagesthatsuck.com
Notes
36 basics of good web design.ppt
Basics of Good Web Page Design
May 2000
Some Good Examples x
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/
Notes
37 basics of good web design.ppt