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.

1. Design System Based Workflow
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 Dev Backend Dev
Content Creator
Hi-fi Wireframe
Prototype Final

4. Who creates the Design System?
Web designer
Frontend Dev
Hi-fi Wireframe
Prototype

5. Web Designer Made
Web designer
Frontend Dev
Hi-fi Wireframe
+
Design System
Prototype
Frontend Development
Knowledge

6. Frontend Dev Made
Web designer
Frontend Dev
Hi-fi Wireframe
Prototype
Design SystemDesign choices
Knowledge

7. Collaboration Made
Web designer Frontend Dev
Hi-fi Wireframe Prototype
Design System

8. How to get it
● 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 Dev Backend Dev
Content Creator
Lo-fi Wireframe
Prototype
Final
Style Tiles
Design System Hi-fi Wireframe

10. STEP 1: Requirements
Web designer
Client
Frontend Dev
Perceptual
Requirements
Functional
Requirements

11. STEP 2: Requirements processing
Web designer Frontend Dev
Lo-fi WireframeStyle Tiles

12. STEP 3: Design processing
Web designer Frontend Dev
Lo-fi WireframeStyle Tiles
Design System
Hi-fi Wireframe

13. STEP 4: Development Processing
Frontend Dev Backend Dev
Design System
Prototype

14. Three way collaboration
Web designer Frontend Dev
Lo-fi WireframeStyle Tiles
Design System
Hi-fi Wireframe
Content
Designer
Content
Inventory

15. Web designer
PM
Frontend Dev Backend DevContent Creator
Lo-fi Wireframe
Prototype
Final
Style Tiles
Design System Hi-fi Wireframe
Content Inventory

16. Web designer
PM
Frontend Dev Backend 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 figures are 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 Elements of User Experience - Jesse James Garrett
● Atomic Design - Brad Frost
● Design Systems - Alla Kholmatova
● Style Tiles - http://styletil.es/