The New Design Workflow
3 likes9,270 views
The document discusses the concept of Atomic Design and the Pattern Lab philosophy, emphasizing content, collaboration, and experience in design workflows. It outlines the iterative process of design, encourages multi-disciplinary collaboration, and highlights the creation of design systems and front-end architecture. Key pillars of this approach include code, testing, process, and documentation.
The New Design Workflow
- 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?
- 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.
- 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
- 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