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.

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. 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.

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. 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