SIMPLIFYINGMASSIVECHANGES WITH ALIVE STYLE GUIDE    Mark Meeker     @meeker
then   now
2001   20042010   2012
2001   2004   2010   2012
While we’re doing this project,can we make a small change tothe button?
While we’re doing this project,can we make a small change tothe button?Sure, that’s easy!
While we’re doing this project,can we make a small change tothe button?Sure, that’s easy!Everywhere?
While we’re doing this project,can we make a small change tothe button?Sure, that’s easy!Everywhere?Umm...
Making massive changes   Global look and feel updates   can take significant effort.
ideal state
ideal state   reality
Massive?
Massive?
Massive?
Massive?      37,500 lines of CSS
#1F5DF2#5ABCF3#FC6621#1CBC20#89EB51
#1F5DF2             #5ABCF3             #FC6621             #1CBC20             #89EB5114 shades of “Orbitz blue”
then   now
When developer conveniences trumpuser inconveniences, it’s worthwhileto remember just who it is we buildwebsites for.     ...
Common problems   Lack of visibility
Common problems   One-off and   duplicate code
Common problems Lack of reusable code
Common problems   Inconsistencies   across the site
All this re-creation and re-invention isnt justinefficient, it leaves the team open to problems.Because its not the sexy p...
Challenge Need to be able to constantly and consistently evolve the look and feel.
A style guide is a set of standards forthe writing and design of documents,either for general use or for a specificpublica...
Style guide • Colors             • Buttons • Typography         • Containers • Iconography        • Layouts • Form element...
Disconnect   There is a disconnect   between designers and   developers
Disconnect   Style guides are   always out of sync
Disconnect   Lacking   discoverability
Disconnect   No visibility into   the implementation
Disconnect   Not speaking the   same language
LIVE STYLE GUIDE
Live style guide    Lives with the code
/*Styleguide: ListCommon unordered lists..standard - Bulleted list.pipedList - Linear list<ul class="$modifier">   <li>Tic...
Description  DefaultAdditional  Views   Code
We will encourage you to developthe three great virtues of aprogrammer:laziness, impatience and hubris.                   ...
Live style guide    In the browser,    available everywhere
Live style guide    Built automatically
Live style guide    Consistent and    contextual naming
The two most difficult things inComputer Science are cacheinvalidation, naming thingsand off-by-one errors.
Can we change all #2299BB to#00A500?
Can we change all #2299BB to#00A500? But, only when usedon a link, not a border.
Benefits   Test-driven in the   browser
Benefits Focus on right details at the right time
Headline level 3
Headline level 3  Checkbox     Link
Headline level 3     Checkbox        LinkCollapsable headline
BenefitsBlur the lines
BenefitsMore collaboration,easier communication
See it 3 times? Add it. 1. Discover and design 2. Define and name 3. Develop, test and add 4. Share it and use it
Resources
Resources
Resources
Resources
Websites are systems rather thanpages and as soon as we stopperceiving them as that, the better.                        An...
THANK YOU!   Mark Meekermark.meeker@orbitz.com
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
Upcoming SlideShare
Loading in …5
×

Simplifying Massive Changes with a Live Style Guide

2,785 views

Published on

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.

Published in: Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,785
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Simplifying Massive Changes with a Live Style Guide

  1. 1. SIMPLIFYINGMASSIVECHANGES WITH ALIVE STYLE GUIDE Mark Meeker @meeker
  2. 2. then now
  3. 3. 2001 20042010 2012
  4. 4. 2001 2004 2010 2012
  5. 5. While we’re doing this project,can we make a small change tothe button?
  6. 6. While we’re doing this project,can we make a small change tothe button?Sure, that’s easy!
  7. 7. While we’re doing this project,can we make a small change tothe button?Sure, that’s easy!Everywhere?
  8. 8. While we’re doing this project,can we make a small change tothe button?Sure, that’s easy!Everywhere?Umm...
  9. 9. Making massive changes Global look and feel updates can take significant effort.
  10. 10. ideal state
  11. 11. ideal state reality
  12. 12. Massive?
  13. 13. Massive?
  14. 14. Massive?
  15. 15. Massive? 37,500 lines of CSS
  16. 16. #1F5DF2#5ABCF3#FC6621#1CBC20#89EB51
  17. 17. #1F5DF2 #5ABCF3 #FC6621 #1CBC20 #89EB5114 shades of “Orbitz blue”
  18. 18. then now
  19. 19. When developer conveniences trumpuser inconveniences, it’s worthwhileto remember just who it is we buildwebsites for. Scott Jehl
  20. 20. Common problems Lack of visibility
  21. 21. Common problems One-off and duplicate code
  22. 22. Common problems Lack of reusable code
  23. 23. Common problems Inconsistencies across the site
  24. 24. All this re-creation and re-invention isnt justinefficient, it leaves the team open to problems.Because its not the sexy part of their project, itslikely to get less attention, resulting in anunusable and frustrating experience. Jared Spool
  25. 25. Challenge Need to be able to constantly and consistently evolve the look and feel.
  26. 26. A style guide is a set of standards forthe writing and design of documents,either for general use or for a specificpublication, organization or field. Wikipedia
  27. 27. Style guide • Colors • Buttons • Typography • Containers • Iconography • Layouts • Form elements • Navigation elements • Alerts, messages • Spacing, alignment
  28. 28. Disconnect There is a disconnect between designers and developers
  29. 29. Disconnect Style guides are always out of sync
  30. 30. Disconnect Lacking discoverability
  31. 31. Disconnect No visibility into the implementation
  32. 32. Disconnect Not speaking the same language
  33. 33. LIVE STYLE GUIDE
  34. 34. Live style guide Lives with the code
  35. 35. /*Styleguide: ListCommon unordered lists..standard - Bulleted list.pipedList - Linear list<ul class="$modifier"> <li>Tickets are non-refundable.</li> <li>Tickets are non-transferable.</li></ul>*/
  36. 36. Description DefaultAdditional Views Code
  37. 37. We will encourage you to developthe three great virtues of aprogrammer:laziness, impatience and hubris. Larry Wall
  38. 38. Live style guide In the browser, available everywhere
  39. 39. Live style guide Built automatically
  40. 40. Live style guide Consistent and contextual naming
  41. 41. The two most difficult things inComputer Science are cacheinvalidation, naming thingsand off-by-one errors.
  42. 42. Can we change all #2299BB to#00A500?
  43. 43. Can we change all #2299BB to#00A500? But, only when usedon a link, not a border.
  44. 44. Benefits Test-driven in the browser
  45. 45. Benefits Focus on right details at the right time
  46. 46. Headline level 3
  47. 47. Headline level 3 Checkbox Link
  48. 48. Headline level 3 Checkbox LinkCollapsable headline
  49. 49. BenefitsBlur the lines
  50. 50. BenefitsMore collaboration,easier communication
  51. 51. See it 3 times? Add it. 1. Discover and design 2. Define and name 3. Develop, test and add 4. Share it and use it
  52. 52. Resources
  53. 53. Resources
  54. 54. Resources
  55. 55. Resources
  56. 56. Websites are systems rather thanpages and as soon as we stopperceiving them as that, the better. Anna Debenham
  57. 57. THANK YOU! Mark Meekermark.meeker@orbitz.com

×