Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Simplifying Massive Changes with a Live Style Guide

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio

Eche un vistazo a continuación

1 de 77 Anuncio

Simplifying Massive Changes with a Live Style Guide

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.

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.

Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (17)

Similares a Simplifying Massive Changes with a Live Style Guide (20)

Anuncio

Más reciente (20)

Anuncio

Simplifying Massive Changes with a Live Style Guide

  1. 1. SIMPLIFYING MASSIVE CHANGES WITH A LIVE STYLE GUIDE Mark Meeker @meeker
  2. 2. then now
  3. 3. 2001 2004 2010 2012
  4. 4. 2001 2004 2010 2012
  5. 5. While we’re doing this project, can we make a small change to the button?
  6. 6. While we’re doing this project, can we make a small change to the button? Sure, that’s easy!
  7. 7. While we’re doing this project, can we make a small change to the button? Sure, that’s easy! Everywhere?
  8. 8. While we’re doing this project, can we make a small change to the 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 #89EB51 14 shades of “Orbitz blue”
  18. 18. then now
  19. 19. When developer conveniences trump user inconveniences, it’s worthwhile to remember just who it is we build websites 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 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
  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 for the writing and design of documents, either for general use or for a specific publication, 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: 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> */
  36. 36. Description Default Additional Views Code
  37. 37. We will encourage you to develop the three great virtues of a programmer: 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 in Computer Science are cache invalidation, naming things and 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 used on 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 Link Collapsable headline
  49. 49. Benefits Blur the lines
  50. 50. Benefits More 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 than pages and as soon as we stop perceiving them as that, the better. Anna Debenham
  57. 57. THANK YOU! Mark Meeker mark.meeker@orbitz.com

×