evoking emotion through typographyWE IT!Chiara Aliotta, Until SundayJoomla!Dagen Nederland 2013
Who ever said that pleasurewasn’t functional?Charles EamesAmerican architect and industrial designer❝
DESIGN FOR EMOTIONREASONS TO DESIGN FOR EMOTIONfundamentalS of typographyTHAT AFFECT A READER’s MOODEVOKING EMOTION THROUG...
;)
We perceive personality in the things in ourenvironment and then form relationshipswith those things based on the personal...
What is emotional design?Emotional design refers to design that’screated to intentionally trigger a consciousor unconsciou...
02DESIGN FOR EMOTIONREASONSTO DESIGN FOR EMOTIONfundamentalS of typographyTHAT AFFECT A READER’s MOODEVOKING EMOTIONTHROUG...
02 REASONS TO DESIGN FOR EMOTIONa)	Emotion dominates decision makingb)	Emotion increases motivationc)	Emotion affects memo...
02 REASONS TO DESIGN FOR EMOTIONEmotional states guide decision makingand behavior by affecting howwe focus attention.a)	E...
Athens, 08 March 2013, 4:46 PMWeather: Sunny, 17°Syntagma Metro Station
02 REASONS TO DESIGN FOR EMOTIONEmotional response increases the likelihoodthe user will perform a desired behavior.b)	Emo...
Toilette seat stickerthe toilet seat, mister!
02 REASONS TO DESIGN FOR EMOTIONEmotion increases the strength of memoriesthrough association and defines personality.c)	 ...
Coca Cola AdvertisingSANTA CLAUSby Huddon “Sunny” Sundblom, 1931
03DESIGN FOR EMOTIONREASONS TO DESIGN FOR EMOTIONfundamentalS of typographyTHAT AFFECT a READER’s MOODEVOKING EMOTIONTHROU...
People who are reading a welltypeset page are more engagedin the experience and findthat time flies by faster.The Aestheti...
03a)	 How the words lookb)	Readability and legibilityc)	 Contrastd)	Scalabilitye)	Hierarchyf)	 Tone of voiceThe invisible ...
03Georgiadesigned by Matthew CarterVerdanadesigned by Matthew Cartera) How the words lookAa AaFundamentals of Typography
03b) Readability and legibilityKerning and tracking are two elementsthat can determine if text is readableand letters are ...
I LOVE SHIITAKE MUSHROOMSI LOVE SHIITAKE MUSHROOMSKerningArvo, 60pt without kerningArvo, 60pt with positive kerningTipIn C...
TrackingTipIn CSS, you can control space uniformly between characters using letter-spacing propertyor the bookmarklet, Let...
03c) ContrastHighly contrasted text and backgroundcolors make reading easier.Fundamentals of Typography
PASSION PROJECTSpassion-projects.github.com
03d) ScalabilityAlways optimize size and line lengthto maintain readability.Fundamentals of Typography
Responsive typographyFLUID TYPE Percentagesby Trent Walton
03e) HierarchyHeaders and white space help eyesto easily scan the content.Fundamentals of Typography
VOGUE ITALIAwww.vogue.it
BIO.www.biography.com
03e) Tone of voiceTone of voice will drive users to the rightemotion and help them relate to the content.Fundamentals of T...
STOP SIGNredesign by Chiara Aliotta
TONE OF VOICEexampleWHATAREYOUDOING?
TONE OF VOICEexampleWHATAREYOUDOING?What are you doing?
04DESIGN FOR EMOTIONREASONS TO DESIGN FOR EMOTIONfundamentalS of typographyTHAT AFFECT a READER’s MOODEVOKING EMOTIONTHROU...
04Engage your audienceEVOKING EMOTION THROUGH TYPOGRAPHYa)	Draw attention: organize information	 in memoryb)	Add character...
04a) Draw attentionA well-designed layout encourages positiveassociations, reduces distraction and givesa sense of accompl...
EMOTIONs TYPEFACESConfidenceTrustDominanceConsistencySerifSans SerifSlab SerifORGANIZE INFORMATIONIN MEMORYAaDraw attention
SNOWBIRDwww.snowbird.com
IMPEROweareimpero.com
04b) Add character and personalityBy evoking emotions that suit the context,we are able to communicate a personalitythat e...
EMOTIONs TYPEFACESSpontaneityOpennessFreshnessHonestyFriendlinessScriptHandwritingPERSONAL AND HUMANAaAdd character and pe...
Athens, 12 December 2012, 9:32 PMWeather: Night, 12°Bar BLACKBOARD
G’NOSHwww.gnosh.co.uk
LA BEUBARlabeubar.com
FOuntain of youthwww.michelbergermonkey.com
EMOTIONs TYPEFACESHappinessFreedomEnjoymentExuberanceHandwritingSlab SerifSerifSmooth Sans SerifAaAdd character and person...
LET’S DO THISwww.letsdothis-now.org
ENGAGEengageinteractive.co.uk
EMOTIONs TYPEFACESProfessionalismHonestyTrustSerifSans SerifAaAdd character and personalitySERIOUS AND GROUNDED
THE TEST OF OWNERSHIPtestofownership.com
WITH ART VISIT PHILLYwithart.visitphilly.com
04c) Create memoriesTypography can tell a story, helping peopleprocess information, enhance memoriesand share their experi...
EMOTIONs TYPEFACESEngagementConsistencyDesirabilityInteractionSerifSans SerifScriptHandwritingTELL A STORYAaCreate memories
THE kitchen Productionwww.jacquico.com
THE RIDE AGENCYrideforthebrand.net
Stimulate imagination,evoke emotions, bring pleasureor do nothing.Alexander “Sandro” Girard,American architect and a texti...
Reading Lists & RecommendationsBooks ArticlesDesigning for EmotionAarron Walter, A Book ApartDesign for EmotionTrevor van ...
More things...Kerning.jshttp://kerningjs.com/Lettering.jshttp://letteringjs.com/Arctext.jshttp://fittextjs.com/Slab Textht...
www.untilsunday.itcopyright © 2013 Until Sunday. All rights reserved.
Upcoming SlideShare
Loading in...5
×

We heart it! Evoking emotion through typography

75,289

Published on

Starting from the point of view of Donald Norman, author of the book Emotional Design, and from the most recent book of Aaron Walter, Designing for Emotion, this presentation will explain how to use typography to trigger emotion and engage your website visitors.

Typography is an essential element in graphic design and communication. Usually it is used to “carry” information so it must have some common-sense characteristics such as high legibility and readability, scalability and appropriateness.
But there is yet another level to explore, where typography can play a big role: evoking and triggering emotions.

We all know about emotions because we experience them every day. Emotions influence the way we make decisions, evaluate risks, solve problems and categorize information.
In advertising and product design, emotions are a really well-known subject. In web design, emotional design has just recently made its way to usability.

After giving you 3 reasons to embrace emotional design, you will learn how to use typography to:

1. Avoid negative experiences with typography that require more attention and effort from users, which leads to unnecessary frustration and dangerous aversion of your site.
2. Create a positive experience and enhance user performance with your website, so that times flies faster!
3. Add personality and character to your website using typography for a more creative and unique experience.
4. Draw attention to specific areas of your site by creating visually appealing layouts and harmony.
5. Be clear and consistent for a more effective message.
6. And finally, encourage people to share their experiences and create long-lasting relationships with users.

All of these subjects will be presented in a very easy and engaging way, with practical examples and tools to solidify the concepts. It is not necessary to have any specific knowledge about design and typography (some basic terms will be introduced during the presentation).

Recommended for web designers, graphic designers and UX designers.

Published in: Design, Technology
0 Comments
55 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
75,289
On Slideshare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
0
Comments
0
Likes
55
Embeds 0
No embeds

No notes for slide

We heart it! Evoking emotion through typography

  1. 1. evoking emotion through typographyWE IT!Chiara Aliotta, Until SundayJoomla!Dagen Nederland 2013
  2. 2. Who ever said that pleasurewasn’t functional?Charles EamesAmerican architect and industrial designer❝
  3. 3. DESIGN FOR EMOTIONREASONS TO DESIGN FOR EMOTIONfundamentalS of typographyTHAT AFFECT A READER’s MOODEVOKING EMOTION THROUGH TYPOGRAPHY01
  4. 4. ;)
  5. 5. We perceive personality in the things in ourenvironment and then form relationshipswith those things based on the personalitieswe’ve given them.(Reeves & Nass, 1998)All design is emotional design01 Design for emotion
  6. 6. What is emotional design?Emotional design refers to design that’screated to intentionally trigger a consciousor unconscious emotional response.01 Design for emotion
  7. 7. 02DESIGN FOR EMOTIONREASONSTO DESIGN FOR EMOTIONfundamentalS of typographyTHAT AFFECT A READER’s MOODEVOKING EMOTIONTHROUGH TYPOGRAPHY
  8. 8. 02 REASONS TO DESIGN FOR EMOTIONa) Emotion dominates decision makingb) Emotion increases motivationc) Emotion affects memories and creates personalityThree reasons to design for emotion
  9. 9. 02 REASONS TO DESIGN FOR EMOTIONEmotional states guide decision makingand behavior by affecting howwe focus attention.a) Emotion dominates decision making
  10. 10. Athens, 08 March 2013, 4:46 PMWeather: Sunny, 17°Syntagma Metro Station
  11. 11. 02 REASONS TO DESIGN FOR EMOTIONEmotional response increases the likelihoodthe user will perform a desired behavior.b) Emotion increases motivation
  12. 12. Toilette seat stickerthe toilet seat, mister!
  13. 13. 02 REASONS TO DESIGN FOR EMOTIONEmotion increases the strength of memoriesthrough association and defines personality.c) Emotion affects memories and creates personality
  14. 14. Coca Cola AdvertisingSANTA CLAUSby Huddon “Sunny” Sundblom, 1931
  15. 15. 03DESIGN FOR EMOTIONREASONS TO DESIGN FOR EMOTIONfundamentalS of typographyTHAT AFFECT a READER’s MOODEVOKING EMOTIONTHROUGH TYPOGRAPHY
  16. 16. People who are reading a welltypeset page are more engagedin the experience and findthat time flies by faster.The Aesthetics of Readingby Kevin Larson and Rosalind Picard, Microsoft❝
  17. 17. 03a) How the words lookb) Readability and legibilityc) Contrastd) Scalabilitye) Hierarchyf) Tone of voiceThe invisible side of typographyFundamentals of Typography
  18. 18. 03Georgiadesigned by Matthew CarterVerdanadesigned by Matthew Cartera) How the words lookAa AaFundamentals of Typography
  19. 19. 03b) Readability and legibilityKerning and tracking are two elementsthat can determine if text is readableand letters are legible.Fundamentals of Typography
  20. 20. I LOVE SHIITAKE MUSHROOMSI LOVE SHIITAKE MUSHROOMSKerningArvo, 60pt without kerningArvo, 60pt with positive kerningTipIn CSS, you can control space between each letter using OptimizeLegibility propertyor with the bookmarklet, Kern.js
  21. 21. TrackingTipIn CSS, you can control space uniformly between characters using letter-spacing propertyor the bookmarklet, Lettering.jsI LOVE CHOCOLATEI LOVE CHOCOLATEArvo, 60pt without trackingArvo, 60pt with positive tracking (+20ems)
  22. 22. 03c) ContrastHighly contrasted text and backgroundcolors make reading easier.Fundamentals of Typography
  23. 23. PASSION PROJECTSpassion-projects.github.com
  24. 24. 03d) ScalabilityAlways optimize size and line lengthto maintain readability.Fundamentals of Typography
  25. 25. Responsive typographyFLUID TYPE Percentagesby Trent Walton
  26. 26. 03e) HierarchyHeaders and white space help eyesto easily scan the content.Fundamentals of Typography
  27. 27. VOGUE ITALIAwww.vogue.it
  28. 28. BIO.www.biography.com
  29. 29. 03e) Tone of voiceTone of voice will drive users to the rightemotion and help them relate to the content.Fundamentals of Typography
  30. 30. STOP SIGNredesign by Chiara Aliotta
  31. 31. TONE OF VOICEexampleWHATAREYOUDOING?
  32. 32. TONE OF VOICEexampleWHATAREYOUDOING?What are you doing?
  33. 33. 04DESIGN FOR EMOTIONREASONS TO DESIGN FOR EMOTIONfundamentalS of typographyTHAT AFFECT a READER’s MOODEVOKING EMOTIONTHROUGH TYPOGRAPHY
  34. 34. 04Engage your audienceEVOKING EMOTION THROUGH TYPOGRAPHYa) Draw attention: organize information in memoryb) Add character and personalityc) Create memories: tell a story
  35. 35. 04a) Draw attentionA well-designed layout encourages positiveassociations, reduces distraction and givesa sense of accomplishment.EVOKING EMOTION THROUGH TYPOGRAPHY
  36. 36. EMOTIONs TYPEFACESConfidenceTrustDominanceConsistencySerifSans SerifSlab SerifORGANIZE INFORMATIONIN MEMORYAaDraw attention
  37. 37. SNOWBIRDwww.snowbird.com
  38. 38. IMPEROweareimpero.com
  39. 39. 04b) Add character and personalityBy evoking emotions that suit the context,we are able to communicate a personalitythat establishes connection and trust.EVOKING EMOTION THROUGH TYPOGRAPHY
  40. 40. EMOTIONs TYPEFACESSpontaneityOpennessFreshnessHonestyFriendlinessScriptHandwritingPERSONAL AND HUMANAaAdd character and personality
  41. 41. Athens, 12 December 2012, 9:32 PMWeather: Night, 12°Bar BLACKBOARD
  42. 42. G’NOSHwww.gnosh.co.uk
  43. 43. LA BEUBARlabeubar.com
  44. 44. FOuntain of youthwww.michelbergermonkey.com
  45. 45. EMOTIONs TYPEFACESHappinessFreedomEnjoymentExuberanceHandwritingSlab SerifSerifSmooth Sans SerifAaAdd character and personalityFUn and informal
  46. 46. LET’S DO THISwww.letsdothis-now.org
  47. 47. ENGAGEengageinteractive.co.uk
  48. 48. EMOTIONs TYPEFACESProfessionalismHonestyTrustSerifSans SerifAaAdd character and personalitySERIOUS AND GROUNDED
  49. 49. THE TEST OF OWNERSHIPtestofownership.com
  50. 50. WITH ART VISIT PHILLYwithart.visitphilly.com
  51. 51. 04c) Create memoriesTypography can tell a story, helping peopleprocess information, enhance memoriesand share their experience.EVOKING EMOTION THROUGH TYPOGRAPHY
  52. 52. EMOTIONs TYPEFACESEngagementConsistencyDesirabilityInteractionSerifSans SerifScriptHandwritingTELL A STORYAaCreate memories
  53. 53. THE kitchen Productionwww.jacquico.com
  54. 54. THE RIDE AGENCYrideforthebrand.net
  55. 55. Stimulate imagination,evoke emotions, bring pleasureor do nothing.Alexander “Sandro” Girard,American architect and a textile designer❝
  56. 56. Reading Lists & RecommendationsBooks ArticlesDesigning for EmotionAarron Walter, A Book ApartDesign for EmotionTrevor van Gorp and Edie Adams,Morgan Kaufmann, 2012100 Things Every Designer Needsto Know About PeopleSusan Weinschenk, New Riders, 2011Emotional Design: Why We Love(or Hate) Everyday ThingsDon Norman, Basic Books, 2004A Practical Guide to Designingthe InvisibleRobert Mills, Five Simple Steps, 2005Don’t Make Me Think: A CommonSense Approach to Web UsabilitySteve Krug, New Riders, 200615 Practical Tips How To Use Typography For Emotional Designhttp://bit.ly/WGySl1Why Does ‘Emotional Design’Work on the Webhttp://onforb.es/uy7tZbEmotions in Typographic Design: An empirical examinationhttp://bit.ly/13BA8eeThe Aesthetics of Readinghttp://bit.ly/betxFPGrey Text and a White Background: What Happenedto Readability of Typehttp://bit.ly/p23ba5Effects of Typography on Reader Mood and Productivityhttp://bit.ly/p23ba5Web Design is 95% Typographyhttp://bit.ly/13F2RCOFluid Typehttp://bit.ly/KJNTCZ
  57. 57. More things...Kerning.jshttp://kerningjs.com/Lettering.jshttp://letteringjs.com/Arctext.jshttp://fittextjs.com/Slab Texthttp://bit.ly/wxGkOZFitTexthttp://bit.ly/zHhN9WWhatFont Toolhttp://chengyinliu.com/whatfont.htmlOvergram Appshttp://bit.ly/XG7JUpReadability Appshttp://www.readability.com/appsPhotolettering Appshttp://www.photolettering.com/Contrast Rebellionhttp://contrastrebellion.com/Typespirationhttp://typespiration.com/Kerntype gamehttp://type.method.ac/Shape type gamehttp://shape.method.ac/Type Connectionhttp://www.typeconnection.com/index.phpFont Gamehttp://fontgame.ilovetypography.com/I Shot the Serifhttp://bit.ly/fdCpMZApps and tools Funny things on web
  58. 58. www.untilsunday.itcopyright © 2013 Until Sunday. All rights reserved.

×