(ebook - pdf) basics of good web page design

37
Basics of Good Web Page Design May 2000 1 basics of good web design.ppt Notes Basics of Good Web Page Design Revised May 2000

Upload: anon-595944

Post on 15-Oct-2014

3.104 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

1basics of good web design.ppt

Notes

Basics of Good Web Page Design

Revised May 2000

Page 2: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

2basics of good web design.ppt

Notes

What is a Web page?

◆ A document available on the World WideWeb that is created using HTML (HypertextMarkup Language) and viewed with anInternet browser (Netscape or InternetExplorer). It can contain text, graphics,links and other multimedia components.

◆ A Web page can be made up of one orseveral separate documents.

A Web page is usually a collection of documents that make up aWeb site.

A home page is usually the main or cover page of a Web documentthat contains an index or table of contents to the rest of thedocument.

Page 3: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

3basics of good web design.ppt

Notes

What makes a good Webpage?

◆ Using the right combination of text,graphics, links and multimedia.

◆ Making the page accessible and useful to asmany users as possible.

◆ Sounds easy, doesn’t it?

Page 4: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

4basics of good web design.ppt

Notes

The First Steps

◆ Content, Content, Content

◆ Design

◆ Storyboard

◆ Author

◆ Test

You will notice that there is much to be done before an HTML editoris used. Taking the time to plan your page well in the beginning willsave you a great deal of headaches later on.

Page 5: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

5basics of good web design.ppt

Notes

Content Rules

◆ Content is the single most important aspectof any Web page.

◆ Content must be well organized, engaging,and contain useful, valid links to other Webresources.

◆ Content will guide many aspects of thedesign of the page.

Page 6: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

6basics of good web design.ppt

Notes

What are you are trying tosay?

◆ 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.

Page 7: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

7basics of good web design.ppt

Notes

Design Considerations

◆ Navigational Flow

◆ Graphics

◆ Text

◆ Use of Color

◆ Backgrounds

◆ Multimedia

Not all users have GUI (graphical user interface) browsers. Manyare still using text only browsers.

Keep this in mind as you design your page. Try to provide a textonly version of your page.

At the very least, provide alternative text for every one of yourgraphics.

Page 8: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

8basics of good web design.ppt

Notes

Navigational Flow

◆ Content dictates this step.

◆ Three main choices:◆ Hierarchy or Tree

◆ Linear

◆ Hot List

◆ Create a flowchart showing the relationshipamong your pages.

Page 9: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

9basics of good web design.ppt

Notes

Hierarchy or Tree

◆ Most widely used and easy to navigateflow.

◆ Your content outline givesyou a built-in flowchart.

◆ Information progresses from most generalto most detailed.

◆ Provides multiple paths for multipleaudiences.

Page 10: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

10basics of good web design.ppt

Notes

Hierarchy or Tree Structure

Home Page

Always include links at the top and bottom ofeach page back to your home page.

Page 11: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

11basics of good web design.ppt

Notes

Linear

◆ Moves in progression from the first page tothe last, like a book.

◆ Works well when content presents a seriesof steps or follows a process from start tofinish.

Page 12: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

12basics of good web design.ppt

Notes

Linear Structure

Home Page

This structure offers a good place to use linksfor previous page, next page and top of page.Of course, we will always include a link backto the home page.

Page 13: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

13basics of good web design.ppt

Notes

Hot List

◆ All links are included on a main home page.

◆ For complex pages, include a flowchart orimage that shows the organization of theentire document on the orientation page foryour site.

Page 14: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

14basics of good web design.ppt

Notes

Hot List Structure

Home Page

What you do

Who you are

Personal history

Your family

Hobbies

Sports

Favorite links

Page 15: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

15basics of good web design.ppt

Notes

The Home Page

◆ Each of the previous structures makes use ofa home page, the beginning page ofyour Web site. It should contain:◆ A clearly defined index or table of contents.

◆ Navigational buttons or links to other parts ofthe document.

◆ A footer portion.

Page 16: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

16basics of good web design.ppt

Notes

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 thanthree jumps to find the information they arelooking for.

Page 17: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

17basics of good web design.ppt

Notes

The Footer

◆ The footer portion of a Web page containsimportant information about youand/or your organization:◆ Author’s name, company, phone number, e-mail and/or

mailing address

◆ Page owner’s name, phone number, e-mail and/ormailing address

◆ Legal disclaimer and/or official seal

◆ Last revised date, copyright notice, URL of page

◆ E-mail contact link

Page 18: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

18basics of good web design.ppt

Notes

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 textdescription of the graphic.

◆ Keep image file size small.

◆ Use compressed .gifs and .jpgs.

◆ Use fewer colors when creating graphics.

Page 19: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

19basics of good web design.ppt

Notes

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 oftext or links) into multiple pages

◆ Always proofread and check spelling

Page 20: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

20basics of good web design.ppt

Notes

Copyright Issues

◆ All HTML documents on the Web arepublished and should be considered the sameas print publications.

◆ Copyrights apply to the Internet. Go to theCopyright Office Homepage for information: http://lcweb.loc.gov/copyright

◆ Be aware of your organization’s policies forWeb publishing.

Page 21: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

21basics of good web design.ppt

Notes

Use of Color

◆ Keep colors simple - not too many

◆ Not everyone can even see colors

◆ Not every user’s system can support colorsas you author them

◆ Don’t use different shades of the same color

◆ Remember that color is a personalpreference

Page 22: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

22basics of good web design.ppt

Notes

Backgrounds

◆ Keep it simple

◆ Graphic backgrounds add more downloadtime to the page and can detract fromyour text, making it hard to see and read

◆ Color backgrounds can also make text hard toread

◆ Backgrounds can clash with text andgraphic colors

Page 23: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

23basics of good web design.ppt

Notes

Other Multimedia

◆ Sounds, Animation, Movies◆ Always give users a choice to take advantage of

these options. Provide as much information aspossible 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 ofthese features

Page 24: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

24basics of good web design.ppt

Notes

Storyboard

◆ Once your flowchart is created and otherdesign elements determined, create adetailed sketch of the contents of each page.

◆ All text, each graphic, every link, allnavigational buttons

◆ Create both a graphic version and atext only version

Page 25: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

25basics of good web design.ppt

Notes

Author

◆ Create pages in HTML from yourstoryboard

◆ 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

Find HTML 3.2 standards at:

http://www.htmlhelp.com/reference/wilbur/

Page 26: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

26basics of good web design.ppt

Notes

Test

◆ Testing as you go is part of the authoringprocess, but more testing remains

◆ Test pages with different browsers

◆ Use online validation checkers for syntaxchecking, link checking, etc.◆ For links to validators go to:

http://www.htmlhelp.com/links/validators.htm

For links to validators go to:

http://www.htmlhelp.com/links/validators.htm

Page 27: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

27basics of good web design.ppt

Notes

Design for Everyone

◆ Meet Bobby, the Web-based program designed byCAST (Center for Applied Special Technology) tohelp developers evaluate how well their Web pages meet guidelines fordisability access.

◆ Find Bobby at: http://www.cast.org/bobby/

◆ Some users might use text only browsers, soprovide a text only version of your page.

◆ Use alternative text descriptions for each of yourgraphics.

Page 28: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

28basics of good web design.ppt

Notes

Common HTML Tags

Page 29: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

29basics of good web design.ppt

Notes

NetscapePresentationof CommonHTML Tags

Page 30: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

30basics of good web design.ppt

Notes

Remember to view your pageswith as many browsers as

possible.

Why?. . .

Page 31: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

31basics of good web design.ppt

Notes

Page 32: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

32basics of good web design.ppt

Notes

Page 33: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

33basics of good web design.ppt

Notes

Page 34: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

34basics of good web design.ppt

Notes

Page 35: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

35basics of good web design.ppt

Notes

Tricks of the Trade

◆ Use the browser’s built-in “View Source”option to study the way others have usedHTML 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.

Page 36: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

36basics of good web design.ppt

Notes

Bad Design

◆ http://www.useit.com/alertbox/9605.html

◆ http://www.webpagesthatsuck.com

Page 37: (eBook - PDF) Basics of Good Web Page Design

Basics of Good Web Page Design May 2000

37basics of good web design.ppt

Notes

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/