Why did we decide to design a UI Kit as part of our design system?
We have been designing and building management systems for businesses to use for many years when it came to our attention that we had been trying out lots of different themes and there was no real consistency in our design. So, what we wanted to do was design a UI kit that would enable us to inject consistency throughout each of our projects.
We decided to design our own UI kit at Scaffold which will then become part of a wider design system that we can use over a variety of different products. In a nutshell, a design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company. It’s usually hosted online as a website. Think of it as a big knowledge-base that is part UI kit, part documentation with instructions, language and coding guidelines all wrapped up together.
When starting to design our UI kit I done a lot of research into how other companies have created their overall design systems so I could break it down and learn from their best practice methods. Design systems are a great untapped resource for learning how to create better user experiences and interfaces just by studying them.
I found a recurring theme with many of them, they are all very organised and the team have made it very easy to find what you are looking for. Also keeping your design simple is key, simple design solves problems. Design Systems should be easy to read, understand and be implemented by any designer who needs to use them. If someone joins the team, they should be able to use the design system to quickly understand the bases and the principles used by Scaffold.
Here are a few of the design systems that I found very useful when designing our UI kit.
Material Design Guidelines
Apple Human Interface Guidelines
https://developer.apple.com/design/
IBM Carbon Design System
https://www.carbondesignsystem.com/
Air BNB Design Language System
https://airbnb.design/tag/dls/
I wanted to design a UI kit that will be timeless and create a unique and accessible user experience. The UI kit is made up of many different elements such as colour, inputs, buttons, lists, typography, iconography, illustrations and more.
I think our UI Kit is a good starting point for us to build out as we go. User testing and client feedback will also help shape the system by knowing what works best for them. Overall we have built a good foundation to take us forward with this project!