Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The New Design Workflow

8,979 views

Published on

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.

Published in: Design
  • Be the first to comment

The New Design Workflow

  1. 1. Hi! Content. Collaboration. Experience.
  2. 2. Content. Collaboration. Experience. Info: http://patternlab.io Demo: http://git.io/pldemo
  3. 3. How Atomic Design Works Pattern Lab Philosophy Content. Collaboration. Experience. by Brad Frost http://bradfrost.com/blog/post/atomic-web-design Atoms Molecule Organism
  4. 4. Old Design Workflow Generalized & Simplified Content. Collaboration. Experience. IA, Wireframes Static Comps Back End Dev Front End Theming of CMS Prototyping maybe?
  5. 5. Content. Collaboration. Experience. Prototypical Fate
  6. 6. Folder Structure Content. Collaboration. Experience. /theme /css /js /pattern-lab
  7. 7. Parallel, Iterative Process Generalized & Simplified Design Back End Dev HTML/CSS/JS in Pattern Lab Feedback Website Content. Collaboration. Experience.
  8. 8. Pattern Lab Starter Phase2’s Front End Starter Content. Collaboration. Experience. http://git.io/p2pls
  9. 9. Content. Collaboration. Experience. An empty canvas Photo by Forbairt
  10. 10. Gather all the things Content. Collaboration. Experience.
  11. 11. Design Discovery Visual Inventory Content. Collaboration. Experience. by Dan Mall http://danielmall.com/
  12. 12. Constraint Narrowing the visual range Content. Collaboration. Experience.
  13. 13. SUBJECTIVE INTO OBJECTIVE Content. Collaboration. Experience.
  14. 14. Start Strong Multi-disciplinary teams Content. Collaboration. Experience.
  15. 15. Design Thinking Brings together human perspective with what is both economically viable and technologically feasible Content. Collaboration. Experience.
  16. 16. Collaborative Design Content. Collaboration. Experience.
  17. 17. Setting The Foundation Typography Content. Collaboration. Experience. http://typecast.com
  18. 18. Visual Language Light-weight artifacts Content. Collaboration. Experience. http://styletil.es by Samantha Warren
  19. 19. Visual Language Building up Content. Collaboration. Experience. Element Collages invented by Dan Mall
  20. 20. Visual Language The birth of a design system Content. Collaboration. Experience.
  21. 21. PARALLEL WORK COLLABORATE ITERATE Content. Collaboration. Experience. Process Re-Cap
  22. 22. LEARN HTML/CSS STILL OK TO USE PHOTOSHOP BE AVAILABLE THROUGHOUT PROJECT EXCELLENCE THROUGH DESIGN QA Content. Collaboration. Experience. Designer Take-Aways
  23. 23. Content. Collaboration. Experience.
  24. 24. Design Systems Content. Collaboration. Experience.
  25. 25. Front-end Architecture Content. Collaboration. Experience.
  26. 26. Pillar 1: Code Content. Collaboration. Experience.
  27. 27. Pillar 2: Testing Content. Collaboration. Experience.
  28. 28. Pillar 3: Process Content. Collaboration. Experience.
  29. 29. Pillar 4: Documentation Content. Collaboration. Experience.
  30. 30. C’est Fini Content. Collaboration. Experience.
  31. 31. 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

×