Pattern Libraries Can Change Your Life

Presented at CSS Dev Conf 2016 (http://2016.cssdevconf.com/).
=======
Pattern libraries have become a vital part of design and website development but it's important to understand that a pattern library is NOT the same as your framework. Much like you'd care for a flower in your garden, pattern libraries must have food, water and plenty of sunlight (exposure).

In this talk let's dive deep into pattern libraries and discuss the following:

Why are pattern libraries are a necessity?
What you should build into your pattern library?
How can pattern libraries help you build and develop faster?
How should you maintain a pattern library after your project has launched?
=======
References:
• Paul Boag - "Recurring solutions that solve ..." - https://boagworld.com/design/pattern-library/
• Brad Frost - "Technically a pattern library is a simple collection of UI components..." - http://bradfrost.com/blog/post/anatomy-of-a-pattern-in-a-pattern-library/
• Brad Frost "The is the web" - http://bradfrost.com/blog/post/this-is-the-web/
• Luke W. "No fewer than 33 mainstream connected..." - http://www.lukew.com/ff/entry.asp?1646
• Code for America - http://style.codeforamerica.org/
• Mailchimp UX - http://ux.mailchimp.com/patterns/typography
• Clear Left Style guide - http://clearleft.com/styleguide/
• Github Primer CSS - http://primercss.io/buttons/
• Google Material Design - https://material.google.com/components/dialogs.html
• Atomic Design - http://bradfrost.com/blog/post/atomic-web-design/
• Una - "Pattern libraries (and really CSS in general)" - https://una.im/pattern-libs/
• Phil Hawksworth - "Unless it’s part of your build..." - https://speakerdeck.com/philhawksworth/static-sites-go-all-hollywood?slide=61
• Design system maturity model - https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba#.jcl6x3pxp
• Style Guides.io - http://styleguides.io/
• Fight the Zombie Pattern Library - https://speakerdeck.com/marcelosomers/fight-the-zombie-pattern-library-rwd-summit-2016

Transcript

1. PATTERN LIBRARIES CSS DEV CONF 2016 BY ADAM MCCOMBS CAN CHANGE YOUR LIFE presented for #PATTERNLIFE
2. THE BEST OF CSS DEV CONF. Text to Vote to (504) 229-6828 #PatternLife 5 I love this talk! Rating Talk hashtag Your comment
3. Hi, I’m Adam McCombs Designer + Developer @adammccombs
4. Taecho Group taechogroup.com craftpl.us Craft Plus Est. 2011 Est. 2014 A little bit about me my passion
5. A little bit about me my favorite platforms
6. A little bit about me my history and skills photographer > designer > frontend > backend Built my first computer game when I was 12 (HyperCard ftw!) Built my first website in ~2001 Had my first ‘real’ paying client in 2002 Freelanced from 2002-2006 Worked as an in-house graphic designer for 2+ years Freelanced for another 3+ years Launched my agency, Taecho Group, in 2011 Launched Craft Plus in 2014
7. WHAT IS A PATTERN LIBRARY?
8. - Paul Boag | November 12, 2013 https://boagworld.com/design/pattern-library/ Recurring solutions that solve common design problems. The site UI-Patterns described these user interface design patterns as:
9. PATTERN LIBRARIES in disguise [Living/Web] Style Guides Atom Design Material Design Design Languages Design Systems Element Explorations Style Tiles Element Collages Concept Boards
10. PATTERN LIBRARIES are NOT Bootstrap, Foundation, Blueprint, Semantic UI, Susy, MaterializeCSS, Pure Your Framework PDFs, Photoshop docs or
 [print] style guides Static Mockups Everyone should be able to access, update and modify pattern libraries (within reason) Limited to Designers
11. - Brad Frost | August 15, 2016 bradfrost.com/blog/post/anatomy-of-a-pattern-in-a-pattern-library/ Technically a pattern library is a simple collection of UI components, but in order for design system users do their best work, a pattern library should also present other important info.
12. WHY ARE PATTERN LIBRARIES A NECESSITY?
13. A BRIEF HISTORY …first
14. ‘THE DREADED’ WATERFALL PROCESS DISCOVERY IA/UX GRAPHIC DESIGN TEMPLATE DEVELOPMENT CMS PLATFORM DEVELOPMENT or LAUNCH
15. ‘THE DREADED’ WATERFALL PROCESS DESIGNER(S) WIREFRAMES ‘STATIC’ MOCKUPS DEVELOPER(S) FRONTEND DEV CMS TEMPLATES BACKENDEND DEV “just throw it over the wall”
16. Hardware Browser Software Language Front-end Hosting PHP, Ruby etc. CMS / Framework HTML & CSS You are here Front-end Developer Designer Back-end Developer Sys Admin Database Designer or Developer? BREAK DOWN THE WALLS
17. WHAT ABOUT DEVICES? …buuuut
18. SCREENS, SCREENS EVERYWHERE http://bradfrost.com/blog/post/this-is-the-web/
19. SCREENS, SCREENS EVERYWHERE http://bradfrost.com/blog/post/this-is-the-web/
20. ENTER THE WEB …there has to be a better way RESPONSIVE
21. RWD
22. WHY ARE PATTERN LIBRARIES A NECESSITY? So if RWD is king…
23. CONSISTENCY in all things 1
24. in all things Consistency 1 http://style.codeforamerica.org/ Colors - Code for America
25. Typography - Mailchimp in all things Consistency 1 http://ux.mailchimp.com/patterns/typography
26. [Brand] Style - Clearleft in all things Consistency 1 http://clearleft.com/styleguide/
27. REUSABILITY of elements and front-end markup 2
28. Buttons - Github (1 of 2) of elements &
 front-end markup Reusability 2 http://primercss.io/buttons/
29. Buttons - Github (2 of 2) of elements &
 front-end markup Reusability 2 http://primercss.io/buttons/
30. Forms - Github (1 of 2) of elements &
 front-end markup Reusability 2 http://primercss.io/forms/
31. Forms - Github (2 of 2) of elements &
 front-end markup Reusability 2 http://primercss.io/forms/
32. MAINTAINABILITY of codebase before and after launch 3
33. Dialogs - Google Material of codebase before &
 after launch Maintainability 3 https://material.google.com/components/dialogs.html
34. Blankslates - Github http://primercss.io/blankslate/ of codebase before &
 after launch Maintainability 3
35. SPEED COST Time is money 4 &
36. Static/Waterfall Process - 1 page Time is money Speed & Cost 4 User Experience Designer Front-end Dev Back-end Dev 2.5 hours each 10 hours total
37. Static/Waterfall Process - 5 pages Time is money Speed & Cost 4 User Experience Designer Front-end Dev Back-end Dev 2.5 hours per page 50 hours total
38. Pattern Library - 5 pages Time is money Speed & Cost 4 User Experience Designer Front-end Dev Back-end Dev 2.5 hours per page? ~37.5 hours total
39. DEVELOP SYSTEMS not pages 5 Pattern Libraries allow you to
40. Atomic Design by Brad Frost not pages Develop Systems 5 http://bradfrost.com/blog/post/atomic-web-design/ Pre-order the book!
41. Atoms - Atomic Design by Brad Frost not pages Develop Systems 5 http://bradfrost.com/blog/post/atomic-web-design/
42. Molecules - Atomic Design by Brad Frost not pages Develop Systems 5 http://bradfrost.com/blog/post/atomic-web-design/
43. Organisms - Atomic Design by Brad Frost not pages Develop Systems 5 http://bradfrost.com/blog/post/atomic-web-design/
44. Templates - Atomic Design by Brad Frost not pages Develop Systems 5 http://bradfrost.com/blog/post/atomic-web-design/
45. HOW CAN PATTERN LIBRARIES HELP YOU BUILD AND DEVELOP FASTER?
46. BUILD AND DEVELOP FASTER using pattern libraries Automate deployments of updated patterns Use tools like Gulp to minify, add browser autoprefixes and polyfills Preview patterns using GitHub pages (for free*) Allow for buy in by allowing access to everyone to the pattern library Integrate tools like intercom, and help desks Use your pattern library for visual testing (github.com/webdriverio/webdrivercss)
47. STUCK? PROTOTYPE! with codepen.io/patterns
48. THE STRUCTURE of pattern libraries Style Color, Typography, Images Layout Grids, units & measurements, structure Components Buttons, tables, navigation, lists Patterns Advanced navigation, filtering, modules
49. INTERACTING WITH PROJECTS of pattern libraries Patterns are specific
 to an individual project Patterns are externalized but 
 pushes into your project
 as library.css Patterns can be updated but have no [automatic] effect on the project(s) EXTERNAL INTERNAL ISOLATED
50. https://una.im/pattern-libs/ Pattern libraries (and really CSS in general) is one of those things that everyone has an opinion on how to implement because of its low barrier to entry. This can (and likely will) cause strong opinions to form among various members of your team. - Una | September 26, 2016
51. WHAT YOU SHOULD BUILD INTO YOUR PATTERN LIBRARY? 3 requirements for excellent a pattern library
52. DOCUMENTATION document all the things! 1
53. Pattern Name 1A DOCUMENTATION document all the things! 1 Why does this pattern exist? 1B Pattern usage Description 1C (For complex patterns) What is the wrong way to use a pattern? 1D
54. PATTERN PREVIEW How should this pattern be displayed? 2
55. MARKUP bonus points for copy & paste 3
56. HOW SHOULD YOU MAINTAIN A PATTERN LIBRARY AFTER YOUR PROJECT HAS LAUNCHED?
57. AUTOMATE. AUTOMATE. AUTOMATE. It really comes down to this.
58. https://speakerdeck.com/philhawksworth/static-sites-go-all-hollywood?slide=61 Unless it’s part of your build, your style guide is just more documentation to maintain - Phil Hawksworth | September 22, 2015
59. DESIGN SYSTEM MATURITY MODEL https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba#.jcl6x3pxp
60. WORKING IN A TEAM? find your common ground STANDARDS code standards naming convention file organization TOOLS other systems/libraries gulp, grunt GitHub pages GOALS what are your objectives pattern library timelines post launch maintenance
61. http://styleguides.io/ https://speakerdeck.com/marcelosomers/fight- the-zombie-pattern-library-rwd-summit-2016 Fight the Zombie Pattern Library - RWD Summit 2016 by Marcelo Somers 3 Years of Pattern Libraries: Lessons Learned https://una.im/pattern-libs/ styleguides.io FURTHER READING
62. Thanks! @adammccombs taechogroup.com / craftpl.us THE BEST OF CSS DEV CONF. Text to Vote to (504) 229-6828 #PatternLife 5 I love this talk! Rating Talk hashtag Your comment