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