CONTENT STRATEGIST’S GUIDE TO DESIGN

Holistic Thinking for Better Content

#wrk7

JOEL G GOODMANPRINCIPAL, BRAVERY MEDIA

#wrk7

Bravery is a design and web strategy agency based  in Austin, TX. We craft memorable experiences

with colleges, universities, & startups.

@JOELGOODMANBRAVERYMEDIA.CO | @BRAVERYMEDIA

#wrk7

VOCABWait, what did they say?

#wrk7

VOCAB

#wrk7

GRAPHIC DESIGN

• UI (User Interface)

• Typography

• Color Palette

UX (USER EXPERIENCE)

• Layout

• Information Architecture

• Interaction

CONSISTENCY

#wrk7

Systems are more usable and learnable when similar parts are expressed in similar ways.

U N I V E R S A L P R I N C I P L E S O F D E S I G N

CONSISTENCY

#wrk7

iTunes

Sony Cassette Deck

VISUAL HIERARCHY

#wrk7

Hierarchical representation is the simplest method of increasing knowledge about the structure of a system.

U N I V E R S A L P R I N C I P L E S O F D E S I G N

VISUAL HIERARCHY

#wrk7

VISUAL HIERARCHY

#wrk7

VISUAL HIERARCHY

#wrk7

VISUAL HIERARCHY

#wrk7

TYPOGRAPHY

#wrk7

Don’t use more than 2 different fonts in any given design.

R U L E O F T H U M B

TYPOGRAPHY

#wrk7

Don’t combine the same font-styles.

S E C O N D R U L E O F T H U M B

TYPOGRAPHY

#wrk7

Serif FontAlso Serif Font

TYPOGRAPHY

#wrk7

Sans-serif FontAlso Sans-serif Font

#wrk7

Sans-serif HeadlineFingerstache dolor vinyl messenger bag, you probably haven't heard of them banjo odio jean shorts proident tempor artisan. Kale chips salvia high life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar commodo whatever iphone. Pork belly ad artisan literally, whatever wes anderson in etsy banksy non. Nulla ullamco portland duis.

Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral truffaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure godard. Proident pariatur terry richardson actually dolor helvetica. Anim messenger bag YOLO, retro proident +1 organic neutra tempor odio american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth chillwave veniam wolf typewriter cillum. Est occaecat semiotics, chambray do reprehenderit quinoa tonx officia pinterest whatever. Four loko enim organic wolf tempor bushwick.

#wrk7

Serif HeadlineFingerstache dolor vinyl messenger bag, you probably haven't heard of them banjo odio jean shorts proident tempor artisan. Kale chips salvia high life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar commodo whatever iphone. Pork belly ad artisan literally, whatever wes anderson in etsy banksy non. Nulla ullamco portland duis.

Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral truffaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure godard. Proident pariatur terry richardson actually dolor helvetica. Anim messenger bag YOLO, retro proident +1 organic neutra tempor odio american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth chillwave veniam wolf typewriter cillum. Est occaecat semiotics, chambray do reprehenderit quinoa tonx officia pinterest whatever. Four loko enim organic wolf tempor bushwick.

#wrk7

Oh hey, this worksFingerstache dolor vinyl messenger bag, you probably haven't heard of them

banjo odio jean shorts proident tempor artisan. Kale chips salvia high life

brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache

polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape qui

forage et beard actually consectetur. Pariatur veniam trust fund, keytar commodo

whatever iphone. Pork belly ad artisan literally, whatever wes anderson in etsy

banksy non. Nulla ullamco portland duis.

Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral truffaut,

brunch banh mi swag dreamcatcher accusamus YOLO banjo irure godard.

Proident pariatur terry richardson actually dolor helvetica. Anim messenger bag

YOLO, retro proident +1 organic neutra tempor odio american apparel vero

occaecat. Vegan bicycle rights seitan brooklyn, synth chillwave veniam wolf

typewriter cillum. Est occaecat semiotics, chambray do reprehenderit quinoa

tonx officia pinterest whatever. Four loko enim organic wolf tempor bushwick.

COLOR

#wrk7

Color is used in design to attract attention, group elements, indicate meaning, and enhance aesthetics.

U N I V E R S A L P R I N C I P L E S O F D E S I G N

COLOR

#wrk7

T H I N G S T O W A T C H F O R . . .

• Number of colors you use

• Color combinations

• Saturation

COLOR

#wrk7

COLOR

#wrk7

COLOR

#wrk7

TASTE.

#wrk7

TASTE.

1. Follow respected taste-makers

2. Read design blogs, magazines, & books

3. Do lots of design tutorials

4. rinse, repeat

#wrk7

#wrk7

RESOURCES

SEMIOTICSSYMBOLS AND SIGNS AND SIGNIFIERS AND MEANING

(I’M A BIG NERD ABOUT THIS STUFF)

#wrk7

SEMIOTICS

#wrk7

SEMIOTICS

#wrk7

SEMIOTICS

#wrk7

SEMIOTICS

#wrk7

SEMIOTICS

#wrk7

SEMIOTICS

#wrk7

CONTENT FOR HUMANITYCREATING FOR EMOTIONAL RESPONSE

#wrk7

DESIGNING FOR EMOTION

#wrk7 abookapart.com

DESIGNING FOR EMOTION

#wrk7

DESIGNING FOR EMOTION

#wrk7

THEORY AND PRACTICELET’S MAKE SOMETHING GREAT

#wrk7