To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s...
Transcript of To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s...
![Page 1: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/1.jpg)
To the Pattern Lab!Collaboration Using Atomic Design Principles
July 22, 2015
![Page 2: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/2.jpg)
Nice to Meet You
TO THE PATTERN LAB!
Daniel FerroSenior Interaction Designer
@DFerroF1
![Page 3: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/3.jpg)
A Quick Overview
![Page 4: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/4.jpg)
What did we do differently?
![Page 5: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/5.jpg)
TO THE PATTERN LAB!
A new tool!
![Page 6: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/6.jpg)
A new mental model!
![Page 7: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/7.jpg)
Pattern Lab
![Page 8: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/8.jpg)
![Page 9: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/9.jpg)
Why?
TO THE PATTERN LAB!
THE REAL MEDIUM
THE REAL DESIGN
THE REAL CONTENT
![Page 10: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/10.jpg)
Because of reasons!
![Page 11: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/11.jpg)
Now Let’s Dive In!
![Page 12: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/12.jpg)
Evolution of theDesign Process
![Page 13: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/13.jpg)
Design Deliverables
TO THE PATTERN LAB!
Mood Boards Style Tiles Static Comps Other
![Page 14: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/14.jpg)
Waterfall Workflow
TO THE PATTERN LAB!
WireframesDesign Comps
DevTheming
![Page 15: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/15.jpg)
TO THE PATTERN LAB!
The problems we faced :(
![Page 16: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/16.jpg)
Such problems (T_T)
![Page 17: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/17.jpg)
Improving Collaboration
We’re collaborating!
![Page 18: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/18.jpg)
Atomic Design
![Page 19: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/19.jpg)
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/)
![Page 20: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/20.jpg)
(Source: http://bradfrost.com/blog/post/atomic-web-design/)
Atomic Design
![Page 21: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/21.jpg)
To the Pattern Lab!
bit.ly/pattern-lab-nifa
![Page 22: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/22.jpg)
“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
![Page 23: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/23.jpg)
Benefits of Pattern Lab
![Page 24: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/24.jpg)
“Pattern Lab provides developers with an efficient system for quickly developing prototypes and production-ready front-end code.”
From the Pattern Lab Webpage
![Page 25: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/25.jpg)
“Material Design unified us in our thinking," Duarte says, admitting that, "it’s absolutely a constraint."
Google VP of Design, Matias Duarte talking to Gizmodo
![Page 26: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/26.jpg)
![Page 27: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/27.jpg)
“These constraints made design decisions easier and more consistent.”
Google VP of Design, Matias Duarte talking to Gizmodo
![Page 28: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/28.jpg)
Traditional Workflow
TO THE PATTERN LAB!
Design Iterations
Dev
ThemingQA
![Page 29: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/29.jpg)
Collaborative Workflow
TO THE PATTERN LAB!
SiteBuilding
Design & Theme
Wireframe DrupalMarkup
![Page 30: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/30.jpg)
Pattern Lab Tips
![Page 31: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/31.jpg)
Let’s Summarize
![Page 32: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/32.jpg)
Shinier, more polished sites!
![Page 33: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/33.jpg)
“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
![Page 34: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/34.jpg)
Happier clients!
![Page 35: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/35.jpg)
TO THE PATTERN LAB!
Happier developers!
![Page 36: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/36.jpg)
PMs overcome with joy!
![Page 37: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/37.jpg)
Resources
TO THE PATTERN LAB!
● styleguides.io
● patternlab.io
● drupal.org/project/gesso
● github.com/dcmouyard/patternlab-php-gesso
● bit.ly/pattern-lab-nifa
![Page 38: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/38.jpg)
Questions or Comments
![Page 39: To the Pattern Lab! · developing prototypes and ... Drupal Markup. Pattern Lab Tips. Let’s Summarize. Shinier, more polished sites! “It’s essential to build flexibility into](https://reader034.fdocuments.net/reader034/viewer/2022042915/5f518bd5f05a5b4a7e76bef7/html5/thumbnails/39.jpg)
By the way, we’re hiring!
Visit us after the talk and grab some cards / information