Building Design Systems
What are Design Systems?
A guide that shows how an organisation designs and builds product through a collection of reusable assets/components with clear standards on how to implement them. For a more detailed explanation, please click here.
Design systems are important as within an organisation, everyone involved in designing and developing a digital product knows what components do and how they interact with each other. It allows quick integration of new starters within an organisation so they can be pointed in the direction of the design system with a full guide and assets that they can reference. Therefore, new starters are able to produce a cohesive digital product from the get-go.
Design systems consist of the following:
User Interface
Components such as icons and design resources
Guidelines
Instructions on how to use and develop a digital product using a certain component as well as UX, best practice, conventions, design principles, writing, voice and tone, development, brand guidelines and many more. All these guidelines are essential in a design system to ensure cohesive and consistent digital products.
Benefits of Design systems
Cohesive digital products – Customers will not need to relearn how to use certain products from the same organisation if the components work/function the same in another product created by the same organisation.
Launch work faster – If there are components that can be reused due to the design system, then it decreases the amount of time to redesign a component and increases time to focus on essential parts of the project.
Launch higher quality of work – Teams do not have to reinvent the wheel by redesigning the whole component but instead, designers can focus on usability, flexibility responsiveness and animation improving the quality of work.
Provide shared vocabulary – Having a design system within an organisation allows the teams to have a greater understanding/unified use of vocabulary which will decrease the time for teams to understand what is being discussed. This avoids situations where another team is using a different term/word for a component that is associated differently within your own team.
Make testing easier – Design systems allows components to be isolated and be more stress tested against responsiveness design best practices, accessibility and performance.
Single reference – Having a design system allows designers, content creators and developers to understand when to implement a certain component over another as well as naming conventions used when using that component. Having a shared resource allows better cohesive understanding of the use of components at all stages of development.
Provides a future-friendly foundation – The design system provides a solid foundation and enables alteration and improvement of components over time by establishing conventions and best practice. By building on those over time, the team and the work quality will improve as time goes on.
Who are using design systems?
Many organisations have started to implement a design system such as Google (Material Design) and the US Government to power over 30,000 websites. The UK government also has guidelines of best practice for local councils to ensure their websites meet accessibility and usability.
How do I start?
A great start is to go to cssstats.com. By entering your digital product URL, the site will spit out all the CSS showing you different background colours, font sizes, font colours and font families. From here, you can start asking questions on whether certain aspects need reviewing such as font families, font sizes, colours and many other factors. Another exercise that is suggested is to do an interface inventory by going across all digital products and screenshotting all the aspects of the UI interface such as button, text, header, galleries and accordions. Both internal and external products should be screenshotted and reviewed. Once the audit is completed, you can present the various findings for buttons, fonts, header and icons. By presenting the findings, you will see the difference of components across all products across the organisation. After the initial audit, you can hold workshops to discuss what people want from the design systems, what they need to achieve across all departments and what needs to be looked at.
Once everything is agreed then the next step is to choose a pilot project that the team can invest in to start creating the components. The best pilot projects are ones that aren’t a complete redesign but a design of a certain aspect such as a page or homepage to best kick off the project, from there you will build up the component inventory.
Atomic Design Methodology
Design Systems use the Atomic Design Methodology that break down a page into its raw elements. These can be categorised as:
Atoms - The basic building block such as HTML that forms assets such as buttons or a text input field.
Molecules - Are the combination of atoms that form a molecule. For example, a text input field and button creates a form.
Organisms - A group of molecules that forms a section of a layout. For example, navigation consists of a search form and buttons that form the top navigation on a website.
Templates - Consists of a number of organisms that are stitched together to form a page.
Pages - Use of templates and with the populated content shows what the user will eventually see.
When designing your digital product you have to define certain aspects and different scenarios that you may encounter and needs looking at, for example, what happens when certain amounts of characters are entered or what happens if an event is more than 12 months away but the ticker on shows months.
Atomic Design Benefits
Bridges the gap between the product and system design development teams - Allows the designer and developers to design components that are flexible and adjusts accordingly to its use as different scenarios to be thought through systematically.
Build part and whole systems/products as the same time – Using Atomic Design allows you to see the product at an atomic level before you start building up and then you can review the product as a whole and identify certain areas of improvement and how each component interacts with each other.
Separate structure and content – Allows you to see the structure of how a product is structured and how the content feeds into the component allowing designers and developers to design a more robust component by defining different scenarios in which information/content is fed through to that component at all levels.
Hierarchy – Using the Atomic Design system define standard vocabulary that makes up a product and therefore teams are able to categorise them and discuss at which level that a certain area needs to be looked at.
Tools that can be used to implement Atomic Design and start building your Design System:
Sketch
Invision
Adobe XD