SlideShare a Scribd company logo

Design Systems are Coming... Are you Ready?

•
•
Vernon Kesner
Vernon Kesner

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.

Related slideshows

Using Node and Grunt to create an awesome workflow
Using Node and Grunt to create an awesome workflowUsing Node and Grunt to create an awesome workflow
Using Node and Grunt to create an awesome workflow
 
JS Level Up: Prototypes
JS Level Up: PrototypesJS Level Up: Prototypes
JS Level Up: Prototypes
 
Modular Development with RequireJS
Modular Development with RequireJSModular Development with RequireJS
Modular Development with RequireJS
 
1 of 38
Download to read offline
Design Systems are Coming… Are you ready? Vernon Kesner
Who is this guy? Lead Front-End Architect @ Ally Financial • Building the web since 2002 • JavaScript developer • Creator of PatternGuide • Husband & Father of 3
Responsive design requires us to focus
 on the small details.
These details are completely changing
 the way we work.
http://bit.ly/london-natural-history
http://bit.ly/london-natural-history History has a way of teaching us lessons
http://bit.ly/london-natural-history http://www.sitepoint.com/liquid-design/
http://bit.ly/london-natural-history http://www.sitepoint.com/liquid-design/
- 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
http://bit.ly/1fCXSdB Fire up that 960px Photoshop template!
http://bit.ly/1LCh5pZ
Multi-device experiences present us with a series of unique challenges.
We must design systems of components to be successful building true, multi-device web sites & applications.
But How?
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/
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/
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.
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
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
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.
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/
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
There are existing tools to help you create a pattern library
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)
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/
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/
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/
These separations need to completely change how we collaborate and work together.
Even if you’re a 1-person team, design systems should become part of your workflow.
http://bit.ly/1GrgBPV Design Systems are more than just a Pattern Library. They should include every point of your workflow & team.
DesignTooling 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.
http://bit.ly/1GFI18n
http://bit.ly/1GFI18n
The teams who succeed will be the one’s that learn to work better together in this end-to-end design system process.
DevTooling GulpJS or GruntJS for task automation Sass, Less & CodeKit WebPack, Browserify Web Components, React, MV*, Flux PatternGuide
Be responsible in your overall design system
Thanks for listening! Any questions? @vernonk
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

More Related Content

Design Systems are Coming... Are you Ready?

  • 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.
  • 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!
  • 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.
  • 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. DesignTooling 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.
  • 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. DevTooling 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