Style guide driven development
- 1. @kolett__ linkedin.com/in/tatianakolesnikova Tatiana Kolesnikova @arvtor linkedin.com/in/arvidtorset Arvid Torset Style Guide Driven Development
- 2. What is it? I donât want to go there I donât know how to go there
- 3. What is it: living front end style guides?
- 10. FE style guides
- 13. From developers point of view
- 14. Advantages âą You automatically follow the rules
- 17. Advantages âą You automatically follow the rules âą You see what is really there
- 20. Advantages âą You automatically follow the rules âą You see what is really there âą Easy to make changes
- 22. Advantages âą You automatically follow the rules âą You see what is really there âą Easy to make changes âą Improved quality
- 23. Why have we not started doing this before?
- 24. We have always done it differently.
- 25. It requires higher level
- 26. I will be fired!
- 27. I will not be fired!
- 28. I will have no freedom!
- 32. I will have no freedom!
- 33. I will have no freedom!
- 34. I will have to code!
- 35. I will not have to code!
- 38. YOU will not have to code, but you will have to know how THEY code.
- 39. I will not be fired! I will have no freedom! I will not have to code!
- 40. How to get there: create a visual system
- 41. New products How to get there: create a visual system
- 42. New products âą Planning. What will we need? How to get there: create a visual system
- 45. New products âą Planning. What will we need? âą From brand to UI. How do we apply it? How to get there: create a visual system
- 50. New products âą Planning. What will we need? âą From brand to UI. How do we apply it? How to get there: create a visual system Existing product with no coherent design system
- 51. New products âą Planning. What will we need? âą From brand to UI. How do we apply it? How to get there: create a visual system Existing product with no coherent design system âą Interface audit. What do we have?
- 52. Image credit: Tatiana Kolesnikova
- 53. Image credit: Tatiana Kolesnikova
- 54. Image credit: Brad Frost
- 55. New products âą Planning. What will we need? âą From brand to UI. How do we apply it? How to get there: create a visual system Existing product with no coherent design system âą Interface audit. What do we have? âą Interface system. What do we keep?
- 56. Image credit: Tatiana Kolesnikova
- 57. Image credit: Tatiana Kolesnikova
- 58. Image credit: Tatiana Kolesnikova
- 59. Image credit: Tatiana Kolesnikova
- 60. Image credit: Brad Frost
- 62. New products âą Planning. What will we need? âą From brand to UI. How do we apply it? How to get there: create a visual system Existing product with no coherent design system âą Interface audit. What do we have? âą Interface system. What do we keep? âą Gradually change the product.
- 63. Analyze where you are: technical considerations âą UI Frameworks How to get there: implement live styleguide
- 64. High level UI frameworks âą Ember (components) âą Angular 2 (components) âą Java-FX (desktop, components) âą Others
- 74. Analyze where you are: technical considerations âą UI Frameworks âą Composition of the team How to get there: implement live styleguide
- 75. Analyze where you are: technical considerations âą UI Frameworks âą Composition of the team âą Stage in the project How to get there: implement live styleguide
- 76. Go incrementally
- 77. Beware of global changes
- 78. Rebuild all ONLY when you must
- 79. Analyze where you are: technical considerations âą UI Frameworks âą Composition of the team âą Stage in the project How to get there: implement live styleguide Now implementation âą Derive the design system âą Create element library âą Create preview of all elements
- 82. Analyze where you are: technical considerations âą UI Frameworks âą Composition of the team âą Stage in the project How to get there: implement live styleguide Now implementation âą Derive the design system âą Create element library âą Create preview of all elements âą Change the workflow
- 84. Advantages âą Work is done faster as the result âą More predictable results âą Easier to put in a new developer or new designer âą Reduce the amount of UI design in the maintenance phase How to sell to business owners Drawbacks âą It can break existing product âą Slower work in transition stage
- 85. 1. Overview first â details later.
- 89. 1. Overview first â details later. 2. No isolated work.