Design Systems are Coming... Are you Ready?

Responsive Web Design has flipped the workflow of multi-discipline organizations on its head. Waterfall methodologies no longer work due to new points of collaboration needed between design and development. These intersection points leave many asking, "What does a wireframe look like?" or "What happened to comps?" This talk will look at how building pattern libraries can also help to build better teams.

Transcript

1. Design Systems are Coming… Are you ready? Vernon Kesner
2. Who is this guy? Lead Front-End Architect @ Ally Financial • Building the web since 2002 • JavaScript developer • Creator of PatternGuide • Husband & Father of 3
3. Responsive design requires us to focus
 on the small details.
4. These details are completely changing
 the way we work.
5. http://bit.ly/london-natural-history
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. - Jeremy Keith “…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.” https://adactio.com/journal/5351
10. http://bit.ly/1fCXSdB Fire up that 960px Photoshop template!
11. http://bit.ly/1LCh5pZ
12. Multi-device experiences present us with a series of unique challenges.
13. We must design systems of components to be successful building true, multi-device web sites & applications.
14. But How?
15. 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://daverupert.com/2013/04/responsive-deliverables/
16. The Details The 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://daverupert.com/2013/04/responsive-deliverables/
17. 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.
18. 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
19. 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. http://bit.ly/1KdnWsx
20. 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.
21. 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://daverupert.com/2013/04/responsive-deliverables/
22. 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
23. There are existing tools to help you create a pattern library
24. 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)
25. 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/
26. documentcss Using a combination of custom tags and markdown DocumentCSS parses coments on your CSS, LESS, or SASS and autogenerates a site with your documentation. http://documentcss.com/
27. 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/
28. These separations need to completely change how we collaborate and work together.
29. Even if you’re a 1-person team, design systems should become part of your workflow.
30. http://bit.ly/1GrgBPV Design Systems are more than just a Pattern Library. They should include every point of your workflow & team.
31. 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.
32. http://bit.ly/1GFI18n
33. http://bit.ly/1GFI18n
34. The teams who succeed will be the one’s that learn to work better together in this end-to-end design system process.
35. Dev Tooling GulpJS or GruntJS for task automation Sass, Less & CodeKit WebPack, Browserify Web Components, React, MV*, Flux PatternGuide
36. Be responsible in your overall design system
37. Thanks for listening! Any questions? @vernonk
38. 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