Document and Web design has five goals:

Transcription

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 2010 by Bedford/St. Martin's 1

2 Understand four principles of design: proximity alignment repetition contrast Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 2

3 Proximity organizes this image: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 3

4 Alignment organizes this image: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 4

5 Repetition organizes this image: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 5

6 Contrast clarifies this image: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 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 2010 by Bedford/St. Martin's 7

8 For multicultural readers, consider four cultural preferences: paper sizes typeface preferences color preferences text direction Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 8

9 Determine your resources Time. What is your schedule? Money. Can you afford professional designers and print shops? Equipment. Complex designs require graphics software and desktop-publishing programs. Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 9

10 Consider these four elements in designing documents: size (page size and page count) paper binding accessing tools Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 10

11 Select one of four common types of bindings: loose-leaf binders ring or spiral binders saddle binding perfect binding Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 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 2010 by Bedford/St. Martin's 12

13 Understand how learning theory relates to page design: chunking queuing filtering Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 13

14 Margins have four purposes: to limit the amount of information on the page, making it 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 2010 by Bedford/St. Martin's 14

15 A document bound like a book has these proportions: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 15

16 A multicolumn design can have 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 2010 by Bedford/St. Martin's 16

17 Typography includes seven topics: typefaces families case sizes line spacing line length justification Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 17

18 Different typefaces make different impressions: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 18

19 Two main categories of typefaces are serif and sans-serif N serif N sans-serif Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 19

20 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 2010 by Bedford/St. Martin's 20

21 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 2010 by Bedford/St. Martin's 21

22 Different functions call for different type sizes: footnotes body text headings indexes titles slides 8- or 9-point type 10-, 11-, or 12-point 2 to 4 points larger than body text 2 points smaller than body text 18 or 24 points 24- to 36-point type Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 22

23 Summary Use line spacing carefully in designing headings In this example, the writer has skipped a line between the heading and the text that follows it. Summary In this example, the writer has not skipped a line. The heading stands out, but not as emphatically. Summary. This run-in style makes the heading stand out the least. Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 23

24 Use other design features for clarity and emphasis: rules boxes screens marginal glosses pull quotes Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 24

25 Use these five principles in designing effective Web sites and pages: Create informative headers and footers. Help visitors navigate the site. Create extra features readers might need. Design for readers with disabilities. Design for a multicultural audience. Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 25

26 Use 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 visitors 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 2010 by Bedford/St. Martin's 26

27 This is a typical site map: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 27

28 This is a typical table of contents: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 28

29 Consider these three types of disabilities: vision impairment hearing impairment mobility impairment Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 29

30 Follow these three suggestions when writing for multicultural audiences: Use short sentences and paragraphs. Avoid idioms, both verbal and visual, that might be confusing. If a large percentage of your visitors speak a language other than English, consider creating a version of your site in that language. Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 30

31 Use these four guidelines to design 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 2010 by Bedford/St. Martin's 31

32 Follow these three guidelines to make the text easy to read: Keep the text short. Chunk the text. Make the text as simple as possible. Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 32

33 Follow these three guidelines for writing clear, informative links: Structure your sentences as if there were no links in your text. Indicate what information the linked page contains. Don t change the colors of the text links. Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 33

34 This is an effective page design: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 34

35 This is an effective page design: Chapter 11. Designing Documents and Web Sites 2010 by Bedford/St. Martin's 35