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.

Night of the living style guides (front endnorth)

94 views

Published on

The line between design and development is getting blurrier, and our approach to web design is becoming more modular. How do we keep track of it all?

Style guides to the rescue!

Using style guides that update as our projects progress, we can visually document our work and ensure that everything stays consistent. They may seem daunting and time-consuming at first, but they don’t have to be.

How do I get started with living style guides? What’s a living style guide anyway, and how do I know if mine is dead? Isn’t that going to slow me down? Why should I bother?

Let’s find out.

Published in: Design
  • Login to see the comments

  • Be the first to like this

Night of the living style guides (front endnorth)

  1. 1. Nightof the LIVINGstyleguides triggersandsparks.com/talks/styleguide @sarahsemark
  2. 2. Night LIVINGstyleguides triggersandsparks.com/talks/styleguide @sarahsemark of the
  3. 3. what
  4. 4. it’s alive!
  5. 5. why
  6. 6. fitter happier moreproductive
  7. 7. how
  8. 8. tools important
  9. 9. Whatisthatthing?
  10. 10. changes
  11. 11. it’salive!
  12. 12. it’salive! (well, at least sort of)
  13. 13. magic!
  14. 14. pattern library components toolkit style guide style tiles element collages atomic
 design
  15. 15. design documentation
  16. 16. WhydoIneedone?
  17. 17. consistency consistency consistency
  18. 18. abetter workflow
  19. 19. dominos nomore
  20. 20. test more!
  21. 21. selfietime!
  22. 22. performance isadesignproblem
  23. 23. dust me selectors
  24. 24. dust me selectors
  25. 25. happier co-workers
  26. 26. showoff alittle
  27. 27. beauty more
  28. 28. Whatgoesinside?
  29. 29. branding
  30. 30. colours
  31. 31. colours
  32. 32. typography
  33. 33. forms
  34. 34. layout
  35. 35. icons
  36. 36. components
  37. 37. animations
  38. 38. codestandards
  39. 39. copy
  40. 40. what PRIMARY ACCENT medium blue
  41. 41. how what PRIMARY ACCENT medium blue #86C8DB $color__blue-medium
  42. 42. how what why PRIMARY ACCENT medium blue #86C8DB $color__blue-medium
  43. 43. Howtogetstarted
  44. 44. barely breathing
  45. 45. resurrected getting
  46. 46. wireframes styleguide =website! +
  47. 47. github.com/sarahmonster/zombie-style-guide
  48. 48. looking livelier...
  49. 49. avoiding zombies
  50. 50. whatworks foryou findout
  51. 51. Thisoneweirdtrick…
  52. 52. tints shades
  53. 53. #00824D
  54. 54. rgb(0, 130, 77)
  55. 55. hsb(155, 100%, 50%)
  56. 56. hue saturation brightness
  57. 57. togodarker... red 0 green 120 blue 240
  58. 58. green 120new colour! 130 S: 65, L: 40 original 144 S: 60, L: 50 togodarker...
  59. 59. togolighter... yellow 60 cyan 180 magenta 300
  60. 60. cyan 180new colour! 150 S: 40, L: 70 original 144 S: 60, L: 50 togolighter...
  61. 61. Thankyou!
  62. 62. Thankyou!triggersandsparks.com/talks/styleguide @sarahsemark

×