Designing for Emotion

An exploration on how we, as designer and developers can use today's web and mobile technologies to affect the user's state of mind and deliver a more pleasurable experience.

Presenter Links:

Live Demo CodePen -
http://codepen.io/daviddotto/pen/GmGRYN/

Using P3 Color Gamut in WebKit -
https://webkit.org/blog/6682/improving-color-on-the-web/

Hoefler & Co. Type Testing -
https://try.typography.com

Prototypo Font Customiser -
https://www.prototypo.io

Cubic Bezier Customiser -
http://cubic-bezier.com/#.17,.67,.83,.67

Transcript

1. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion David Todd C R E A T I V E L E A D
2. @mr_d_todd @powerhousesoft powerhouse.software No foreword by Jared Spool DESIGNING FOR EMOTION Aarron Walter Brief books for people who make websites 5
3. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Human ⁶ Computer Interaction
4. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Human ⁶ Human Interaction
5. @mr_d_todd @powerhousesoft powerhouse.software Think, your product as a personality Designing for Emotion
6. @mr_d_todd @powerhousesoft powerhouse.software Think, your product as a personality Designing for Emotion People buy from people
7. @mr_d_todd @powerhousesoft powerhouse.software The mind uses emotion to aid memory Designing for Emotion
8. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
9. @mr_d_todd @powerhousesoft powerhouse.software Yum, grapes let’s remember that *not the same racoon (I don’t think) Designing for Emotion
10. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
11. @mr_d_todd @powerhousesoft powerhouse.software Event Memory of Event Event Memory of Event NOW WITH ADDED EMOTION!!! Dopamine Remember
 This! Designing for Emotion
12. @mr_d_todd @powerhousesoft powerhouse.software Memory is just part of the puzzle but… Designing for Emotion
13. @mr_d_todd @powerhousesoft powerhouse.software Memory is just part of the puzzle but… More people will sign up for your service, stay on your site, and buy more stuff if you transcend usable to create a pleasurable experience - Aarron Walter Designing for Emotion 2011 Designing for Emotion
14. @mr_d_todd @powerhousesoft powerhouse.software Maslow’s Hierarchy of Needs Physiological Safety Love / Belonging Esteem Self- actualisation Designing for Emotion
15. @mr_d_todd @powerhousesoft powerhouse.software Physiological Safety Love / Belonging Esteem Self- actualisation User’s Hierarchy of Needs Functional Reliable Usable Pleasurable Missing Designing for Emotion
16. @mr_d_todd @powerhousesoft powerhouse.software Great design that uses cognitive and visual contrast not only makes you stand out, it can also influence the way people use your interface. - Aarron Walter Designing for Emotion 2011 Designing for Emotion
17. @mr_d_todd @powerhousesoft powerhouse.software Empathy based Design Based in Nature Designing for Emotion
18. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
19. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
20. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
21. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
22. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
23. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Designing for Emotion
24. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Functional Reliable Usable Pleasurable
25. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Functional Reliable Usable Pleasurable Pleasurable A usable interface is the minimum your audience expects
26. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Pleasurable
27. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion We can use technology to do better
28. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Colour and Imagery
29. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Displays are getting Better
30. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Displays are getting Better More pixels More colours More space
31. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
32. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
33. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion
34. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion // Swift 3.1
 
 UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0) 
 
 // CSS
 
 color: color(p3 1.0 0 0); iOS 10 has your back Wrap in @supports block
35. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Greater Support for Vectors
36. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion 1,182 bytes 425 bytes
37. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Demo Benefits of Vectors for 
 Empathy-Based Design
38. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Typography
39. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion We’ve moved on from this
40. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Availability Enables Experimentation
41. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion // CSS
 
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
42. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Animation
43. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion If a Picture is Worth a Thousand Words, Then Is a Video Worth a Million
44. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion If a Picture is Worth a Thousand Words, Then Is a Video Worth a Million If a UI Element is Worth a Thousand Words, Then Is a Animation Worth a Million
45. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Demo and Timing Personality
46. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Further Reading
47. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Further Reading Tragic Design Jonathan Shariat, Cynthia Savard Saucier Collaborative Product Design Austin Govella Storytelling in Design Anna Dahlström " Designing with Empathy Dani Nordin " SVG Animation Sarah Drasner
48. @mr_d_todd @powerhousesoft powerhouse.software Designing for Emotion Designing for Emotion David Todd C R E A T I V E L E A D