Download - Design Systems are Coming... Are you Ready?
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 focuson 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 BasicsWe 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 DetailsThe 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/
PropertiesThe 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.
ElementsElements 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
ModulesA 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
PatternsPatterns 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.
LayoutsLayouts 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/
PagesPages 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 GuideGenerator
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/
documentcssUsing 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 labPattern 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.
Design ToolingVisual 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.
Dev ToolingGulpJS or GruntJS for task automation
Sass, Less & CodeKit
WebPack, Browserify
Web Components, React, MV*, Flux
PatternGuide
Be responsible in youroverall design system
Thanks for listening!
Any questions?
@vernonk
ResourcesPattern 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