Principles of Good Web Page Design

Please download to get full document.

View again

of 25
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information Report



Views: 7 | Pages: 25

Extension: PDF | Download: 0

Related documents
Download Principles of Good Web Page Design
  • 1. Principles of Good Web Page Design 4.02 Develop web pages using various layouts and technologies.
  • 2. Text Editor vs. Web Editor <ul><li>Text editor </li></ul><ul><ul><li>Creates a simple text document </li></ul></ul><ul><ul><li>Used to create web pages using HTML tags </li></ul></ul><ul><ul><li>Each page created individually </li></ul></ul><ul><li>Web editor </li></ul><ul><ul><li>User defines and manages a web site, and creates pages using toolbars and menus via a GUI. </li></ul></ul><ul><ul><li>User can enter HTML code, use templates, and troubleshoot links and other code errors. </li></ul></ul>
  • 3. Web Page Design vs. Print Document Design <ul><li>Many design principles apply to both web pages and print documents. </li></ul><ul><li>Apply a few fundamental principles to every web page created . </li></ul>
  • 4. Web Page Design vs. Print Document Design <ul><li>Always list the author of the page. </li></ul><ul><li>Establishes legitimacy of the information </li></ul><ul><li>Use clear titles to capture the reader’s attention. </li></ul><ul><li>Include text of the title used in “bookmark” in case reader adds page to a personal list of URLs. </li></ul><ul><li>Date every web page. </li></ul><ul><li>Change date when page is updated. </li></ul><ul><li>Incorporate the “home” URL on at least the main pages of the site. </li></ul><ul><li>Provides connection back to where a page originated </li></ul>WHO? WHAT? WHEN? WHERE?
  • 5. Overall Page Layout <ul><li>Create a visual hierarchy of information. </li></ul><ul><ul><li>Most important items toward the top! </li></ul></ul><ul><li>Be consistent in all design elements used on all pages —fonts, colors, graphic size and location, alignment, and backgrounds. </li></ul><ul><li>Use headers/footers. </li></ul><ul><ul><li>Headers identify site and may contain “signature” graphics. </li></ul></ul><ul><ul><li>Footers should contain basic data about the origin and age of the page. </li></ul></ul><ul><ul><li>Footers can offer a set of links to other pages. </li></ul></ul><ul><li>Use moderate white space. </li></ul><ul><ul><li>Consider the reader’s need to scan the information. </li></ul></ul><ul><ul><li>Prevent scrolling </li></ul></ul>
  • 6. The Home/Index Page <ul><li>Creates positive first impression of site </li></ul><ul><li>Communicates purpose of the web site </li></ul><ul><li>Include: </li></ul><ul><ul><li>Masthead with tagline </li></ul></ul><ul><ul><li>Category links </li></ul></ul><ul><ul><li>Site maps </li></ul></ul><ul><ul><li>Search capabilities </li></ul></ul>
  • 7. The Home/Index Page —continued <ul><li>Limit to one screen of information. </li></ul><ul><li>Limit amount of prose text on home page. </li></ul><ul><li>Show all major options on home page. </li></ul><ul><li>Enable access to home page from any other page on the web site. </li></ul><ul><li>Announce changes to the web site on home page. </li></ul>
  • 8. Using Color <ul><li>Color schemes </li></ul><ul><ul><li>Use contrasting colors for background and text. </li></ul></ul><ul><ul><ul><li>Light text on dark background OR </li></ul></ul></ul><ul><ul><ul><li>Dark text on light background </li></ul></ul></ul><ul><ul><ul><li>Improves readability </li></ul></ul></ul><ul><li>Web safe colors </li></ul><ul><ul><li>Every browser can display </li></ul></ul><ul><ul><li>216 web safe colors available </li></ul></ul><ul><ul><li>Uses hexadecimal system (16 characters) </li></ul></ul><ul><ul><ul><li>#FFFFFF is white </li></ul></ul></ul><ul><ul><ul><li>#0000FF is blue </li></ul></ul></ul><ul><ul><ul><li>#000000 is black </li></ul></ul></ul>
  • 9. Text Issues <ul><li>Cascading Style Sheets </li></ul><ul><ul><li>Consistency </li></ul></ul><ul><ul><li>Increase editing speed </li></ul></ul><ul><ul><ul><li>Change settings of the style once to update all documents using that style </li></ul></ul></ul><ul><ul><li>Similar to styles in word processor </li></ul></ul><ul><li>Consider the intent of the site and the target audience when selecting: </li></ul><ul><li>Typefaces </li></ul><ul><li>Size </li></ul><ul><li>Alignment </li></ul><ul><li>Line length </li></ul><ul><li>Paragraphs </li></ul><ul><li>Type as a graphic </li></ul>
  • 10. Text Issues—Typefaces <ul><li>Use fonts designed for on-screen viewing: </li></ul><ul><ul><li>Georgia </li></ul></ul><ul><ul><li>Verdana </li></ul></ul><ul><li>Small serif font for body text </li></ul><ul><li>Sans serif for headlines </li></ul><ul><li>Use “font-family” property in styles to specify typeface. </li></ul>
  • 11. Text Issues– Size <ul><ul><li>Display resolutions and operating systems vary. </li></ul></ul><ul><ul><ul><li>12 point on one machine may display as 14 point on another. </li></ul></ul></ul><ul><ul><li>Windows web browsers typically display type that is 2 to 3 points larger than a Macintosh. </li></ul></ul>
  • 12. Text Issues—Alignment <ul><ul><li>Left justified text is the most legible option for web pages. </li></ul></ul><ul><ul><ul><li>Left margin is even and predictable. </li></ul></ul></ul><ul><ul><ul><li>Ragged right margin will not interfere with legibility. </li></ul></ul></ul><ul><ul><li>Justified text is not recommended for use in web pages. </li></ul></ul><ul><ul><ul><li>P oor spacing </li></ul></ul></ul><ul><ul><ul><li>Excessive hyphenation </li></ul></ul></ul><ul><ul><li>Centered and right justified text are not recommended. </li></ul></ul><ul><ul><ul><li>Scanning more difficult </li></ul></ul></ul><ul><ul><ul><li>Ragged left margins make scanning extremely difficult </li></ul></ul></ul>
  • 13. Text Issues (Continued) <ul><li>Use indents or a blank line to indicate a new paragraph. </li></ul><ul><ul><li>Use paragraph tag <p> in html to leave a blank line. </li></ul></ul><ul><ul><li>Use non-breaking spaces (&nbsp) to indent. </li></ul></ul>
  • 14. Text Issues—General Guidelines <ul><li>Use initial caps for headlines and headings. </li></ul><ul><li>Use sentence case for body text. </li></ul><ul><ul><li>All caps are difficult to read. </li></ul></ul><ul><li>Use italics to stress foreign words or phrases or to list book and periodical titles. </li></ul><ul><li>Use bold to emphasize headings. </li></ul><ul><ul><li>Don’t overuse a—it will lose the effect of adding emphasis. </li></ul></ul><ul><li>Do not use underlining —it implies a hyperlink. </li></ul><ul><li>Indicate to users when a link will move them to a page on a different web site. </li></ul><ul><ul><li>Add URL below the link </li></ul></ul><ul><ul><li>Add an exit disclaimer </li></ul></ul><ul><ul><li>Add an interim page warning the user that they are leaving your site and requiring them to click an additional link to leave your site. </li></ul></ul>
  • 15. Text Issues (Continued) <ul><li>Text as a Graphic </li></ul><ul><ul><li>Use for banners, navigational graphics. </li></ul></ul><ul><ul><li>Pure graphic type cannot be searched and indexed. </li></ul></ul><ul><ul><li>Avoid using text as a graphic for headings, subheadings and body text. </li></ul></ul>This text is really a graphic. Note that a rollover or gloss provides pop-up text .
  • 16. Headings and Titles <ul><li>Use headings that are unique from one another, descriptive and relate to the content they introduce. </li></ul><ul><li>Use headings in the appropriate HTML order. </li></ul><ul><ul><li>Helps users get a sense of hierarchy of information on the page </li></ul></ul><ul><ul><li>Also helps users of assistive technologies understand the level of importance of information </li></ul></ul><ul><li>Use a descriptive, unique, concise, and meaningful title on each web page. </li></ul><ul><ul><li>Titles are viewable on the browser title bar. </li></ul></ul><ul><ul><li>Titles are used by search engines to identify pages and are listed on the results page. </li></ul></ul>
  • 17. Lists <ul><li>Display a series of related items in a list. </li></ul><ul><li>Provide a descriptive heading for the list. </li></ul><ul><li>Make lists easy to scan and understand— </li></ul><ul><ul><li>Meaningful labels, effective colors, borders, and white space </li></ul></ul><ul><li>Capitalize first letter and first word in lists. </li></ul><ul><li>Bullets/Unordered List <ul> for items of equal status or value </li></ul><ul><ul><li>Place important or most commonly used items at top if not using alphabetic or numeric order. </li></ul></ul><ul><li>Numbered/Ordered List <ol> for items where a particular order exists </li></ul><ul><ul><li>Organize alphabetically or numerically in most cases. </li></ul></ul><ul><ul><li>Start numbered items at 1 rather than 0. </li></ul></ul>
  • 18. Graphics on the Web <ul><li>Use video, animation, and audio only when they help convey or support the web site’s content. </li></ul><ul><li>Place the organization’s logo in a consistent place on every page. </li></ul><ul><li>Limit large images above the fold (the first screen length). </li></ul><ul><li>Use images that add value and increase the clarity of the information on the site. </li></ul>
  • 19. Graphics on the Web (Continued) <ul><li>Ensure that images do not slow the download process. </li></ul><ul><ul><li>Use several small images rather than a large single image. </li></ul></ul><ul><ul><li>Include height and weight pixel dimension attributes in the image tag. </li></ul></ul><ul><ul><ul><li>Allows layout of page to continue during download—text will fill in and space will be saved for graphics to “pour” into the reserved spaces. </li></ul></ul></ul><ul><ul><li>Use thumbnails to preview larger images. </li></ul></ul><ul><li>Use simple background images. </li></ul><ul><ul><li>Keep resolution as low as possible. </li></ul></ul><ul><ul><ul><li>Can make text difficult to read </li></ul></ul></ul><ul><ul><li>Consider color backgrounds </li></ul></ul><ul><ul><ul><li>Offer a “zero bandwidth” way to change the look of pages without adding graphics </li></ul></ul></ul>
  • 20. Multimedia <ul><li>Overall considerations: </li></ul><ul><ul><li>Plug-in requirements on the user’s machine help determine best file format. </li></ul></ul><ul><ul><li>Provide controls so that users can stop, start, play, and adjust volume. </li></ul></ul><ul><ul><li>Embedded media can make total page file size very large and slow the download process. </li></ul></ul><ul><li>Tags </li></ul><ul><ul><li>Use object or embedded tags to include multimedia elements in page. </li></ul></ul><ul><ul><li>Use anchor tags and href attributes to link to video. </li></ul></ul><ul><ul><li>Use combinations of anchor and image tags to link to video. </li></ul></ul><ul><li>Also consider the including: </li></ul><ul><li>Audio </li></ul><ul><li>Slide shows </li></ul><ul><li>Animation </li></ul><ul><li>Video </li></ul>
  • 21. Multimedia (Continued) <ul><li>Audio </li></ul><ul><li>Effective, low bandwidth solution to enhancing web site </li></ul><ul><li>Does not have the file size and bandwidth issues of video </li></ul><ul><li>Slide shows </li></ul><ul><li>Use when image quality is a top priority. </li></ul><ul><li>Smaller file size than most video so storage and bandwidth are optimized. </li></ul><ul><li>Combine with audio for additional emphasis. </li></ul>
  • 22. Multimedia (Continued) <ul><li>Animation </li></ul><ul><li>GIF format </li></ul><ul><ul><li>Doesn’t require special plug-in </li></ul></ul><ul><ul><li>Has no interface control. </li></ul></ul><ul><li>Flash becoming dominant animation format. </li></ul><ul><li>Video </li></ul><ul><li>Most challenging multimedia content to deliver via the Web. </li></ul><ul><ul><li>Large file sizes </li></ul></ul><ul><ul><li>Storage and download speed major concerns. </li></ul></ul>
  • 23. Writing Web Content <ul><li>Define acronyms and abbreviations. </li></ul><ul><li>Use abbreviations sparingly. </li></ul><ul><li>Avoid jargon. </li></ul><ul><li>Use familiar words. </li></ul><ul><li>Make first sentences descriptive. </li></ul><ul><li>Use active voice. </li></ul><ul><ul><li>“ John hit the baseball.” rather than “The baseball was hit by John.” </li></ul></ul><ul><li>Minimize the number of words in sentences and the number of sentences in paragraphs. </li></ul><ul><ul><li>Sentence: 20 words </li></ul></ul><ul><ul><li>Paragraph: 6 sentences </li></ul></ul>
  • 24. Accessibility Issues <ul><li>Section 508 of the Rehabilitation Act </li></ul><ul><ul><li>All US government web sites must meet the needs of all users including people with disabilities. </li></ul></ul><ul><ul><li>About 8% of all users have a disability that makes using a traditional web site very difficult or impossible. </li></ul></ul><ul><ul><ul><li>Vision-related, movement-related, hearing-related and learning-related are the most common. </li></ul></ul></ul>
  • 25. Accessibility Issues —continued <ul><li>Provide text equivalent for non-text elements. </li></ul><ul><li>Ensure that all information conveyed in color is also available without color. </li></ul><ul><li>Provide text only pages that are useful for screen readers. </li></ul><ul><li>Provide equivalent alternatives for multimedia elements that are synchronized: </li></ul><ul><ul><li>A text caption or auditory description of the visual track with the presentation </li></ul></ul><ul><li>Do not require style sheets . </li></ul>
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks