þm à ky¡t Êk} 6më¡}k ¡}ëÌ% · graphs & logos use the right file type x . gimp canva...
TRANSCRIPT
Graphic Design
Session 2PMAP 8921: Data Visualization with R
Andrew Young School of Policy StudiesMay 2020
1 / 45
ContrastRepetition
AlignmentProximity
Plan for today
Truth, beauty, stories, design
Graphic design and CRAP
Image types2 / 45
Truth, beauty, stories, design
3 / 45
Why even care about design?
4 / 45
Content + form
Art is how we translatecore, essential content
to different formsfor specific audiences.
5 / 45
Stories + content + form
Stories are an art form fortranslating core, essential content
to different formsfor specific audiences.
6 / 45
Stories
“A need to tell and hear stories is essential tothe species Homo sapiens—second in
necessity apparently after nourishment andbefore love and shelter.”
—Reynolds Price, from A Palpable God
7 / 45
Beauty, stories, and truthTruth 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 canfollow to create beauty—and truth.
8 / 45
Graphic design and CRAP
9 / 45
Principles of design
There are thousands of books andcenturies of debate and theory about
what makes good design.
For this class, the easiestand most memorable distillation
of these principles is CRAP.
10 / 45
Use these principles as achecklist when creating andcritiquing designed objects:
Contrast
Repetition
Alignment
ProximityBuy this book and your life will change forever.
CRAP
11 / 45
Contrast
If two items are not exactlythe same, make them different.
Really different.Don't be a wimp.
12 / 45
Typographic contrast: FamilyUse 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 vowSlab serif Sphinx of black quartz, judge my vowScript Sphinx of black quartz, judge my vowMonospaced Sphinx of black quartz, judge my vow
13 / 45
Here’s a heading
Lorem ipsum dolor sit amet,consectetur adipisicing elit, seddo eiusmod tempor incididunt utlabore et dolore magna aliqua.
Here’s a headingLorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Typographic constrast: FamilyAdd contrast in family
14 / 45
Typographic contrast: WeightUse 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 vow15 / 45
Here’s a headingLorem ipsum dolor sit amet,consectetur adipisicing elit, seddo eiusmod tempor incididunt utlabore 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.
Typographic constrast: WeightAdd contrast in weight
16 / 45
Size contrastUse contrasting sizes
Huge Big Regular Small Tiny
17 / 45
Triad
Monochromatic
Complementary
Split complementary
Color contrastColor theory
color.adobe.com
18 / 45
Usability and accessibility
Perceptually uniform colorsValues close to each other use similar colors,
and values far from each other use different colors
Colorblind-safe colors8% of men & 0.05% of women have some form of color blindness
Colors should be distinguishable by peoplewith common forms of color blindness
20 / 45
Traditional palettes vs. viridis Traditional palettes vs. viridis as seen with deuteranopia
Perceptually uniform colors
21 / 45
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
Perceptually uniform colors
22 / 45
Repetition
Repeat some aspectof the design throughout
the entire piece.
23 / 45
Things to repeat
Colors
FontsFamilies, weights, sizes
Graphical elements
Alignments24 / 45
25 / 45
Alignment
Every item should have avisual connection with
something else on the page.
26 / 45
Bad alignmentGood alignment—everything is connected to something
Alignment
27 / 45
4 horizontal alignments; 3 vertical alignments1 shared horizontal alignment; 2 vertical alignments
Alignment + repetitionShare lines and repeat alignments where possible.
28 / 45
Chapter 1
Here’s a title
Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt 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.
Alignment + contrastCenter + left is super common, but has weak contrast
Mixing left and right alignment provides stronger contrast
29 / 45
Proximity
Group related items together.
30 / 45
Bad proximity; no logical groupings Good proximity; information visually grouped
ProximityUse white space, color, location, contrast, repetition,alignment, etc. to make visually distinct groupings
31 / 45
Contrast Repetition Alignment Proximity
CRAP review
32 / 45
Image types
33 / 45
Bitmaps
JPEG: Photographs
PNG/GIF: Imageswith limited colors
Vectors
PDF (or EPS):Anything vector based
SVG: Vectors online
Image types
34 / 45
PNG • 130 KB
35 / 45
PNG • 130 KB • Zoomed
36 / 45
JPG • 75% quality • 161 KB
37 / 45
JPG • 75% quality • 161 KB • Zoomed
38 / 45
JPG • 10% quality • 88 KB
39 / 45
JPG • 10% quality • 88 KB • Zoomed
40 / 45
41 / 45
42 / 45
Benjamin, December 2017
RAWNo compression • 27.1 MB 😱
JPG75% quality • 3.2 MB
JPG10% quality • 654 KB
PNG32.9 MB 😱
In defense of the JPG
43 / 45
Web
JPG
JPG
Photographs
Web
PNG or SVG
Graphs & logos
Use the right file type
44 / 45
GIMP Canva
Photos/bitmaps
Adobe Photoshop
Inkscape Gravit Designer
Vectors
Adobe Illustrator
Scribus Canva
Documents
Adobe InDesign
What programs do I use?
45 / 45