Download - Visual Design Meets User Experience
![Page 1: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/1.jpg)
Visual Design meets User Experience
Brand Workshop
![Page 2: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/2.jpg)
What is a brand?
Your brand isn’t what you say it is, it’s what they say it is.
![Page 3: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/3.jpg)
What is a brand?
“I’ve learned that people will forget what you said, people will forget what your did, but people will never forget how you made them feel.”
Maya Angelou
![Page 4: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/4.jpg)
What is a brand?
If enough people have the same gut feeling, we call that a brand.
![Page 5: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/5.jpg)
What is a brand?
Brands are not optional. Managing them is.
![Page 6: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/6.jpg)
PART ONEPersonality
![Page 7: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/7.jpg)
Personality
The characteristics that people use to describe how they feel about your brand, rather than what they think it is or does.
![Page 8: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/8.jpg)
Brand Personality
Sincerity Excitement Competence Sophistication Ruggedness
Down-to-earth Daring Reliable Upper-class Outdoorsyfamily-orientedsmall-towndown-to-earth
daringtrendyexciting
reliablehard-workingsecure
upper-classglamorousgood-looking
outdoorsymasculinewestern
Honestsincerehonestreal
Wholesomeoriginalwholesome
Cheerfulsentimentalcheerfulfriendly
Intelligentintelligenttechnicalcorporate
Successfulsuccessfulleaderconfident
Spiritedcoolspiritedyoung
Imaginativeuniqueimaginative
Up-to-dateup-to-dateindependentcontemporary
Charmingcharmingfemininesmooth
Toughtoughruggedsmooth
![Page 9: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/9.jpg)
Personality
We can further define our personality by referencing people, things and other
brands with which we feel kinship.
![Page 10: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/10.jpg)
Brand Affinity
If you were a car… Ideal spokesman…. Kindred spirit brand….
![Page 11: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/11.jpg)
Personality
Our personality traits should have limits which prevent us from going too far.
![Page 12: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/12.jpg)
Personality
We can describe the limits of our personality traits in terms of a more extreme trait.
![Page 13: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/13.jpg)
Personality
Feminine but not girly
Witty but not zany
Parental but not stern
Geeky but not niche
Clever but not elitist
Playful but not cheeky
Trendy but not vogue
Daring but not impulsive
Classy but not exclusive
Risqué but not explicit
just right…
![Page 14: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/14.jpg)
Personality
Feminine not masculine
Witty not serious
Parental not childish
Geeky not sporty
Clever not stupid
Playful not dull
Trendy not outdated
Daring not timid
Classy not prudish
Risqué not crude
too far…
![Page 15: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/15.jpg)
Personality
Case Study : Red Badger
I’m crafty but not home-made
I’m up-to-date but not faddish
I’m simple but not plain
I’m imaginative but not eccentric
I’m structured but not by the book
![Page 16: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/16.jpg)
Example
I’m crafty but not home-made
I’m up-to-date but not faddish
I’m simple but not plain
I’m imaginative but not eccentric
I’m structured but not by the book
Case Study : Red Badger
![Page 17: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/17.jpg)
Example
Design using brand traits
Case Study : Red Badger
![Page 18: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/18.jpg)
ExampleCraft
Faddish
Simple
Eccentric
Structured
Homemade
Up-to-date
Plain
Imaginative
By-the-book
How would you best describe this site.
Spiritied
Down-to-earth
Family Oriented
Small-Town
Honest
Simplicity
Sentimental
Friendly
Choose 5 words that best describe this page
Brand Personality Questionnaire
Passion
Young
Imaginitive
Unique
Up-To-Date
Successful
Leader
Confident
Reliable
Hardworking
Secure
Intelligent
Technical
Corporate
Fast
Orgininal
Upper-Class
Glamourous
Attractive
Charming
Feminine
Smooth
Outdoorsy
Masculine
Wester
Tough
Rugged
Sincere
Real
Cheerful
Daring
Trendy
Exciting
Ltest
Cool
Independent
Contemporary
User test brand personality
Craft
Faddish
Simple
Eccentric
Structured
Homemade
Up-to-date
Plain
Imaginative
By-the-book
How would you best describe this site.
Spiritied
Down-to-earth
Family Oriented
Small-Town
Honest
Simplicity
Sentimental
Friendly
Choose 5 words that best describe this page
Brand Personality Questionnaire
Passion
Young
Imaginitive
Unique
Up-To-Date
Successful
Leader
Confident
Reliable
Hardworking
Secure
Intelligent
Technical
Corporate
Fast
Orgininal
Upper-Class
Glamourous
Attractive
Charming
Feminine
Smooth
Outdoorsy
Masculine
Wester
Tough
Rugged
Sincere
Real
Cheerful
Daring
Trendy
Exciting
Ltest
Cool
Independent
Contemporary
Case Study : Red Badger
![Page 19: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/19.jpg)
Example
User test brand personality results
Craft
Faddish
Simple
Eccentric
Structured
Homemade
Up-to-date
Plain
Imaginative
By-the-book
How would you best describe this site.
Spiritied
Down-to-earth
Family Oriented
Small-Town
Honest
Simplicity
Sentimental
Friendly
Choose 5 words that best describe this page
Brand Personality Questionnaire
Passion
Young
Imaginitive
Unique
Up-To-Date
Successful
Leader
Confident
Reliable
Hardworking
Secure
Intelligent
Technical
Corporate
Fast
Orgininal
Upper-Class
Glamourous
Attractive
Charming
Feminine
Smooth
Outdoorsy
Masculine
Wester
Tough
Rugged
Sincere
Real
Cheerful
Daring
Trendy
Exciting
Ltest
Cool
Independent
Contemporary
Case Study : Red Badger
![Page 20: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/20.jpg)
Brand Personality
Sincerity Excitement Competence Sophistication Ruggedness
Down-to-earth Daring Reliable Upper-class Outdoorsyfamily-orientedsmall-towndown-to-earth
daringtrendyexciting
reliablehard-workingsecure
upper-classglamorousgood-looking
outdoorsymasculinewestern
Honestsincerehonestreal
Wholesomeoriginalwholesome
Cheerfulsentimentalcheerfulfriendly
Intelligentintelligenttechnicalcorporate
Successfulsuccessfulleaderconfident
Spiritedcoolspiritedyoung
Imaginativeuniqueimaginative
Up-to-dateup-to-dateindependentcontemporary
Charmingcharmingfemininesmooth
Toughtoughruggedsmooth
![Page 21: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/21.jpg)
PART TWO
Voice and Tone
![Page 22: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/22.jpg)
Voice and Tone
Your brand voice is the distinctive way that you communicate with your customers,
both verbally and visually.
![Page 23: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/23.jpg)
Voice and Tone example
Virgin Atlantic
![Page 24: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/24.jpg)
The Right ToneVoice and
Tone
• What situation is the user at the moment?• How do they feel right now?• How is this going to affect the user?• How can I maintain the user’s state of mind or put then in
a better one?• Be extra careful around sensitive subjects like health,
religion and financial transactions
![Page 25: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/25.jpg)
Voice and Tone example
Mail Chimp
playful
serious
![Page 26: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/26.jpg)
Voice and Tone
Our tone adapts to circumstance or our customer’s emotional state. By varying tone
within the same overall voice, our brand communications feel more lifelike.
![Page 27: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/27.jpg)
Voice and Tone example
Best Buy mission statement
Being genuine means believing what we say. We’re a smart friend,
someone people can trust without question. People trust us because
we care about what we’re saying and who we’re saying it to. We
share our knowledge without being presumptuous or boastful. We’re
supportive, helpful and honest.
![Page 28: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/28.jpg)
Voice and Tone example
Being genuine means believing what we say. We’re a smart friend, someone people can trust without question. People trust us
because we care about what we’re saying and who we’re saying it
to. We share our knowledge without being presumptuous or boastful. We’re supportive, helpful and honest.
Best Buy mission statement
![Page 29: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/29.jpg)
Voice and Tone
my example
Red Badger mission statement
We believe in the power of simplicity. We are a team of software engineers and designers with a passion for our craft and a commitment to excellence. We use the latest tech to bring your ideas to life, and delivery business values, fast.
![Page 30: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/30.jpg)
Voice and Tone
my example
We believe in the power of simplicity. We are a team of software engineers and designers with a passion for our craft and a commitment to excellence. We use the latest tech to bring your ideas to life, and delivery business values, fast.
Red Badger mission statement
![Page 31: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/31.jpg)
PART THREE
Visualizing your Brand
![Page 32: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/32.jpg)
Visualizing your brand
example
This is a collage of images that give a certain mood or emotion.
![Page 33: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/33.jpg)
Visualizing your brand
example
A mood board for this purpose is all about feelings you want to portray.
![Page 34: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/34.jpg)
Visualizing your brand
my example
![Page 35: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/35.jpg)
Visualizing your brandStyle Tile
![Page 36: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/36.jpg)
Visualizing your brand
my example
![Page 37: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/37.jpg)
PART FOUR
Visual Design Topics
and there’s more to explore…..
![Page 38: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/38.jpg)
Visual Design Breakdown
Understanding the brain.
Visual Design Topics
![Page 39: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/39.jpg)
Visual Design Topics
Hierarchy and Gestalt Theory
![Page 40: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/40.jpg)
Visual Design Topics
Typographyand emotion
![Page 41: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/41.jpg)
Visual Design Topics
Color and Emotion
![Page 42: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/42.jpg)
THE END
Design is thinking made visual.
Saul Bass
![Page 43: Visual Design Meets User Experience](https://reader033.vdocuments.us/reader033/viewer/2022042818/55bea5cdbb61eb83498b4611/html5/thumbnails/43.jpg)
QA
Brand Workshop