Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Degisn system: Do you have consistency on your visual inventory?

In out first part, we mentioned why a design system is important for your business. Here it should be highlighted that if we speak about a new product this is a step that is skipped. If you have a product, then let’s see the steps.

Visual Audit

A good start and practice are to have a look at the CSS that was used to create your visual inventory. Tools like CSS stats can be used to check your rules, declarations and properties of your style sheets. Even more, you will be able to check colours and font sizes and a bar chart of spacing. A great way to see how to merge or remove values.

Visual Design Language

For most of the designers, a design system should be their favourite part to work on as they have the chance to contribute by thinking, colours, typography and layout which are the core elements. If we break apart each component of a design system, we find that these fundamental elements make up its visual design language:

  • Colours
  • Typography (size, typefaces, and so on)
  • Spacing (margins, paddings, positioning coordinates, border-spacing)
  • Images (icons, illustrations)

Depending on your needs, you may also include the following to further standardise the user experience:

  • Visual form (depth, elevation, shadows, rounded corners, texture)
  • Motion
  • Sound

Consider the role of each element during the process. A button typically has a background colour, typography for the label, and spacing inside it. There may be an icon next to the label to create a visual cue. A border on the edge serves as simple ornamentation and may even round the corners. Finally, hovering over or clicking the button could trigger animation or sound as feedback to the user. Though a button may seem simple, there are many design decisions required to bring it to life. Here is a recent example that we have done for one of our clients

Image

Colours

The colours you choose for your design system are more than just an extension of your brand. A UI uses colour to convey:

  • Feedback: Error and success states
  • Information: Charts, graphs, and wayfinding elements
  • Hierarchy: Showing structured order through colour and typography

Common colours in a design system include 1–3 primaries that represent your brand. If none of these works well as a link and button colour, then you may have an extra colour for that as well. It’s a good idea to use the same colour for links and button backgrounds as it makes it easier for users to recognize interactive elements.

You’ll likely have neutrals for general UI backgrounds and borders—usually greys. And finally, you’ll have colours for states such as error, warning, and success. Group these colours to see how well they work together and refine as needed. Using colour for wayfinding can be tricky to do while maintaining accessibility, as people who are colour blind may not be able to discern some differences.

Depending on how strict you want to be with your palette, you may want to include a range of tints—a colour mixed with white—and shades—a colour mixed with black. Sometimes you may use other colours instead of white or black to avoid muddiness, such as an orange to darken a yellow so it doesn’t appear brown.

Colours for primrose design system

These colour variations allow designers to have choices. But be warned, having too many choices can lead to major design inconsistencies. Keep your inclusion of tints, shades, and neutral palettes slim to prevent misuse of the system while still giving designers the flexibility they need. You can always add more colours as you find the need.

Typography and logos

The fonts and weights play a vital role in your brand and your user experience. Using common systems fonts like Helvetica can be a great shortcut but many companies prefer customisation to reflect brand values.

Logos for Primrose Project
Typography example for Primrose Project

In a design system, the focus is on the headings and the body copy except if there are multiple brands. The less complicated it is, the fewer issues you will have. One current trend is to use lightweight fonts and text. Regarding the scale, in most cases, 16px works well, which is the default font size and SQLI recommends it as a baseline. However, as you can see above in the example is up to the client requirements. You should not forget that types need to be responsive to mobile and all devices.

Line spacing (leading) is at least a space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) 2.0

W3C

The next and last article, including some bonus elements from visual inventory, in this three-part series, will arrive next week! Stay Tuned!