Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
evoking emotion through typography
WE IT!
Chiara Aliotta, Until Sunday
Joomla!Dagen Nederland 2013
Who ever said that pleasure
wasn’t functional?
Charles Eames
American architect and industrial designer
❝
DESIGN FOR EMOTION
REASONS TO DESIGN FOR EMOTION
fundamentalS of typography
THAT AFFECT A READER’s MOOD
EVOKING EMOTION TH...
;)
We perceive personality in the things in our
environment and then form relationships
with those things based on the person...
What is emotional design?
Emotional design refers to design that’s
created to intentionally trigger a conscious
or unconsc...
02
DESIGN FOR EMOTION
REASONS
TO DESIGN FOR EMOTION
fundamentalS of typography
THAT AFFECT A READER’s MOOD
EVOKING EMOTION...
02 REASONS TO DESIGN FOR EMOTION
a)	Emotion dominates decision making
b)	Emotion increases motivation
c)	Emotion affects m...
02 REASONS TO DESIGN FOR EMOTION
Emotional states guide decision making
and behavior by affecting how
we focus attention.
...
Athens, 08 March 2013, 4:46 PM
Weather: Sunny, 17°
Syntagma Metro Station
02 REASONS TO DESIGN FOR EMOTION
Emotional response increases the likelihood
the user will perform a desired behavior.
b)	...
Toilette seat sticker
the toilet seat, mister!
02 REASONS TO DESIGN FOR EMOTION
Emotion increases the strength of memories
through association and defines personality.
c...
Coca Cola Advertising
SANTA CLAUS
by Huddon “Sunny” Sundblom, 1931
03
DESIGN FOR EMOTION
REASONS TO DESIGN FOR EMOTION
fundamentalS of typography
THAT AFFECT a READER’s MOOD
EVOKING EMOTION...
People who are reading a well
typeset page are more engaged
in the experience and find
that time flies by faster.
The Aest...
03
a)	 How the words look
b)	Readability and legibility
c)	 Contrast
d)	Scalability
e)	Hierarchy
f)	 Tone of voice
The inv...
03
Georgia
designed by Matthew Carter
Verdana
designed by Matthew Carter
a) How the words look
Aa Aa
Fundamentals of Typog...
03
b) Readability and legibility
Kerning and tracking are two elements
that can determine if text is readable
and letters ...
I LOVE SHIITAKE MUSHROOMS
I LOVE SHIITAKE MUSHROOMS
Kerning
Arvo, 60pt without kerning
Arvo, 60pt with positive kerning
Ti...
Tracking
Tip
In CSS, you can control space uniformly between characters using letter-spacing property
or the bookmarklet, ...
03
c) Contrast
Highly contrasted text and background
colors make reading easier.
Fundamentals of Typography
PASSION PROJECTS
passion-projects.github.com
03
d) Scalability
Always optimize size and line length
to maintain readability.
Fundamentals of Typography
Responsive typography
FLUID TYPE Percentages
by Trent Walton
03
e) Hierarchy
Headers and white space help eyes
to easily scan the content.
Fundamentals of Typography
VOGUE ITALIA
www.vogue.it
BIO.
www.biography.com
03
e) Tone of voice
Tone of voice will drive users to the right
emotion and help them relate to the content.
Fundamentals ...
STOP SIGN
redesign by Chiara Aliotta
TONE OF VOICE
example
WHATAREYOUDOING?
TONE OF VOICE
example
WHATAREYOUDOING?
What are you doing?
04
DESIGN FOR EMOTION
REASONS TO DESIGN FOR EMOTION
fundamentalS of typography
THAT AFFECT a READER’s MOOD
EVOKING EMOTION...
04
Engage your audience
EVOKING EMOTION THROUGH TYPOGRAPHY
a)	Draw attention: organize information
	 in memory
b)	Add char...
04
a) Draw attention
A well-designed layout encourages positive
associations, reduces distraction and gives
a sense of acc...
EMOTIONs TYPEFACES
Confidence
Trust
Dominance
Consistency
Serif
Sans Serif
Slab Serif
ORGANIZE INFORMATION
IN MEMORY
Aa
Dr...
SNOWBIRD
www.snowbird.com
IMPERO
weareimpero.com
04
b) Add character and personality
By evoking emotions that suit the context,
we are able to communicate a personality
th...
EMOTIONs TYPEFACES
Spontaneity
Openness
Freshness
Honesty
Friendliness
Script
Handwriting
PERSONAL AND HUMAN
Aa
Add charac...
Athens, 12 December 2012, 9:32 PM
Weather: Night, 12°
Bar BLACKBOARD
G’NOSH
www.gnosh.co.uk
LA BEUBAR
labeubar.com
FOuntain of youth
www.michelbergermonkey.com
EMOTIONs TYPEFACES
Happiness
Freedom
Enjoyment
Exuberance
Handwriting
Slab Serif
Serif
Smooth Sans Serif
Aa
Add character ...
LET’S DO THIS
www.letsdothis-now.org
ENGAGE
engageinteractive.co.uk
EMOTIONs TYPEFACES
Professionalism
Honesty
Trust
Serif
Sans Serif
Aa
Add character and personality
SERIOUS AND GROUNDED
THE TEST OF OWNERSHIP
testofownership.com
WITH ART VISIT PHILLY
withart.visitphilly.com
04
c) Create memories
Typography can tell a story, helping people
process information, enhance memories
and share their ex...
EMOTIONs TYPEFACES
Engagement
Consistency
Desirability
Interaction
Serif
Sans Serif
Script
Handwriting
TELL A STORY
Aa
Cre...
THE kitchen Production
www.jacquico.com
THE RIDE AGENCY
rideforthebrand.net
Stimulate imagination,
evoke emotions, bring pleasure
or do nothing.
Alexander “Sandro” Girard,
American architect and a t...
Reading Lists & Recommendations
Books Articles
Designing for Emotion
Aarron Walter, A Book Apart
Design for Emotion
Trevor...
More things...
Kerning.js
http://kerningjs.com/
Lettering.js
http://letteringjs.com/
Arctext.js
http://fittextjs.com/
Slab...
www.untilsunday.it
copyright © 2013 Until Sunday. All rights reserved.
Próximo SlideShare
Cargando en…5
×

de

We heart it! Evoking emotion through typography Slide 1 We heart it! Evoking emotion through typography Slide 2 We heart it! Evoking emotion through typography Slide 3 We heart it! Evoking emotion through typography Slide 4 We heart it! Evoking emotion through typography Slide 5 We heart it! Evoking emotion through typography Slide 6 We heart it! Evoking emotion through typography Slide 7 We heart it! Evoking emotion through typography Slide 8 We heart it! Evoking emotion through typography Slide 9 We heart it! Evoking emotion through typography Slide 10 We heart it! Evoking emotion through typography Slide 11 We heart it! Evoking emotion through typography Slide 12 We heart it! Evoking emotion through typography Slide 13 We heart it! Evoking emotion through typography Slide 14 We heart it! Evoking emotion through typography Slide 15 We heart it! Evoking emotion through typography Slide 16 We heart it! Evoking emotion through typography Slide 17 We heart it! Evoking emotion through typography Slide 18 We heart it! Evoking emotion through typography Slide 19 We heart it! Evoking emotion through typography Slide 20 We heart it! Evoking emotion through typography Slide 21 We heart it! Evoking emotion through typography Slide 22 We heart it! Evoking emotion through typography Slide 23 We heart it! Evoking emotion through typography Slide 24 We heart it! Evoking emotion through typography Slide 25 We heart it! Evoking emotion through typography Slide 26 We heart it! Evoking emotion through typography Slide 27 We heart it! Evoking emotion through typography Slide 28 We heart it! Evoking emotion through typography Slide 29 We heart it! Evoking emotion through typography Slide 30 We heart it! Evoking emotion through typography Slide 31 We heart it! Evoking emotion through typography Slide 32 We heart it! Evoking emotion through typography Slide 33 We heart it! Evoking emotion through typography Slide 34 We heart it! Evoking emotion through typography Slide 35 We heart it! Evoking emotion through typography Slide 36 We heart it! Evoking emotion through typography Slide 37 We heart it! Evoking emotion through typography Slide 38 We heart it! Evoking emotion through typography Slide 39 We heart it! Evoking emotion through typography Slide 40 We heart it! Evoking emotion through typography Slide 41 We heart it! Evoking emotion through typography Slide 42 We heart it! Evoking emotion through typography Slide 43 We heart it! Evoking emotion through typography Slide 44 We heart it! Evoking emotion through typography Slide 45 We heart it! Evoking emotion through typography Slide 46 We heart it! Evoking emotion through typography Slide 47 We heart it! Evoking emotion through typography Slide 48 We heart it! Evoking emotion through typography Slide 49 We heart it! Evoking emotion through typography Slide 50 We heart it! Evoking emotion through typography Slide 51 We heart it! Evoking emotion through typography Slide 52 We heart it! Evoking emotion through typography Slide 53 We heart it! Evoking emotion through typography Slide 54 We heart it! Evoking emotion through typography Slide 55 We heart it! Evoking emotion through typography Slide 56 We heart it! Evoking emotion through typography Slide 57 We heart it! Evoking emotion through typography Slide 58
Próximo SlideShare
Higgs CERN Seminar 2012
Siguiente

117 recomendaciones

Compartir

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.

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

We heart it! Evoking emotion through typography

  1. 1. evoking emotion through typography WE IT! Chiara Aliotta, Until Sunday Joomla!Dagen Nederland 2013
  2. 2. Who ever said that pleasure wasn’t functional? Charles Eames American architect and industrial designer ❝
  3. 3. DESIGN FOR EMOTION REASONS TO DESIGN FOR EMOTION fundamentalS of typography THAT AFFECT A READER’s MOOD EVOKING EMOTION THROUGH TYPOGRAPHY 01
  4. 4. ;)
  5. 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. 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. 7. 02 DESIGN FOR EMOTION REASONS TO DESIGN FOR EMOTION fundamentalS of typography THAT AFFECT A READER’s MOOD EVOKING EMOTION THROUGH TYPOGRAPHY
  8. 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. 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. 10. Athens, 08 March 2013, 4:46 PM Weather: Sunny, 17° Syntagma Metro Station
  11. 11. 02 REASONS TO DESIGN FOR EMOTION Emotional response increases the likelihood the user will perform a desired behavior. b) Emotion increases motivation
  12. 12. Toilette seat sticker the toilet seat, mister!
  13. 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. 14. Coca Cola Advertising SANTA CLAUS by Huddon “Sunny” Sundblom, 1931
  15. 15. 03 DESIGN FOR EMOTION REASONS TO DESIGN FOR EMOTION fundamentalS of typography THAT AFFECT a READER’s MOOD EVOKING EMOTION THROUGH TYPOGRAPHY
  16. 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. 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. 18. 03 Georgia designed by Matthew Carter Verdana designed by Matthew Carter a) How the words look Aa Aa Fundamentals of Typography
  19. 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. 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. 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. 22. 03 c) Contrast Highly contrasted text and background colors make reading easier. Fundamentals of Typography
  23. 23. PASSION PROJECTS passion-projects.github.com
  24. 24. 03 d) Scalability Always optimize size and line length to maintain readability. Fundamentals of Typography
  25. 25. Responsive typography FLUID TYPE Percentages by Trent Walton
  26. 26. 03 e) Hierarchy Headers and white space help eyes to easily scan the content. Fundamentals of Typography
  27. 27. VOGUE ITALIA www.vogue.it
  28. 28. BIO. www.biography.com
  29. 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. 30. STOP SIGN redesign by Chiara Aliotta
  31. 31. TONE OF VOICE example WHATAREYOUDOING?
  32. 32. TONE OF VOICE example WHATAREYOUDOING? What are you doing?
  33. 33. 04 DESIGN FOR EMOTION REASONS TO DESIGN FOR EMOTION fundamentalS of typography THAT AFFECT a READER’s MOOD EVOKING EMOTION THROUGH TYPOGRAPHY
  34. 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. 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. 36. EMOTIONs TYPEFACES Confidence Trust Dominance Consistency Serif Sans Serif Slab Serif ORGANIZE INFORMATION IN MEMORY Aa Draw attention
  37. 37. SNOWBIRD www.snowbird.com
  38. 38. IMPERO weareimpero.com
  39. 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. 40. EMOTIONs TYPEFACES Spontaneity Openness Freshness Honesty Friendliness Script Handwriting PERSONAL AND HUMAN Aa Add character and personality
  41. 41. Athens, 12 December 2012, 9:32 PM Weather: Night, 12° Bar BLACKBOARD
  42. 42. G’NOSH www.gnosh.co.uk
  43. 43. LA BEUBAR labeubar.com
  44. 44. FOuntain of youth www.michelbergermonkey.com
  45. 45. EMOTIONs TYPEFACES Happiness Freedom Enjoyment Exuberance Handwriting Slab Serif Serif Smooth Sans Serif Aa Add character and personality FUn and informal
  46. 46. LET’S DO THIS www.letsdothis-now.org
  47. 47. ENGAGE engageinteractive.co.uk
  48. 48. EMOTIONs TYPEFACES Professionalism Honesty Trust Serif Sans Serif Aa Add character and personality SERIOUS AND GROUNDED
  49. 49. THE TEST OF OWNERSHIP testofownership.com
  50. 50. WITH ART VISIT PHILLY withart.visitphilly.com
  51. 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. 52. EMOTIONs TYPEFACES Engagement Consistency Desirability Interaction Serif Sans Serif Script Handwriting TELL A STORY Aa Create memories
  53. 53. THE kitchen Production www.jacquico.com
  54. 54. THE RIDE AGENCY rideforthebrand.net
  55. 55. Stimulate imagination, evoke emotions, bring pleasure or do nothing. Alexander “Sandro” Girard, American architect and a textile designer ❝
  56. 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. 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. 58. www.untilsunday.it copyright © 2013 Until Sunday. All rights reserved.
  • SumedhaSingh1

    Mar. 5, 2021
  • DianaHoover

    Jan. 17, 2021
  • JayeshSarode1

    Jan. 8, 2021
  • DannyhanMiskam

    Jun. 4, 2020
  • MichaelBenzaken

    Apr. 18, 2020
  • Ishapunja

    Mar. 17, 2020
  • rowanhp

    Dec. 15, 2019
  • YazaliyevMohammed

    Sep. 3, 2019
  • meena_lily

    Jul. 17, 2019
  • AndyFarrell3

    Jun. 13, 2019
  • smcmediastudies

    Jun. 12, 2019
  • MaryLlewellyn4

    Apr. 3, 2019
  • davidmbusto

    Jan. 18, 2019
  • trapane

    Dec. 20, 2018
  • AshleyStack1

    Dec. 13, 2018
  • Ulitasch

    Mar. 15, 2018
  • leabourratiere

    Mar. 15, 2018
  • lensariolist

    Feb. 23, 2018
  • RuslanaNazymko

    Feb. 19, 2018
  • BeckyCoyle2

    Dec. 13, 2017

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.

Vistas

Total de vistas

266.446

En Slideshare

0

De embebidos

0

Número de embebidos

225.996

Acciones

Descargas

0

Compartidos

0

Comentarios

0

Me gusta

117

×