Preliminary notes: It turns out that this case study is quite lengthy so I decided to split it into two different parts. In the first part, I talk about the features of the design systems and how Atommm helps designers design user interfaces for everyone. In the second part, I discuss the process and challenges I came across while designing Atommm.
Unfortunately, many design systems are not easy to use and are designed with chunk of symbols and text styles. My interest in design systems started about a year ago when I started working with a gaming company. The first project assigned to the team was to build a design system for all the current and future products the company was going to offer. I kept on doing research and even bought online systems, which are not cheap by all means, and still noticed that the sketch file is not organised properly, has a good amount of symbols, and has no single source of truth that powers the whole UI.
So the question is: How do you design a design systems that is very easy to use, making use of very few symbols, while giving the option to make the whole UI accessible and allow users to easily switch style with one click of a button?
Design Systems I bought showing that the quarks are too complicated for the user to edit. Also, the components are not always powered by a single source of truth.
When I started experimenting with the first draft of the design system, one of my first tasks was to start with the colour system. The idea behind this was so that colours will power all the quarks in the system including shapes, icons, and typography. I knew from the beginning that I wanted to have different scales and alpha values to all colour styles, so that it would be easy for the user to add states or highlighted text in the UI.
Example showing transparent components and highlighted text.
Besides that, a true black (#000000) colour is not suggested to be used on a white (#FFFFFF) background (or vice versa), so I wanted to add an option in the overrides where designers can change the opacity value of the type. It is evident that high contrast such as Black (#000000) on White (#FFFFFF) can cause eye strain, and since I wanted to build a design system for accessible UI, it was a must to add this feature.
In theory, there are 255 possible shades of grey available in the colour spectrum, however, adjusting the opacity of black on a white background, 255 shades reduces to 100 as opacity is typically represented as a whole percentage point from 0% to 100%. For this project, I decided to reduce the opacity values from 100 to 10.
So I started off by experimenting with alpha values and colour scales.
Even though this solved the issue with high contrast text, and offers designers to make use of alpha values, the problem with this technique is that the sketch file ended up with 10 different scale values and 10 different opacity values for each colour, in total that’s 100 different colour styles. I wanted to avoid having a lot of symbols and colour styles so I went back to the drawing board.
Back to the Drawing Board
Typesheet & Colors
I sat down and kept on sketching and planning the sketch file. All the design systems I researched and used are all making use of different text styles for different colours. The problem with this is that the file will end up with bunch of text styles especially considering that left, centre and right alignments are included as well.
After some time thinking and doing research, I concluded that colours will be used as symbols. Since I wanted to have a basic type sheet with only 10-30 text styles (including all text alignments), this approach makes more sense as a symbol can be masked with a text style.
Video showing how I masked a symbol with a text style.
I created symbols for the colour scales and alpha values. I also created some basic shape symbols to test this out. The colour symbol was imported in the alpha symbol, the alpha symbol was imported in the scale symbol, and the scale symbol was imported in the shape symbol.
Flow showing colour symbol imported in the alpha symbol, the alpha symbol imported in the scale symbol, and the scale symbol imported in the shape symbol
Since the colour layer is imported in the alpha symbol and then in the scale symbol, this helps the user to only change the colour once, and the colour scales are generated automatically.
Video showing how colours and scales are applied to the shape component.
I also wanted to introduce accessibility features in the design systems so I started off with a basic black (#000000) fill shape and set the blend mode to ‘Colour’ to achieve a greyscale look. I named the layer 'Greyscale', and placed it in the alpha symbol. I also tested out an invert effect by adding a white colour (#FFFFFF) and set the blend mode to ‘Exclusion’. You can read more on atommm features in Part 1 and how I achieved the colour effects later in this case study.
I encountered two problems with this approach. The first problem was that I was loosing the alpha value settings when I change the shape, and the second problem was that the colour effects where working properly accept for the invert colour. This issue with the invert colour was that the layer was placed in the Alpha Symbol so the colour scale ended up on top of the colour invert layer.
Shape layer loosing the alpha value settings when changing the shape.
Invert Colours not working properly.
Improving Version 2
So I referred back to the sketchbook and kept on sketching to figure out why sketch is resetting the overrides when I change the shape from the symbols dropdown. Before I tackled the overrides issue, I changed the nesting of symbols completely to eliminate putting the colour effect layers in the Scale Symbol, so I introduced a new symbol dedicated just for colour effects. The Colour Effects Symbol was imported in the Alpha Symbol with the Colour Scale and Colour Symbol.
Introduced a new symbol dedicated just for colour effects.
By doing so the colour effects problem was solved. To test out the invert colour effect properly, I took a screenshot of the colour palette, pasted it in photoshop and inverted the colours. I then compared the screenshot with the sketch result. the invert colour was working properly. However, when changing the shape from the symbols dropdown, the colour and scale settings where still resetting to the default colour.
Other Colour Effects
To better understand how other colour effects and accessibility features will work with the colour effects symbol, I introduced more colour effects layers. These include, increase contrast, high contrast, wireframe, tints and outline.
All colour effects worked except for the Outline and Increase Contrast. Both effects worked on rectangle shapes but I encountered an issue with other shapes such as ovals and triangles. This was because the layers were imported as squares and ended up with masked shapes.
All colour effects working except for the 'Outline' and 'Increase Contrast'.
The problem was solved by completely removing the shape layer and apply a layer style. The layer style remained in the colour effects symbol acting as a control point by adjusting the opacity and updating the layer style. The same layer was also placed in the shape symbols with the same shape style. This feature allows designers to easily change their designs to a wireframe or outline format to focus more on the layout and grid.
Colour Effects for Typography and Icons
I noticed that by having all the colour effects in one symbol and linked with the alpha symbol, the outline and increase contrast stylings where also being applied to the typography and icons. I wanted to have the outline and increase contrast stylings to apply only on shape layers.
This was solved by adding another colour effects symbol for typography and icons. The structure changed completely as I had to add another 10 symbols for the alpha values for typography and icons.
The Increase contrast, Outline and Pattern layer styles where imported in the shape symbol and turned off from the ‘manage overrides’ panel so that the user will not see the layers in the right panel.
I also designed different patterns to be used on shapes. The patterns where imported in the colour symbol so that the designer can toggle the pattern directly from the colour symbol. For the patterns to work properly I had to design the patterns in a symmetrical way. To get my feet wet, I started off with a rough illustration of how the patterns would look like.
Square format was important to make sure that the patterns are repeated infinitely. I also wanted the patterns to be scaled to any size too. This way, it makes it extremely versatile for the designers using the system. After masking the design in a square that starts and ends at the same point within the pattern, I exported the patterns to png, and imported the png file as a fill in the shape.
The issue with this was that one could not apply a pattern to a particular shape. The way this was set it was effecting the UI globally as the pattern was applied on the colour and not on the shape itself.
I took another approach by creating the shape as a layer style, and importing it on the shape so that the user will have an option to toggle on or off the pattern for each shape. I also added an image option so that the user can choose to add a pattern or an image in the shape.
So far so good, but the resetting of the overrides was still bugging me
Before I introduced any new features, I kept on experimenting with the file structure to solve the resetting of the colour overrides. I noticed that the settings in the overrides were resetting because I had multiple nesting of symbols. Since I set the patterns to layer styles instead of actual symbols, I thought off using the same approach for the scales and colour to avoid nesting of symbols. I created layer styles for the scale and colour and imported them in the alpha symbol. The alpha symbol was imported in the shape symbol, along with other colour effects such as increase contrast, outline and pattern. This solved the resetting of the overrides as this approach avoids nesting of symbols. Lesson learned! Don’t use more than two levels of nested symbols.
I had already set up some shapes to test colour effects and scales. However, the setup was very basic so I started building the shape system by introducing more shapes. In total I added 12 shapes.
The shape consisted of the Alpha Value and the Colour Effects masked with the shape of the symbol. This way the system only gives the option to add a fill, change the scale and set the opacity. I wanted to have a shape builder tool, where the users can also add borders, and change the colour, scale and alpha value of the border. Besides that, I also wanted to give the option to change the width of the border.
Currently, sketch does not support colour styles on a stroke so I had to find a workaround. I found a solution by masking both the border fill and the border width together by using ‘Mask with selected shape’. Once that step was complete, I had to change the border layer mask mode to ‘Alpha mask’. The final step was to replace the border fill layer with the Alpha symbol.
Steps showing how to add a colour style to a border in Sketch.
I added the changes to the shape symbol so that users can built the shape however they want. The advantage to this is that users can change and build the shape to their own liking, without loosing or sketch resetting the overrides.
The only drawback with this is that when the shape is rounded, the border is not vector. However, this is something that at the moment is not possible to solve with the limitation of sketch. The next step was to test the shapes out and everything seemed to work fine.
Shapes for Buttons
Since buttons make use of scales, I was limited with the shapes I created. I designed a completely different shape system for buttons. The reason for this was that I wanted to have limitations to the customisability of the UI so that the states will be consistent for all the buttons. To achieve this, I had to set the states for each shape. Each shape symbol consisted of the same layers as the default shapes; Increase Contrast, Outline, Border, Fill and Mask.
Once that was complete, I had to create the control points for the user. Control points included, fill and border colour, border size, button shapes and typography. I noticed that the system was limited to flat buttons, so I added shadows to the button shape. The shadows symbol works the same way as the outline and high contrast colour effect, users change the opacity value and update the layer styles.
All the control points where combined to create the button symbol. Six symbols where created, one for each state; Idle, Hover, Focus, Disabled, Selected and Pressed. To make sure that the buttons are consistent when it comes to spacing, I created a symbol as a guideline that can be toggled on or off, for the user to use when adjusting the width of the button.
Once I had all the setup ready, all I had left to do is add some more symbols to make the quarks library complete. I added the secondary buttons, icons, and the type sheet. With regards to the type sheet and the icons, I used Google Material’s standard. Users can easily change the typesheet by changing the font values and update the text styles.
The system offers a variety of features, mainly focusing on accessibility. The goal was to achieve a design system that has a one single source of truth for all the components with very few symbols.
Let’s grab a coffee ☕ I’m currently residing in Malta and I would love to connect if you are around the area.
Also, I don’t like coffee. I prefer tea. In my free time I also like to shoot the old school way 35mm film.