How Companies can Save Time and Money Using UI Kits

We’re really glad all the feedback we’ve got from our UI kits and our post about them. So it’s time to dig a little deeper into their practical use.

For those who didn’t read the first post, UI Kits are files (pretty much psds) with a lot of useful and common UI elements, with color variations, styles and that are easy to customize. They are specially handy because they save you time from doing same thing every time, you can use same UI kit for several designs, save way you can use WordPress themes or icon packs (also many times included on UI kits).

SEE ALSO: Great New Year Competition – Win One License of Startup Framework!

Here we’ll see how they can be great for companies, designers, developers. It’s not just about saving time (I know, nice title, huh?) but also how to work smarter, common uses, best practices, how to get the most out of them.

As a smart company owner and DesignModo reader you’ll discover how to multiply ridiculously low investments and get the highest ROI (Return on Investment) you’ve ever seen.

First, UI Kits Anatomy 101

Before we get on how they can help us, we should know what we got when we download or buy them.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

So, the useful stuff that usually comes with UI kits, judging by what I’ve seen so far (especially including the premium ones) is:

  • Layered psds
  • Color variations
  • Icon packs
  • ASL, PAT, ABR and other additional files

As you can see it’s more than just a bunch of elements. They are created to help you in many steps of the development process. From wireframe to final code they can help everyone, saving time, money, standardizing the interface.

Development life cycle

For practical proposes we’ll focus on these items and in this order:

  1. Wireframing – Sketches that shows how elements should be placed and how navigation and overall elements should be placed.
  2. Designing – Get the wireframes and make them looks actually like sites.
  3. Prototyping – Get the design and make simple prototypes (with image maps or really simple image slices) so the client and users can start testing main functionality.
  4. Front-End – Get the design and make the HTML / CSS / JS out of it.
  5. Dynamic code – Get the front-end and integrate with a CMS or anything like this so the content can be added and removed without touching the HTML.

Now let’s see how UI Kits can be applied for each step of your development process

Wireframing

Actually I don’t recommend you using any UI kits on this step. In my experience clients will understand better the Wireframe propose if you make it look like a sketch, the less fancy, the better.

But every rule has an exception.

We have a few clients that just want to see things getting done. If you show too simple stuff for them they won’t get it at all, and will think that you are just too lazy to finish the draft. So you can mix a few components (like sliders, images, menus) so you don’t have to work a lot on effects, alignments and still have a good looking wireframe to show.

Designing

OK, UI Kits were first made for this very part of the development cycle. The good things you can do to save time here is:

  • Use items as smart objects – If you are just “copying and pasting” it’ll be way easier to change all items once, if you use same source file and just mask the rest.
  • Use layer styles – Many UI Kits comes with layer styles, you can apply them to your custom shapes so you’ll have all items with same look.
  • Make a subpack – You can also get bigger packs and cut them in smaller files, with a few related components. So you’ll have smaller files and won’t be including items that you don’t use at all.
  • Mark the items you already used – It’s good to reuse items, but once a while it’s good to change things. Since we have a lot of styles for same items (like menus, buttons, ribbons) it’s good to know which ones you haven’t used yet but still want to use in the future.
  • Be aware of implementation – a few items can be just impossible to do with HTML + CSS and many other requisites that you client may have (for instance, work on IE7). You don’t need to be a coder, but if you know the basics you’ll identify the” must-use” and “can’t-use” items and make things easier for everyone.
  • Photoshop CS6 will make things even easier – As we said before it’s just awesome. So be ready to use those new features in your interfaces (as they will certainly come in UI packs or other premade psd files).

Prototyping

This is one of the most important steps in my opinion. It’ll validate the average look and feel and will allow changes with far less cost than if the site was already implemented.

So UI Kits are good to test components, patterns and how they are better recognized by users (and client, of course). It’s crucial to have at least a few variations on this step so you can choose the better alternative. Many people think that we must just stick with a single idea and make it better, but to find the best option you’ll need to try several alternatives in a lower scale and improve the best one.

Oh, and we’ll talk a lot more on this, also :)

Front-End and Dynamic code

Same rules will apply for both steps since they are quite similar from the design point of view.

The designer could provide you a “subpack” but you can do it your own anyway. It’ll save you a lot of time if you use sprites in this step, because you can easily replace the whole set of images but just replacing the main background image. Also it saves you a lot of HTTP requests which reduces the loading time.

Another point is that you can either use HTML UI kits or build your own based on a UI kit, so same way designer easily copy and paste elements you can do it and save a lot of time.

And now, the ROI

Just to make things funnier let’s try a little math on this. We’ve seen how to save time on each step but let’s sum up the whole time saved:

  • Wireframing – 1h
  • Designing – 5h
  • Front-End – 2h
  • Dynamic Code – 1h

So you have saved 9h for each project. Also, let’s assume that you have bought the Impressionist UI for $149 (for almost 100B of seriously cool stuff, 300 elements and 200 icons for unlimited projects) and used in 5 projects.

Then you’ve got 45h saved (9h per project). Assuming that you are a great boss and pays around $30 for each hour, you saved around $1,350 by the end of the 5 projects.

The ROI formula is:

Where r is our rate, Vf is our final value (or return) and Vi is our initial value (or investment).

So your ROI will be:

1350-149 = 8.06043 a.k.a. ~806%
149

(and you thought that 30% was a good rate, huh?)

What do you think about it?

Share your thoughts with us!

A web designer and entrepreneur from Itajubá (MG), Brasil. Just loves writing about obscure topics and doing some cool stuff. Get in touch at @roch_br.

Newsletter

6 Comments
  1. Mich Apr 26, 2:57 pm

    Wow, great article ! But the 8 000% are a little bit too much :)
    (1350-149) = 8.06043 which multiply 100 makes 806.043 %

    Reply
    0
  2. Mich Apr 26, 2:57 pm

    *I mean (1350-149)/149 = 8.06043 of course.

    Reply
    0
  3. Saya Apr 27, 6:09 am

    You are right,,but this based on assuming designers use these kit correctly. These are great ingredients, but depends on how to use it. Then will increase Roi

    Reply
    +2
  4. Rachael Apr 30, 11:01 am

    I think UI kits are a great as a basis for use, however I think its important not to get lazy by becoming reliant upon them, it would be easy to use the same one two or three times in different designs, and before you know it your designs will all start to look very similar. I think they are a good idea to use as a shapes but changing the layer styles and fonts are important to keep each design you do looking fresh and different from the next.

    Reply
    +1
  5. oscar Sep 18, 12:30 am

    Great article. But Im not all sure about how Sprite works.. do you by any chance have any tutorial here for that? any program you could recommend for that? Thanks!

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters