Post Image

How to Use UI Kits to Create Quicker Mockups

By Laura Busche on 8th February, 2016 Updated on 1st February, 2017

UI kits come equipped with the starting blocks you need for a design, all premade so you can use them “straight from the box.”

While offers vary with the company, they are known to contain:

  • Navigation elements
  • Icons
  • Grids
  • Buttons
  • Charts
  • Tooltips
  • Modals
  • Widgets
  • Styles
  • Panels
  • Tabs
  • Alerts

image03

For example, Grade UI Kit, above, includes hundreds of icons, charts, etc. in a variety of styles and on a tight grid.

While they have their drawbacks (which we discuss below), kits work great for building mid- or high-fidelity prototypes. While prototypes themselves are a timesaver in collecting early feedback before launch, using kits to build them is applying a timesaver to a timesaver.

With the right software and the right kit, you could build a testable prototype based on a new design idea within a day.

Below, we’ll give you 5 ways to use design kits to hasten the design process, not to mention spare you a lot of hassle. But first, let’s explore the pros and cons.

Pros and Cons of UI Design Kits

For some, the advantages of using readymade UI pieces instead of creating them yourself is obvious. But let’s review the complete list of how kits can help:

  • Not having to worry about element creation frees up the designer’s brain for more important matters, such as interactions and improving user flows.
  • A collection of different elements and styles at your fingertips allows you to experiment with new ideas or looks.
  • Kits are typically designed by experts and reviewed/updated constantly problems arise.
  • The ease and quickness of designing with UI kits makes them a perfect solution for when you want to deliver a high-fidelity sample to stakeholders (or even an MVP) but don’t have a lot of time.

So if UI kits are so great, why doesn’t everyone use them all the time? Well, they’re not perfect.

Before uprooting your entire design process, understand kits’ disadvantages:

  • Kits leave very little room for customization or personalization. If you are aiming for a specific style and look, it might be hard to piece that together from predetermined components. However, you can sometimes customize the individual pieces to make them your own — which we discuss below.
  • Due to their nature, other companies might use the same elements, making your product seem less unique, or even like a copycat. Again, kits limit personalization, but again sometimes you can customize elements to make them different and unrecognizable from your competitors.
  • Not all UI kits are free.

Essentially, you’re sacrificing individuality and control for speed and convenience. Some projects require one, some projects call for the other.

Now let’s explore a few tips for using UI kits.

Decide Which Screens/Pages Your Design Needs

With what you already know about your product, decide which pages or screens can show your desired functionality or demonstrate the product’s purpose.

After that, it’s just a matter of finding a kit that offers what you need.

For example, let’s say you’re designing an app to help chronicle the user’s exercise routine and statistics. The heart of such an app would likely be a dashboard screen — this screen alone could demonstrate the purpose of the app alone, with other pages more of a “nice-to-have.” That means you need a kit that specializes in dashboard elements, like the Livo UI Kit below.

image02

It goes without saying that pages that aren’t essential to the user flow or central service should be secondary concerns. That’s not to say they’re not useful to prototype as well, but when deciding on a kit, focus on the pages that will be used most.

Choose the Kit that Matches Your Needs

UI kits come in a wide variety of visual styles, formats, properties (i.e., vectors, layered), file types, and prices.

image04

Photo credit: Free Android Lollipop UI Kit

When examining a UI kit, ask yourself the following questions:

  • Does it allow enough customization for my project? Can I use the premade items as-is?
  • Does it have all the elements I need? (Reference the list you previously made.)
  • Does it have the variations I want? (i.e., different color schemes)
  • Does it come in the file format I’m working with? (Photoshop and Sketch are the most popular.)

Customize Elements with Photoshop and Sketch

With the right know-how (and file type), you can change the color, crop the image, modify the shape, and — if you’re skilled enough — make more advanced tweaks, such as rounding off sharp corners.

Here’s are 4 tips to help manually personalize your design kit elements:

  • Organize your work based on screens so you don’t get confused. We recommend making each screen a separate layer, so you can share the same elements more easily.
  • Use the opportunity to try out different looks and arrangements of the elements, but don’t get bogged down by building entire screen samples of experimental elements.
  • Kits typically come in a consistent visual style, or even multiple consistent visual styles. Sometimes all you have to do is change the “skin.” If the kit doesn’t allow this, you may need to change the color manually piece-by-piece.
  • If you have time, write your own copy. Unlike visual elements, minor changes in word choice and message make major impacts in personalization, even if just including your company name.

Add Interactions and Animations

Another way to customize UI kits beyond altering the actual elements is to add interactions or animations. Some prototyping tools (including UXPin) integrate with Photoshop or Sketch, allowing you to bridge the gap between static and interactive design. 

image01

Photo credit: Prototyping With Photoshop

Not only does this give you more control over your product’s UI design, it also eliminates the risk that your product will look and feel the same as another product using the same kit elements.

The Ultimate Guide to Prototyping outlines the procedures and best practices for the three most common types of digital prototypes:

  • Presentation software (beginners): A basic type of user flow, but able to integrate static images and simple interactions.
  • Coded prototypes (advanced): If you’re a designer that knows HTML and CSS, you can “skip the middle man” and design a prototype straight in code. The advantage is that you save time when it comes to development, but it has some drawbacks in limiting the creative process because you’re thinking of two things at once (coding and design), not to mention it requires adequate knowledge of coding languages.
  • Prototyping apps (all levels): Prototyping tools are formulated for the convenience of designers. Usability is usually simple with options like drag-and-drop, so designers can focus fully on creating the desired UX flow.

Next Steps

To start using some of our favorite free UI kits, take a look at the following resources:

i. Free Android Lollipop UI Kit

A popular UI kit that includes 45 handcrafted elements for Photoshop and Sketch.

ii. 150 Free UI Kits

A fantastic collection of high quality UI kits that are totally free to use.

image05

iii. Free Web UI Kit

The first UI kit created by the UXPin design team, they’ve included 80 elements for Photoshop, Axure, Sketch, and Omnigraffle.

image00

Feature photo: Creative Market

 

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you