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.

1. Nightof the
LIVINGstyleguides
triggersandsparks.com/talks/styleguide @sarahsemark

2. Night
LIVINGstyleguides
triggersandsparks.com/talks/styleguide @sarahsemark
of the

7. what

8. it’s
alive!

9. why

10. fitter
happier
moreproductive

11. how

12. tools
important

14. Whatisthatthing?

18. changes

19. it’salive!

20. it’salive!
(well, at least sort of)

21. magic!

22. pattern
library
components
toolkit
style guide
style tiles
element
collages
atomic
design

23. design
documentation

24. WhydoIneedone?

25. consistency
consistency
consistency

28. abetter
workflow

29. dominos
nomore

30. test
more!

32. selfietime!

33. performance
isadesignproblem

34. dust me selectors

35. happier
co-workers

36. showoff
alittle

38. beauty
more

39. Whatgoesinside?

40. branding

41. colours

42. colours

43. typography

44. forms

45. layout

46. icons

47. components

48. shortcodes

49. animations

50. codestandards

51. copy

52. what PRIMARY ACCENT
medium blue

53. how
what PRIMARY ACCENT
medium blue
#86C8DB
$color__blue-medium

54. how
what
why
PRIMARY ACCENT
medium blue
#86C8DB
$color__blue-medium

58. Howtogetstarted

59. barely
breathing

62. resurrected
getting

65. wireframes
styleguide
=website!
+

67. github.com/sarahmonster/zombie-style-guide

69. looking
livelier...

74. avoiding
zombies

76. whatworks
foryou
findout

77. Thisoneweirdtrick…

86. togodarker...
red
0 green
120 blue
240

87. green
120new colour!
130
S: 65, L: 40
original
144
S: 60, L: 50
togodarker...

88. togolighter...
yellow
60 cyan
180 magenta
300

89. cyan
180new colour!
150
S: 40, L: 70
original
144
S: 60, L: 50
togolighter...

94. Thankyou!

95. 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

96. Thankyou!
triggersandsparks.com/talks/styleguide @sarahsemark