You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/2019-11-01-myhaz-design-system-1.md
+9-8Lines changed: 9 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,28 +13,29 @@ tags:
13
13
This is **part 1** in a blog series about our approach to creating a shared design system for [myHAZ-VCT PLATFORM](https://oda.bgs.ac.uk/).
14
14
15
15
- Part 1 - What are design systems?
16
-
-[Part 2 - Many ways to create a design system](../myhaz-design-system-2)
17
-
-[Part 3 - Does every project need a design system?](../myhaz-design-system-3)
16
+
-[Part 2 - Tools for creating sharing and managing design systems](../myhaz-design-system-2)
17
+
-[Part 3 - One of many ways to create a design system](../myhaz-design-system-3)
18
+
-[Part 4 - Does every project need a design system?](../myhaz-design-system-4)
18
19
19
20
## What are design systems?
20
21
21
-
Design systems are collections of reusable components. In web and software development those components are usually color schemes, fonts, buttons, icons, page layouts, etc. Below is an example of how a styleguide might look like.
22
+
Design systems are collections of reusable components. In web and software development those components are usually color schemes, fonts, buttons, icons, page layouts, etc. Below is an example of how a design system/stylguide might look like.
22
23
23
24
24
25
*Some elements from Duolingo design system. [Source](https://dribbble.com/shots/3836227-Duolingo-Design-System-DDS-Elements)*
25
26
26
-
[Many organizations and projects]((https://designsystemssurvey.seesparkbox.com/2019/)) are adopting this so called component driven development where they assemble their digital products from smaller components. Those component libraries range from very simple to very elaborate. Simpler ones could be called - styleguides, and the detailed ones - design systems.
27
+
[Many organizations and projects]((https://designsystemssurvey.seesparkbox.com/2019/)) are adopting this so called component driven development approach where they assemble their digital products from smaller components. Those component libraries they use range from simple to elaborate. Simpler ones could be called - styleguides, and the detailed ones - design systems.
27
28
28
29
**Styleguides** usually answer the question 'what' (what are the main components - the building blocks of an app or a website). **Design systems** go a bit further and provide more details on when and how to use the component and possibly the related research that explains why the component is designed this way. For the sake of simplicity I'll refer to these component libraries as design systems.
29
30
30
31
Design systems are used by organizations such as [Government Digital Services](https://design-system.service.gov.uk/), [TED](https://medium.com/made-by-ted/design-systems-c9de81da0b75), [Airbnb](https://airbnb.design/building-a-visual-language/), [BBC](https://www.bbc.co.uk/gel/guidelines/category/design-patterns), [Atlassian](https://www.atlassian.design/), [Yelp](https://www.yelp.co.uk/styleguide), etc.
31
32
32
33
Their aim is to:
33
34
34
-
-reduced duplicate effort (create same components only once)
35
-
- help app/websites look more consistent and professional (there shouldn't be five different types of success buttons)
36
-
- make things quicker to build (make all the low level decision at the beginning and then you can focus on the big picture)
37
-
- improve usability (the common elements are more recognizable)
35
+
-reduce duplicate effort (create same components only once)
36
+
- help app/websites look more consistent and professional (there shouldn't be five different success buttons)
37
+
- make things quicker to build (make all the low level decisions at the beginning so you can focus on the big picture)
38
+
- improve usability (common elements and patterns are more recognizable and new interactions easier to learn)
38
39
- improve performance by removing duplicate code
39
40
- allow designers and developers to cooperate more easily
title: "Many ways to create a design system (Part 2)"
2
+
title: "Tools for creating sharing and managing design systems (Part 2)"
3
3
author: Paulius Tvaranavicius
4
4
categories:
5
5
- UI-UX
@@ -13,67 +13,34 @@ tags:
13
13
This is **part 2** in a blog series about our approach to creating a shared design system for [myHAZ-VCT PLATFORM](https://oda.bgs.ac.uk/).
14
14
15
15
-[Part 1 - What are design systems?](../myhaz-design-system-1)
16
-
- Part 2 - Many ways to create a design system
17
-
-[Part 3 - Does every project need a design system?](../myhaz-design-system-3)
16
+
- Part 2 - Tools for creating sharing and managing design systems
17
+
-[Part 3 - One of many ways to create a design system](../myhaz-design-system-3)
18
+
-[Part 4 - Does every project need a design system?](../myhaz-design-system-4)
18
19
19
20
## How do you know if you need a design system?
20
21
21
-
[myHAZ-VCT PLATFORM](https://oda.bgs.ac.uk/) seemed like a good candidate to benefit from a design system. It's a service/platform made of three different but related applications. All of them share a purpose to disseminate hazard observations.
22
+
[myHAZ-VCT PLATFORM](https://oda.bgs.ac.uk/) seemed like a good candidate to benefit from a design system. It's a service/platform made of three different but related applications. All of them share a purpose of disseminating hazard observations.
22
23
23
24
Here are a few of the reasons why we decided to jump on the band wagon of design systems as well:
24
25
25
26
- consistent look - we wanted the three different applications to feel like part of the same product
26
27
- improved user experience - people switching between different platforms would learn the new interactions quicker
27
-
- efficiency - remove duplicate work (even though the three applications are different, they share many elements)
28
-
- customization - to be able to adapt the application in new contexts in the future (create new themes more easily
29
-
30
-
## Many ways to create a design system
31
-
32
-
Once we had a good understanding of user goals, the common tasks they perform and pain points that might arise in their journey, we created a rough prototype to visualize the various task flows for all three application.
33
-
34
-
After a few iterations and user testing we were pretty certain how the three platforms are going to work. So it was time to start building.
35
-
36
-
Some design systems are created in advance of product development, some - only after the product is released and a need to make it more consistent arises. In our case, it was built simultaneously with the three apps it was supposed to support.
37
-
38
-
## Design principles
39
-
40
-
Design system doesn't have to be considered only after the research stage. Broader design principles can be set early in the design process. This is one the principles we defined:
41
-
42
-
*"The purpose of myHaz is to help people collect, analyze and respond to natural hazards related information. That's why usability, performance and accessibility should be prioritized over experimental design. This way it can be used by as many people as possible with wide range of skills and in a wide range of contexts."*
43
-
44
-
## Moodboard
45
-
46
-
Moodboards help you define the look and feel of the product you're creating.
47
-
48
-
We wanted the tone to match the purpose of the app - to help people report hazards, to be notified of danger and to monitor the data being collected. Since the app would be used by people living in Saint Vincent and the Grenadines (island country in the eastern Caribbean Sea), we also wanted it to feel like it belongs there.
We created a moodboard using pictures, paintings, architecture and other assets from people in that region. This helped us get a better feel for the place where this platform would be used and the people who would use it.
54
-
55
-
We settled on a pallet was that was filled with warm and light tones. But we also added some bright red to resemble the danger that the app is supposed to help notice, report and analyze.
56
-
57
-
58
-
*myHaz styleguide in Figma*
59
-
60
-
## UI Inventory
61
-
62
-
First thing we did was create a UI inventory of the elements required for the three different applications. Most design systems have a lot in common - they need buttons, check-boxes, toggles, form elements, tables, etc.
63
-
64
-
One thing we learned is that it's better to keep the components modular - that way they can be used in more contexts than one. Instead of creating a specific card component with other components nested within it, it's better to break up larger components into multiple components. However, we haven't always stuck to this principle and some components were created just for a single use case.
65
-
66
-
67
-
*This component could be split up into smaller components - the card component with a left border, text with an icon and a badge. It would make it more modular and more usable in other contexts.*
68
-
69
-
This is what Brad Frost calls 'Atomic Design'. Start with the smallest bits - the atoms (typography, colors), combine them into bigger bits - the molecules (cards, list elements), then, collections of molecules can become - organisms (collections of cards, lists, etc.) and so on. Maybe it's not the most biologically accurate metaphor, but the principle is similar - order on the smaller scale, creates order on the larger scale.
70
-
71
-
72
-
*Atomic design principles by http://atomicdesign.bradfrost.com*
28
+
- efficiency - remove duplicate effort (even though the three applications are different, they share many elements)
29
+
- customization - to be able to adapt the application in new contexts in the future (create new themes more easily)
73
30
74
31
## Tools for creating and maintaining design systems
75
32
76
-
There are many tools to help you with design system creation. They range from design centric to code centric and everything in between. Some examples of these tools: [Storybook](https://storybook.js.org/), [InVision Design System Manager](https://www.invisionapp.com/design-system-manager), [Pattern Lab](https://patternlab.io/), [UXPin](https://www.uxpin.com/), [Fractal](https://fractal.build/), [KSS](https://warpspire.com/kss/), [Sketch](https://www.sketch.com/), [Figma](https://www.figma.com/), etc.
33
+
There are many tools to help you with design system creation. They range from design centric to code centric and everything in between.
34
+
35
+
Here are some examples of these tools:
36
+
-[Storybook](https://storybook.js.org/)
37
+
-[InVision Design System Manager](https://www.invisionapp.com/design-system-manager)
38
+
-[Pattern Lab](https://patternlab.io/)
39
+
-[UXPin](https://www.uxpin.com/)
40
+
-[Fractal](https://fractal.build/)
41
+
-[KSS](https://warpspire.com/kss/)
42
+
-[Sketch](https://www.sketch.com/)
43
+
-[Figma](https://www.figma.com/), etc.
77
44
78
45
Our main requirements for the design system tool was for it be easily accessible by all developers, quick to update and easy to document. So we settled on the [KSS node](https://github.com/kss-node/kss-node). It's a node.js implementation of [KSS](https://warpspire.com/kss/): a methodology for documenting and sharing stylesheets.
79
46
@@ -85,39 +52,6 @@ Basically, it's a static site generator that converts scss files and correspondi
85
52
86
53
*Comments and related scss code are compiled into a static website*
87
54
88
-
There is a useful guide on [csstricks.com](https://css-tricks.com/build-style-guide-straight-sass/) on how to set it up.
89
-
90
-
## Design system integration into multiple projects
91
-
92
-
The main purpose of this styleguide was to provide a single stylesheet and the building blocks for three different applications. If people switched from using the app, to using the web portal - it should feel like it's part of the same experience.
93
-
94
-
95
-
*Design systems are more useful when they support multiple products*
96
-
97
-
Two of the apps shared a similar tech stack: portal and manager were built using Angular - so it was slightly easier to integrate it. But the mobile app was built using a slightly different technology - Ionic (it relies on Angular as well, but has its own quirks). Ionic has its own design library and its own way to create new themes for its apps, so incorporating the styleguide from KSS wasn't as straightforward.
98
-
99
-
But in general, all three applications work with SCSS files. So, we set up an automated process on GitLab to fetch the relevant files from the design system repository and load them into the appropriate locations on other projects. This process wasn't 100% automated (mobile stylesheets were slimmed down manually to remove unnecessary styles for mobile platform), but it made thing slightly simpler.
100
-
101
-
## Workflow
102
-
103
-
Once we had the workflow setup the creation of new components looked something like this:
104
-
105
-
106
-
*The process for creating new components*
107
-
108
-
**Step 1:** Sketch out the elements or use the existing ones from the prototype in Balsamiq.
109
-
110
-
**Step 2:** Recreate them in higher fidelity in Figma.
111
-
112
-
**Step 3:** Prototype them in [codepen](https://codepen.io/) (it's a good place to experiment with small bits of code when you want to see the changes instantly)
113
-
114
-
**Step 4:** Refactor the scss code to be more readable (we used BEM model for writing scss code - it makes it easier to see how different parts of a component are related to each other).
115
-
116
-
117
-
*An example of scss code structured using BEM methodology*
118
-
119
-
**Step 5:** Write the comments for the component which would be used to generate the related documentation on the static website
120
-
121
-
**Step 6:** Project would listen to file changes and recompile. It was stored on gitlab, and we used gitlab pages to make it accessible to everyone without the need to run it locally. Other projects would fetch the necessary stylesheets from there as well.
55
+
You can find a useful guide on [csstricks.com](https://css-tricks.com/build-style-guide-straight-sass/) on how to set it up.
122
56
123
-
**[Part 3 - Does every project need a design system?](../myhaz-design-system-3)**
57
+
**[Part 3 - One of many ways to create a design system](../myhaz-design-system-3)**
0 commit comments