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

Align to grid

Visual centre

Focus points

Visual centre

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)