Pattern Libraries Will Save the World (or at least yours)

Developing a pattern library - whether you're part of an enterprise development team or a solo freelancer - will not only make you more efficient and productive, it will also make you a better Front End Developer (or designer, or IA) and Team. Come out to learn what a pattern library consists of, existing tools that you can use to start building a pattern library today, and get some tips on tooling from both a design and development perspective that are geared towards the challenges you face on a daily basis.

Transcript

1. Pattern Libraries Will Save the World (or at least yours) Vernon Kesner @vernonk
2. Who is this guy? Lead Front-End Architect @ Ally Financial • Building the web since 2002 • JavaScript (primarily) developer • Creator of PatternGuide • Husband & Father of 3
 (7 if you count animals)
3. Responsive Design has helped to evolve what a “website” is.
4. This created a
 larger focus on smaller details.
5. These details should completely change how we work.
6. http://bit.ly/london-natural-history History has a way of teaching us lessons
7. http://bit.ly/london-natural-history http://www.sitepoint.com/liquid-design/
8. http://bit.ly/london-natural-history http://www.sitepoint.com/liquid-design/
9. http://bit.ly/london-natural-history http://www.sitepoint.com/liquid-design/
10. “…we’ve always had the ability to create fluid layouts. And yet web designers and developers have willfully ignored that fact, choosing instead to create un-webby fixed-width layouts.” - Jeremy Keith https://adactio.com/journal/5351
11. http://bit.ly/1fCXSdB “Fire up that 960px Photoshop template!”
12. http://bit.ly/1fCXSdB Has been replaced by…
13. http://bit.ly/1NIW53Z “What’s the breakpoint ranges again?”
14. http://bit.ly/1fCXSdB These are valid questions & starting points, but…
15. http://bit.ly/1LCh5pZ The focus must be centered on the experience
16. http://bit.ly/1LCh5pZ http://bit.ly/1LCh5pZ
17. Multi-device experiences present us with a series of unique challenges.
18. Remember this?
19. Design Tooling Visual designers are seeing a complete overhaul of the tooling they are using in their day-to-day jobs. These tools blur the lines between creative design, and front-end development significantly. All of a sudden, folks who lived in Photoshop are in a tool that is producing HTML, CSS & JavaScript.
20. https://creative.adobe.com/products/reflow
21. http://bit.ly/rise-of-full-stack-designer
22. http://bit.ly/1GFI18n
23. http://bit.ly/1GFI18n
24. The organizations who succeed the most will be those who learn to work together in an end-to-end design system process.
25. But How?
26. A Pattern Library is a great central hub
27. But How?
28. The Basics We often design, approve and develop “pages” for the web. Design systems break those “pages” down into reusable collections of smaller, composable components called “layouts”. http://bit.ly/responsive-deliverables
29. The Details A pattern library in a design system is comprised of 6 unique sections: 1. Properties 2. Elements 3. Modules 4. Patterns 5. Layouts 6. Pages http://bit.ly/responsive-deliverables
30. Properties The Properties layer of your pattern library defines all of your baseline properties that do not necessarily apply to a single element, or module. $borderRadius: 7px; $primaryColor: #777; $secondaryColor: #333; $alertColor: #ff0000; $bodyFontFamily: “Helvetica Neue”; // etc, etc, etc.
31. Elements Elements are where the Properties begin to be applied and our foundational layer is created. An example of Elements would be things like: a form text input field, a form field label, an unordered list, etc. http://bit.ly/1NbR3KL
32. Modules A Module is formed when Elements are combined together. Modules give us the opportunity to focus on a particular outcome for a particular piece. An example of a module, would be various combined elements required to create a search form. http://bit.ly/1KdnWsx
33. Patterns Patterns are formed when a selection of elements and modules are combined to form a single, repeatable design pattern. Think of a site header, and you start to see a wide selection of modules and elements come into play.
34. Layouts Layouts are reusable collections of patterns, modules, and elements that come together to form an overall HTML document. Reusable Layouts give us a way to better craft user journeys, and focus our major design efforts on those pieces that really matter to our users. http://bit.ly/responsive-deliverables
35. Pages Pages are one part of the final output of the pattern library when designed correctly (rendered HTML, CSS, JS). Utilizing reusable Layouts, we can generate accessible, responsive, semantic, performant pages efficiently and quickly. Boosts to A/B testing alone are astronomical. http://bit.ly/1NcbV4l
36. There are existing tools to help you today.
37. KSS is a methodology in the way of CSS documentation, along with tools, that help you create automated, living style guides. Benefit of being a documentation format that allows for flexible coding conventions and patterns. http://warpspire.com/kss/ KSS
 (Knyle Style Sheets)
38. documentcss Using a combination of custom tags and markdown DocumentCSS parses comments on your CSS, LESS, or SASS and auto-generates a site with your documentation. http://documentcss.com/
39. pattern lab Pattern lab is based on the awesome work of Brad Frost on Atomic Design. Atomic design is a methodology used to construct web design systems. Foundation to thinking behind what we are talking about tonight. http://patternlab.io/
40. SC5 Style Guide
 Generator Helps you generate good looking style guides from style sheets using KSS notation. It can be used as a command line utility, gulp task or grunt task (needs grunt-gulp). Also includes a Designer Tool that makes collaboration much easier. http://styleguide.sc5.io/
41. Let’s look at 
 an example
42. It’s not without a fair share of issues Three Big Concerns: 1. Duplication of templates 2. Can be difficult to update 3. Static HTML output - You don’t get the whole picture
43. Dev Tooling GulpJS or GruntJS for task automation Sass, Less & CodeKit WebPack, Browserify React, Flux, Angular, Ember, etc PatternGuide and other pattern library tools we talked about
44. Be responsible in your overall design system
45. http://bit.ly/1GrgBPV Design Systems are more than just a Pattern Library. They should include every point of your workflow & team.
46. Thanks for listening! Any questions? Vernon Kesner @vernonk
47. Resources Pattern Library / Style Guide Tools • http://patternguide.io • http://patternlab.io • http://warpspire.com/kss • http://styleguide.sc5.io • http://documentcss.com Design Tooling • http://macaw.co • http://bit.ly/adobereflow • https://zeplin.io • https://webflow.com Other Development Tooling • http://gulpjs.com • http://gruntjs.com • http://browsersync.io • http://sass-lang.com Design Systems / RWD reading • http://webcomponents.org/ • http://bit.ly/design-systems-coming • http://bit.ly/what-design-systems-look-like • http://bit.ly/abookapart-rwd • http://bit.ly/responsible-responsive • http://bit.ly/mobile-content-strategy http://bit.ly/pattern-library-resources