Ch11 slides

1,505 views

Published on

Prof. Wozencraft
ENG227

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,505
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ch11 slides

  1. 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 Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 1
  2. 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. 3. Proximity organizes this image: Source: U.S. Department of State, 2011 <http://future.state.gov>.Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 3
  4. 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. 5. Repetition organizes this image: Source: Myers, 2007, p. 362.Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 5
  6. 6. Contrast clarifies this image: Source: Lambert Coffin, 2010 <www.lambertcoffin.com/index.php?sid=2>.Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 6
  7. 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. 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. 9. Determine your resources:• Time. What is your schedule?• Money. Can you afford professional designers, 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. 10. Consider these four elements when designing documents:• size (page size and page count)• paper• bindings• accessing aids Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 10
  11. 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. 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. 13. Understand how learning theory relates to page design:• chunking• queuing• filtering Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 13
  14. 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. 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 readers to hold the page without covering up the text• to provide a neat frame around the type• to provide space for marginal glosses Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 15
  16. 16. A document bound like a book has these margins:Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 16
  17. 17. A multicolumn design offers three advantages:• Text is easier to read because the lines are shorter.• Columns allow you to fit more information on the page.• Columns let you use the principle of repetition to create a visual pattern. Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 17
  18. 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. 19. Different typefaces make 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. 20. Two main categories of typefaces are serif and sans serif: N N serif sans serifChapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 20
  21. 21. A type family includes many variations:Some of the members of the Helvetica family: Helvetica Helvetica Bold Helvetica Bold Italic Helvetica Narrow Helvetica Narrow Bold Helvetica Narrow Bold Italic Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 21
  22. 22. Case affects readability:Lowercase letters are easier to read: Individual variations are greater in lowercase words THAN THEY ARE IN UPPERCASE WORDS. Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 22
  23. 23. Different functions call for different type sizes:footnotes 8- or 9-point typebody text 10-, 11-, or 12-point typeheadings 2 to 4 points larger than body textindexes 2 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. 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. 25. Use other design features for clarity and emphasis:• rules• boxes• screens• marginal glosses• pull quotes Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 25
  26. 26. These six principles will help you design 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. 27. Follow these five guidelines for making your site easy to navigate:• Include a site map or index.• Use a table of contents at the top of long pages.• Help readers get back to the top of long pages.• Include a link to the home page on every page.• Include textual navigational links at the bottom of the page. Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 27
  28. 28. This is a typical site map: Source: National Institutes of Health, 2010 <www.genome.gov/sitemap.cfm>.Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 28
  29. 29. This is a typical table of contents: Source: U.S. Copyright Office, 2010 <www.copyright.gov/help/faq>.Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 29
  30. 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. 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. 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. 33. Follow these four guidelines for designing a simple site:• Use simple backgrounds.• Use conservative color combinations to increase text legibility.• Avoid decorative graphics.• Use thumbnail graphics. Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 33
  34. 34. Follow these three suggestions to 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. 35. Follow these three suggestions to write clear, informative links:• Structure your sentences as if there were no links in your text.• Indicate what information the linked page contains.• Use standard colors for text links. Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 35
  36. 36. This is an effective page design: Source: Gorzalka, 2011 <http://clearideaz.com>.Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 36
  37. 37. This is an effective page design: Source: Tumblr, 2011 <www.tumblr.com/about>.Chapter 11. Designing Documents and Web Sites © 2012 by Bedford/St. Martins 37

×