ch11 slides

37
Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martin's 1 Document and Web design has five goals: to make a good impression on readers to help readers understand the structure and hierarchy of the information to help readers find the information they need to help readers understand the information to help readers remember the information

Upload: suny-ulster

Post on 01-Nov-2014

58 views

Category:

Technology


0 download

DESCRIPTION

Prof. WozencraftENG227

TRANSCRIPT

  • 1. Document and Web design has five goals: to make a good impression on readers to help readers understand the structure andhierarchy of the information to help readers find the information they need to help readers understand the information to help readers remember the information Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 1

2. There are four principles of design: proximity alignment repetition contrast Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 2 3. Proximity organizes this image: Source: U.S. Department of State, 2011 .Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins3 4. Alignment organizes this image: Source: Carnegie Science Center, n.d.Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 4 5. Repetition organizes this image:Source: Myers, 2007, p. 362.Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 5 6. Contrast clarifies this image: Source: Lambert Coffin, 2010 .Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 6 7. To plan a design, take these two steps: Analyze your audience and purpose. Determine your resources. Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 7 8. For multicultural readers, consider four cultural preferences: paper size typeface preferences color preferences text direction Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 8 9. Determine your resources: Time. What is your schedule? Money. Can you afford professionaldesigners, print shops, and Web developers? Equipment. Do you have graphics software,desktop-publishing programs, and a printer? Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 9 10. Consider these four elements when designing documents: size (page size and page count) paper bindings accessing aidsChapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 10 11. Select one of four common types of binding: loose-leaf binders ring or spiral binders saddle binding perfect binding Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 11 12. Consider using six typical accessing aids: icons color dividers and tabs cross-reference tables headers and footers page numbering Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 12 13. Understand how learningtheory relates to page design: chunking queuing filtering Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 13 14. Use two elements to create your page layout: page grids white space Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 14 15. Margins have four purposes: to limit the amount of information on the page,making the document easier to read and use to provide space for binding and allow readersto hold the page without covering up the text to provide a neat frame around the type to provide space for marginal glossesChapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 15 16. A document bound like a book has these margins:Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 16 17. A multicolumn designoffers three advantages: Text is easier to read because the lines areshorter. Columns allow you to fit more information onthe page. Columns let you use the principle of repetitionto create a visual pattern. Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 17 18. Typography includes seven topics: typefaces type families case type size line length line spacing justification Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 18 19. Different typefacesmake different impressions:This paragraph is typed in Monotype Corsiva typeface. You are unlikelyto see this style of font in a technical document because it is too ornateand too hard to read.This paragraph is Times Roman, an effective typeface for textin the body of technical documents.This paragraph is Tahoma, which has a modern, high-tech look. It is best suited for headings and titles intechnical documents. Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 19 20. Two main categories of typefacesare serif and sans serif:N Nserif sans serifChapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 20 21. A type family includes many variations:Some of the members of the Helvetica family:HelveticaHelvetica BoldHelvetica Bold ItalicHelvetica NarrowHelvetica Narrow BoldHelvetica Narrow Bold Italic Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 21 22. Case affects readability:Lowercase letters are easier to read:Individual variations are greater in lowercase wordsTHAN THEY ARE IN UPPERCASE WORDS.Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 22 23. Different functions call for different type sizes:footnotes8- or 9-point typebody text10-, 11-, or 12-point typeheadings 2 to 4 points larger than body textindexes2 points smaller than body texttitles 18 or 24 pointsslides 24- to 36-point type Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 23 24. Use line spacing carefully when designing headings:SummaryIn this example, the writer has skipped a line betweenthe heading and the text that follows it.SummaryIn this example, the writer has not skipped a line. Theheading stands out, but not as emphatically.Summary. This run-in style makes the heading standout the least.Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 24 25. Use other design featuresfor clarity and emphasis: rules boxes screens marginal glosses pull quotes Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 25 26. These six principles will help youdesign effective Web sites and pages: Create informative headers and footers. Help readers navigate the site. Include extra features readers might need. Help readers connect with others. Design for readers with disabilities. Design for multicultural readers. Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 26 27. Follow these five guidelines formaking your site easy to navigate: Include a site map or index. Use a table of contents at the top of longpages. Help readers get back to the top of longpages. Include a link to the home page on everypage. Include textual navigational links at the bottomof the page.Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 27 28. This is a typical site map: Source: National Institutes of Health, 2010 .Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 28 29. This is a typical table of contents:Source: U.S. Copyright Office, 2010 .Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 29 30. Include extra features your readers might need: an FAQ a search page or engine resource links a printable version of your site a text-only version of your site Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 30 31. Consider these three types of disabilities: vision impairment hearing impairment mobility impairment Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 31 32. Follow these three suggestionswhen designing for multicultural audiences: Use common words and short sentences and paragraphs. Avoid idioms, both verbal and visual, that might be confusing. If a large percentage of your readers speak a language other than English, consider creating a version of your site in that language.Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 32 33. Follow these four guidelinesfor designing a simple site: Use simple backgrounds. Use conservative color combinations toincrease text legibility. Avoid decorative graphics. Use thumbnail graphics. Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 33 34. Follow these three suggestionsto make text easy to read: Keep the text short. Chunk information. Make the text as simple as possible. Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 34 35. Follow these three suggestionsto write clear, informative links: Structure your sentences as if there were nolinks in your text. Indicate what information the linked pagecontains. Use standard colors for text links. Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 35 36. This is an effective page design: Source: Gorzalka, 2011 .Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 36 37. This is an effective page design:Source: Tumblr, 2011 .Chapter 11. Designing Documents and Web Sites 2012 by Bedford/St. Martins 37