Design Library: A framework for success

What is it?

A Design Library is a single source of truth for all the assets that are used to create a digital product.

A pre-build framework into which we can add a core selection of a client’s brand values and assets; values that will then be inherited by the elements and components inside the Library automatically, creating a set of brand-appropriate assets that UX teams can leverage to create all of the required digital outputs. 

All clear?  If not don’t worry. Simply put, the Design Library contains all the assets a designer can use to design a digital product. If it isn’t in the Library, it doesn’t get used. This doesn’t mean that every product has to use the same assets and in the same way though. Each individual client library can have different assets within it, but these need to be collaboratively agreed upon with the client to ensure that they are as clean and easy to maintain as possible.

Why is this important? Well, left to their own devices, everyone has a different way of organising their work and solving problems. UX teams are no different, and without control, designs can become outdated and bloated, with new assets being created on a whim.

Library Hierarchy

How does this work in practice then?  The key here, and in any Library is how all of these assets work together to create a robust and extensible framework.   Each file is spilt into the three layers shown below:  Values, Elements and Components, with each layer inheriting the properties of the previous layer.  This means that if you were to change a value, a colour for example, then all of the elements using this colour would also change, and all of the components using this element would also be updated.

For designers, this essentially means that changes can be controlled through the Library, rather than in the design file.  A change made in this way would update all of the elements and components all at once, not only saving a huge amount of time, but also ensuring that all changes are made consistently across all designs.

Values

• Baseline numerical values (padding / spacing / size etc)
• Typography
• Colours

Elements

• These are a set of simple, pre-existing, standalone assets such as buttons, forms, and iconography.
• Can be combined to make sophisticated components
• Can be added directly into design files

Components

• Complex assets constructed by combining multiple elements together
• Can be added directly into design files

The Benefits

Consistency

Irrespective of who is editing or updating the UI, a Design Library ensures that standards will be maintained across all designs.  It also helps that a consistent brand identity. 

Flexibility

A Library also encourages experimentation and iteration, allowing UX teams to test new ideas and adapt quickly based on user feedback.

Speed

Changes are made in the Library to components and elements will update any existing instances of these within design files automatically.  No more hunting around individual files to make changes. 

Efficiency

UX Teams can reuse components and styles, reducing duplication of effort and speeding up the design process.

Accessibility

Accessibility checks can be performed against the core assets in the Library, ensuring that their properties remain as accessible as possible and that any issues can be identified and rectified swiftly. 

Scalability 

As projects grow, a Design Library helps manage complexity by providing a structured way to add new components.

Summary

We know it’s important to allow each new piece of work or project to have the flexibility to match and amplify each client's brand, to partner with the unique story they are trying to tell and ensure that theirs is a voice that stands out from the crowd. 

A Design Library, while introducing rigour into this process, doesn’t reduce this level of creative expression.  Instead, it  allows UX teams to focus on the things that matter, confident in the knowledge that this framework will help them to make holistic and consistent choices.

For clients, it is a source of truth for their brand.  A repository for a set of collaboratively agreed upon standards that are consistently applied throughout their digital estate.  An estate with a well maintained garden, if you will.