Fight the Zombie Pattern Library - RWD Summit 2016

In "Fight the Zombie Pattern Library," presented at the Responsive Web Design Summit in 2016, 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 look at PatternPack (http://patternpack.org/), an open source tool for designing and building your interface, and then sharing the code. For more on getting started with PatternPack, check out the guides and resources (https://github.com/patternpack/patternpack/blob/master/docs/docs.md)

Transcript

1. #RWDSummit PATTERN LIBRARY ZOMBIE FIGHT THE Responsive Web Design Summit • 03.29.16 Marcelo Somers Solution Architect, User Experience @marcelosomers
2. #RWDSummit Front-end style guides are a modular collection of all the elements in your product’s user interface, together with code snippets for developers to copy and paste as needed to implement those elements. They include common UI components like buttons, form- input elements, navigation menus, modal overlays, and icons. “ – Lean UX
3. PATTERN LIBRARIES ZOMBIE
4. #RWDSummit How do you keep living, knowing that’s what the world is like?” “ building interfaces
5. #RWDSummit DESIGN PROCESS RETHINKING THE
6. #RWDSummit BUILD SYSTEMS NOT PAGES http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ -Andy Clarke
8. #RWDSummit BUILD A TINY BOOTSTRAP https://speakerdeck.com/mdo/build-your-own-bootstrap – Mark Otto & Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
9. #RWDSummit DESIGN DESIGNING WITH PATTERNS
10. #RWDSummit DESIGN SLICE DESIGNING WITH PATTERNS
11. #RWDSummit DESIGN SLICE ASSEMBLE DESIGNING WITH PATTERNS
12. #RWDSummit DESIGN TOOLS
13. #RWDSummit
14. #RWDSummit
15. #RWDSummit
16. #RWDSummit
17. #RWDSummit
18. #RWDSummit
19. #RWDSummit BREAKS DOWN WHERE THE DESIGN PROCESS
20. #RWDSummit DESIGNERS DEVELOPERS DISCOVER DESIGN DEVELOP TEST
21. #RWDSummit BROKEN TRADITIONAL HANDOFF IS
22. #RWDSummit DISCOVER DESIGN DEVELOP TEST
23. #RWDSummit PATTERN LIBRARY SLICE DESIGNING WITH PATTERNS ASSEMBLE DESIGN
24. #RWDSummit
25. #RWDSummit
26. #RWDSummit
27. #RWDSummit
28. #RWDSummit WASTE ELIMINATE
29. #RWDSummit THE EVOLVING DESIGNER
30. #RWDSummit I can shift the bulk of my time and energy to looking at the bigger picture. I can think more widely about our users’ journey through our product and give attention to more than baseline functionality. “ – Katey Basye (Salesforce UX) https://medium.com/salesforce-ux/how-the-salesforce-design-system-helped-me-onboard-as-a-new-product-designer-92b7d5f42237#.6brzoe1fu
31. #RWDSummit LIVE WHERE DOES THE PATTERN LIBRARY IN YOUR PROCESS?
32. #RWDSummit STYLE GUIDE MATURITY MODEL #RWDSummit https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba Inconsistent The absence of a design system Static A one-time PDF of your brand guidelines Manual The pattern library has code, but must be manually updated Automatic The pattern library is a part of your app build process Governed The pattern library process is built in to your organization Ɠ Ó ¸ Ŗ † This is the “chasm” that is hard for organizations to cross
34. https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.wvedzdvsx
35. #RWDSummit GETTING STARTED (TODAY)
36. #RWDSummit TAKE AN INVENTORY 1
38. Option List Group Seen On: • My Account » Account List • Send Money » Select Payment Option Desktop Mobile
39. https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517#.c887jlrum
40. #RWDSummit BASE STYLES 1 2 COMPONENTS 3 PAGE TEMPLATES WHAT TO DOCUMENT
41. #RWDSummit https://www.nngroup.com/articles/front-end-style-guides/
42. #RWDSummit STANDARDIZE 2
48. #RWDSummit DOCUMENT 3
56. #RWDSummit BASIC DOCUMENTATION NAME 1 2 DESCRIPTION 3 EXAMPLE 3 CODE SNIPPET
57. #RWDSummit CENTRALIZE YOUR CSS 3a
58. #RWDSummit DEFINE CSS STANDARDS 4 REFACTOR TO PERFECTION 5
59. #RWDSummit START FUNCTIONAL http://www.basscss.com/ http://tachyons.io/
60. #RWDSummit BREAK UP YOUR COMPONENTS https://medium.com/@ahmedelgabri/global-scope-namespacing-css-681bda44c43e#.5i17q1gwv
61. #RWDSummit NAMESPACE THE CSS https://medium.com/@ahmedelgabri/global-scope-namespacing-css-681bda44c43e#.5i17q1gwv
62. #RWDSummit FIND IN PROJECT IS YOUR FRIEND
63. #RWDSummit REGEX SEARCH FOR CLASSES class\s*?=\s*?["'].*?table will find all instances where class=“ “ contains table
64. #RWDSummit DON’T FORGET JAVASCRIPT!
65. #RWDSummit GOVERN YOUR LIBRARY 6
66. #RWDSummit https://css-tricks.com/what-a-css-code-review-might-look-like/
67. #RWDSummit https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system
68. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc SOLITARY
69. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc CENTRALIZED
70. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc FEDERATED
71. #RWDSummit Effective organizational design is more than drawing boxes and arrows, it flows from a thorough understanding of strategic objectives, takes into consideration both the formal and informal elements of the organizational units involved in the redesign and weighs the potential impact on the rest of the organization and its ability to fulfill strategic goals. “ – Competing by Design, Nadler and Tushman
72. #RWDSummit Effective organizational design is more than drawing boxes and arrows, it flows from a thorough understanding of strategic objectives, takes into consideration both the formal and informal elements of the organizational units involved in the redesign and weighs the potential impact on the rest of the organization and its ability to fulfill strategic goals. “ – Competing by Design, Nadler and Tushman
73. #RWDSummit Effective organizational design is more than drawing boxes and arrows, it flows from a thorough understanding of strategic objectives, takes into consideration both the formal and informal elements of the organizational units involved in the redesign and weighs the potential impact on the rest of the organization and its ability to fulfill strategic goals. “ – Competing by Design, Nadler and Tushman
74. #RWDSummit Effective organizational design is more than drawing boxes and arrows, it flows from a thorough understanding of strategic objectives, takes into consideration both the formal and informal elements of the organizational units involved in the redesign and weighs the potential impact on the rest of the organization and its ability to fulfill strategic goals. “ – Competing by Design, Nadler and Tushman
75. #RWDSummit WHY ARE WE DOING THIS? 1 HOW WILL IT FIT IN OUR ORGANIZATION? 2 WHO’S DOING THE WORK? 4 WHAT INVESTMENT ARE WE WILLING TO MAKE? 3
76. #RWDSummit OPEN SOURCE CULTURE
77. #RWDSummit DOCUMENTATION GREAT
78. #RWDSummit EASY TO CONTRIBUTE MAKE IT
79. #RWDSummit MISTAKES FIND EASY
80. #RWDSummit NON-DEVELOPERS EMBRACE
81. #RWDSummit COMMUNICATE MAKE IT EASY TO
82. #RWDSummit ROADMAP OPEN & TRANSPARENT
83. #RWDSummit PATTERN LIBRARY TOOLS http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/
84. #RWDSummit CSS DOCUMENTATION 1
85. #RWDSummit 1
86. #RWDSummit STATIC SITE GENERATION 2
87. #RWDSummit
88. #RWDSummit INTEGRATED 3
89. #RWDSummit
90. #RWDSummit BETTER WAY THERE HAS TO BE A
91. http://patternpack.org/
92. #RWDSummit
93. #ZombieLibrary GET STARTED WITH PATTERN PACK
94. #ZombieLibrary https://github.com/patternpack/patternpack-example-library
95. #ZombieLibrary $ npm init $ git init
96. #ZombieLibrary $ npm install grunt patternpack --save-dev
97. #ZombieLibrary module.exports = function(grunt) { grunt.initConfig({ patternpack: { run: {}, build: {}, release: {} } }); grunt.loadNpmTasks('patternpack'); grunt.registerTask('default', ['patternpack:run']); } gruntfile.js
98. #ZombieLibrary $ grunt patternpack:run
99. #ZombieLibrary
100. #ZombieLibrary CREATE YOUR FIRST PATTERN
101. #ZombieLibrary
102. #ZombieLibrary
103. #ZombieLibrary
104. #ZombieLibrary
105. #ZombieLibrary
106. #ZombieLibrary
107. #ZombieLibrary
108. #ZombieLibrary
109. #ZombieLibrary
110. #ZombieLibrary UNLEASH YOUR CREATION
111. #ZombieLibrary USE SEMANTIC VERSIONING FOR YOUR DESIGN SYSTEM
112. #ZombieLibrary 1.0.5 major release minor release patch release
113. #ZombieLibrary 1.0.5 major release minor release patch release Customize to your needs
114. #ZombieLibrary $ grunt patternpack:release $ git push --follow-tags
115. #ZombieLibrary BUILD YOUR STATIC SITE 1 INCREMENT YOUR VERSION 2 CREATE A NEW COMMIT 3 TAG THE COMMIT 4
116. #ZombieLibrary INTEGRATE INTO YOUR APPLICATION
117. https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.wvedzdvsx
118. #ZombieLibrary SUPPORT FOR NPM & BOWER
119. #ZombieLibrary $ npm install my-awesome-pattern-library
120. #ZombieLibrary $ npm install https://user:pass@github.com/user/my- awesome-library.git
121. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" }
122. #ZombieLibrary USERNAME & PASSWORD ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" }
123. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" } PATH TO GIT REPOSITORY
124. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" } VERSION COMMITISH
125. #ZombieLibrary
126. #ZombieLibrary
127. #ZombieLibrary
128. http://patternpack.org/
129. #ZombieLibrary THIS IS MORE THAN JUST A TECH PROBLEM
130. INTERFACES FIGHT ZOMBIE
131. MODULARIZE
132. DOCUMENT
133. SHARE
134. #ZombieLibrary THANK YOU! Marcelo Somers @marcelosomers Slides http://j.mp/zombie-library-rwdsummit PatternPack http://patternpack.org/