visual communication for accidental designers
TRANSCRIPT
![Page 1: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/1.jpg)
Fake it Til You Make it: Visual Literacy for Accidental Designers
March 23, 2015
Charrosé King KC Sledd
#16NTCdesign
![Page 3: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/3.jpg)
Your Team
Charrosé King @charroseckSenior Social Media Specialist American Psychiatric Association
KC Sledd @kcesleddSenior Manager of Strategy Atlantic Media Strategies
#16NTCdesign
![Page 4: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/4.jpg)
Agenda
• True or False• Why Design Matters to Your Brand• Design Elements and How to Use Them• Small Group Design Critique
#16NTCdesign
![Page 5: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/5.jpg)
True or False: Design Edition
![Page 6: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/6.jpg)
Art and design are the same.
![Page 7: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/7.jpg)
Art and design are the same.
FALSE
![Page 8: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/8.jpg)
Good art says something different to everyone.
Good design says the same thing to everyone.
![Page 9: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/9.jpg)
#16NTCdesign
![Page 10: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/10.jpg)
Art is a talent.
Design is a skill.
![Page 11: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/11.jpg)
Different is always better.
![Page 12: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/12.jpg)
Different is always better.
FALSE
![Page 13: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/13.jpg)
#16NTCdesign
![Page 14: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/14.jpg)
#16NTCdesign
![Page 15: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/15.jpg)
Originality exists.
![Page 16: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/16.jpg)
Originality exists.
FALSE
![Page 17: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/17.jpg)
#16NTCdesign
![Page 18: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/18.jpg)
“The only art I’ll ever study is stuff that I can steal from.”
David Bowie
![Page 19: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/19.jpg)
#16NTCdesign
![Page 20: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/20.jpg)
“You are the sum total of everything you've ever seen, heard, eaten, smelled, been told, forgot - it's all there. Everything influences each of us.”
Maya Angelou
![Page 21: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/21.jpg)
Remember this:
1. Look for problems, then solve them
2. Always use the company style guide
3. Design is CRAP - contrast, repetition, alignment, proximity
#16NTCdesign
![Page 22: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/22.jpg)
What Brand Has To Do With It
![Page 23: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/23.jpg)
Brand is perception.
It creates:
• Positioning of your organization in the marketplace
• Awareness among your target audiences
• A relationship between you and the audience
Image: SSIR
#16NTCdesign
![Page 24: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/24.jpg)
For nonprofits, this can translate to donations.
![Page 25: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/25.jpg)
Donors gave 38% more through branded donation pages than through generic ones.
![Page 26: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/26.jpg)
Your logo is not your brand.
#16NTCdesign
![Page 27: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/27.jpg)
–Jeff Bezos, founder of amazon.com
“Your brand is what other people say about you when you're not in the room.”
![Page 28: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/28.jpg)
Define what makes you different.
Actions + Values
What choices would your brand make on a journey?
What emotions best represent how your brand feels?
Voice
How does your brand convey its message?
What words and language will you use?
Look and Feel
How will visuals convey your brand?
How does your strategy support your visual choices?
Characteristics
What qualities would your brand have if it was a person?
How would you describe your brand at a cocktail party?
#16NTCdesign
![Page 29: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/29.jpg)
Create your own Teen Magazine quiz to figure out who you are.
#16NTCdesign
![Page 30: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/30.jpg)
Design can express your brand to the public.
GlobalGiving is:
Engaging Accessible Hopeful Curious Human Substantive Forward-thinking Smart Enthusiastic
#16NTCdesign
![Page 31: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/31.jpg)
Imagery, fonts, and logo play a collective role in activating your brand.
#16NTCdesign
![Page 32: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/32.jpg)
Design Elements and How to Use Them
![Page 33: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/33.jpg)
Layout
![Page 34: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/34.jpg)
Alignment
Always use a grid
#16NTCdesign
![Page 35: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/35.jpg)
Hierarchy
Gutenberg F formation Z formation
Primary Optical
Area
Strong Fallow Area
Weak Fallow Area
Terminal Area
#16NTCdesign
![Page 36: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/36.jpg)
Balance
Symmetry Asymmetry Unbalanced
#16NTCdesign
![Page 37: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/37.jpg)
Typography
![Page 38: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/38.jpg)
![Page 39: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/39.jpg)
“Typography exists to honor content.”
-Robert Bringhurst, The Elements of Typographic Style
#16NTCdesign
![Page 40: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/40.jpg)
![Page 41: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/41.jpg)
Choosing a Typeface
#16NTCdesign
![Page 42: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/42.jpg)
Choosing a Typeface1. Well-designed
2. Designed for intended use
3. Accommodating
• Numbers
• Italics
• Glyphs
4. “Sympathetic to the theme”
•Lean
•Strong
•Swift
![Page 43: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/43.jpg)
Font Types
A T A TSerif Usually more formal, classical Varying strokes Good for body text in print, long reads
Sans Serif Usually more casual, modern, simple Uniform strokes, geometric lines Good for small text Good for electronic body text
#16NTCdesign
![Page 44: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/44.jpg)
Choosing a Typeface
Instructions written in a sans serif typeface?
Or instructions written in a serif typeface?
Which instructions are easier to understand?
#16NTCdesign
![Page 45: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/45.jpg)
Choosing a Typeface
Instructions written in a sans serif typeface?
Or instructions written in a serif typeface?
Which instructions are easier to understand?
90.7%
#16NTCdesign
![Page 46: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/46.jpg)
Choosing a Typeface
The documentary using a sans serif typeface?
Or the documentary using a serif typeface?
Which documentary is more in-depth and well-researched?
#16NTCdesign
![Page 47: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/47.jpg)
Choosing a Typeface
The documentary using a sans serif typeface?
Or the documentary using a serif typeface?
Which documentary is more in-depth and well-researched?
78.3%
#16NTCdesign
![Page 48: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/48.jpg)
I love you.
I hate you.
![Page 49: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/49.jpg)
Creating Contrast with One Typeface
#16NTCdesign
![Page 50: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/50.jpg)
Color
![Page 51: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/51.jpg)
The color wheel is your guide.• Primary
• Red
• Blue
• Yellow
#16NTCdesign
![Page 52: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/52.jpg)
The color wheel is your guide.• Secondary (made from primary colors)
• Green
• Violet
• Orange
#16NTCdesign
![Page 53: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/53.jpg)
The color wheel is your guide.• Tertiary (made from one primary and one
secondary color)
• Red-Orange
• Orange-Yellow
• Yellow-Green
• Green-Blue
• Blue-Violet
• Violet-Red
#16NTCdesign
![Page 54: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/54.jpg)
Color Wheel: Complementary Colors• Complementary colors are directly across
from each other in the color wheel.
• High contrast
• Eye-catching
• Can also be difficult to look at, vibrates
• Primary-Secondary or Tertiary-tertiary
#16NTCdesign
![Page 55: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/55.jpg)
Color Wheel: Analogous Colors• Three colors next to each other on the color
wheel
• Typically one color is dominant color, which tends to be a primary or secondary color, with two tertiary.
• Harmonious
#16NTCdesign
![Page 56: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/56.jpg)
• Stands for Red, Green, and Blue
• Used for digital communications
• Additive color = mixing colored lights
• Lack of color = black
• Stands for Cyan, Magenta, Yellow, and Key (Black)
• Used for print
• Subtractive color = mixing pigments
• Lack of color = white
Color Codes: There are two different systems to express color in digital and print formats.
CMYKRGB
#16NTCdesign
![Page 57: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/57.jpg)
Use 2-3 colors per piece to avoid overwhelming the user.
Use tints and shades to add variation without adding extra colors.
#16NTCdesign
![Page 58: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/58.jpg)
Selecting colors for your brand should be part of your overall design strategy.
Black: Powerful and sleek
Blue: Trustworthy and secureGreen: Relaxing and easy to view
Purple: Calming and soothing
Yellow: Youthful and optimistic
Red: Energetic and urgent
Orange: Creates a call to action
Pink: Romantic and feminine
#16NTCdesign
![Page 59: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/59.jpg)
Images
![Page 60: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/60.jpg)
Decide what you want your brand to represent, and consider your audience through this process.
Is your audience international?
Will they need accessible features?
Where will you use the colors?
#16NTCdesign
![Page 61: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/61.jpg)
10%
Images are critical to your visual strategy because of the Picture Superiority Effect.
Cat
#16NTCdesign
![Page 62: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/62.jpg)
10%
Images are critical to your visual strategy because of the Picture Superiority Effect.
65%
Cat
#16NTCdesign
![Page 63: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/63.jpg)
What do you want people to remember?
• Use:
• Hopeful, smiling faces
• Personality and character
• High-quality, high-resolution images
Not:
• Poor quality
• Obviously posed photos
• Constituents as victims
#16NTCdesign
![Page 64: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/64.jpg)
Consider the Rule of Thirds when selecting images.
#16NTCdesign
![Page 65: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/65.jpg)
The Face-ism Ratio is key when deciding how you want to portray your subject.
#16NTCdesign
![Page 66: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/66.jpg)
Use memorable iconography to give clear context to your audiences.
#16NTCdesign
![Page 67: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/67.jpg)
Apply it IRL
![Page 68: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/68.jpg)
Powerpoint
• Ask “Does this serve a purpose?”
• White space is your friend
• Big text, fewer words
• Go big or go home: 60 point headers, 36 point font body text
• Test your Powerpoint - make sure that people in the back can read it
• Use a grid
#16NTCdesign
![Page 69: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/69.jpg)
Good slides make it easy on the viewer to consume information.
#16NTCdesign
![Page 70: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/70.jpg)
Newsletters
• Start with a strategy
• Use system fonts, even if it’s not your brand
• Have a header image, such as your logo
• Write out your organization’s name just in case
• Use two to three typefaces max
#16NTCdesign
![Page 71: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/71.jpg)
Simple newsletter templates are easy to create and easy to read.
#16NTCdesign
![Page 72: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/72.jpg)
Social Media Shareables
• Make sure info is accessible within 2 seconds or less
• Use icons that are familiar and recognizable by people
• Contrast, contrast, contrast
• Maintain a visual and message hierarchy
• Use words that your audience will recognize
#16NTCdesign
![Page 73: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/73.jpg)
Social media shareables should give the user an identity to demonstrate to their networks.
#16NTCdesign
![Page 74: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/74.jpg)
Small Group Activity
![Page 75: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/75.jpg)
Thank You!
![Page 76: Visual Communication for Accidental Designers](https://reader038.vdocuments.site/reader038/viewer/2022110107/58a278c41a28ab94628b7427/html5/thumbnails/76.jpg)
Thank You
KC Sledd @kcesleddSenior Manager of StrategyAtlantic Media [email protected]
Charrosé King @charroseckSenior Social Media SpecialistAmerican Psychiatric [email protected]
Please complete session-specific feedback survey through the: • http://po.st/YkbWaV • Mobile app • Website listing
#16NTCdesign