Why implement a design system

Transcript

1. Why implement a design system An effort to convince the developers
2. Why implement this design system PAGE 2 Here’s a “design system” that I’ve made
3. Why implement this design system PAGE 3 The system i’m proposing is that we keep a list of components like this. Whichever are finished developing, we mark them as completed. A portion of these components are marked, as we are also using an external library in here.
4. Why implement this design system PAGE 4 Have a look at this image: This is from the book, “Atomic design”
5. Why implement this design system PAGE 5 What does this “system” mean? Here’s a set of elements. Think of them as building blocks for more complicated things. If we get these perfect, we’ll be able to make the more complicated designs better. And we’ll be able to make them efficiently, in other manners too.
6. Why implement this design system PAGE 6 Why is it different from a premade-component library? It is similar in many ways, infact this includes one of the libraries inside it, but it’s a little bigger.
7. Why implement this design system PAGE 7 Pros and cons of the existing methods Every page made from scratch Using Component Library (mui) only Not much scope for branding Inconsistency in design-development Long development times Short development time
8. Why implement this design system PAGE 8 Every page made from scratch Using Component Library (mui) only Not much branding Inconsistency in design-development Long development times Short development time This system
9. Why implement this design system PAGE 9 1. Designers, can look up the components that are marked, Because designers will know what components developers already have made, they can make designs that utilise the already made ones more. How does this help designers?
10. Why implement this design system PAGE 10 Having enough elements, to build a branded experience. How does this help designers? 2.
11. Why implement this design system PAGE 11
12. Why implement this design system PAGE 12 Let’s look at an example A component made for the listing page. - Since this is quite an important component of the website, we don’t mind if a lot of developer time goes into this. - So the designer can put this into the molecule section of the design system, — i.e. it’s ok, if it’s not made out of reusable components. - And because this is in the molecule section, the developer, looks at this and understand that they’ll have to make this out of the atomic elements. (like the typography and and image etc.)
13. Why implement this design system PAGE 13 In contrast, this component, is places in the “organism” section of the file, So developer will look for the subcomponents it might be made of. And probably will find them. Also, for a one off, page like this, the designer should design it from already present molecules.
14. Why implement this design system PAGE 14 Similarly, an example for documenting which layouts are allowed: The areas in the pink stay the same, as the width of the screen changes. After looking at this, the designer knows, they can design within these layouts, and be assured that their design will appear correctly, when developed. And the developer can feel assured that there are only a few layouts that they have to perfect
15. Why implement this design system PAGE 15 Similarly, an example for documenting which layouts are allowed: The areas in the pink stay the same, as the width of the screen changes. 2. This way the designer doesn’t have to design for different widths all the time, they can just do it for one size and mark “resizing logic-1”, “resizing logic-2” etc.
16. Why implement this design system PAGE 16 Essentially, this becomes a way to easy agreements, between the developers and designers.
17. Why implement this design system PAGE 17 This has a third feature. Which is that, this can be done Progressively. You don’t have to make all these component, right now.
18. Why implement this design system PAGE 18 This can be done Progressively. Because we are not gonna stop using the MUI5 components, we can, just implement a few elements from this. Even delete the ones that we don’t see getting used much.
19. Why implement this design system PAGE 19 Then I pasted a link to the figma file with the system. In the next slides you can see some screenshots from the file.
20. Why implement this design system PAGE 20
21. Why implement this design system PAGE 21 The left side is from a customised version of MUI5 components
22. Why implement this design system PAGE 22
23. Why implement this design system PAGE 23