The web is full of free, ready-made icons, illustrations, with more created every day. With so many options out there, why should designers bother making their own UI kit?
A UI kit standardizes your visual elements and typefaces so that they stay consistent throughout your brand. It allows designers to update elements like colors, icons, and styles across many designs with ease. It’s particularly important for eCommerce storefronts, as product lines, product availability, and buyers can change over time.
UI kits are also useful for developers: design components are arranged logically and don’t require much work to get them out. With the right tools (more on that later), developers don’t have to make assumptions or waste time locating design assets.
In this post, we’ll go over what you need to know before embarking on your project, the tools you need to get started, and the steps to create a UI kit of your own. We’ll also share a free UI kit for eCommerce websites.
Why create an eCommerce UI kit?
Companies like Apple and Uber have pleasing, unified, and unique designs that match their brands. That’s because they rely on design systems to maintain consistency across countless web pages, employees, and revisions. For the same reasons, UI kits are useful to eCommerce brands, helping with:
- Creating unique user experiences
- Organizing design elements
- Maintaining the brand language
- Improving team productivity
Before you get started…
Creating your UI kit requires time, discipline, and self-organization. First, get familiar with what online shoppers want and how your designs will meet their needs. Here’s what to do:
Create a visual language. Users get drawn to designs that are simple and easy to understand, so having a clear design language is essential. Your brand’s colors, text, sizing, spacing, and imagery make up your design language.
Identify your UI elements. Design elements are UI components that your users interact with. They include buttons, icons, checkboxes, radio buttons, preloaders, email calendars, status bars, etc. Limit this list to what you’ll use in your design.
Establish a design system. A design system is a centralized, evolving catalog that maps all your UI elements that can be reused and repurposed. It’s more than just a collection of UI elements, as it specifies their structure and purpose.
A well-known design methodology is Brad Frost’s Atomic Design system. It simplifies complex UX components into a structured and easy-to-use language.
Centralize brand assets. Asset management is a system of controlling your design assets such as logos, guidelines, and other materials. It helps designers manage usage rights, revisions, share files, and collaborate easily.
What tools do you need?
Before creating a UI kit, you’ll need to gain familiarity with some of the popular prototyping tools on the market:
Sketch. Sketch is one of the most widely-used UI tools out there, and many UI kits are designed with it. It has a large community of designers and an infinite number of libraries and plugins. Those coming from vector and layout software will find Artboards and Symbols (reusable components) intuitive and easy to use.
Figma. Figma has been around for less time than Sketch, but is quickly gaining in popularity. Unlike Sketch, which is OS-only, Figma runs on Windows devices and has extensive collaboration options. It can handle your project’s entire design journey, so you can do everything without leaving the platform.
Adobe XD. Adobe’s product is an excellent option for Adobe ID holders wanting to stay in the ecosystem. It’s relatively new, so the number of plugins and extensions is lacking, but that will change over time. It’s also available in offline mode which may be beneficial for some teams.
Zeplin and Avocode. These are known as handoff or inspection tools designed to provide design specs to developers. Sketch measure is another alternative for Sketch users, while Figma generates code in the right panel. Adobe XD offers this function through its Design Specs feature.
How to create your UI kit:
Good design language keeps your eCommerce brand memorable, helping you grow awareness and sales. Your visual and writing styles set your store’s look and feel, and here’s how to get the right message across:
- Color palette. Establish 1-5 colors that represent your brand. Consider tints and shade of the same colors that designers can utilize for their design work.
- Icons. When you create your icons, you’ll need to convert them to symbols. Your icons should be easily accessible for reuse throughout your design.
- Typography. Identify the fonts you’ll use (it’s a good idea to limit yourself to one-two fonts) and the text styles for H1, H2, H3, body text, links, quote, etc.
- Sizing and spacing. The size and space between your elements will enhance or detract from them. Paddings, margins, and frames can deliver similar effects.
- Assets. Expand your design system with button states (static, selection, hover) and how your search bars, radio buttons, checkboxes, and other components behave.
The takeaway
Building your own UI style guide is not easy. When starting from scratch, you can overlook some design elements and essential components critical to your eCommerce store. If you need a UI kit that you can start using today, check out Oro’s eCommerce UI kit, which you can download for free here.
