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.

Design system based workflow

273 views

Published on

Il workflow ai tempi del design system

Published in: Software
  • Be the first to comment

  • Be the first to like this

Design system based workflow

  1. 1. Design System Based Workflow Il workflow ai tempi del design system
  2. 2. Figures Involved ● Client ● Web Designer (Graphic Designer) ● Frontend Developer ● Backend Developer ● Content Creator
  3. 3. Web designer Client Frontend Dev Backend Dev Content Creator Hi-fi Wireframe Prototype Final
  4. 4. Who creates the Design System? Web designer Frontend Dev Hi-fi Wireframe Prototype
  5. 5. Web Designer Made Web designer Frontend Dev Hi-fi Wireframe + Design System Prototype Frontend Development Knowledge
  6. 6. Frontend Dev Made Web designer Frontend Dev Hi-fi Wireframe Prototype Design SystemDesign choices Knowledge
  7. 7. Collaboration Made Web designer Frontend Dev Hi-fi Wireframe Prototype Design System
  8. 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. 9. Web designer Client Frontend Dev Backend Dev Content Creator Lo-fi Wireframe Prototype Final Style Tiles Design System Hi-fi Wireframe
  10. 10. STEP 1: Requirements Web designer Client Frontend Dev Perceptual Requirements Functional Requirements
  11. 11. STEP 2: Requirements processing Web designer Frontend Dev Lo-fi WireframeStyle Tiles
  12. 12. STEP 3: Design processing Web designer Frontend Dev Lo-fi WireframeStyle Tiles Design System Hi-fi Wireframe
  13. 13. STEP 4: Development Processing Frontend Dev Backend Dev Design System Prototype
  14. 14. Three way collaboration Web designer Frontend Dev Lo-fi WireframeStyle Tiles Design System Hi-fi Wireframe Content Designer Content Inventory
  15. 15. Web designer PM Frontend Dev Backend DevContent Creator Lo-fi Wireframe Prototype Final Style Tiles Design System Hi-fi Wireframe Content Inventory
  16. 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. 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. 18. RESOURCES ● The Elements of User Experience - Jesse James Garrett ● Atomic Design - Brad Frost ● Design Systems - Alla Kholmatova ● Style Tiles - http://styletil.es/

×