Skip and go to main content

Design & Technology March 11, 2019

The benefits of Reusable Design Systems

Image

It’s becoming increasingly challenging for organisations to manage the growing volume of digital content and touchpoints across multiple brands, markets and territories. As the number of devices, browsers, and environments continues to increase at a staggering rate, the need to create thoughtful, deliberate interface design systems is becoming more apparent than ever.

what is a design system?

A design system can be defined as a collection of reusable components, guided by clear standards which can be assembled together to build any number of applications. A design system can increase efficiency and empower marketing teams to rapidly build digital assets, all while ensuring brand governance.

Design systems are already being implemented by web giants such as Google and Airbnb, who have transformed the way they design digital products by developing their own design systems.

Google – Material design

Google Material Design was the first release of any design system that can be found on the web. Since its release, Google has rolled this out to all its applications, from gmail to calendar to drive. The Material Design system defines the visual design style of the way these applications should look and feel.

Image

Airbnb – Design Language System (DLS)

Airbnb’s design team is very open with its approach to design systems. They’ve written a lot of content on how they came up with their DLS system, and share how its managed, and how they use it to scale the app and be multi-lingual very quickly.

Image

 

BBC – Global Experience Language (GEL)

The BBC’s Global Experience Language (GEL) helps its teams build and develop apps quickly, whilst ensuring everything is on brand. This system allows them to ensure consistency across all the BBC websites, from news to weather to iPlayer.

Image

 

In more recent years, Salesforce with its Lightning Design System, IBM with its Carbon Design System and Shopify with its Polaris System (released last year) have all followed suit.

Key Steps to building a design system

Before building a design system, it is fundamental to do an audit of your current design, a record of the CSS you’re using and visual elements. Most importantly, when you are creating a design system, the way you treat the brand rules and the visual identity is very important.

A few vital areas to consider:

Colours: these tend to include a limited palette that fully represents your brand. For the system, a primary and secondary colour is generally selected, with light and dark variants of each.

Typography: choosing the right typeface is usually one of the most important steps to creating a design system. Most design systems include just two fonts: one for headings and the other for body copy (and a monospace font for code).

Iconography uses images and symbols to visually represent a concept. The key to success with this, is having an idea and sticking to it, setting guidelines for illustrations and icons, and using the best image format for the situation.

Log each stage

Documenting each step is what separates a pattern library from a design system. A great example of this is Shopify Polaris:

Polaris principal and guidelines simply introduces to the people internally at Shopify as to why the system exists, how you use it, and how you can use it to build and scale the products quickly.

Polaris Identity demonstrates all of the identity rules; everything from the colours that are being used, to the typography and the way that illustrations should be used.

Polaris components/patterns determines the atomic element which is used to build the final application. From the system itself, you can copy the code which is really important for developers if they want to build the applications quickly. They can easily see the accessibility rules that have been built into any given component. There is also a guide on how and when to use the component.

Image
Image
Image

What are the benefits?

A design system helps organisations to launch new product offerings quickly, whilst ensuring a consistent user experience is maintained.

Consistency

Users should be provided with a familiar and consistent user experience across all of an organisation’s digital touchpoints.  A Design System will ensure that there is consistent brand and user experience, regardless of what application or channel is being used.

Cost savings

Cost savings can be made through design time, code creation, maintenance and QA/Testing. You’re practically saving time through the design process and the coding process. You aren’t having to think about fonts and colours, as these decisions are in embedded into the design system.

Speed

Pre-defined components help organisations to design and build systems much more efficiently. A lot of these rules are built into the system itself, which means you can quickly make a decision, build prototype solutions, get them tested and roll them out much quicker.

Risk Mitigations

This means there is an element of risk mitigation, because the components which are in the system will be tried and tested. If you need to build something quickly, it will be much easier to estimate how much time you need.

As designers, where can the future take us?

An artist or not, it can be extremely frustrating when you have a vision in your mind and try to draw it, but it just doesn’t look quite right. Machine learning and art have finally crossed paths, a breakthrough for both. With this incredible collaboration, machine learning and design systems can turn real life sketches into design within a matter of seconds. This will assist with optimisation, and also create designs faster and cheaper with the increased speed and efficiency it offers.

Questions? We are here to help!

Whoops!

If you’re reading this, you unfortunately can’t see the form that’s supposed to be here. You probably have an ad blocker installed. Switch the ad blocker off in order to see the form. Still encounter problems? Open this page in a different browser or get in contact with us: [email protected]