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.
I have been working on UI projects for almost 5 years and I have been slowly transitioning to design systems. Back in 2017, I had the opportunity to work on a design systems for a gaming B2B dashboard that supports business growth and can process up to 600 transactions per second (that’s billions every month). The way the systems was built, was more like a style guide rather than a collection of rules, constrains and principles. In 2018, I worked on 'Design X' which follows an atomic structure for a gaming and payments platform, built in Sketch and React. Both systems I worked on are powerful, however, I always wanted to build a system that is different, and comes with features that will aid in accessibility and in building of UI.
To quote Audrey Hacq, a design system is:The generally-accepted definition of a design system is that it’s the outer circle—it encompasses pattern libraries, style guides, and any other artefacts. But there’s something more. Just because you have a collection of design patterns doesn’t mean you have a design system. A system is a framework. It’s a rulebook. It’s what tells you how those patterns work together.
This is a personal project where I took all my time to experiment and explore new methods I never imagined where possible with Sketch. I wanted to create a design system which is solely based on quarks.
Atommm is solely based on the building blocks of a user interface like colours, typography, icons and buttons. The idea behind my approach was to think globally and not specifically design a system for any particular project. Building a UI from scratch is a time-consuming process and can be very challenging to keep the designs consistent. It is also difficult for developers to distinguish which elements are most commonly used in the product. With the help of common components such as colours, values, shapes, states and other elements, it helps in creating a unified design system and speeds up the design process.
Most design systems already offer these features, so I wanted to take a different approach and introduce different features that allow designers to control and customise their UI easily.
Let’s break down the project overview into various parts:
1. Colour Scale Generates Automatically
2. Alpha Values & States
4. Features for Designers
5. Shape Builder
1. Colour Scale Generates Automatically
The system enables users to create their own colour palettes. To do this, users have to edit the colour palette or choose one from the provided palettes. This feature creates a colour scale automatically based on the base colour chosen by the user. In the Colour Libraries one will find 9 different colour palettes; Black, White, Grey, Primary, Secondary, Alert, Error, Success and Info. The colour palettes are grouped into three different sections; Default, Brand and System Colours. Below is an image representation of how the colours are structured.
Once the base colour is chosen, the colour scale generates automatically.
2. Alpha Values & States
Alpha values allow users to change the opacity of the shape, text or icon. This also makes it easier for the user to add states or highlighted text in the UI. 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.
Having alpha values makes life easier for those that want to apply different states to the UI. States include; Idle, Hover, Selected, Pressed, Disabled and Custom. ‘Custom' allow users to add any scale or opacity the designer fancies. This feature can be used on typography, icons and buttons.
3. Accessibility - Design for All
It is easy to forget that we are designing user interfaces for all users. As a designer who finds accessibility a really interesting topic, I believe that products must be accessible for everyone. It is estimated that 4.5% of the global population experience colour blindness (that’s 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind. I always aim to design user interfaces that improve and enhance the lives of everyone who uses the product. After all, when making a product or a UI accessible, everyone wins! 😄
Before I started creating and implementing accessibility features on Sketch, I came up with a list of different disabilities. Since UI can’t handle all kinds of disabilities such as mobility or hearing, I decided to focus on loss of vision and colour blindness.
There are many tools available out there that help to identify if colour contrast of text on background is good enough, such as Accesscolor, a MacOS plugin concept I worked on. However, accessibility design is so much more than colour contrast and these tools sometimes do not cover all designer’s needs so I made sure that I provide features that help designers build user interfaces for all users. The following are features I included in atommm.
Patterns - Don’t use colour alone to convey meaning
There are many type of colour-blindness, with the most common three being protanomaly, deuteranomaly and tritanomaly. Since colour sometimes hinders the user experience of a colour-blind user, it is important to help them with additional markers or patterns. This allows to achieve a better user experience.
Colour filters allow the UI to make it more easier on the eyes, as well as for the colour blind. The systems offers 3 different of colour tints; blue, red and yellow. The yellow filter mainly focuses on warming the colours to avoid the blue eye straining shades.
Sometimes, visually impaired individuals find it difficult to distinguish between red, green and blue (RGB). When colour blind users can change the red, green and blue colours to greyscale, it is much easier for them to distinguish the colours. Designers can also find this feature helpful to design a user interface in greyscale and enable colour afterwords. This approach helps to focus on layout and user experience before focusing on intricate details.
High contrast is an accessibility feature that that provides added control on the contrast and intensity of the colours. This feature also aids in making thin fonts easier to read. This feature was mainly inspired from iOS 7.1 where "it does tone down the fluorescent blue text on buttons and UI elements throughout the iOS interface. It also darkens much of the super light grey text into a darker shade of grey. The overall effect is increased contrast on text in critical places, helping visibility and legibility."
Increase Contrast (Darken Colours)
Darken Colours also help individuals with low vision and other visual disabilities. Designers are not just limited to enabling and disabling this feature but can tweak the intensity percentage. This feature adds an outline around all the components and shapes in the UI without discarding any colours. If designers want to increase the overall UI contrast, this can be achieved by enabling both Darken Colours and High Contrast at the same time.
Since some individuals might be very sensitive to light, inverting colours will aid in readability, eg yellow text against a black background will be inverted to a blue/purple text against a white background. However, when it comes to typography, design should be re-evaluated. The reason behind this is because when colours are reversed, eg white text to black, the leading and tracking should be increased and the font-weight should be decreased.
4. Features for designers
Wireframing and working in outline mode, is an effective way to identify usability issues in the UI. User experience designers spend a large percentage of their time designing and using wireframes to identify the flow and map out the functionality of the pages. Wireframes also helps to identify problems early and save time on revisions later.
This feature allow designers to easily switch the UI to a wireframe like a skeleton. This helps to better space the elements and prioritise contents. When using Wireframe or Outline, the UI voids colour and graphics. However, designers can still choose to set colours and typography before planning the wireframe, so that by just toggling a layer, colours will instantly be applied to the UI.
All effects could be combined together. In the below example the user is uding a pattern and an invert colour effect.
5. Shape Builder
Atommm comes with 12 different shapes. All the shapes can have different colours, scales and opacity set from the overrides. Shapes also support borders. The same values that can be set to a shape or colour (scale and alpha), can also be applied to a border. If a user decides to use a different shape once all the values and colours are set, this can be easily done by choosing a different shape from the symbols dropdown. Sketch remembers the settings applied so no overrides are lost.
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.