At Phase2, we do things a little differently when it comes to design. While many teams are stuck in the “design first, develop second, theme last” way of doing things, we link our multidisciplinary teams together by a common vehicle: design systems. Each piece of the system, including our prototyping tools, live within the platform, allowing us to integrate processes like creative design, prototyping, front-end methodology, and implementation. We call this “The New Design Workflow.” This session will feature a panel of Phase2’s most experienced designers and front-end devs for an inside look at our best practices, tips and tricks. Plus, hear us weigh in how Drupal 8 will interface with your favorite front-end tools like PatternLab.

2. Hi!
Content. Collaboration. Experience.

3. Content. Collaboration. Experience.
Info: http://patternlab.io
Demo: http://git.io/pldemo

5. How Atomic Design Works
Pattern Lab Philosophy
Content. Collaboration. Experience.
by Brad Frost http://bradfrost.com/blog/post/atomic-web-design
Atoms Molecule
Organism

6. Old Design Workflow
Generalized & Simplified
Content. Collaboration. Experience.
IA, Wireframes
Static
Comps
Back End
Dev
Front End
Theming of CMS
Prototyping
maybe?

7. Content. Collaboration. Experience.
Prototypical Fate

8. Folder Structure
Content. Collaboration. Experience.
/theme
/css /js /pattern-lab

9. Parallel, Iterative Process
Generalized & Simplified
Design
Back End Dev
HTML/CSS/JS in
Pattern Lab
Feedback
Website
Content. Collaboration. Experience.

10. Pattern Lab Starter
Phase2’s Front End Starter
Content. Collaboration. Experience.
http://git.io/p2pls

11. Content. Collaboration. Experience.
An empty canvas
Photo by Forbairt

12. Gather all the things
Content. Collaboration. Experience.

13. Design Discovery
Visual Inventory
Content. Collaboration. Experience.
by Dan Mall http://danielmall.com/

14. Constraint
Narrowing the visual range
Content. Collaboration. Experience.

15. SUBJECTIVE
INTO
OBJECTIVE
Content. Collaboration. Experience.

16. Start Strong
Multi-disciplinary teams
Content. Collaboration. Experience.

18. Design Thinking
Brings together human
perspective with what is
both economically viable
and technologically feasible
Content. Collaboration. Experience.

19. Collaborative Design
Content. Collaboration. Experience.

20. Setting The Foundation
Typography
Content. Collaboration. Experience.
http://typecast.com

21. Visual Language
Light-weight artifacts
Content. Collaboration. Experience.
http://styletil.es by Samantha Warren

22. Visual Language
Building up
Content. Collaboration. Experience.
Element Collages invented by Dan Mall

23. Visual Language
The birth of a design system
Content. Collaboration. Experience.

24. PARALLEL WORK
COLLABORATE
ITERATE
Content. Collaboration. Experience.
Process Re-Cap

25. LEARN HTML/CSS
STILL OK TO USE PHOTOSHOP
BE AVAILABLE THROUGHOUT PROJECT
EXCELLENCE THROUGH DESIGN QA
Content. Collaboration. Experience.
Designer Take-Aways

26. Content. Collaboration. Experience.

27. Design Systems
Content. Collaboration. Experience.

28. Front-end Architecture
Content. Collaboration. Experience.

29. Pillar 1: Code
Content. Collaboration. Experience.

31. Pillar 2: Testing
Content. Collaboration. Experience.

32. Pillar 3: Process
Content. Collaboration. Experience.

33. Pillar 4: Documentation
Content. Collaboration. Experience.

34. C’est Fini
Content. Collaboration. Experience.

35. Thank you!
Content. Collaboration. Experience.
Evan Lovely
Developer
@EvanLovely
Joey Groh
Director, Creative Design
@rasskull
Micah Godbolt
Developer
@micahgodbolt
@phase2
repo git.io/p2pls
slides bit.ly/new-design-workflow