A Primer on Visual Design Flaviu Cipcigan
A Primer on Visual Design 1. Why should I care?2. What is design?3. How to get started?
A Primer on Visual Design 1. Why should I care?2. What is design?3. How to get started?
January 28, 198611:38:00 ESTA cold morning
January 28, 198611:39:13 EST
Bad design can kill!
Good design can save lives!
39% accuracydetecting hearth failure
Michelle Borkin: Can astronomers help doctors?
detecting hearth failure
Michelle Borkin: Can astronomers help doctors?
62% accuracy
detecting hearth failure
Michelle Borkin: Can astronomers help doctors?
91% accuracy
As scientists, we have the duty to clearly communicate our research
Why should I care?
A Primer on Visual Design 1. Why should I care?2. What is design?3. How to get started?
What is design?Creating an artefact to solve a problem
communicate your research
presentation
What is design?Creating an artefact to solve a problem
communicate your research
presentation
Good design is like a crystal glass
Good design is like a crystal glass
Bad design is like a golden chalice
A Primer on Visual Design 1. Why should I care?2. What is design?3. How to get started?
How to get started
Think
How to get started
Think Feel
How to get started
Think Feel Copy
How to get started
Think Feel Copy Do
How to get started: Design elements
1. Layout2. Equations3. Diagrams4. Graphs5. Images6. Text
How to get started: Design elements
1. Layout2. Equations3. Diagrams4. Graphs5. Images6. Text
Create contrastmakes life interesting
Embrace empty spacecreates focus
Seek balanceensures stability
Visual centre
Focus points
Visual centre
How to get started: Design elements
1. Layout2. Equations3. Diagrams4. Graphs5. Images6. Text
Provide meaning
kinetic energy
harmonic oscillator
external force
cancel
Show what changes
Complete the square
Interpret the results
Complete the square
displaced centre
energy shift
How to get started: Design elements
1. Layout2. Equations3. Diagrams4. Graphs5. Images6. Text
point
Elements of a diagram
point
line
Elements of a diagram
point
shape
line
Elements of a diagram
point
shape
shading
line
Elements of a diagram
point
shape
shading
colour
line
Elements of a diagram
Elements of a diagramgive meaning to each element
t
g
g
t
t_ H
How to get started: Design elements
1. Layout2. Equations3. Diagrams4. Graphs5. Images6. Text
Typical graphway too much happening!
Redesigned grapheliminate all but essential
68%
Redesigned graphslowly reveal details
89+35
-26 68%
Redesigned graphslowly reveal details
How to get started: Design elements
1. Layout2. Equations3. Diagrams4. Graphs5. Images6. Text
Make it stand out!
How to get started: Design elements
1. Layout2. Equations3. Diagrams4. Graphs5. Images6. Text
Readabaility over everything!
I use Signika. It’s made for wayfinding.
I use Signika. It’s made for wayfinding.
Helveticais not boring!
Readabaility over everything!
Helveticais not boring!
Droid Sans. It’s made for small screens
Readabaility over everything!
I use Signika. It’s made for wayfinding.
A Primer on Visual Design 1. Why should I care?2. What is design?3. How to get started?
Layout Equations Diagrams Graphs Images Text
Some useful resources
Flickr
The Noun Project
Google Images
Google Web Fonts
Font Squirrel
Roger’s Online Latex Editor
search for Creative Commons Photos
icons for any noun
use it for inspiration
free fonts, search for sans serifs
free fonts, search for sans serifs
use it for nice equationsrogercortesi.com/eqn/
Presentation Zen
The Visual Display of Quantitative Information
Garr Reynolds
Edward Tufte
Further reading
slide:ologyNancy Duarte
Presentation Zen Design
resonate
Naked Presenter
Garr Reynolds
Nancy Duarte
Garr Reynolds
Further reading
Thanks toTheNounProject.com
Flickr.com
P.J. Onori
Renee Ramsey-Passmore
Jack Biesek, Gladys Brenner, Margaret Faye, Healther Merrifield, Kate Keating, Wendy Olmstead, Todd Pierce, Jamie Cowgill & Jim Bolek
flickr.com/photos/kanaka (Kanaka Menehune)
flickr.com/photos/ianettf (Francesco Ianett)
flickr.com/photos/lrargerich (Luis Argerich)