Grid Systems

Luk Imrich

Scientific and Technical Communication, Ss2012 Usability Engineering

The Plan
Why Grids? Understanding Grids

Why Grids?

Proximity
Elements that are close togheter are perceived to be more related than elements that are farther apart.

Universal Principles of Design

Alignment
Elements in a design should be aligned with one or more other elements. This creates a sense of unity and cohesion, which contributes to the design's overall aesthetics and perceived stability.

Universal Principles of Design

Alignment
Elements in a design should be aligned with one or more other elements. This creates a sense of unity and cohesion, which contributes to the design's overall aesthetics and perceived stability.

Universal Principles of Design

Consistency
The usability of a system is improved when similar parts are expressed in similar ways.

Universal Principles of Design

Proportion
Proportion is the visual or structural relationship between part of an item to the whole. Proportion is a useful tool for achieving a balanced layout by helping to define the size relationship that governs the different designs elements, such as their relative size and spacing.

is to

as

is to

The Layout Book

Aesthetics Usability
Aesthetics designs are perceived as easier to use than lessaesthetic designs.

Universal Principles of Design

Benefits
Before anything else a grid introduces systematic order to a layout, distinguishing types of information and easing a users navigation through them.

Clarity Efficiency Economy Continuity

Making and Breaking the Grid

Understanding Grids

Desire
Obsession as a culture, society of creating an order out of things whatever they are. We have to create order out of chaos. When we see organic kind of systems, we have to rationalize them, systemize them and then comoditize them.

Rationalize Systemize Comoditize

Mark Boulton

Shipping container

1956 Malcolm Mc Lean ships trucks whole industry possibility to rapidly unload/load anything

Wardrobe
Chaos

Wardrobe
Order

Anatomy

margins gutters modules colums hanging lines/flowlines fields

Anatomy
Margins

Anatomy
Gutters

Anatomy
Module

Anatomy
Columns

Anatomy
Hanging lines

Anatomy
Fields

Examples
Columnar

Examples
Hiearchical

Sources

Universal Principles of Design Making and Breaking the Grid The Layout Book Layout Essentials Mark Boulton: Designing Grid Systems - workshop Mark Boulton on layouts and grid systems - net.magazine Mark Boulton on Grids - webahead podcast

Questions?