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.

1. 1 Pixel to the Left: !
Why Visual Design
Details Matter
Emily Rawitsch
@rawitsch #MadPlusUX

2. Strategy + Research + Design!
@rawitsch

3. Design
Strategy!
User
Research!
Information
Architecture!
Wireframes!
Interaction
Design!
Usability!
Brand
Consistency!
Visual
Design!
Copywriting! Prototyping!
Design
Evangelism!
UI
Guidelines!

4. Design
Strategy!
User
Research!
Information
Architecture!
Wireframes!
Interaction
Design!
Usability!
Brand
Consistency!
Visual
Design
Copywriting! Prototyping!
Design
Evangelism!
UI
Guidelines!

5. Can you spot the difference?

6. Once upon
a time…!

7. The characters and events
depicted in this story are
fictitious. Any similarity to "
actual persons, living or dead,
is purely coincidental.

8. Vince!
the visual designer

9. Debbie!
the developer

12. Before
After

13. ?

16. ?

18. 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

19. VS!

20. Why do visual design
details matter?!
How can designers and
developers work together
more effectively?!

21. Who cares if the
little design details
are a bit off?

22. Aesthetics have a
direct impact on
the user experience
and the success of
businesses.

23. “
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.

24. Negative Affect
Easy tasks feel difficult
Positive Affect
Difficult tasks feel easy

26. 50 milliseconds!
Lindgaard, Fernandes, Dudek, & Brown, 2006

30. 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)

31. Create
Account
Create
Account

32. 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.

33. Gestalt Principles

34. $ $ $!

35. 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

36. How can designers
and developers
work together
more effectively?

37. VS!

38. Design!
Develop!
Test!
Analyze!
Gap

39. Communicate!
EARLY & OFTEN!

40. Communicate!
IN PERSON!

41. Photoshop
HTML & CSS
Add Context!
EXPLAIN WHY!

42. ≠! HTML !
+ CSS!
Empathize!
UNDERAND EACH OTHER’S LANGUAGE!

43. ≠! “Like”!Design!
Empathize!
UNDERAND EACH OTHER’S LANGUAGE!

44. Design specs +
deliverables should
be easy to use.
Make it Easy!
REFINE THE PROCESS!

45. Layered Photoshop File

46. UI Style Guide

47. In-Context Annotations

48. Clickable Prototype

49. Co-Design (work together in person)

50. Use Actual HTML and CSS

51. Visual details
matter — when
they matter.
Stay Objective!
THINK BIG PICTURE!

52. 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

53. Reality often
astonishes theory
and assumption

54. A-B Testing

55. Usability Testing

56. Prioritize the Priorities

57. 1px!

58. 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

60. user!

61. Thank you!!
@rawitsch #MadPlusUX