Scale, Contrast, and Proportion: Comprehensive Study Notes

Scale

• Information consists of differences that make a difference. Quote by Edward Tufte: "Information consists of differences that make a difference" (Envisioning Information).
• Scale describes the relative size or magnitude of a design element in relation to other elements and to the composition as a whole.
  • Grillo (1960): scale is the feeling of a design fitting its space and surroundings.
  • Scale is never meaningful in an absolute sense; it is defined in relation to the human viewer.
  • Achieving balance between point and counterpoint, pattern and focus, figure and ground depends on careful manipulation of the graphical qualities of each element.
  • Altering a single attribute of one part can significantly impact balance, unity, and harmony of the whole.
• The right balance between scale and other attributes is governed by the principles of contrast.
• Practical consequence: scale must be modulated to produce a balance between interesting visual dynamics and pleasing, harmonious proportions.
• Related concepts: figure vs ground, pattern vs focus; global effects emerge at the display level but are produced by local adjustments to part attributes.
• Historical/starting points for scale use include classical proportion systems such as the Golden Rectangle and other perceptual ratios.

Contrast

• Contrast results from noticeable differences along a common visual dimension between elements in a composition.
• Contrast provides the basis for visual distinctions and meaning in a visual message.
• Dimensions for contrast include: shape, size, color, texture, position, orientation, and movement.
• Effective design selects, for each part and for the whole, the visual treatment that best realizes the communication goal.
• Design should balance communication efficiency with visual dynamics: scale and contrast must be modulated to avoid lifeless designs while maintaining harmony.

Proportion

• Grillo (1960) defines proportion as "a rapport between two dimensions" and notes it deals in ratios rather than fixed sizes.
• Proportion determines balance and harmony of the relation between elements and guides scale choices in a contrast relationship.
• Classical systems codify relations that please the mind and eye; Golden Rectangle is a common starting point; other systems like DIN paper sizes are also used.
• In practice, designers rely on perceptual sensitivity, developed through experience, rather than purely mechanical techniques.
• Benefits of strong scale/contrast/proportion mastery:
  • Differentiation: contrast helps differentiate elements so form can emerge (e.g., Cassandre steamship poster 51-a; Hofmann theater poster 51-b).
  • Emphasis: manipulate scale/contrast to highlight important elements (e.g., L'Atlantique name vs other typography in Cassandre piece; high-contrast contours in Hofmann poster).

Visual Variables and Bertin’s Retinal Variables

• Bertin’s retinal variables form the basis for all visual coding. A visual code can be based on (from left to right) contrasts in:
  • size, value, orientation, texture, shape, position in 2D or 3D space; Hue adds an additional dimension (not pictured).
• Visual language relies on perceptual distinctions available to human vision; proper use of visual variables structures experience or interface.
• Key terms: nominal scale, associative perception, selective perception, ordered perception, quantitative perception.
• The nominal scale differentiates categories; reading styles include associative and selective perception.
• Associative perception: a visual variable is associative if it does not affect the visibility of other dimensions when applied (e.g., hue can be read regardless of orientation).
• Dissociative perception: a variable is dissociative if visibility of other values is reduced by that variable (e.g., very small dot hue or thin line hinders hue reading).
• Size and value are dissociative; most other variables are associative.
• Selective perception: viewer isolates instances of a given category; most visual variables (except shape) are selective (orientation is selective when represented by points/lines but not when by areas).
• Shape is the only variable that does not permit selective perception; when redundant cues are added (e.g., color + value), recognition becomes immediate.
• Ordering and quantities:
  • Ordered perception: viewer determines relative ordering along a perceptual dimension; position, size, and value support natural ordering.
  • Quantitative perception: viewer determines the amount of difference; only position and size support precise quantitative judgments (e.g., one line longer by a factor of two).
• Length of visual variables (in terms of distinguishable levels):
  • Shape: longest (virtually infinite recognizable values, good for identification).
  • Position: theoretically infinite, but practical limits due to display constraints; in practice, position supports fine-grained variation.
  • Orientation: shortest dimension; more than ~4 levels can cause confusion.
  • Value and texture: fewer than ~10 levels; size and color support somewhat more levels depending on task.
• Reading and processing evidence: Bertin's findings are supported by Treisman’s pre-attentive processing work and Cleveland et al. on graphical perception; Tufte (1989, 1991) surveys reinforce these principles.
• Implications for design: choose visual variables to match data type and reading task; understand the strengths/limits of each variable for identification, differentiation, and precise judgment.

Principles and Practice: Harmony, Activity, Clarity, Restraint

• Scale, contrast, and proportion are powerful design tools; they must be used with care, especially in UI design where the goal is to aid communication, not simply to attract attention.
• Clarity: ensure that intent is obvious; contrasts should be intentional and easy to perceive; ambiguity is costly.
• Harmony: maintain a balanced relation between elements; avoid excessive contrasts that disrupt comprehension.
• Activity: strong contrasts yield dynamic energy, but must be controlled to avoid overwhelming the viewer.
• Restraint: prefer a small set of well-chosen contrasts; avoid chaotic mixture of many contrasts.
• Global shape coding can be effective when identification is more important than precise location (e.g., traffic signs).

Global and Local Design Strategies: Layering, Sharpening, Integrating (Layering, Sharpening, Integration)

• Layering: divide the display into perceptual layers so that groups of items can be processed separately yet read as a coherent whole.
  • Practical steps (as per Ruder and the text):
    1) Group information into a small number of categories: typically about 7 ± 2 groups.
    2) Rank groups into 3–5 echelons based on importance.
    3) Use perceptual variables to establish layering.
    4) Maximize perceptual difference between groups while minimizing within-group differences.
    5) Use the squint test to ensure that layers can be read as cohesive units while remaining separable.
  • Layering illustrates the balance between grouping and separation; color, value, texture, and size can create distinct layers.
• Perceptual layering examples:
  • FAA sectional aeronautical charts (81) use hue, value, and orientation to layer dense information; foreground vs background separation is essential for pilots.
  • Timetables (82) use background symbols to provide global context; foreground text remains legible.
  • Macintosh icons (84) use orientation cues (horizontal/vertical/diagonal) to group icons (documents/folders/applications) by class, independent of inner imagery.
  • NeXTStep font panel (85) uses color to group font name components; layering ties name to the preview area.
  • Effective layering allows reading subsets as units while maintaining overall coherence.
• Sharpening: enhance perceptual distinctions within layers to make the critical differences clearly legible.
  • For GUI feedback, ordered states (active vs inactive) are sharpened by value contrasts; modern interfaces use progressive emphasis to guide user focus.
  • OS/ Motif toolkit defaults can undermine readability if there is insufficient border definition or inconsistent padding; proper padding improves integration and legibility.
• Integration (Figure and Ground): ensure the figure and its ground are balanced in scale and visual weight to read as a single unit; improper integration leads to visual tension and discomfort.
  • Examples include information symbols (US DOT) and Olympic/CBS marks; the figure (inner symbol) and ground (outer shapes) must be sized and weighted to read as one symbol.
  • In GUI and product design, adequate margins and consistent bounding contours around control groups improve overall integration.

Figure–Ground Integration: Examples and Guidelines

• Figure–ground integration requires balancing the figure (primary element) with its ground (context) so that they read as a single unit.
• Key principles:
  • Equal visual weight and compatible scale between figure and ground prevent visual tension.
  • Adequate whitespace around figures and between grouped controls improve readability and visual unity.
  • Misalignment or off-center elements (e.g., Macintosh arrows with odd pixel counts) degrade integration; adjust to symmetric centering or proper alignment to enhance harmony.
• Examples from the material:
  • Information symbol (US DOT) shows perfect integration when figure and circle scale are balanced; distortions disrupt unity (Fig. 91).
  • 1994 Winter Olympic sign demonstrates how internal elements (mountains, symbols) can be integrated with the surrounding ground to appear as a single sign (Fig. 92).
  • OSF/Motif dialog padding (Fig. 93) shows how insufficient spacing can break integration; increasing padding improves legibility and unity (Fig. 95).
• Practical recommendations:
  • Ensure internal elements are symmetrically placed within enclosing space.
  • Maintain consistent padding around content regions and controls.
  • When possible, use visual margins to separate groups while preserving a cohesive overall structure.

Examples: Concrete Case Studies and Applications

• Cassandre steamship poster (51-a): a large rectangular form emerges from a lighter background; scale contrast differentiates the ship from the void; big shape anchors the composition.

• Armin Hofmann theater poster (51-b): high-contrast contours differentiate hands from dark background; weight and organic form distinguish them from typographic message.

• L'Atlantique emphasis: the ocean liner dominates due to scale and value differences; the tug is framed within the dark mass to emphasize its small size relative to the liner.

• Golden Rectangle and root-2 rectangle as starting points for page and layout design:

  • Golden Rectangle ratio: ext{ratio} = rac{1+

  }{}
  

  • Root-2 rectangle: $ext{ratio} = \sqrt{2} \approx 1.414$

• Dynamic symmetry and DIN sizes: classical systems used to structure page layouts; dynamic symmetry allows recursive subdivision preserving proportion.

• Kodak Carrousel projector (57): contrast between circular rotating parts and rectangular housing reinforces function through form.

• OPEN LOOK GUI (58): distinguishing commands (rounded ends) vs settings (square ends) improves readability and control hierarchy; strong cues for location vs action.

• NeXTStep focus feedback (69): value-based contrasts map naturally to active vs inactive states; medium gray background can affect readability depending on window arrangement.

• Tactics cosmetics identity program (71): simple, restrained contrasts with a red triangle as an attractor; focused perception without distracting elements.

• Sun Microsystems identity (71-c) and Aldus IntelliDraw examples (73-74): consistent use of simple, repeatable forms for identity; layering and selective contrast support quick recognition.

• BVG timetable pages (82-83): layering using color to separate background context from dense schedule information; color is selective and associative for grouping without interfering with data reading.

• Font and icon examples (84-85): orientation-based grouping in icons; color-coded font panels demonstrates how color can tie components to a header or preview area.

• Spatial tension (78): screen real estate constraints can push windows to be too small or too large; readable layouts require breathing room around controls and appropriate ground.

• Overextension and awkward dimensions (79-80): overstuffed windows or too-large margins obscure contextual information; inappropriate aspect ratios degrade comprehension.

• Common errors (Fig. 69–70, 75–76, 77–79): insufficient/ excessive contrast, misalignment, and poor typographic hierarchy are frequent culprits; emphasize deliberate, minimal, meaningful contrasts.

Common Errors and Good Practices

• Common errors involve too sharp or too subtle contrasts, or figures relating poorly to their ground.
• Specific problems:
  • Insufficient contrast leads to undirected uniformity; excessive contrast leads to chaos.
  • Inconsistent typographic coding (e.g., multiple meanings of the word "Align" in a single dialog) confuses users.
  • Excessive typographic contrast (too many fonts/weights) reduces legibility and hierarchy.
  • Overextension: windows too large for content; too-small windows misfit the context.
  • Awkward dimensions: oversized or undersized windows disrupt context and usability.
  • Visual ambiguity: unclear integration or unclear relationships between elements obscures meaning.
• Best practices:
  • Limit the number of contrasting dimensions to maintain clarity.
  • Use deliberate, meaningful contrasts to guide attention to critical regions or controls.
  • Employ perceptual layering to isolate groups without losing coherence.
  • Ensure strong, legible typographic hierarchy with adequate spacing and consistent font choices.
  • Prefer subtle variations in position/orientation for understated emphasis (restraint).

Perceptual Layering: Techniques and Squint Test

• Layering helps manage density and reading order by grouping related information into perceptual layers.
• The squint test: squint to reduce visual detail and reveal overall structure; anything not readily apparent to the squinting eye will not be read at a glance in the final design.
• Practical steps for layering:
  • Group items into 7 ± 2 categories.
  • Rank groups into 3–5 hierarchies.
  • Use perceptual variables to establish layers.
  • Maximize differences between layers; minimize differences within layers.
  • Apply squint test to verify layer unity and separability.
• Layering examples (81–85):
  • FAA Sectional charts use layering to separate flight information from ground detail via color and value differences.
  • QuarkXPress guidelines use color for guidelines grouping; fonts panels use color to link components to previews.
  • Macintosh icons rely on orientation cues to categorize elements by class beyond internal imagery.

Integration and Practical UI Guidance

• Effective integration requires figure-ground balance and appropriate spacing around elements and groups.
• Poor integration arises from default UI toolkit values that produce cramped or misaligned padding, unbalanced borders, or inconsistent type weights.
• When integrating controls, aim for consistent margins, predictable alignment, and legible focus indicators to support user tasks.

Summary of Key Concepts and Takeaways

• Scale, contrast, and proportion are core tools for creating meaningful, harmonious visuals; they must be used intentionally, not heuristically.
• Visual variables (Bertin) provide the perceptual building blocks for encoding information; choose variables based on whether you need identification, grouping, ordering, or precise measurement.
• Perceptual layering, sharpening, and integration are practical techniques to manage complexity and ensure that the most important information is accessible without overwhelming the viewer.
• Figures and ground must be balanced in weight and scale to read as unified symbols or UI elements; poor integration reduces clarity and effectiveness.
• Real-world design practice relies on restrained, purposeful contrasts; avoid gratuitous decoration or chaotic combinations of many conflicting cues.
• The squint test is a simple, effective method to assess perceptual hierarchy and layer separation early in the design process.
• Historical design systems (Golden Rectangle, root-2 rectangle, dynamic symmetry) offer starting points for proportioning but must be applied with perceptual judgment and context.
• Several concrete examples illustrate how the deliberate use of scale, contrast, and proportion supports differentiation, emphasis, hierarchy, and usability across posters, signage, and GUI design.

Notation and Formulas

• Golden Rectangle ratio: ext{ratio} = rac{1+

  }{2} \approx 1.618

• Perceptual layering grouping: N ext{ groups}
  ightarrow N = 7 \, ext{±} \, 2

• Root-2 rectangle ratio: $ext{ratio} = \sqrt{2} \approx 1.414$

• Quantitative perception distinction: only position and size provide precise ratio judgments (e.g., one line twice as long as another), i.e., $ext{length ratio} = 2$ for two lines with a 2:1 length relationship.