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).
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.
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.
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:
- Wireframing – Sketches that shows how elements should be placed and how navigation and overall elements should be placed.
- Designing – Get the wireframes and make them looks actually like sites.
- 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.
- Front-End – Get the design and make the HTML / CSS / JS out of it.
- 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
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.
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).
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%
(and you thought that 30% was a good rate, huh?)
What do you think about it?
Share your thoughts with us!