Part 3
Truth comes from aesthetic combination of content and form.
Truth comes from aesthetic combination of content and form.
Raw facts must be communicated through some form.
Truth comes from aesthetic combination of content and form.
Raw facts must be communicated through some form.
Beauty shapes that form.
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.
There are thousands of books and
centuries of debate and theory about
what makes good 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.
Use these principles as a checklist when creating and critiquing designed objects:
Contrast
Repetition
Alignment
Proximity
If two items are not exactly
the same, make them different.
Really different.
If two items are not exactly
the same, make them different.
Really different.
Don't be a wimp.
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 |
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.
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.
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 |
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.
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.
Use contrasting sizes
Use contrasting sizes
Huge Big Regular Small Tiny
Color theory
Photo by Brad Huchteman on Unsplash
Perceptually uniform colors
Values close to each other use similar colors,
and values far from each other use different colors
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
Repeat some aspect
of the design throughout
the entire piece.
Colors
Colors
Fonts
Families, weights, sizes
Colors
Fonts
Families, weights, sizes
Graphical elements
Colors
Fonts
Families, weights, sizes
Graphical elements
Alignments
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"
Every item should have a
visual connection with
something else on the page.
Source: Robin Williams, The Non-Designer's Design Book
Share lines and repeat alignments where possible.
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.
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, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Group related items together.
Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings
Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings
Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings
Source: Robin Williams, The Non-Designer's Design Book
Contrast
Repetition
Alignment
Proximity
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 |
o | Tile View: Overview of Slides |
Esc | Back to slideshow |
Part 3
Truth comes from aesthetic combination of content and form.
Truth comes from aesthetic combination of content and form.
Raw facts must be communicated through some form.
Truth comes from aesthetic combination of content and form.
Raw facts must be communicated through some form.
Beauty shapes that form.
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.
There are thousands of books and
centuries of debate and theory about
what makes good 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.
Use these principles as a checklist when creating and critiquing designed objects:
Contrast
Repetition
Alignment
Proximity
If two items are not exactly
the same, make them different.
Really different.
If two items are not exactly
the same, make them different.
Really different.
Don't be a wimp.
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 |
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.
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.
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 |
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.
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.
Use contrasting sizes
Use contrasting sizes
Huge Big Regular Small Tiny
Color theory
Photo by Brad Huchteman on Unsplash
Perceptually uniform colors
Values close to each other use similar colors,
and values far from each other use different colors
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
Repeat some aspect
of the design throughout
the entire piece.
Colors
Colors
Fonts
Families, weights, sizes
Colors
Fonts
Families, weights, sizes
Graphical elements
Colors
Fonts
Families, weights, sizes
Graphical elements
Alignments
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"
Every item should have a
visual connection with
something else on the page.
Source: Robin Williams, The Non-Designer's Design Book
Share lines and repeat alignments where possible.
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.
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, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Group related items together.
Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings
Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings
Use white space, color, location, contrast, repetition,
alignment, etc. to make visually distinct groupings
Source: Robin Williams, The Non-Designer's Design Book
Contrast
Repetition
Alignment
Proximity