We heart it! Evoking emotion through typography
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à We heart it! Evoking emotion through typography
Similaire à We heart it! Evoking emotion through typography (20)
Plus de Chiara Aliotta
Plus de Chiara Aliotta (15)
Dernier
Dernier (20)
We heart it! Evoking emotion through typography
- 1. evoking emotion through typography WE IT! Chiara Aliotta, Until Sunday Joomla!Dagen Nederland 2013
- 2. Who ever said that pleasure wasn’t functional? Charles Eames American architect and industrial designer ❝
- 3. DESIGN FOR EMOTION REASONS TO DESIGN FOR EMOTION fundamentalS of typography THAT AFFECT A READER’s MOOD EVOKING EMOTION THROUGH TYPOGRAPHY 01
- 4. ;)
- 5. We perceive personality in the things in our environment and then form relationships with those things based on the personalities we’ve given them. (Reeves & Nass, 1998) All design is emotional design 01 Design for emotion
- 6. What is emotional design? Emotional design refers to design that’s created to intentionally trigger a conscious or unconscious emotional response. 01 Design for emotion
- 7. 02 DESIGN FOR EMOTION REASONS TO DESIGN FOR EMOTION fundamentalS of typography THAT AFFECT A READER’s MOOD EVOKING EMOTION THROUGH TYPOGRAPHY
- 8. 02 REASONS TO DESIGN FOR EMOTION a) Emotion dominates decision making b) Emotion increases motivation c) Emotion affects memories and creates personality Three reasons to design for emotion
- 9. 02 REASONS TO DESIGN FOR EMOTION Emotional states guide decision making and behavior by affecting how we focus attention. a) Emotion dominates decision making
- 10. Athens, 08 March 2013, 4:46 PM Weather: Sunny, 17° Syntagma Metro Station
- 11. 02 REASONS TO DESIGN FOR EMOTION Emotional response increases the likelihood the user will perform a desired behavior. b) Emotion increases motivation
- 12. Toilette seat sticker the toilet seat, mister!
- 13. 02 REASONS TO DESIGN FOR EMOTION Emotion increases the strength of memories through association and defines personality. c) Emotion affects memories and creates personality
- 14. Coca Cola Advertising SANTA CLAUS by Huddon “Sunny” Sundblom, 1931
- 15. 03 DESIGN FOR EMOTION REASONS TO DESIGN FOR EMOTION fundamentalS of typography THAT AFFECT a READER’s MOOD EVOKING EMOTION THROUGH TYPOGRAPHY
- 16. People who are reading a well typeset page are more engaged in the experience and find that time flies by faster. The Aesthetics of Reading by Kevin Larson and Rosalind Picard, Microsoft ❝
- 17. 03 a) How the words look b) Readability and legibility c) Contrast d) Scalability e) Hierarchy f) Tone of voice The invisible side of typography Fundamentals of Typography
- 18. 03 Georgia designed by Matthew Carter Verdana designed by Matthew Carter a) How the words look Aa Aa Fundamentals of Typography
- 19. 03 b) Readability and legibility Kerning and tracking are two elements that can determine if text is readable and letters are legible. Fundamentals of Typography
- 20. I LOVE SHIITAKE MUSHROOMS I LOVE SHIITAKE MUSHROOMS Kerning Arvo, 60pt without kerning Arvo, 60pt with positive kerning Tip In CSS, you can control space between each letter using OptimizeLegibility property or with the bookmarklet, Kern.js
- 21. Tracking Tip In CSS, you can control space uniformly between characters using letter-spacing property or the bookmarklet, Lettering.js I LOVE CHOCOLATE I LOVE CHOCOLATE Arvo, 60pt without tracking Arvo, 60pt with positive tracking (+20ems)
- 22. 03 c) Contrast Highly contrasted text and background colors make reading easier. Fundamentals of Typography
- 24. 03 d) Scalability Always optimize size and line length to maintain readability. Fundamentals of Typography
- 25. Responsive typography FLUID TYPE Percentages by Trent Walton
- 26. 03 e) Hierarchy Headers and white space help eyes to easily scan the content. Fundamentals of Typography
- 29. 03 e) Tone of voice Tone of voice will drive users to the right emotion and help them relate to the content. Fundamentals of Typography
- 30. STOP SIGN redesign by Chiara Aliotta
- 32. TONE OF VOICE example WHATAREYOUDOING? What are you doing?
- 33. 04 DESIGN FOR EMOTION REASONS TO DESIGN FOR EMOTION fundamentalS of typography THAT AFFECT a READER’s MOOD EVOKING EMOTION THROUGH TYPOGRAPHY
- 34. 04 Engage your audience EVOKING EMOTION THROUGH TYPOGRAPHY a) Draw attention: organize information in memory b) Add character and personality c) Create memories: tell a story
- 35. 04 a) Draw attention A well-designed layout encourages positive associations, reduces distraction and gives a sense of accomplishment. EVOKING EMOTION THROUGH TYPOGRAPHY
- 36. EMOTIONs TYPEFACES Confidence Trust Dominance Consistency Serif Sans Serif Slab Serif ORGANIZE INFORMATION IN MEMORY Aa Draw attention
- 39. 04 b) Add character and personality By evoking emotions that suit the context, we are able to communicate a personality that establishes connection and trust. EVOKING EMOTION THROUGH TYPOGRAPHY
- 40. EMOTIONs TYPEFACES Spontaneity Openness Freshness Honesty Friendliness Script Handwriting PERSONAL AND HUMAN Aa Add character and personality
- 41. Athens, 12 December 2012, 9:32 PM Weather: Night, 12° Bar BLACKBOARD
- 45. EMOTIONs TYPEFACES Happiness Freedom Enjoyment Exuberance Handwriting Slab Serif Serif Smooth Sans Serif Aa Add character and personality FUn and informal
- 48. EMOTIONs TYPEFACES Professionalism Honesty Trust Serif Sans Serif Aa Add character and personality SERIOUS AND GROUNDED
- 49. THE TEST OF OWNERSHIP testofownership.com
- 50. WITH ART VISIT PHILLY withart.visitphilly.com
- 51. 04 c) Create memories Typography can tell a story, helping people process information, enhance memories and share their experience. EVOKING EMOTION THROUGH TYPOGRAPHY
- 52. EMOTIONs TYPEFACES Engagement Consistency Desirability Interaction Serif Sans Serif Script Handwriting TELL A STORY Aa Create memories
- 55. Stimulate imagination, evoke emotions, bring pleasure or do nothing. Alexander “Sandro” Girard, American architect and a textile designer ❝
- 56. Reading Lists & Recommendations Books Articles Designing for Emotion Aarron Walter, A Book Apart Design for Emotion Trevor van Gorp and Edie Adams, Morgan Kaufmann, 2012 100 Things Every Designer Needs to Know About People Susan Weinschenk, New Riders, 2011 Emotional Design: Why We Love (or Hate) Everyday Things Don Norman, Basic Books, 2004 A Practical Guide to Designing the Invisible Robert Mills, Five Simple Steps, 2005 Don’t Make Me Think: A Common Sense Approach to Web Usability Steve Krug, New Riders, 2006 15 Practical Tips How To Use Typography For Emotional Design http://bit.ly/WGySl1 Why Does ‘Emotional Design’Work on the Web http://onforb.es/uy7tZb Emotions in Typographic Design: An empirical examination http://bit.ly/13BA8ee The Aesthetics of Reading http://bit.ly/betxFP Grey Text and a White Background: What Happened to Readability of Type http://bit.ly/p23ba5 Effects of Typography on Reader Mood and Productivity http://bit.ly/p23ba5 Web Design is 95% Typography http://bit.ly/13F2RCO Fluid Type http://bit.ly/KJNTCZ
- 57. More things... Kerning.js http://kerningjs.com/ Lettering.js http://letteringjs.com/ Arctext.js http://fittextjs.com/ Slab Text http://bit.ly/wxGkOZ FitText http://bit.ly/zHhN9W WhatFont Tool http://chengyinliu.com/whatfont.html Overgram Apps http://bit.ly/XG7JUp Readability Apps http://www.readability.com/apps Photolettering Apps http://www.photolettering.com/ Contrast Rebellion http://contrastrebellion.com/ Typespiration http://typespiration.com/ Kerntype game http://type.method.ac/ Shape type game http://shape.method.ac/ Type Connection http://www.typeconnection.com/index.php Font Game http://fontgame.ilovetypography.com/ I Shot the Serif http://bit.ly/fdCpMZ Apps and tools Funny things on web
- 58. www.untilsunday.it copyright © 2013 Until Sunday. All rights reserved.