Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1 Pixel to the Left: Why Visual Design Details Matter

4,363 views

Published on

Although we have all heard someone passionately declare, “UX is not UI,” visual design is a fundamental part of the user experience. Good design is in the details. It builds trust. It creates hierarchy of information. It makes buttons look clickable. It has the power to transform a functional experience into a delightful experience.

So how we can ensure that the visual details we design are brought to life as intended? Can moving an object 1 pixel to the left really make a difference? In an attempt to find a common language between designers and developers, we will discuss what details are worth fighting for versus when to let go.

Published in: Design, Technology

1 Pixel to the Left: Why Visual Design Details Matter

  1. 1. 1 Pixel to the Left: ! Why Visual Design Details Matter Emily Rawitsch @rawitsch #MadPlusUX
  2. 2. Strategy + Research + Design! @rawitsch
  3. 3. Design Strategy! User Research! Information Architecture! Wireframes! Interaction Design! Usability! Brand Consistency! Visual Design! Copywriting! Prototyping! Design Evangelism! UI Guidelines!
  4. 4. Design Strategy! User Research! Information Architecture! Wireframes! Interaction Design! Usability! Brand Consistency! Visual Design Copywriting! Prototyping! Design Evangelism! UI Guidelines!
  5. 5. Can you spot the difference?
  6. 6. Once upon a time…!
  7. 7. The characters and events depicted in this story are fictitious. Any similarity to " actual persons, living or dead, is purely coincidental.
  8. 8. Vince! the visual designer
  9. 9. Debbie! the developer
  10. 10. Before After
  11. 11. ?
  12. 12. ?
  13. 13. Wrong font!!! Text should be #333333 Text should not be all caps Where are the round corners? Too small Align left Spacing does not match the comp Align left Alignment point
  14. 14. VS!
  15. 15. Why do visual design details matter?! How can designers and developers work together more effectively?!
  16. 16. Who cares if the little design details are a bit off?
  17. 17. Aesthetics have a direct impact on the user experience and the success of businesses.
  18. 18. “ Attractive things work ! "better. Pleasing things are " easier to learn and" produce a more " harmonious result.” DON NORMAN Norman, D. A. (2002). Emotion and design: Attractive things work better. Interactions Magazine, ix (4), 36-42.
  19. 19. Negative Affect
 Easy tasks feel difficult Positive Affect 
 Difficult tasks feel easy
  20. 20. 50 milliseconds! Lindgaard, Fernandes, Dudek, & Brown, 2006
  21. 21. The role of visual complexity and prototypicality regarding first impression of websites. Tuch, Alexandre ; Presslaber, Eva ; Stöcklin, Markus ; Opwis, Klaus ; Bargas-Avila, Javier. International Journal of Human-Computer Studies, 2012, Vol.70(11), pp.794-811 Simple (low complexity) Familiar (high prototypicality)
  22. 22. Create  Account   Create  Account  
  23. 23. Easier to Read Lorem ipsum dolor sit amet, consesur adipiscing elit. Praesent in porta feugiat non a sapien curabitur semper. •  Nunc fermentum ligula lectus bibendum commodo. •  In dium mauris eget arcu aliquet scelerisque. •  Cras commodo risus dui, ut aliquet arcu pulvinar. Harder to Read Lorem ipsum dolor sit amet, consesur adipiscing elit. Praesent in porta feugiat non a sapien. Curabitur semper mollis neque. Nunc fermentum ligula lectus bibendum commodo. In dium mauris eget arcu aliquet scelerisque. Cras commodo risus dui, ut aliquet arcu pulvinar eget. Curabitur eu laoreet nibh.
  24. 24. Gestalt Principles
  25. 25. $ $ $!
  26. 26. 63 companies identified as effective users of design outperformed the FTSE 100 index by 200%! The Design Council, The Impact of Design on Stock Market Performance: An Analysis of UK Quoted Companies 1994-2003, 2004
  27. 27. How can designers and developers work together more effectively?
  28. 28. VS!
  29. 29. Design! Develop! Test! Analyze! Gap
  30. 30. Communicate! EARLY & OFTEN!
  31. 31. Communicate! IN PERSON!
  32. 32. Photoshop HTML & CSS Add Context! EXPLAIN WHY!
  33. 33. ≠! HTML ! + CSS! Empathize! UNDERAND EACH OTHER’S LANGUAGE!
  34. 34. ≠! “Like”!Design! Empathize! UNDERAND EACH OTHER’S LANGUAGE!
  35. 35. Design specs + deliverables should be easy to use. Make it Easy! REFINE THE PROCESS!
  36. 36. Layered Photoshop File
  37. 37. UI Style Guide
  38. 38. In-Context Annotations
  39. 39. Clickable Prototype
  40. 40. Co-Design (work together in person)
  41. 41. Use Actual HTML and CSS
  42. 42. Visual details matter — when they matter. Stay Objective! THINK BIG PICTURE!
  43. 43. Your Browser Stats! Chrome Desktop! 22.4%! Firefox Desktop! 22.2%! Safari iPad! 14.9%! IE Desktop! 14.0%! Safari Desktop! 9.9%! Site Analytics
  44. 44. Reality often astonishes theory and assumption
  45. 45. A-B Testing
  46. 46. Usability Testing
  47. 47. Prioritize the Priorities
  48. 48. 1px!
  49. 49. Remember: -  Details influence usability, first impressions and perceptions -  Experience should be easy for users and developers -  You can’t over-communicate -  Data is your friend
  50. 50. user!
  51. 51. Thank you!! @rawitsch #MadPlusUX

×