A library of reusable styles and components for faster design and product development.

Design systems have been around for a while now and they have been adopted by some major players in the industry and for a a good reason too.

Global reaching companies such as IBM, Airbnb and Shopify have all turned to creating this visual language which enables them to keep their entire brand consistent and reliable. With the rise of design tools such as Sketch and XD, creating a design system has never been more seamless and quick to set up.

Here I am going to look at some of the benefits to building and maintaining a design system and why you should create one.

 

Always keeping you up to date

Anyone who works with a large system will be able to tell you that keeping all of the elements used across the whole of your system or service is a pretty tough challenge. Over time, the designs that were originally made live become outdated. Any additional pages which have been created at a more recent stage might have design inconsistencies compared to the original designs. A design system will add value to the organisation by keeping a living library of elements which can be reused and updated to any new brand or technical requirements.

Invision have released a great way of managing a design system which syncs Sketch documents directly to an online library accessible by developers, branders and clients alike. As sketch is able to convert pixel perfect measurements such as button radius’s into usable code snippets, this feeds directly to the online library to be ready to be copied for use into your project. To make things even easier, this software is able to pump out a CSS stylesheet which you can download and add to your project files. Use the correct classes throughout your HTML and your looking at being able to receive a requirement to change a button style sitewide, change it in a Sketch file, upload the updated CSS sheet et voila. Your whole platform has an updated style.

 

Value your time

 

Speed Speed Speed

Having all of your elements readily usable for design or development allows a quick copy and paste job to wherever you want the element to show. This process can shave hours, even days off of a workflow allowing the team to focus on what really matters such as the usability of the page and flow of steps in the user journey.

Having a centralised area for these assets is ideal for new members of the project or brand as they can confidently select from a single source of truth and in turn optimise the consistency, experience and accessibility of your products.

 

Grow confidence with your users

Users get confused sometimes if things don’t work as expected. Ensuring elements work in the same way across your platform reduces the cognitive load time it takes the user to continue on their path. If a calendar selector worked differently on one page to another, the user could become confused and even frustrated.

 

Organisation across design teams

With the industry investing in remote teams and using flexible resource, having guidelines which extend from internal use allows for better co-ordination.

 

The process

What is the best way for the design system to be updated? Is it regularly updated on a certain day of the week? Ensuring everyone knows how the system should be used and are in agreement is important to retain the consistency across the platform.

 

These guys do it well

Here are some companies who have invested their efforts into design systems.

https://design.trello.com/

http://www.carbondesignsystem.com/

http://rizzo.lonelyplanet.com/styleguide/ui-components/cards

http://www.lightningdesignsystem.com/

https://www.yelp.com/styleguide

http://www.bbc.co.uk/gel/guidelines/category/design-patterns

https://buffer.com/style-guide

 

Design systems are part of a modern age of managing consistency in a scalable team. Starting small and considering the need of the individuals who are going to be using the system are priority when it comes to the set-up. Ensure that the system is kept up to date regularly so that the trust is withheld. It should be constantly refined based on user research and user needs. The value that design systems bring to designers is reflected back to the entire team when workflow efficiency is greatly improved.