The importance of a component library and how it saves your organisation both time and money
A component library describes with the help of code how a brand looks and feels in a digital context(for example on a web page, on a service or in an app). Together with a digital style guide they combine into a design system; a single source of truth for designers and developers.
A component can be a smaller independent part, like a button or a form field, or a bigger one combining several components, like a hero or a footer.
Common for all components is that they not only show or describe how something should look — they are the components, with HTML, CSS and JavaScript that the developers use. The point with this is that the content can be reused over and over again in the development of new product or services within the brand. Not only does this save time, it also creates a continuity between different platforms and creates quality assurance for all deliveries.
The component library is the only source of truth
One major effect of a component library is that you can be assured that the user is always in focus. There is no room for anyone in a team to change something for its own discretion, which can be the case when the design phase is underway.
How does one showcase the behaviour of an interactive element? How does the navigation or different sets of tabs behave on different screen sizes? This is the type of questions that that gives the brand its digital look and feel. If you do this right, the brand will look and behave the same over all devices and the user experience will never be comprised.
The component library is build upon the principles and guidelines that control the brand. The modules are reusable over and over again to assure the same experience across all web pages, digital tools, apps and PWA:s.
To achieve maximal efficiency from this way of working you need to adopt long-term thinking. That’s why it is important that its the component library you always collect your building blocks from.
To always work from the component library might sound pretty obvious in theory, but in real life this is often a challenge. The larger organisation, the more power is needed to establish this way of working, and to motivate everyone involved to follow it.
Coherent design and functions
Coherency is key for both creating great user experience and to come across as a straightforward professional company. A few aesthetic differences between your app and your website is all it takes for a potential customer to start doubting your competence, and a few inconsistencies in functionality ruins the user experience. A design system with a library of coherent components will prevent that. This efficiently ensures that you get the same crisp expression across all your digital touch points today as well as tomorrow when you are entering new markets or offer new services. In that way, the design system helps to deliver cohesive and scalable features in a way that’s efficient for both design and development.
One example of this is Google’s range of products, who all look and feel the same although they do different things.
How do others do it?
To work component based with both visual design and front end development is not something new. But in later years this type of visual system thinking has been boosted by the likes of companies such as Google, who were early with publishing their design system Material design. Shopify, IBM and Atlassian are other companies who have implemented their own system.
5 benefits of a component library
Let’s break it down shall we.
- You build it once, but you benefit from it forever.
- Quality and continuity assurance with coherency all over your companies product range.
- You can work agile and the component library can scale at any rate.
- The brand is connected through all digital channels and products.
- Your organisation will save time and money.
My name is Pontus Brenner and I work as a Product Designer at the digital studio Humblebee. There me and my colleague work with brands such as Polestar, Stena Recycling and Hultafors Group.
Do you think a component library something that is could benefit your organisation, or just curious about the subject? If so, let’s have a chat.
Find out more at https://designsystem.humblebee.se/
Contact:
Pontus Brenner
e. pontus.brenner@humblebee.se
w. pontusbrenner.com
