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 upload

378 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 upload

  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. happier co-workers
  25. 25. showoff alittle
  26. 26. beauty more
  27. 27. Whatgoesinside?
  28. 28. branding
  29. 29. colours
  30. 30. colours
  31. 31. typography
  32. 32. forms
  33. 33. layout
  34. 34. icons
  35. 35. components
  36. 36. shortcodes
  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. togodarker... red 0 green 120 blue 240
  53. 53. green 120new colour! 130 S: 65, L: 40 original 144 S: 60, L: 50 togodarker...
  54. 54. togolighter... yellow 60 cyan 180 magenta 300
  55. 55. cyan 180new colour! 150 S: 40, L: 70 original 144 S: 60, L: 50 togolighter...
  56. 56. Thankyou!
  57. 57. icons from the Noun Project: zombie hand by Imogen Oh monster by Joel McKinney zombie crowd by Gan Khoon Lay survival watch by Oliviu Stoian brain by Laymik rocket & magic hat by Hopkins Mummy Octocat by Tony Jaramillo photo credits Colores by Trish via Flickr zombie dolls by Handmade Stuffs via Flickr Zombies!!! by Travis Nicholson via Flickr zombies! by Tuomas Kuosmanen via Flickr Zombie! by Daniel Hollister via Flickr Zombies Inside by Kordite via Flickr Zombies! by Jeff Prouse via Flickr Zombies by t f via Flickr Zombies! by Lex Monkey via Flickr Zombie Barbies by Niall Kennedy via Flickr Zombie Walk by Kevin Dooley via Flickr zombie by ThaQeLa via Flickr Thriller Macrosesion by dikarana via Flickr Running Zombie by Bring Back Words via Flickr A Better Tool by the Marmot via Flickr Full mooooooon by Kit via Flickr Zombie Apocalypse Survival Guide by Neil Girling via Flickr Doctor Science by JD Hancock via Flickr Dominó by Aitor Osuna via Flickr Even Zombies take Selfies by Mary Crandall by Flickr Schrödinger's cat by Apoinid via Flickr
  58. 58. Thankyou! triggersandsparks.com/talks/styleguide @sarahsemark

×