Docstoc

Visual Analysis

Document Sample
Visual Analysis Powered By Docstoc
					Notes to Chapter Three
                           English 308




                                                 1
Designing Visual Language-Chapter 3      8/19/2013
Visual Analysis: Two Keys
 l Learning to notice what’s going on visually
 l Learning how to categorize it all




                                                         2
Designing Visual Language-Chapter 3              8/19/2013
A Taxonomy for
Visual Vocabulary
 l Intra-level—text at the line level
 l Inter-level—text at the paragraph or
   field level
 l Extra-level—non-textual material
 l Supra-level—whole document



                                                  3
Designing Visual Language-Chapter 3       8/19/2013
Three “Coding” Modes
 l Textual—words and numbers
 l Graphic—graphic elements (shading, lines,
   symbols, pictures, etc.)
 l Spatial—the position of these elements on
   the page or screen




                                                       4
Designing Visual Language-Chapter 3            8/19/2013
Visual Language Matrix
 l   Combining the four levels of design with
     the three coding modes produces the 12-
     cell visual language matrix. The matrix
     provides a framework for describing the
     visual language of any document.




                                                        5
Designing Visual Language-Chapter 3             8/19/2013
Matrix
                         Textual      Spatial   Graphic

      Intra

      Inter

      Extra

      Supra

                                                                  6
Designing Visual Language-Chapter 3                       8/19/2013
Intra-Level Design:
Linear Components
 Intra-level design controls the local
 variations of text, character by character,
 word by word, across a single line or a
 thousand lines.




                                                       7
Designing Visual Language-Chapter 3            8/19/2013
Intra-Level Design:
Textual Mode
 l Typeface selection (such as Helvetica,
   Times, Chicago, Garamond, and so on)
 l Typeface disposition (such as roman,
   italic, boldface, UPPERCASE, shadow, shadow
   and so on)
 l Type size (measured in points, such as
              , 24-point, 32-point and so on)
     10-point, 11-point,   12-point


 l Print or display color

                                                         8
Designing Visual Language-Chapter 3              8/19/2013
Intra-Level Design:
Spatial Mode
 Local spacing between textual units:




                                                9
Designing Visual Language-Chapter 3     8/19/2013
Intra-Level Design:
Graphic Mode
 Punctuation and other local marks including
 l Underscored or underlined text
 l Strikethrough text
 l Text with gray scale background




                                                      10
Designing Visual Language-Chapter 3            8/19/2013
   Intra-Level Design
Headings Arial Bold
18 point                         Creating Visual Interest
                                 This page has a good deal of text and it is difficult to isolate one word
                                 from another. As such, this page is a good example of poor figure-
                                 ground contrast, not because of the contrast of colors.
                                 • The black text on the white background is perfectly suited
                                 • As is the choice of font
                                 No, the problem is in the gray mass of type, where nothing stands out.
                                 When there is not visual variety, the eye cannot find anything to focus
                                 on. That’s why even paragraph breaks can be an important feature of
                                 a page of text. One line indented out of some thirty lines on the page
                                 creates visual relief and partially helps explain why paragraphs are a
  Text Times New                 vital feature of any document.

  Roman 12 point                 At this point, the text will simply repeat itself.

                                 Farewell, gentle reader
                                 This page has a good deal of text and it is difficult to isolate one word
                                 from another. As such, this page is a good example of poor figure-
                                 ground contrast, not because of the contrast of colors. The black text
                                 on the white background is perfectly suited as is the choice of font,
                                 the very common serif font Times New Roman.


                                 No, the problem is in the gray mass of type, where nothing stands out.
                                 When there is not visual variety, the eye cannot find anything to focus
Gray-scale                       on.

background



                                                                                                                    11
   Designing Visual Language-Chapter 3                                                                       8/19/2013
Inter-Level Design:
Fields and Nonlinear Components
 Inter-level design helps readers comprehend
 a text, often by dividing the text into discrete
 units so readers can structure it.




                                                           12
Designing Visual Language-Chapter 3                 8/19/2013
Inter-Level Design:
Textual Mode
 l Headings to show the hierarchy of the
   parts
 l Numbers to show sequence




                                                  13
Designing Visual Language-Chapter 3        8/19/2013
Inter-Level Design:
Spatial Mode
 Distribution of text on the page
 l Position of headings
 l Spacing between headings and text
 l Leading (space between lines)
 l Indentation
 l Justification
 l Columns
 l Use of tables, charts, etc.
                                              14
Designing Visual Language-Chapter 3    8/19/2013
Inter-Level Design:
Graphic Mode
 Use of graphic elements to cue structure
 l Bullets
 l Horizontal or vertical lines between text
 l Boxes and/or gray-scale around blocks of
   text
 l Use of graphic elements to distinguish text
   in charts, diagrams, etc.

                                                        15
Designing Visual Language-Chapter 3              8/19/2013
   Inter-Level Design
Headings
                                 Creating Visual Interest
                                 This page has a good deal of text and it is difficult to isolate one word
                                 from another. As such, this page is a good example of poor figure-
                                 ground contrast, not because of the contrast of colors.
                                 • The black text on the white background is perfectly suited
Bullets                          • As is the choice of font
                                 No, the problem is in the gray mass of type, where nothing stands out.
                                 When there is not visual variety, the eye cannot find anything to focus
                                 on. That’s why even paragraph breaks can be an important feature of
                                 a page of text. One line indented out of some thirty lines on the page
                                 creates visual relief and partially helps explain why paragraphs are a
                                 vital feature of any document.
                                 At this point, the text will simply repeat itself.

More space between
text before heading              Farewell, gentle reader
                                 This page has a good deal of text and it is difficult to isolate one word
than after heading               from another. As such, this page is a good example of poor figure-
                                 ground contrast, not because of the contrast of colors. The black text
                                 on the white background is perfectly suited as is the choice of font,
                                 the very common serif font Times New Roman.
                                 No, the problem is in the gray mass of type, where nothing stands out.
                                 When there is not visual variety, the eye cannot find anything to focus
Box around text                  on.




                                                                                                                    16
   Designing Visual Language-Chapter 3                                                                       8/19/2013
Extra-Level Design:
Data Displays, Pictures, Symbols
 Extra-level design includes data displays,
 icons and symbols. These elements operate
 outside the main text often as autonomous
 entities with their own visual vocabulary




                                                     17
Designing Visual Language-Chapter 3           8/19/2013
Extra-Level Design:
Textual Mode
 Descriptive text for extra-level elements
 l Labels
 l Titles
 l Legends
 l Captions




                                                    18
Designing Visual Language-Chapter 3          8/19/2013
Extra-Level Design:
Spatial Mode
 The arrangement chosen for the display
 l Type (chart, graph, etc.)
 l Subtype (pie chart, bar chart, etc.)
 l Size and proportion of display
 l Perspective




                                                 19
Designing Visual Language-Chapter 3       8/19/2013
Extra-Level Design:
Graphic Mode
 The visible stuff of the display
 l Shading, texture, and color of elements
 l Axis lines
 l Tick marks
 l Gridlines




                                                    20
Designing Visual Language-Chapter 3          8/19/2013
    Extra-level Design
              Chart title


Axis labels
                                          Gridlines


Tick marks




                                            Chart
                                           legend

         Axis titles


                                                             21
    Designing Visual Language-Chapter 3               8/19/2013
Supra-Level Design:
The Whole Document
 Supra-level includes top-down design
 elements that visually define, structure, and
 unify the entire document.




                                                        22
Designing Visual Language-Chapter 3              8/19/2013
Supra-Level Design:
Textual Mode
 l Title pages
 l Headers
 l Footers
 l Page numbers
 l Section Tabs




                                             23
Designing Visual Language-Chapter 3   8/19/2013
Supra-Level Design:
Spatial Mode
 l Page size and shape
 l Page orientation
 l Paper (thickness, folds, flaps, pockets, etc.)




                                                           24
Designing Visual Language-Chapter 3                 8/19/2013
Supra-Level Design:
Graphic Mode
 l   Any marks, icons, colors, linework, and
     logos that unify pages, sections, or screens
     or that create major divisions




                                                           25
Designing Visual Language-Chapter 3                 8/19/2013
Each Document Unique
 l Each document uniquely combines
   elements from the twelve-cell matrix.
 l Some restrict variations to the upper left
   quadrant (school essays for example)
 l Others make use of a significantly richer
   vocabulary (see especially corporate
   annual reports, fundraising literature, etc.)


                                                          26
Designing Visual Language-Chapter 3                8/19/2013
Matrix Cells Not Airtight
 l   Just as each document is unique, not all
     visual information will fit neatly in only
     one cell of the matrix. The matrix is just a
     tool that helps you categorize (and
     therefore describe) the visual language of a
     document.



                                                           27
Designing Visual Language-Chapter 3                 8/19/2013

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:8/19/2013
language:Unknown
pages:27