Design School Layout - KeynesYouDigIt/Knowledge GitHub Wiki

Layout Fundamentals

Absolute measurement systems

  • Point system - 1" == 6 picas == 72 points
  • Metric

Relative measurement systems

  • Em - Width of M, equal to the size of typeface
  • En - Half an em
  • Unit - 1000th of an em, used for different sized characters

Proportional measurement systems

  • Golden section
  • Fibonacci sequence
  • Dynamic rectangles
  • Van de Graaf Canon - Optimum proportions for margins and type
  • Villard diagram - Different sized text areas
  • Renard numbers - 10, 12.5, 16, 20, 25, 31.5, 40, 50, 63, 80
  • Rule of thirds - Focal points at intersection, align things with lines
  • Le Modulor - Grid based on Fibonacci sequence

Anatomy of a Grid

Margins

  • Outside of the grid, frame the content
  • Symmetrical margins feel static, asymmetric margins feel active
  • Narrow side margins reduce tension, wide side margins draw the reader inward
  • Be careful about how the content is used (thumb position, etc)

Columns

  • Width of columns is determined by font size
  • Need 60-72 characters per line

Modules

  • Modules are the units of space in a grid system
  • Too many modules creates visual confusion
  • Can be vertical or horizontal
  • Proportion may be based on a typical image or paragraph

Other

Spatial Zones / Field - Groups of modules that make up areas for content Flowlines / Hanglines - Split the columns into rows Markers - Placement indicators to help the reader locate important information Gutter - Inactive area, inside binding or to separate columns of text, or frame content Alley - Where two pages meet

Grid Systems

  • Grid systems are either symmetrical and static, or asymmetrical and dynamic

Manuscript Grid

  • Single area for text in symmetrical
  • Smaller area for secondary content in assymetrical
  • Secondary areas in the header and footer
  • Wide inner margins

Symmetrical Grid

  • Inner and outer margins are equal
  • Single column is good for books and essays, max 60 characters per line
  • Multi-column aids in scanning, 40-50 characters per line
  • Wider margins == more stability, narrower margins == more tension
  • Margins that are wider than the gutters force the eye inward- establish a proportional relationship between them to make that clear

Modular Grid

  • Multi-column grid with multiple flowlines
  • Size and proportion of a module can be related to the size of an average paragraph, or of a typical image
  • Used in multi-faceted narrative and visual content- Newspapers, event programs, data visualizations and tables, websites
  • Combine, or "activate" various modules to create spatial areas

Asymmetrical Grid

  • Where the left and right pages aren't the same, introducing a bias to one side (usually left)
  • Smaller margins create tension, which is what biases the eye
  • Can be done with columns or modular grids

Baseline Grid

  • Goes within a text area in another grid, used for aligning type
  • The baseline spacing stays consistent, regardless of type size
  • Larger type can take up more than one row

Hierarchical Grid

  • More fluid than a typical grid
  • Good for web
  • Grid is based on content, which is unique to that page

Marber Grid

  • Top third is information, bottom two thirds is art
  • Lines are all geometrically derived

Compound Grid

  • Combining multiple multi-column grids
  • Unity is achieved by having some shared element, eg. margins, gutter size
  • A 3-column grid on top of a 2-column grid allows you to use either one

Compositional Principles

Balance

Unrelated to symmetry, it refers to elements balancing each other through various means. You can use design elements to create balance while maintaining energy in a piece:

Element Light Heavy
Value Light Dark
Color Netural Saturated
Shape Simple Intricate
Texture Smooth Rough
Size Small Big
Location Near Far
Direction Still Active

Movement

Movement guides a reader through and around a visual message.You can achieve it in a design with lines, shapes, forms, colors, perspective, and repetition.

Symmetry

Symmetry conveys stabilty, permanence. It also automatically provides focus to anything in the center. Symmetrical forms are generally seen as figure, rather than ground. You can also create symmetry radially, which also puts an extreme focus on the center. Asymmetry creates interest and motion. Asymmetrical compositions often have one primary element that is offset by multiple lighter elements. Asymmetry is more difficult to balance.

Tension

Tension is used to get attention. It is created by combining opposites:

  • Small vs. large
  • Irregular spacing
  • Uneven placement
  • Inconsistent orientation
  • Different shapes
  • Misalignment
  • Different proportions
  • Rough texture

When elements touch, they make a new form. When a shape splits, it becomes two new forms. Tension between forces makes something feel real.

Contrast

Contrast is when things are distinguished from each other- it's the opposite of harmony. It draws attention, creates a mood, and creates emphasis and hierarchy. Contrasting elements exaggerates their differences, which can be used to highlight something.

Figure-Ground

Figure-ground is the relationship between foreground and background. The figure is what the viewer pays attention to, the ground is the negative space the figure sits on. Figure ground relationships can be:

  • Simple - Active figure, inactive ground
  • Reversal - Active ground, inactive figure (this has bounds, which simple relationships do not)
  • Ambiguous - Unclear (like the kissing vase)

Layout Characteristics

  • Pacing and sequencing - Maintaining or breaking a rhythm to create comfort or excitement

Patterns

  • Simple - Stripes, zig-zags, polka dots, checkers
  • Intricate - Spheres, nests, arabesques, lattices, polyhedra, spirals, helixes, volutes, meanders, branching, circulation, waves, symmetry, fractals, moires

Form

A form is a shape with volume. You can illustrate this in 2 dimensions by projecting it. In projections, all vertical lines stay vertical, and all parallel lines stay parallel. It can be isometric (equal emphasis) or axonometric (skewed). You can also illustrate it with shade, tone, and texture.

Rhythm

Rhythm creates a sense of visual movement. Aural rhythm is the alternating of sound and silence; visual rhythm is the alternating of form and space. Rhythm can be either regular, flowing, or progressive.

Space

You can create the illusion of depth by playing with:

  • Size (larger elements appear closer)
  • Making elements overlap
  • Position (top feels like background, bottom feels like foreground)
  • Adding atmosphere (washing out or blurring an element)
  • Color (cool colors recede, warm colors come forward)
  • 1-Point Perspective (creating a horizon, one perspective)
  • 2-Point Persepctive (creating a horizon, focus on an element)

Alignment

  • Flush left - Asymmetrical, easy to identify beginning of line
  • Flush right - Asymmetrical, not easy to identify beginning of line
  • Justified - Symmetrical, uneven spacing
  • Centered - Symmetrical, even spacing, has emphasis

Emphasis

Emphasize something with:

  • Scale - Relative
  • Size - Absolute
  • Contrast
  • Centering
  • Color
  • Position
  • White space
  • Type
    • A new typeface
    • Font weight
    • Italics
    • Uppercase and Small Caps
    • Visual cues (indents, line spacing, type style, weight variations, type size, color)