Create custom UI icons, controls and libraries that speak to your brand and take the heavy lifting out of the design process
Pre-built UI kits are great. They can help you jumpstart your design process, reduce the need for rework, and ensure consistency within your design system. And the even better news is that there are plenty of readymade UI kits available for you to try out–including Justinmind’s 4000+ readymade widgets and UI libraries.
However, if you’re designing an interface from the ground up or just want more control over your UI assets, pre-defined components may not be ideal. What you really need is to create a custom UI kit that’s tailor made for your prototypes and your team.
By designing your own UI assets, you have complete design control. This post will take you through all the benefits of creating your own UI kit, plus show you how to get started with Justinmind. Let’s begin!
Why create your own UI kit?
Link your design to your UX strategy
Creating a custom UI kit provides helps you determine whether your design is in line with your UX strategy.
By creating a custom UI kit during the prototyping stage of the design process, you’ll ensure that your designs are focused around specific project goals. Once you’ve sketched out your initial design, mocking up screens and UI elements in finer detail will give you a better idea of whether your design is in parallel with your strategy.
Take color schemes for instance. Being able to customize the color of buttons, icons and navigation bars helps transform your prototype from just another set of mocked-up screens, to a near-perfect replica of your final design.
And now think about your content. Being able to adjust the font size of labels will help you assess the readability and accessibility of your screens, so you can get feedback early on in the design process.
Boost collaboration between design and development
Plenty has been written about the communication gap between design and development, and how team prototyping can help to bridge that gap. True enough, collaborative design tools make it easier and faster to approve artwork, centralize assets and gather feedback from different product teams.
Creating a custom UI kit goes one step further in that it provides developers with accurate design specifications prior to code. Not only does this ensure quality control, it also helps reduce back and forth between product teams who may not have the advantage of working in the same space.
No need to go rooting around in specification documents for HEX codes, font families or dimensions. Your custom UI kits are already prepped, and contain only the essential files and assets required for your design. Combine them with Justinmind’s developer-friendly interface, and engineers can actually grab the information they need right off the canvas. Learn more here.
Maintain design consistency
In order to keep your user experience intuitive, your designs must be consistent. Remember that without design harmony, learnability and usability are reduced and users will turn off. UX Designer Anton Nikolov likens designing an inconsistent interface to trying to communicate with the user in several languages.
For instance, when input form components are styled differently in different sections of a website or navigation doesn’t follow familiar usage patterns, users have to learn how to use them all over again.
Fortunately, creating your own assets gives you more control over each individual UI element and interaction opportunity in your UI design. Keeping your designs consistent will be easy and users will learn how to get around your website or app faster.
With Justinmind, you can create custom UI kits for your web and mobile app prototypes that are specific to your brand. Next we’ll show you how to get started with custom UI assets in Justinmind.
Creating your UI kit with Justinmind
Step 1: Download Justinmind
First things first: download Justinmind and create a new prototype by choosing from our available web and mobile prototyping templates.
Step 2: Download and install Justinmind’s UI libraries
Before you get stuck into creating your own UI assets, take a look at Justinmind’s pre-built widgets.
Before building a custom widget library, you’ll want to be able to clearly define all the states of your widget. To do this, play around with existing UI libraries whose states and behavior are well-defined.
Our prepared UI elements, screens and layouts can all be customized and will get you used to working with Justinmind’s workspace. You’ll find our basic widgets in the Widget library palette:
You find the complete set of Justinmind UI kits here.
Step 3: Create your own library
To start creating your own library, go to the “Widgets” main menu option in the Justinmind workspace. Give your new library a name and description. Your new library will appear in the Widget library palette.
Now you can start designing your UI elements on the canvas.
Creating your UI assets
Use the Lines and shapes widget group to create widgets from scratch.
Alternatively, drag and drop pre-built widgets to the canvas and customize their styles in the Properties palette.
Adapt the elements to your brand’s color palette and dimensions. Use SVG vectors to create scalable UI elements and change their color easily.
You can even group elements together to make them function as a single, contained element.
Making your widgets interactive
You can add web and mobile interactions to your custom UI element and have that information saved in your UI library. Each time you drag a custom UI element to the canvas, the events created will also become available.
Step 4: Share your UI kit with your team
When you’ve built your custom UI kit, you can share it with other Justinmind users. To do so, click the gear icon at the top of your library in the Widget library palette, choose the “Share” option and select the user your wish to share your library with. And voilà!
There’s no time like the present! Now it’s your turn to create a custom UI kit with Justinmind. Ready, steady, go!