Simplifying Massive Changes with a Live Style Guide

UX Thursday Chicago - January, 2013

What would appear on the surface to be a simple change like updating the look of a button or changing the color of a link can turn out to be a huge effort. When everyone understands what can be reused and what needs to be newly created, the team can focus discussion on how to attain the best designs.

Transcript

1. UX'Thursday','Chicago' January,'2013 Mark'Meeker' @meeker SIMPLIFYING MASSIVE CHANGES WITH A LIVE STYLE GUIDE
2. then now
3. 2004 2001 2010 2012
4. 2004 2001 2010 2012
5. While we’re doing this project, can we make a small change to the button?
6. While we’re doing this project, can we make a small change to the button? Sure, that’s easy!
7. While we’re doing this project, can we make a small change to the button? Sure, that’s easy! Everywhere?
8. While we’re doing this project, can we make a small change to the button? Sure, that’s easy! Everywhere? Umm...
9. Global look and feel updates can take significant effort. Making massive changes
10. ideal state
12. reality ideal state
13. Massive?
14. Massive?
15. Massive?
16. 37,500 lines of CSS Massive?
17. #FC6621 #1CBC20 #89EB51 #1F5DF2 #5ABCF3
18. #FC6621 #1CBC20 #89EB51 #1F5DF2 #5ABCF3 14 shades of “Orbitz blue”
19. then now
20. When developer conveniences trump user inconveniences, it’s worthwhile to remember just who it is we build websites for. Scott Jehl
21. Common problems Lack of visibility
22. Common problems One-off and duplicate code
23. Common problems Lack of reusable code
24. Common problems Inconsistencies across the site
25. All this re-creation and re-invention isn't just inefficient, it leaves the team open to problems. Because it's not the sexy part of their project, it's likely to get less attention, resulting in an unusable and frustrating experience. Jared Spool
26. Need to be able to constantly and consistently evolve the look and feel. Challenge
27. A style guide is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization or field. Wikipedia
28. •Colors •Typography •Iconography •Form elements •Alerts, messages Style guide •Buttons •Containers •Layouts •Navigation elements •Spacing, alignment
31. There is a disconnect between designers and developers Disconnect
32. Style guides are always out of sync Disconnect
33. Lacking discoverability Disconnect
34. No visibility into the implementation Disconnect
35. Not speaking the same language Disconnect
37. LIVE STYLE GUIDE
38. Live style guide Lives with the code
40. /* Styleguide: List Common unordered lists. .standard - Bulleted list .pipedList - Linear list <ul class="$modifier"> <li>Tickets are non-refundable.</li> <li>Tickets are non-transferable.</li> </ul> */
42. Description Default Additional Views Code
43. We will encourage you to develop the three great virtues of a programmer: laziness, impatience and hubris. Larry Wall
45. Live style guide In the browser, available everywhere
47. Live style guide Built automatically
48. Live style guide Consistent and contextual naming
49. The two most difficult things in Computer Science are cache invalidation, naming things and off-by-one errors.
51. Can we change all #2299BB to #00A500?
52. Can we change all #2299BB to #00A500? But, only when used on a link, not a border.
55. Benefits Test-driven in the browser
58. Benefits Focus on right details at the right time
64. Headline level 3
65. Headline level 3 Checkbox Link
66. Headline level 3 Checkbox Collapsable headline Link
69. Benefits Blur the lines
70. Benefits More collaboration, easier communication
71. 1. Discover and design 2. Define and name 3. Develop, test and add 4. Share it and use it See it 3 times? Add it.
72. Resources
73. Resources
74. Resources
75. Resources
76. Websites are systems rather than pages and as soon as we stop perceiving them as that, the better. Anna Debenham
77. THANK YOU! Mark Meeker mark.meeker@orbitz.com