1. 5/5/2015 Designing Visual Language-Chapter 10 1 Notes to Chapter Ten English 308

2. 5/5/2015 Designing Visual Language-Chapter 10 2 Supra-Level Elements Supra-level design Coordinates and unifies all of the elements of a document Is an important part of all documents—print, or electronic

3. 5/5/2015 Designing Visual Language-Chapter 10 3 Supra-level Design Focuses on improving the usability of documents The paper size, orientation and shape of a document is a supra-level choice The use of consistent graphic elements, pictures, symbols and icons are supra-level choices The use of headers and footers, bleed and die-cut tabs, field borders and many other choices are supra-level and all have a significant impact on the usability of the document

4. 5/5/2015 Designing Visual Language-Chapter 10 4 Supra-level Cohesion Supra-level design choices might be used to unify not just a single document, but a whole series of documents Consistent design creates a common “look and feel” to the documents, making them easier to use Some examples of such consistent design include web sites where the pages share a common navigation interface, telephone directories where information is located in approximately the same location regardless of location, and a published series of textbooks which share a common look and feel

5. 5/5/2015 Designing Visual Language-Chapter 10 5 Conventions of Supra-level Design—Textual Elements Textual elements frequently mark the beginning of new sections and are used to create cohesion across text fields For example

6. 5/5/2015 Designing Visual Language-Chapter 10 6 Supra-textual Elements Titles on cover pages initiate a document Section headings mark major boundaries within a document Initial letters tell readers where to start on a given page Tabs provide access points in longer documents Navigational bars give users access to pages in a web site Headers and footers tie together pages or screens within a section Background text and watermarks link pages

7. 5/5/2015 Designing Visual Language-Chapter 10 7 Textual Conventions Supra-textual elements often conform to accepted conventions—in fact, over time these conventions create a consistent look and feel for a company’s or organization’s documents These conventional supra-textual elements might be very rigid

8. 5/5/2015 Designing Visual Language-Chapter 10 8 Textual Conventions Formal Reports  Formal reports have title pages, often section title pages, and page headers or footers  Web sites also have title (home) pages that introduce or provide links to a series of screens.

9. 5/5/2015 Designing Visual Language-Chapter 10 9 Textual Conventions Training Materials  Training materials often use tab headings to increase access; catalogs use internal tabs  Web sites use various kinds of navigational buttons for links

10. 5/5/2015 Designing Visual Language-Chapter 10 10 Textual Conventions Newsletters  Use initial letters (or drop caps) to start articles  Web sites might also use initial letters T his is an example of using initial letters to mark the beginning of an article. A variation of this device is the drop initial cap which is shown in the text box to the right. T his is an example of using a drop initial cap to mark the beginning of an article. It is a variation of the initial cap which is shown in the text box to the left.

11. 5/5/2015 Designing Visual Language-Chapter 10 11 Textual Conventions Official Documents  Often have faint text, watermark text, or embossed text embedded in the pages  Web sites often make use of watermark backgrounds, but such backgrounds can be found on a broad range of documents This certificate honors the recipient as most outstanding student in English Writing 401

12. 5/5/2015 Designing Visual Language-Chapter 10 12 Conventions of Supra-level Design—Spatial Elements Spatial decisions include The size, shape, orientation of the page and the document How the document is physically contained (i.e. within a jacket, folder, pouch, binder, or laminated cover) The paper stock, or print or display surface

13. 5/5/2015 Designing Visual Language-Chapter 10 13 Supra-Spatial Vocabulary Paper documents come in many sizes Portrait pages are oriented with the long sides at the sides Landscape pages are oriented with the long sides at the top and bottom Folded pages are usually folded in the middle Tri-fold pages are folded in three sections and usually only consist of a single page

14. 5/5/2015 Designing Visual Language-Chapter 10 14 Supra-Spatial Vocabulary Paper documents come in many shapes They might be die-cut (by a printer) to have a shape other than rectangular They might be punched such as a door-knob hanger They might have cut out shapes so that readers can see text on an inside page They might hold other documents in folds, pouches or pockets They might be perforated for easy tearing

15. 5/5/2015 Designing Visual Language-Chapter 10 15 Supra-Spatial Vocabulary Paper documents come in many textures They might be printed on thin photocopy- quality paper (20 lbs stock) They might be printed on heavier “rag” stock (24 lbs. and up) They might be printed on heavy cardstock (60 lbs and up) They might be laminated

16. 5/5/2015 Designing Visual Language-Chapter 10 16 Supra-Spatial Design In an electronic medium the screen is a window

17. 5/5/2015 Designing Visual Language-Chapter 10 17 Supra-Spatial Design In an electronic medium the screen is a window

18. 5/5/2015 Designing Visual Language-Chapter 10 18 Supra-Spatial Design In an electronic medium the screen is a window

19. 5/5/2015 Designing Visual Language-Chapter 10 19 Supra-Spatial Design In an electronic medium the screen is a window

20. 5/5/2015 Designing Visual Language-Chapter 10 20 Supra-Spatial Design In an electronic medium the screen is a window

21. 5/5/2015 Designing Visual Language-Chapter 10 21 Supra-Spatial Design In an electronic medium the screen is a window

22. 5/5/2015 Designing Visual Language-Chapter 10 22 Supra-spatial Convention Often tied to storage, retrieval and transport systems For print documents, that means envelopes, three-ring binders, folders and so on For web pages, that means the width and resolution of standard display devices

23. 5/5/2015 Designing Visual Language-Chapter 10 23 Conventions of Supra-level Design—Graphic Elements Graphic elements Provide boundaries between text sections Give the document cohesion Express a theme or mood

24. 5/5/2015 Designing Visual Language-Chapter 10 24 Supra-Graphic Vocabulary Graphic elements give the document shape and structure They include lines or shading in page headers or footers or in the margins of fields, or shading that bleeds to the edge of the page They include borders, icons or shading or color that ties textual elements together They include data display frames or shading They include the background color of a page or screen as well as watermarks or images placed behind the text

25. 5/5/2015 Designing Visual Language-Chapter 10 25 Applying the Cognate Strategies How do we apply this rich visual vocabulary to document design? We can do so by considering the six cognate strategies.

26. 5/5/2015 Designing Visual Language-Chapter 10 26 Arrangement Questions How can I structure the document so readers easily access information? How can I use supra-level design to enhance the document’s usability?

27. 5/5/2015 Designing Visual Language-Chapter 10 27 Arrangement Strategies Create visual patterns that Give readers a quick map of the document by identifying the key units and subunits Create cohesion among the units and subunits by bonding them visually

28. 5/5/2015 Designing Visual Language-Chapter 10 28 7 4 Arrangement Strategies Supra-textual elements that create structure and cohesion Title Section 1 1 1 Section 2 2 5 2 3 6 8

29. 5/5/2015 Designing Visual Language-Chapter 10 29 Arrangement Strategies Supra-textual elements that create structure and cohesion     

30. 5/5/2015 Designing Visual Language-Chapter 10 30 Arrangement Strategies Consistent arrangement of text and pictures to signal new sections

31. 5/5/2015 Designing Visual Language-Chapter 10 31 Arrangement Strategies Cascading pages for usability Medical WaiverHistoryPersonal InformationIntroduction

32. 5/5/2015 Designing Visual Language-Chapter 10 32 Emphasis Questions Which aspects of the document do I want readers to notice when they encounter the document, however long and complex? How can I get readers to notice these elements?

33. 5/5/2015 Designing Visual Language-Chapter 10 33 Emphasis Strategies In textual mode, title pages, chapter and section titles, numbers and tab labels all signal major breaks in the document In the graphic mode, the color or texture of a page, graphic cues for section breaks or for alerting readers to important information are all emphasis strategies  In web design graphic cues for emphasis can be quite dramatic and must be used sparingly In the spatial mode, the most common emphasis strategy is altering the size and shape of pages

34. 5/5/2015 Designing Visual Language-Chapter 10 34 Emphasis Strategies Textual elements can create emphasis Section Title Heading

35. 5/5/2015 Designing Visual Language-Chapter 10 35 Emphasis Strategies Tabs—another emphasis strategy abc def

36. 5/5/2015 Designing Visual Language-Chapter 10 36 Emphasis Strategies Graphic cues that provide emphasis Chapter

37. 5/5/2015 Designing Visual Language-Chapter 10 37 Emphasis Strategies Spatial changes for emphasis

38. 5/5/2015 Designing Visual Language-Chapter 10 38 Clarity Questions How can I use supra-level design to signal the function of the document, its genre, its structure, or its points of access? How can I use supra-level design to make the document durable?

39. 5/5/2015 Designing Visual Language-Chapter 10 39 Clarity Strategies Supra-level elements enhance clarity by Signaling the document’s purpose Making its structure transparent Giving users access to its information Making that information durable

40. 5/5/2015 Designing Visual Language-Chapter 10 40 Clarity Strategies: Purpose Supra-level design Gives readers clues about the type of document they’re looking at Orients them to a basic purpose Can camouflage purpose deliberately (as in sales materials)

41. 5/5/2015 Designing Visual Language-Chapter 10 41 Clarity Strategies: Structure Top-down understanding of the document’s structure

42. 5/5/2015 Designing Visual Language-Chapter 10 42 Clarity Strategies: Access Providing quick access to parts is a clarity strategy Benefits Travel Pensions

43. 5/5/2015 Designing Visual Language-Chapter 10 43 Conciseness Questions How can I get the most impact for the least use of design elements? How can I avoid over-designing the document, making it look cumbersome or confusing?

44. 5/5/2015 Designing Visual Language-Chapter 10 44 Conciseness Strategies Because supra-level design is so conspicuous, its excesses are usually easy to spot  Overkill in print drives up production costs and can make a document unusable  Overkill in web documents can drive users away (complex pages take longer to load, are more subject to error, and might simple annoy users

45. 5/5/2015 Designing Visual Language-Chapter 10 45 Tone Questions How do I want supra-level design to come across to my readers? Serious, friendly, authoritative, formal, informal, technical, low-key, humorous, eloquent, breezy?

46. 5/5/2015 Designing Visual Language-Chapter 10 46 Tone Strategies Supra-level elements immediately give documents a voice. The question, though, remains: is it the right voice?

47. 5/5/2015 Designing Visual Language-Chapter 10 47 Tone Strategies

48. 5/5/2015 Designing Visual Language-Chapter 10 48 Tone Strategies

49. 5/5/2015 Designing Visual Language-Chapter 10 49 Tone Strategies

50. 5/5/2015 Designing Visual Language-Chapter 10 50 Tone Strategies

51. 5/5/2015 Designing Visual Language-Chapter 10 51 Tone Strategies

52. 5/5/2015 Designing Visual Language-Chapter 10 52 Ethos Questions How can I use supra-level design to create credibility for me, the other authors, or the organization? How can I make supra-level design look professional?

53. 5/5/2015 Designing Visual Language-Chapter 10 53 Ethos Strategies Supra-level design can strongly influence whether readers believe that a document speaks honestly or whether its authors are competent enough to be trusted. As the earlier web site examples show, ethos is difficult to earn and easy to lose.

54. 5/5/2015 Designing Visual Language-Chapter 10 54 Conclusion Remember that the six cognate strategies do not exist in separate, isolated packages but constantly work together (and at times against one another) to respond to the rhetorical situation.