Key Design principles for data visualization
- Gestalt theory (hierarchy, contrast, structure)
- Typography
- Color
Gestalt Theory
We don’t perceive individual elements,
we perceive “Gestalts”: the elements interact to form a perception.
No structure
Proximity
Similarity
Enclosure
Connection
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Manager
John Doe
Architect
Jane Doe
Computer scientist
John Smith
Engineer
Data Viz example
Typography
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, letter spacing, and spaces between pairs of letters.
I’m sorry.
I’m sorry.
I’m sorry.
I’m sorry.
It’s my 5th birthday!
It’s my 5th birthday!
It’s my 5th birthday!
It’s my 5th birthday!
The Royal Society
The Royal Society
The Royal Society
The Royal Society
Climate change is real.
Climate change is real.
Climate change is real.
Climate change is real.
Serif
Libre Baskerville
Sans Serif
Inter
Display
Monsieur La Doulaise
Monospace
Courier New
Roboto Thin
Weight: 100
Roboto Light
Weight: 300
Roboto Regular
Weight: 400
Roboto Bold
Weight: 700
Roboto Black
Weight: 900
Roboto Italic
Italic style
Roboto Condensed Light
Condensed 300
Roboto Condensed Bold
Condensed 700
Roboto Condensed Italic
Condensed Italic
Color
Color Theory
Color palettes
for data visualization
Styleguides
Tools
Key message
differences in meaning ⟺ visual differences
semantic similarity = visual similarity
