Learn how to use styleguide/prototyping tools like Pattern Lab to increase collaboration between designers, themers, developers, and clients on Drupal projects. A focus on modular design early on in a Drupal project improves workflow and efficiency for the whole team. After applying modular design principles into your design workflow you will have: Shinier, more polished sites: You’ll improve collaboration between themers and designers without relying so much on static photoshop comps, dramatically improving the end product’s quality at a higher detail level. Happier clients: Clients will be able to see functional visual designs earlier in the sprints, and be able to play with the site in an easy to use interface. Happier developers: Developers can concentrate on the hard work of building the site while themers and designers concentrate on the visual design. Project managers overcome with joy: Sites will be more easily themed, front-end bugs will be caught earlier, clients can see progress sooner, designers will be less bogged down in Photoshop iterations, and projects will be more successful.

1. To the Pattern Lab!
Collaboration Using Modular Design Principles
May 14, 2015

2. Nice to Meet You
TO THE PATTERN LAB!
Dan Mouyard
Lead Front-End Developer
@dcmouyard
Daniel Ferro
Senior Interaction Designer
@DFerroF1

3. A Quick Overview

4. What did we do
differently?

5. TO THE PATTERN LAB!
A new tool!

6. A new mental model!

7. Pattern Lab

9. Why?
TO THE PATTERN LAB!
THE REAL
MEDIUM
THE REAL
DESIGN
THE REAL
CONTENT

10. Because of
reasons!

11. Now Let’s
Dive In!

12. Evolution of
Design Process

13. Design Deliverables
TO THE PATTERN LAB!
Mood
Boards
Style Tiles Static
Comps
Other

14. Waterfall Workflow
TO THE PATTERN LAB!
Wireframe
s Design
Comps
Dev
Theming

15. TO THE PATTERN LAB!
The Problems We
Faced :(

16. Such Problems
(T_T)

17. Improving
Collaboratio
n
We’re
collaborating! In an urban
alternative location

18. Modular Design

19. Design Systems, not Pages
TO THE PATTERN LAB!
“A modular architecture involves breaking
interfaces down into their component parts,
and sharing that thought throughout a project.
By looking for re-usable interface patterns
we strive to create scalable systems, not
fixed pictures of pages.”
(Source: http://tao.wearefriday.com/engineering/frontend/component-approach/)

20. (Source: http://bradfrost.com/blog/post/atomic-web-design/)
Atomic Design

22. Style Guides

23. To the
Pattern Lab!
(bit.ly/pattern-lab-nifa)

24. “One knee-jerk reaction I hear
from visual designers is that a
design system will stifle
creativity, leaving everything
looking homogeneous and
bland.” Brad Frost

25. Benefits of
Pattern Lab

26. “Pattern Lab provides
developers with an efficient
system for quickly developing
prototypes and production-
ready front-end code.”
From the Pattern Lab
Webpage

27. “Material
Design
"unified us in
our thinking,"
Duarte says,
admitting that
"it’s
absolutely a
constraint."

28. These constraints,
he says, made
design decisions
easier and more
consistent.”
Google VP of Design,
Matias Duarte talking to Gizmodo

29. Traditional Workflow
TO THE PATTERN LAB!
Design
Iterations
Dev
Themin
g QA

30. Collaborative Workflow
TO THE PATTERN LAB!
Site
Building
Design
&
Theme
Wireframe
Drupal
Markup

31. Pattern Lab
Tips

32. Let’s Summarize

33. Shinier, more
polished sites!

34. “It’s essential to build flexibility
into interface design systems in
order to make dynamic sites that
promote consistency while still
looking great and meeting
organizational needs.”
Brad Frost

35. Happier
Clients

36. TO THE PATTERN LAB!
Happier
Developer
s

37. PM’s
Overcome
With Joy

38. Resources
TO THE PATTERN LAB!
● styleguides.io
● patternlab.io
● drupal.org/project/gesso
● github.com/dcmouyard/patternlab-php-gesso
● nifa.usda.gov/sites/all/themes/nifa_theme/pattern-lab/v8/

39. Questions or Comments

40. By the
Way,
We’re
Hiring!
Visit us after the talk
and grab some
cards / information

41. THANK
YOU!Dan Mouyard @dcmouyard
Daniel Ferro @DFerroF1
Please rate our session:
bit.ly/pattern-lab