Design Systems are a comprehensive catalogue of UI elements used on a website or in an application. Design Systems also often contain general information on styles to follow which will make it a complete guide to creating, maintaining and updating the web product.
Why use a Design System?
Design Systems can help ensure the consistency of elements on a website, application or suite of web products when used properly. Design Systems can also help avoid duplicate elements. When used as a source of all design information for the whole team they prevent unnecessary confusion by ensuring everyone will have access to the most recent version of an element, module or component. Using a Design System can save time and money spent on a project as well as ensure consistency and a clean structure of elements.
Atomic Design Systems
When it comes to a clean structure, using the atomic approach to create a Design System can be quite a meticulous process, but it will save lots of frustration and time in the long run. In Atomic Design Systems, elements of the web product are built from the ground up: from the simplest to the most complex structures. For example:
Atoms are the elements that are the smallest and cannot be broken down. Colours, fonts, form labels, and so on are all atomic elements.
Molecules. A collection of atoms creates a molecule. For example: font + search icon = search box; font + colour shape = button.
Organisms. A collection of molecules can create more complex structures such as a top navigation bar or a contact form.
Templates. Using organisms, a number of page variations with different layouts can be created.
Pages. Finally, pages with content are created using available templates.
Using this approach helps ensure an effective, consistent and user friendly product at the end. One can easily create the necessary combinations of design elements to solve a specific task without compromising consistency and simplicity. Such structures are predictable and recognisable by users and aid in delivering a positive experience.
How it works
Regardless of the platform used to create a Design System there are several requirements to make it functional. The platform should:
- allow the creation of a structured catalogue of elements
- be accessible to participating team members
- allow easy updates to the elements
There are also additional conveniences that some of the platforms offer: allowing the copying of the code of an element, update notifications, syncing with design files, and many others.
Once the initial version of the Design System has been created it is important to collaborate with developers and discuss possible implications for development as well as further simplify the structure if necessary. This collaboration should start long before the Templates phase to avoid going through the whole structure several times.
Developers can use the Design System to create all the elements of the product from the simplest ones (atoms) to the pages themselves.
It is a good practice to keep the Design System up to date and communicate and discuss any edits to keep your current product consistent, or to create other products based on the same Design System.
