What is a Design System
A design system is a unified language which maintains visual consistency across different pages/platforms. It contains a set of reusable components and patterns which combine to provide a framework used by designers and developers to design, develop & deliver a cohesive website/APP.
The easiest analogy to explain this concept is Lego.
Lego is a design system - it comprises of a series of pieces (components) which are different in shape, size and colour. Combined they represent the ‘library’ of components you can utilise to create your Lego masterpiece. As individual elements they are quite simple, but used in unison your imagination is the only limitation for what you can create with them.
Why use a Design System
A design system offers many advantages.
- Provides the ability to build out web pages using a common library, delivering layouts that maintain consistency across an entire website.
- Uses reusable ‘components’, that are well thought out and maintain consistency. As a toolkit they allow for faster development process, introduce efficiencies in creating new content.
- Factors in complex needs such as ensuring accessibility requirements for people who are vision impaired or experience cognitive issues.
- It moves the focus away from ‘visual design’ to more complex problems such as user journeys and content display.
In summary, a design system promotes visual consistency, which provides a deeper context for users visiting the organisation; whether on a website or via an APP. This universal language allows the User to focus on their target outcome, learning the intuitive qualities of the website so that they can purchase, find out, or communicate quickly and easily.
What are common Designs Systems
Without knowing it you would have already visited a website or used an APP that uses a design system. Below is a list of very common design systems created by household brands.
- Google Material Design System
- Apple Human Interface Guidelines
- Uber Design System
- Mailchimp Design System
Design Systems for Australian Government
Like the above there are design systems developed by the Australian Government and associated agencies. Below we have highlighted the common ones in use currently.
Australian Government Design System (GOLD)
The Australian Government Design System (AuDS) was developed by the Digital Transformation Agency (DTA) as a design system for use by Australian government agencies. It was developed to bring consistency to websites, even though they may be separate and developed by different teams. If you work with a website on the GovCMS platform, it is very likely that the website has been built based on this design system.
The AuDS was discontinued in September 2021. The project has since been forked by the community and is now being actively developed under the project name GOLD. GOLD is a community led project no longer supported by the DTA.
The aim of this design system is to provide components that are highly usable, meet accessibility standards and help deliver a consistent user experience for all users. It has been designed to meet the Digital Service Standard (https://www.dta.gov.au/help-and-advice/about-digital-service-standard).
Health Design System
The Health Design System has been created to provide a unified experience for all users of the Australian Government Department of Health products. It uses the AuDS system as a foundation and has further developed it to meet some specific requirements that are unique to the Department of Health.
NSW Design System
The NSW Design System has been designed for people in the NSW Government to design products and services that are focused on NSW. The design system clearly defines the NSW Government look and feel - including the core ingredients such as brand & logo, colour, typography and components.
It also goes further and provides deeper elements such as tone of voice, design tokens, iconography and helper classes.
Unpacking the parts that make up a Design System
A design system is created to fulfil a need or key purpose.
If we take a very top-level view of a design system we would find these common elements that are included in all design systems.
Brand
The purpose that sets the tone and application for the design system.
This provide us with the context we need to understand the rationale for the design system and the choices that have been made in creating the components that make up the design system.
It also informs us on when we should use this Design System - as highlighted above; we know if we are building a website on the GovCMS platform for an Australian Government agency it is most likely the case that we should use the AGDS (GOLD) design system.
Pattern Library
These are the shapes and functions of the design system.
Like a Lego piece, each ‘component’ has been well thought out and executed to provide a reusable and useful element on the website.
Colour, shape & typography
These components can then have personalisable elements added to them that help to further define your brand, you may use all of these elements or only some.
For example the NSW DDS provides for a Basic Card which has 3 palette options (White, Brand Light and Brand Dark)
This can be extended within the design system to include extra fields and different shapes:
As you can see above, an image has been included and a short summary.
To view all available options for this component, visit the NSW DDS information at https://digitalnsw.github.io/nsw-design-system/components/card/index.html
* Please note: Some design systems such as the AGDS, HDDS & NSW DS limit your capacity to alter elements such as colour, shape and typography. In particular with the NSW DS the components should not vary from what is provided.
Iconography
Iconography plays an important role in the development of a web application. It is important to understand from the beginning why, when and how to use these elements on your website.
Questions you should ask yourself when introducing iconography to your website should include:
What is the icon's purpose?
Is the icon providing the site visitor with useful information? E.g. is it relating to a required action, a deeper understanding of the context of a piece of information, providing a journey through to a section, or is it a highlight/alert to define some content?
Some examples of how icons are used on a web application are:
An icon that provides a specific reference to a section of the website, this is useful when there are many options for a site visitor on a single page - in this case the icon here accompanies a heading relating to ‘Career pathways’.
An icon that lets the site visitor know that on clicking a link they will go to an external website.
A particular user function, letting the site visitor know they can complete an action such as ‘print’ or ‘email’ the page.
Highlight/Alert which provides guidance to the site visitor that this information is important and requires attention.
It is important to note that some frameworks and designs systems utilise an internal library for iconography such as Font Awesome.
Structure, grids & responsiveness
Designs for your website will be based on some key constants that run common throughout every page of your website.
Grid system
Many modern Designs Systems for web applications use a grid that sits in the background. This provides a structure to lay out the components of your web page and provide vertical and horizontal alignment. Using a system like this provides a solid framework for responsive design (mobile/tablet/desktop).
There are 12 columns in a grid system (see light blue columns below) Between each column there is a ‘gutter’ (refer to the grey areas between each column in the figure below) this is the gap between each column.
On each side of the grid there is a margin area (refer to the dark blue region highlighted in the figure below). The margin can be the same width as the gutters or greater in size.
Breakpoints
Breakpoints are the point at which the size of a device changes. When we design for a website we need to consider several breakpoints all of which can support a multiple of the 12 columns. Breakpoints are flexible and different design systems will vary with the quantity of breakpoints or where the breakpoints in a design will occur.
The combination of the grid, a designated 'breakpoint' and the device (view port) provides the context for the designer to create a design that is ‘responsive’.
When designing a component for a page, the designer will take into account and scale the component to ensure it is legible for each device (view port). Let’s use a simple component from the AGDS - the Basic Card to demonstrate how this works
different breakpoints. As a device gets smaller the component stacks
The design process
During the initial stage of the web design process (usually called the Discovery phase) a web designer will ask for your Brand and Style Guide. This document will be used to help frame the components and how they will appear on your website.
For example a designer will utilise your Brand and Style Guide and apply it to the design system:
- Typography
- Colours
- Iconography
This of course will depend on the design system and its level of flexibility. For example the NSW DDS is prescriptive and as such, unless you require adaptions outside of the NSW DDS the role of the designer will be to layout the components on a page.
Here is an example with the hero component:
NSW DDS hero component
https://digitalnsw.github.io/nsw-design-system/components/hero-banner/i…
A simple application of the NSW DDS hero component
Conclusion
Using design system has many advantages. These include:
- building a strong brand identity for your audience
- the ability to roll out designs quickly and efficiently utilising pre-identified components.
- ensuring that the tone and style of the message is unified across the site or multiple sites/apps
- embedding consistency & quality to the site, you may have many content editors but they will deliver the core message with a clear and concise voice
- saving time and as a result of this funds This either provides a cost efficiency for your next project or provides additional resources to put towards new features and functionality.
On the flip side there are tradeoffs from using a design system, these could include:
- finding the design system components as prescriptive and limiting, often an experience UX designer is required to assist with translating the content model to fit with the available components.
- designers often struggle to understand how design systems work and how they should it apply it when creating layouts of web pages, working within the confines of the design system can be frustrating and feel like a limitation of creative freedom.
- a Design System project requires investment and support to ensure its longevity and ability to iterate as new requirements/user needs come to light.
