Fight the Zombie Pattern Library

Video is available https://youtu.be/6zOe_uyKF3A

In "Fight the Zombie Pattern Library," presented at the Big Design Conference 2015 in Dallas, TX, we look at repeatable processes to implement Pattern Libraries in your product design and development workflow, so you can fight the slow rot of your interface design (and its underlying code) as your product grows and evolves.

These same processes can be used to "build a tiny Bootstrap" for every client and keep developers using them every day.

We also debut PatternPack (http://patternpack.org/), an open source tool for designing and building your interface, and then sharing the code.

Transcript

1. #zombielibrary PATTERN LIBRARY ZOMBIE FIGHT THE Big Design Conference • 09.18.15 John Gully Solution Principal, App Dev Marcelo Somers Solution Architect, User Experience #zombielibrary
4. http://www.slideshare.net/bradfrostweb/style-guide-best-practices
5. http://www.slideshare.net/bradfrostweb/style-guide-best-practices
6. #zombielibrary WHY?
7. #zombielibrary
10. INTERFACES ZOMBIE
11. #zombielibrary DESIGN PROCESS RETHINKING THE
12. #zombielibrary BUILD SYSTEMS NOT PAGES http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ -Andy Clarke
13. #zombielibrary
15. #zombielibrary BUILD A TINY BOOTSTRAP https://speakerdeck.com/mdo/build-your-own-bootstrap – Mark Otto (Creator of Bootstrap) & Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
16. #zombielibrary DESIGN DESIGNING WITH PATTERNS
17. #zombielibrary DESIGN SLICE DESIGNING WITH PATTERNS
18. #zombielibrary DESIGN SLICE DESIGNING WITH PATTERNS
19. #zombielibrary DESIGN SLICE ASSEMBLE DESIGNING WITH PATTERNS
24. #zombielibrary DESIGN TOOLS
25. #zombielibrary DESIGN TOOLS
26. #zombielibrary
27. #zombielibrary
28. #zombielibrary
29. #zombielibrary
30. #zombielibrary
31. #zombielibrary
32. #zombielibrary BREAKS DOWN WHERE THE DESIGN PROCESS
33. #zombielibrary DESIGNERS DEVELOPERS DISCOVER DESIGN DEVELOP TEST
34. #zombielibrary BROKEN TRADITIONAL HANDOFF IS
35. #zombielibrary DISCOVER DESIGN DEVELOP TEST
36. #zombielibrary DISCOVER DESIGN DEVELOP TEST
37. #zombielibrary SLICE DESIGNING WITH PATTERNS ASSEMBLE DESIGN
38. #zombielibrary PATTERN LIBRARY DESIGNING WITH PATTERNS ASSEMBLE DESIGN
40. #zombielibrary
41. #zombielibrary
42. #zombielibrary
43. #zombielibrary
44. #zombielibrary WASTE ELIMINATE
45. #zombielibrary THE EVOLVING DESIGNER
46. #zombielibrary LIVE WHERE DOES THE PATTERN LIBRARY IN YOUR PROCESS?
47. #zombielibrary https://css-tricks.com/where-style-guides-fit-into-process/ DESIGN & DEVELOPMENT PRODUCTION WEBSITE STYLE GUIDE THE SIDELINES
48. #zombielibrary https://css-tricks.com/where-style-guides-fit-into-process/ DESIGN & DEVELOPMENT PRODUCTION WEBSITE STYLE GUIDE THE EXHAUST
49. #zombielibrary https://css-tricks.com/where-style-guides-fit-into-process/ DESIGN & DEVELOPMENT STYLE GUIDE PRODUCTION WEBSITE THE DICTATOR
50. #zombielibrary STYLE GUIDE MATURITY MODEL INCONSISTENT Different apps are styled inconsistently #zombielibrary
51. #zombielibrary STYLE GUIDE MATURITY MODEL INCONSISTENT Different apps are styled inconsistently ONE-TIME A static style guide document gives basic direction #zombielibrary
52. #zombielibrary STYLE GUIDE MATURITY MODEL INCONSISTENT Different apps are styled inconsistently ONE-TIME A static style guide document gives basic direction MANUAL A pattern library has been built, but must be manually updated #zombielibrary
53. #zombielibrary STYLE GUIDE MATURITY MODEL INCONSISTENT Different apps are styled inconsistently ONE-TIME A static style guide document gives basic direction MANUAL A pattern library has been built, but must be manually updated AUTOMATED The pattern library shares code with the app(s) #zombielibrary
54. #zombielibrary STYLE GUIDE MATURITY MODEL INCONSISTENT Different apps are styled inconsistently ONE-TIME A static style guide document gives basic direction MANUAL A pattern library has been built, but must be manually updated AUTOMATED The pattern library shares code with the app(s) TEAM A dedicated team maintains the pattern library #zombielibrary
55. PATTERN LIBRARIES ZOMBIE
56. #zombielibrary GETTING STARTED (TODAY)
57. #zombielibrary TAKE AN INVENTORY 1
59. Option List Group Seen On: • My Account » Account List • Send Money » Select Payment Option Desktop Mobile
60. #zombielibrary DOCUMENT EACH PATTERN 2
68. #zombielibrary BASIC DOCUMENTATION Name Description Example Code Snippet
69. #zombielibrary BEGIN WITH THE END IN MIND 3 REFACTOR TO PERFECTION 4
70. #zombielibrary BREAK UP YOUR COMPONENTS
71. #zombielibrary NAMESPACE THE CSS
72. #zombielibrary FIND IN PROJECT IS YOUR FRIEND
73. #zombielibrary REGEX SEARCH FOR CLASSES class\s*?=\s*?["'].*?table will find all instances where class=“ “ contains table
74. #zombielibrary DON’T FORGET JAVASCRIPT!
75. #zombielibrary PATTERN LIBRARY TOOLS http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/
76. #zombielibrary CSS DOCUMENTATION 1
77. #zombielibrary 1
78. #zombielibrary STATIC SITE GENERATION 2
79. #zombielibrary
80. #zombielibrary APPLICATION / PLATFORM 3
81. #zombielibrary
82. #zombielibrary BETTER WAY THERE HAS TO BE A
84. #zombielibrary
85. #zombielibrary
86. #zombielibrary
87. #zombielibrary
88. #zombielibrary
89. http://patternpack.org/
90. #zombielibrary GET STARTED WITH PATTERN PACK
91. #zombielibrary https://github.com/patternpack/patternpack-example-library
92. #zombielibrary $ npm init
93. #zombielibrary $ npm install patternpack --save-dev
94. #zombielibrary module.exports = function(grunt) { grunt.initConfig({ patternpack: { options: { assets: './src/assets' }, run: {}, build: {}, release: {} } }); grunt.loadNpmTasks('patternpack'); grunt.registerTask('default', ['patternpack:run']); } gruntfile.js
95. #zombielibrary $ grunt patternpack
96. #zombielibrary http://localhost:8080/
97. #zombielibrary CREATE YOUR FIRST PATTERN
98. #zombielibrary
99. #zombielibrary
100. #zombielibrary
101. #zombielibrary
102. #zombielibrary
103. #zombielibrary
104. #zombielibrary
105. #zombielibrary
106. #zombielibrary UNLEASH YOUR CREATION
107. #zombielibrary Use Semantic Versioning in your design system VERSIONING:
108. #zombielibrary 1.0.5 major release minor release patch release breaking changes new patterns bugfixes
109. #zombielibrary 1.0.5 major release minor release patch release breaking changes new patterns bugfixes Customize to your needs
110. #zombielibrary DEVELOP RELEASE 2.0 BUG 2.0.1 VERSIONING RELEASES 3.0.1 3.1.0 3.2.0
111. #zombielibrary $ grunt patternpack:build $ grunt patternpack:release $ git push --save-dev
112. #zombielibrary INTEGRATE INTO YOUR APPLICATION
113. #zombielibrary $ npm install
114. #zombielibrary package.json | bower.json { dependencies: { my-awesome-pattern-library: …, … } } Support for both npm & bower ADD A DEPENDENCY: https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git
115. #zombielibrary USERNAME & PASSWORD: https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git#1.0.0
116. #zombielibrary GIT REPOSITORY USERNAME & PASSWORD: https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git#1.0.0
117. #zombielibrary VERSION COMMITISH GIT REPOSITORY https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git#1.0.0 USERNAME & PASSWORD:
118. #zombielibrary $ npm install
119. #zombielibrary
120. #zombielibrary
121. #zombielibrary
122. #zombielibrary DESIGN PROCESS RETHINKING THE
123. #zombielibrary DISCOVER DESIGN DEVELOP TEST Sketch PatternPack
124. INTERFACES FIGHT ZOMBIE
125. MODULARIZE
126. DOCUMENT
127. SHARE
128. #zombielibrary THANK YOU! John Gully @johngully Marcelo Somers @marcelosomers Slides http://j.mp/zombie-library PatternPack http://patternpack.org/