+ - 0:00:00
Notes for current slide
Notes for next slide

What makes
good design?

Part 3

 

 

1 / 26

Why even care about design?

Why care about design?
2 / 26

Beauty, stories, and truth

Truth comes from aesthetic combination of content and form.

3 / 26

Beauty, stories, and truth

Truth comes from aesthetic combination of content and form.

Raw facts must be communicated through some form.

3 / 26

Beauty, stories, and truth

Truth comes from aesthetic combination of content and form.

Raw facts must be communicated through some form.

Beauty shapes that form.

3 / 26

Beauty, stories, and truth

Truth comes from aesthetic combination of content and form.

Raw facts must be communicated through some form.

Beauty shapes that form.

There are aesthetic principles we can
follow to create beauty—and truth.

3 / 26

Principles of design

4 / 26

Principles of design

There are thousands of books and
centuries of debate and theory about
what makes good design.

4 / 26

Principles of design

There are thousands of books and
centuries of debate and theory about
what makes good design.

The easiest
and most memorable distillation
of these principles is CRAP.

4 / 26

CRAP

Use these principles as a checklist when creating and critiquing designed objects:

Contrast

Repetition

Alignment

Proximity

Robin Williams's The Non-Designers Design Book
Buy this book and your life will change forever.
5 / 26

Contrast

If two items are not exactly
the same, make them different.
Really different.

6 / 26

Contrast

If two items are not exactly
the same, make them different.
Really different.

Don't be a wimp.

6 / 26

Typographic contrast: Family

Use contrasting type families

Serif + Sans serif  Script + Serif  Slab + Sans serif  etc.

Serif Sphinx of black quartz, judge my vow
Sans serif Sphinx of black quartz, judge my vow
Slab serif Sphinx of black quartz, judge my vow
Script Sphinx of black quartz, judge my vow
Monospaced  Sphinx of black quartz, judge my vow
7 / 26

Typographic constrast: Family

Add contrast in family

Here’s a heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

8 / 26

Typographic constrast: Family

Add contrast in family

Here’s a heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Here’s a heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

8 / 26

Typographic contrast: Weight

Use contrasting weights in same type family

Bold + Regular  Regular + Extra light  Black + Light  etc.

Extra light  Sphinx of black quartz, judge my vow
Light Sphinx of black quartz, judge my vow
Regular Sphinx of black quartz, judge my vow
Semi bold Sphinx of black quartz, judge my vow
Bold  Sphinx of black quartz, judge my vow
Black Sphinx of black quartz, judge my vow
9 / 26

Typographic constrast: Weight

Add contrast in weight

Here’s a heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

10 / 26

Typographic constrast: Weight

Add contrast in weight

Here’s a heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Here’s a heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

10 / 26

Size contrast

Use contrasting sizes

 

11 / 26

Size contrast

Use contrasting sizes

 

Huge  Big  Regular  Small  Tiny

11 / 26

Color contrast

Color theory

color.adobe.com

Triad
Triad
Monochromatic
Monochromatic
Complementary
Complementary
Split complementary
Split complementary
12 / 26

Color contrast

Extracted colors
Colors extracted from an image at color.adobe.com
13 / 26

Photo by Brad Huchteman on Unsplash

Usability and accessibility

Perceptually uniform colors

Values close to each other use similar colors,
and values far from each other use different colors

14 / 26

Usability and accessibility

Perceptually uniform colors

Values close to each other use similar colors,
and values far from each other use different colors

Colorblind-safe colors

8% of men & 0.05% of women have some form of color blindness

Colors should be distinguishable by people
with common forms of color blindness

14 / 26

Perceptually uniform colors

Typical palettes
Traditional palettes vs. viridis
15 / 26

Perceptually uniform colors

Typical palettes
Traditional palettes vs. viridis
Deuteranopic palettes
Traditional palettes vs. viridis as seen with deuteranopia
15 / 26

Perceptually uniform colors

Georgia counties filled by area, rainbow palette (NOT GOOD)
16 / 26

Perceptually uniform colors

Georgia counties filled by area, rainbow palette (NOT GOOD)
Georgia counties filled by area, viridis::viridis palette
16 / 26

Perceptually uniform colors

Georgia counties filled by area, rainbow palette (NOT GOOD)
Georgia counties filled by area, viridis::viridis palette
Georgia counties filled by area, viridis::inferno palette
16 / 26

Repetition

 

Repeat some aspect
of the design throughout
the entire piece.

17 / 26

Things to repeat

Colors

18 / 26

Things to repeat

Colors

Fonts

Families, weights, sizes

18 / 26

Things to repeat

Colors

Fonts

Families, weights, sizes

Graphical elements

18 / 26

Things to repeat

Colors

Fonts

Families, weights, sizes

Graphical elements

Alignments

18 / 26
19 / 26

Source: Pages 5 and 9 from Oxfam's 2019 Annual Report/: https://assets.oxfamamerica.org/media/documents/2019_Oxfam_America_Annual_Report_web.pdf

If you want to see generally great examples of public sector designs, search for " annual report", like "red cross annual report" or "urban institute annual report"

Alignment

 

Every item should have a
visual connection with
something else on the page.

20 / 26

Alignment

Bad alignment
Bad alignment
21 / 26

Alignment

Bad alignment
Bad alignment
Good alignment
Good alignment—everything is connected to something
21 / 26

Source: Robin Williams, The Non-Designer's Design Book

Alignment + repetition

Share lines and repeat alignments where possible.

Bad alignment
4 vertical alignments; 3 horizontal alignments
Good alignment
1 shared vertical alignment; 2 horizontal alignments
22 / 26

Alignment + contrast

Center + left is super common, but has weak contrast

Mixing left and right alignment provides stronger contrast

Chapter 1

Here’s a title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

23 / 26

Alignment + contrast

Center + left is super common, but has weak contrast

Mixing left and right alignment provides stronger contrast

Chapter 1

Here’s a title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Chapter 1

Here’s a title

Lorem ipsum dolor sit amet, con­sec­tetur adi­pis­icing elit, sed do eiusmod tempor in­ci­di­dunt ut labore et dolore magna aliqua.

23 / 26

Proximity

 

Group related items together.

24 / 26

Proximity

Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings

25 / 26

Proximity

Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings

Bad proximity
Bad proximity; no logical groupings
25 / 26

Proximity

Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings

Bad proximity
Bad proximity; no logical groupings
Good proximity
Good proximity; information visually grouped
25 / 26

Source: Robin Williams, The Non-Designer's Design Book

CRAP review

Contrast

Contrast

Repetition

Repetition

Alignment

Alignment

Proximity

Proximity
26 / 26

Why even care about design?

Why care about design?
2 / 26
Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
oTile View: Overview of Slides
Esc Back to slideshow