goodwebdesign

Information about goodwebdesign

Published on November 29, 2007

Author: Noemie

Source: authorstream.com

Content

Basics of Good Webpage Design:  Basics of Good Webpage Design October 10, 2003 What Is a Webpage?:  What Is a Webpage? A document available on the World Wide Web that is created using HTML (Hypertext Markup Language) and is viewed using a Web browser (Netscape, Internet Explorer). It can contain text, graphics, links and other multimedia components. A webpage can be made up of one or several separate documents. What Makes a Good Webpage?:  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? What Makes a Good Webpage? First Steps:  First Steps Content, content, content Design Storyboard Author Test Content Rules:  Content Rules Content is the single most important aspect of any webpage. Content must be well organized, engaging and contain useful, valid links to other Web resources. Content will guide many aspects of the design of your page. What Are You Trying to Say?:  What Are You 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. Design Considerations:  Design Considerations Navigational flow Graphics Text Use of color Backgrounds Multimedia Navigational Flow:  Navigational Flow Again, content dictates this step. Three main choices: Hierarchy or tree Linear Hot list Create a flowchart showing the relationships among your pages. Hierarchy or Tree:  Hierarchy or Tree Most widely used Easy to navigate Developing from your content outline gives you a built-in flowchart. Information progresses from most general to most detailed. Provides multiple paths for multiple audiences. Hierarchy or Tree Structure:  Hierarchy or Tree Structure Home Page Always include links at the top and bottom of each page back to your home page. Linear:  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. Linear Structure:  Linear Structure 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. Hot List:  Hot List All links are included on a main home page. For complex pages, include a flowchart or image showing the organization of the entire document on the orientation page for your site. Hot List Structure:  Hot List Structure Home Page What you do Who you are Personal history Your family Hobbies Sports Favorite Links The Home Page:  The Home Page Each of the previous structures makes use of a home page. This is the beginning page of your website. It should contain: A clearly defined index or table of contents. Navigational buttons or links to other parts of the document. A footer portion. Jumping Around:  Jumping Around Your home page needs to answer these questions: Who does this page represent? What kind of content will you find here? Where is this organization located? Why does this page exist? How do you find the content? Limit information to three screens per page. No more than three jumps to find the information they want. The Footer :  The Footer The footer portion of a webpage contains very important 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 Graphics:  Graphics Use graphics sparingly Should enhance text, not distract from it Keep image size small For larger images, use thumbnail sizes that link to the larger size. Be sure to include image file size in text description of the graphic. Keep image file size small Use compressed .gifs and .jpgs Use fewer colors when creating graphics Always include the alternative text tag describing the image for accessibility Text:  Text Plenty of white space Don’t use too much text. Use short, well-written paragraphs. Consistent use of moderate-size headings Use emphasized text sparingly Split long pages (more than five screens of text or links) into multiple pages Always proofread and spell check Copyright Issues:  Copyright Issues All HTML documents on the Web are published and should be considered the same as print publications. Copyrights do apply to the Internet. http://www.loc.gov/copyright http://www.dese.state.mo.us/divimprove/curriculum/copyright/index.htm Be aware of your organization’s policies for Web publishing. Use of Color:  Use of Color Keep colors simple - not too many Not everyone can 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 Backgrounds:  Backgrounds Keep it simple. Graphic backgrounds add more download time to your page and can greatly detract from your text, making it hard to see and read. Color backgrounds can also make text hard to read. Backgrounds can easily clash with text and graphic colors. Other Multimedia:  Other Multimedia Sounds, animation, movies Always give users the choice to take advantage of these options. Give them as much information as possible in the text descriptions of each item: File format File size Possible download time Plug-in needed Not everyone will be able to take advantage of these features. Storyboard:  Storyboard Once your flowchart is created and other design elements decided, create a detailed sketch of the entire content of each separate page All text, each graphic, every link, all navigational buttons Be sure to create a graphic version and a text only version Author:  Author Create your pages in HTML from your storyboard. Use the editor of your choice. Be sure to spell check. Use standard HTML, not browser-specific Test pages in different browsers as you go. For an archive of browsers, go to: http://browsers.evolt.org Test:  Test Testing as you go is part of the authoring process, but afterwards there is much more testing to be done. Test pages with as many different browsers as possible. Use online validation checkers for syntax checking, link checking, etc. Designing for Everyone:  Designing for Everyone Meet Bobby, the Web-based program designed by CAST (Center for Applied Special Technology) to help developers more easily evaluate the extent to which their webpages meet suggested guidelines for disability access. Find Bobby at http://www.cast.org/bobby/ Some users will be using text-only browsers, so provide a text-only version of your page. Use alternative text descriptions for each of your graphics. Accessible Web Design Resources:  Accessible Web Design Resources The Adaptive Computing Technology (ACT) Center on the University of Missouri campus provides the following website that offers many resources addressing the issues of accessible Web design: http://iatservices.missouri.edu/adaptive/webdesign.html Common HTML Tags:  Common HTML Tags Netscape Presentation of Common HTML Tags:  Netscape Presentation of Common HTML Tags Remember: View your pages with as many browsers as possible. Why?:  Remember: View your pages with as many browsers as possible. Why? Tricks of the Trade:  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 that you want to use, contact the author of the page and ask them for permission. Be sure to honor copyright laws. Examples of Bad Design:  Examples of Bad Design http://www.useit.com/alertbox/9605.html http://www.webpagesthatsuck.com Examples of Good Design :  Examples of Good Design http://www.columbia.k12.mo.us/mwe/ http://schoolweb.missouri.edu/ http://services.dese.state.mo.us http://www.gsh.org

Related presentations


Other presentations created by Noemie

Different Types of Vegetables
04. 03. 2008
0 views

Different Types of Vegetables

Farming and Populism
07. 12. 2007
0 views

Farming and Populism

The Second World War I
13. 04. 2008
0 views

The Second World War I

KDS
07. 04. 2008
0 views

KDS

ace presentation
30. 03. 2008
0 views

ace presentation

Lenn 2004
27. 03. 2008
0 views

Lenn 2004

Romanian NGOs
21. 03. 2008
0 views

Romanian NGOs

1418752i2camnov102005
14. 03. 2008
0 views

1418752i2camnov102005

IBEC Presentation v4
12. 03. 2008
0 views

IBEC Presentation v4

Prato2005
11. 03. 2008
0 views

Prato2005

RLESSON27
06. 03. 2008
0 views

RLESSON27

Treatment Technologies
09. 11. 2007
0 views

Treatment Technologies

IDS11 Overview v2
28. 11. 2007
0 views

IDS11 Overview v2

Jumpingmicetodogs
16. 11. 2007
0 views

Jumpingmicetodogs

Animal Habitats
19. 11. 2007
0 views

Animal Habitats

itsissejuhatus
20. 11. 2007
0 views

itsissejuhatus

bojilove
26. 11. 2007
0 views

bojilove

Biology Chapter 24 Notes
31. 12. 2007
0 views

Biology Chapter 24 Notes

Drexel IEEE
03. 01. 2008
0 views

Drexel IEEE

44xyvmlh
27. 09. 2007
0 views

44xyvmlh

Astr115 chS1 Sept17
14. 11. 2007
0 views

Astr115 chS1 Sept17

search metadata ia
03. 12. 2007
0 views

search metadata ia

Bee Food
03. 10. 2007
0 views

Bee Food

week4
24. 02. 2008
0 views

week4

comparisonofAlfalfaN credits
04. 10. 2007
0 views

comparisonofAlfalfaN credits

ColonelJan18
28. 02. 2008
0 views

ColonelJan18

Janus
07. 01. 2008
0 views

Janus

PowerPointB8 Cold War
23. 12. 2007
0 views

PowerPointB8 Cold War

5936
03. 01. 2008
0 views

5936

rpt 75 one kureishi
19. 02. 2008
0 views

rpt 75 one kureishi

Rev SWRR Present
29. 12. 2007
0 views

Rev SWRR Present

cs638 12
03. 01. 2008
0 views

cs638 12

naito
21. 11. 2007
0 views

naito