Creating a UI kit for your interface, saves time, ensures consistency and ultimately aids a successful project. We take a look at some of the key elements required and show you how to nail your UI kits.
Delving into the world of web, app and interface design can often be a challenge. With new tools, browser support and trends constantly improving and changing, it can be hard to keep up.
To keep an interface project consistent, designers work with UI kits to guide their artwork and layouts, making sure they are coherent, whilst speeding up the process and design flow at the same time.
So what is a UI kit? It’s basically a kit where you save all the elements that will be used more than once in different parts of the interface you’re designing. For example, buttons, text styling, text hierarchy and main form elements would be included. It helps you to always follow specific sizes/styles for these elements, saving time in both the design and development stages.
Once you begin your initial concept stages of a design project and are making progress with a homepage, for example – you can start adding certain elements from the design to the kit (or to a library in the new Adobe CC suite) that will basically be your bible. Let’s break it into simpler steps to make it easier to understand how this would work:
1. Colour & Type
These are the basic elements of any design. Create a colour palette and add all the HEX and RGB codes to reference later on. Define a hierarchy of text fonts, sizes and styles for titles, headlines, body text and small type usage. Remember that developers don’t work with fractions for text sizes, so avoid anything random like 17.53 pt. Keeping the text consistent on every page is very important and makes everyone’s job a lot easier!
2. Form elements
Every interface will have input fields and form elements and it helps both the developer and the user if they are consistent. It’s not enough to create just a text field box or a drop-down; you have to set how they will behave when selected and when disabled etc. Moreover, think about your search bar, radio buttons, and how checkboxes will be styled site wide. Have a look at our example below:
3. Buttons
Do they have round corners or not? Are they line or filled? You don’t need to have only one button style, but maybe consider limiting yourself to not more than 3 to be used across a full interface or web project. Think about how it displays normally, when hovered, clicked and also when disabled. All these functionalities are really important to the user experience since they define how the interface responds to their actions. If there is no clear indication that a button is disabled, for example, the user will keep trying to click on it thinking there is something wrong with the website.
4. Widgets
Every UI kit is different and needs to be adapted to the product or client you are working on. Adding special features to display parts of the content can make any interface way more interesting. Even so, consistency is still vital in their look and feel. In the example below, we kept ourselves to a three column grid, varying the height of the widgets and the elements but ensuring we only used the type styles and colours we have already defined in the initial steps of this Kit.
Chart and graph elements could be included here, if they would appear within the product. Most dashboards and customer management systems would need a more detailed set of chart and graphic elements for the developers to reference in the build stage and these could be included in their own section within your UI kit.
5. Extra elements
If there are any other elements that will be repeated frequently on the interface you’re designing, consider including them as well. Here we’ve added a comments section, as well as the main navigation for both desktop and mobile. When creating responsive layouts, all the things we covered here still apply – keep it consistent! Depending on the size of the project, even consider creating a section of the UI kit just for mobile elements.
Put all these items together and you have a beautiful UI kit ready to use for your interface or web project. Trust me, it will make everyone’s life easier! Especially if you have more than one person designing the website. And, in the end, it’s one more nice piece of design to add to your portfolio!
Joel Rosen is the Co-founder and Creator of Briefbox. Alongside adding fresh new briefs, resources and curating the Briefbox sets, Joel is also an active mentor to our community. A passionate illustrator and typographer, he is also the Co-Founder and Creative Director of UK based design agency, ORCA, where he leads his own awesome creative team on large scale brand and digital projects.