Download - Content Strategist's Guide to Design
![Page 1: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/1.jpg)
CONTENT STRATEGIST’S GUIDE TO DESIGN
Holistic Thinking for Better Content
#wrk7
![Page 2: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/2.jpg)
JOEL G GOODMANPRINCIPAL, BRAVERY MEDIA
#wrk7
![Page 3: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/3.jpg)
Bravery is a design and web strategy agency based in Austin, TX. We craft memorable experiences
with colleges, universities, & startups.
![Page 4: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/4.jpg)
![Page 5: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/5.jpg)
@JOELGOODMANBRAVERYMEDIA.CO | @BRAVERYMEDIA
#wrk7
![Page 6: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/6.jpg)
VOCABWait, what did they say?
#wrk7
![Page 7: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/7.jpg)
VOCAB
#wrk7
GRAPHIC DESIGN
• UI (User Interface)
• Typography
• Color Palette
UX (USER EXPERIENCE)
• Layout
• Information Architecture
• Interaction
![Page 8: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/8.jpg)
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
![Page 9: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/9.jpg)
CONSISTENCY
#wrk7
iTunes
Sony Cassette Deck
![Page 10: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/10.jpg)
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
![Page 11: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/11.jpg)
VISUAL HIERARCHY
#wrk7
![Page 12: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/12.jpg)
VISUAL HIERARCHY
#wrk7
![Page 13: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/13.jpg)
VISUAL HIERARCHY
#wrk7
![Page 14: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/14.jpg)
VISUAL HIERARCHY
#wrk7
![Page 15: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/15.jpg)
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
![Page 16: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/16.jpg)
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
![Page 17: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/17.jpg)
TYPOGRAPHY
#wrk7
Serif FontAlso Serif Font
![Page 18: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/18.jpg)
TYPOGRAPHY
#wrk7
Sans-serif FontAlso Sans-serif Font
![Page 19: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/19.jpg)
#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.
![Page 20: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/20.jpg)
#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.
![Page 21: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/21.jpg)
#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.
![Page 22: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/22.jpg)
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
![Page 23: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/23.jpg)
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
![Page 24: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/24.jpg)
COLOR
#wrk7
![Page 25: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/25.jpg)
COLOR
#wrk7
![Page 26: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/26.jpg)
COLOR
#wrk7
![Page 27: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/27.jpg)
TASTE.
#wrk7
![Page 28: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/28.jpg)
TASTE.
1. Follow respected taste-makers
2. Read design blogs, magazines, & books
3. Do lots of design tutorials
4. rinse, repeat
#wrk7
![Page 29: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/29.jpg)
#wrk7
RESOURCES
![Page 30: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/30.jpg)
SEMIOTICSSYMBOLS AND SIGNS AND SIGNIFIERS AND MEANING
(I’M A BIG NERD ABOUT THIS STUFF)
#wrk7
![Page 31: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/31.jpg)
SEMIOTICS
#wrk7
![Page 32: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/32.jpg)
SEMIOTICS
#wrk7
![Page 33: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/33.jpg)
SEMIOTICS
#wrk7
![Page 34: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/34.jpg)
SEMIOTICS
#wrk7
![Page 35: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/35.jpg)
SEMIOTICS
#wrk7
![Page 36: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/36.jpg)
SEMIOTICS
#wrk7
![Page 37: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/37.jpg)
CONTENT FOR HUMANITYCREATING FOR EMOTIONAL RESPONSE
#wrk7
![Page 39: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/39.jpg)
DESIGNING FOR EMOTION
#wrk7
![Page 40: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/40.jpg)
DESIGNING FOR EMOTION
#wrk7
![Page 41: Content Strategist's Guide to Design](https://reader033.vdocuments.us/reader033/viewer/2022052705/58aa852e1a28ab2e448b53ad/html5/thumbnails/41.jpg)
THEORY AND PRACTICELET’S MAKE SOMETHING GREAT
#wrk7