6/9/2015 designing visual language-chapter 3 1 notes to chapter three english 308
TRANSCRIPT
04/18/23Designing Visual Language-Chapter 31
Notes to Chapter ThreeNotes to Chapter ThreeEnglish 308
04/18/23Designing Visual Language-Chapter 32
Visual Analysis: Two KeysVisual Analysis: Two Keys
Learning to notice what’s going on visuallyLearning how to categorize it all
04/18/23Designing Visual Language-Chapter 33
A Taxonomy for A Taxonomy for Visual VocabularyVisual Vocabulary
Intra-level—text at the line levelInter-level—text at the paragraph or
field levelExtra-level—non-textual materialSupra-level—whole document
04/18/23Designing Visual Language-Chapter 34
Three “Coding” ModesThree “Coding” Modes
Textual—words and numbersGraphic—graphic elements (shading,
lines, symbols, pictures, etc.)Spatial—the position of these elements on
the page or screen
04/18/23Designing Visual Language-Chapter 35
Visual Language MatrixVisual Language Matrix
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.
04/18/23Designing Visual Language-Chapter 36
MatrixMatrix
Textual Spatial Graphic
Intra
Inter
Extra
Supra
04/18/23Designing Visual Language-Chapter 37
Intra-Level Design: Intra-Level Design: Linear ComponentsLinear ComponentsIntra-level design controls the local variations of text, character by character, word by word, across a single line or a thousand lines.
04/18/23Designing Visual Language-Chapter 38
Intra-Level Design: Intra-Level Design: Textual ModeTextual ModeTypeface selection (such as Helvetica,
Times, Chicago, Garamond, and so on)Typeface disposition (such as roman, italic, boldface, UPPERCASE, shadowshadow, and so on)
Type size (measured in points, such as 10-point, 11-point, 12-point, 24-point, 32-point and so on)
Print or display color
04/18/23Designing Visual Language-Chapter 39
Intra-Level Design: Intra-Level Design: Spatial ModeSpatial Mode
Local spacing between textual units:
text that’s w i d e n e d or condensed text that’s superscript or subscript
04/18/23Designing Visual Language-Chapter 310
Intra-Level Design: Intra-Level Design: Graphic ModeGraphic ModePunctuation and other local marks includingUnderscored or underlined textStrikethrough textText with gray scale background
04/18/23Designing Visual Language-Chapter 311
Headings Arial Bold 18 point
Intra-Level DesignIntra-Level DesignCreating Visual InterestThis 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 vital feature of any document.
At this point, the text will simply repeat itself.
Farewell, gentle readerThis 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 on.
Text Times New Roman 12 point
Gray-scale background
04/18/23Designing Visual Language-Chapter 312
Inter-Level Design: Inter-Level Design: Fields and Nonlinear ComponentsFields and Nonlinear ComponentsInter-level design helps readers comprehend a text, often by dividing the text into discrete units so readers can structure it.
04/18/23Designing Visual Language-Chapter 313
Inter-Level Design: Inter-Level Design: Textual ModeTextual ModeHeadings to show the hierarchy of the
partsNumbers to show sequence
04/18/23Designing Visual Language-Chapter 314
Inter-Level Design: Inter-Level Design: Spatial ModeSpatial ModeDistribution of text on the pagePosition of headingsSpacing between headings and textLeading (space between lines)IndentationJustificationColumnsUse of tables, charts, etc.
04/18/23Designing Visual Language-Chapter 315
Inter-Level Design: Inter-Level Design: Graphic ModeGraphic ModeUse of graphic elements to cue structureBulletsHorizontal or vertical lines between textBoxes and/or gray-scale around blocks of
textUse of graphic elements to distinguish text
in charts, diagrams, etc.
04/18/23Designing Visual Language-Chapter 316
Headings
Inter-Level DesignInter-Level DesignCreating Visual InterestThis 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 vital feature of any document.
At this point, the text will simply repeat itself.
Farewell, gentle readerThis 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 on.
More space between text before heading than after heading
Box around text
Bullets
04/18/23Designing Visual Language-Chapter 317
Extra-Level Design: Extra-Level Design: Data Displays, Pictures, SymbolsData Displays, Pictures, SymbolsExtra-level design includes data displays, icons and symbols. These elements operate outside the main text often as autonomous entities with their own visual vocabulary
04/18/23Designing Visual Language-Chapter 318
Extra-Level Design: Extra-Level Design: Textual ModeTextual ModeDescriptive text for extra-level elementsLabelsTitlesLegendsCaptions
04/18/23Designing Visual Language-Chapter 319
Extra-Level Design: Extra-Level Design: Spatial ModeSpatial ModeThe arrangement chosen for the displayType (chart, graph, etc.)Subtype (pie chart, bar chart, etc.)Size and proportion of displayPerspective
04/18/23Designing Visual Language-Chapter 320
Extra-Level Design: Extra-Level Design: Graphic ModeGraphic ModeThe visible stuff of the displayShading, texture, and color of elementsAxis linesTick marksGridlines
04/18/23Designing Visual Language-Chapter 321
Extra-level DesignExtra-level DesignServer Security Violations
0
10
20
30
40
50
60
70
80
Mar Apr May Jun Jul Aug Sept
Month (2002)
Co
un
t
Apollo
Jupiter
Axis titles
Axis labels
Tick marks
Chart title
Chart legend
Gridlines
04/18/23Designing Visual Language-Chapter 322
Supra-Level Design: Supra-Level Design: The Whole DocumentThe Whole DocumentSupra-level includes top-down design elements that visually define, structure, and unify the entire document.
04/18/23Designing Visual Language-Chapter 323
Supra-Level Design: Supra-Level Design: Textual ModeTextual ModeTitle pagesHeadersFootersPage numbersSection Tabs
04/18/23Designing Visual Language-Chapter 324
Supra-Level Design: Supra-Level Design: Spatial ModeSpatial ModePage size and shapePage orientationPaper (thickness, folds, flaps, pockets,
etc.)
04/18/23Designing Visual Language-Chapter 325
Supra-Level Design: Supra-Level Design: Graphic ModeGraphic ModeAny marks, icons, colors, linework, and
logos that unify pages, sections, or screens or that create major divisions
04/18/23Designing Visual Language-Chapter 326
Each Document UniqueEach Document Unique
Each document uniquely combines elements from the twelve-cell matrix.
Some restrict variations to the upper left quadrant (school essays for example)
Others make use of a significantly richer vocabulary (see especially corporate annual reports, fundraising literature, etc.)
04/18/23Designing Visual Language-Chapter 327
Matrix Cells Not AirtightMatrix Cells Not Airtight
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.