Download to read offline
Uploaded byNicola Della Marina
Design system based workflow
The document outlines a design system based workflow for web development projects. It involves graphic designers, frontend developers, backend developers, and content creators. The key steps include defining requirements, creating low-fidelity wireframes and style tiles, developing the design system, prototyping, and getting approvals from stakeholders. The goals are to separate visual and functional design, have strict collaboration between roles, and make additions in a cyclic manner driven by the design system. This is meant to result in a more affordable approval process, less refactoring, and a more efficient design system.
![[DSBW Spring 2009] Unit 01: Introducing Web Engineering](https://cdn.slidesharecdn.com/ss_thumbnails/unit01intro-1234552683396225-3-thumbnail.jpg?width=640&height=640&fit=bounds)
Design system based workflow
- 1. Design System BasedWorkflow Il workflow ai tempi del design system
- 2. Figures Involved ● Client ●Web Designer (Graphic Designer) ● Frontend Developer ● Backend Developer ● Content Creator
- 3. Web designer Client Frontend DevBackend Dev Content Creator Hi-fi Wireframe Prototype Final
- 4. Who creates theDesign System? Web designer Frontend Dev Hi-fi Wireframe Prototype
- 5. Web Designer Made Webdesigner Frontend Dev Hi-fi Wireframe + Design System Prototype Frontend Development Knowledge
- 6. Frontend Dev Made Webdesigner Frontend Dev Hi-fi Wireframe Prototype Design SystemDesign choices Knowledge
- 7. Collaboration Made Web designerFrontend Dev Hi-fi Wireframe Prototype Design System
- 8. How to getit ● Separation between Visual Design and Functional Design ● Strict collaboration between Web Designer and Frontend Dev ● Cyclic additions ● Add more approval steps ● Design System driven (before the wireframe)
- 9. Web designer Client Frontend DevBackend Dev Content Creator Lo-fi Wireframe Prototype Final Style Tiles Design System Hi-fi Wireframe
- 10. STEP 1: Requirements Webdesigner Client Frontend Dev Perceptual Requirements Functional Requirements
- 11. STEP 2: Requirementsprocessing Web designer Frontend Dev Lo-fi WireframeStyle Tiles
- 12. STEP 3: Designprocessing Web designer Frontend Dev Lo-fi WireframeStyle Tiles Design System Hi-fi Wireframe
- 13. STEP 4: DevelopmentProcessing Frontend Dev Backend Dev Design System Prototype
- 14. Three way collaboration Webdesigner Frontend Dev Lo-fi WireframeStyle Tiles Design System Hi-fi Wireframe Content Designer Content Inventory
- 15. Web designer PM Frontend DevBackend DevContent Creator Lo-fi Wireframe Prototype Final Style Tiles Design System Hi-fi Wireframe Content Inventory
- 16. Web designer PM Frontend DevBackend DevContent Creator Lo-fi Wireframe Prototype Final Style Tiles Design System Hi-fi Wireframe Content Inventory Requirements Intermediate Approval Final Approval
- 17. RECAP PROS ● All figuresare highly involved ● Documented Workflow ● More affordable approval phase ● Less refactoring loops ● Efficient Design System CONS ● All figure are highly involved ● Requirements segmentation ● Complex iterations / interactions ● No time saving
- 18. RESOURCES ● The Elementsof User Experience - Jesse James Garrett ● Atomic Design - Brad Frost ● Design Systems - Alla Kholmatova ● Style Tiles - http://styletil.es/
Editor's Notes
- #7 Questo tipo di Workflow tende a seguire un approccio Page Driven Design