What is UI Kit and Why You Should Use it

We’ve been launching a few great free and premium UI Kits at Designmodo. But some of you may have missed it simply because you don’t care about it… yet.

Today we’ll see what you lose by skipping those great collections, and how to get more from them.

It’s not just about copying and pasting elements, at all. It’s about improving your workflow, getting more and working less, and getting an incredibly better overall look. Yes, we’ll talk about how it affect your paycheck as well :)

So, let’s rock!

What is this “User Interface Kit” thing?

Impressionist UI

UI Kits are files (usually PSD’s, but the premium ones comes with a lot of additional stuff, as you can see above) with a lot of useful components – User Interface Elements – for user interface design. They come with the possibility of a lot of color variations and they easily integrate with your own design since they actually are done for this propose. They can also include patterns, brushes and asl files, which make the integration process even easier, you can play with colors, create new components and just include them as smart objects in your own design If you want.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

They contain a lot of components that you just shouldn’t be designing, like default (and pretties) selects, checkboxes, slideshows, avatars, lists.

Also sometimes they include components that you don’t even think about using, until you see them. This is the case of those sliders form components. Before them designers and developers used simple input fields or select boxes but a clever guy noticed that a slider could solve much better this problem.

Also, User Interface Kits give you a lot of ideas to solve common problems, like navigation styles, breadcrumbs, CTA’s, icons, notification boxes, lists… And they are amazingly detail-oriented, so you end up with a much better result than if you were doing it by yourself, in no time.

So, how do they save me time? (beyond the obvious copy & paste)

Futurico UI

Think about it the same as when you find a good supermarket. You know that once a while you’ll have to search for new supermarkets or stores out there, but for 99% of the cases you’ll just go there, find what you want, pick it up, pay and go back home. No waste of time.

Imagine if every time you need to buy something you’d need to find a new store. Remember last time you moved? Yeah, just like that. That sounds completely crazy, right? Actually, I’m pretty sure that it’s what you’ve been doing so far with your designs. For every project you go out there and search a little bit about cool components to use.

So the key point is that a single UI kit can be used for virtually all your projects, and once you find a really good and complete UI kit you can just reduce to ZERO the component searching step.

Did I mention that they save you MONEY?

Ok, this one is quite simple. For freelancers and companies time equals money. Each second you spend doing unnecessary things you are losing jobs to your competitor.

And the opposite effect is, oh, so true.

If a guy spends 10 hours doing a layout that you can do in 4h because you don’t spend time doing unnecessary things you can just charge the DOUBLE of the usual rate and still 20% cheaper than him (crazy math, but you can check it if you want :D).

So, client is happy, you are happy, the other guy kills himself. Win-win.

Also, you can learn a lot from the roots!

Impressionist UI

Oh layers. Who doesn’t love them? So, the UI Kits (at least the good ones, you know) are all layered (shaped). So you get an amazing file AND you’ll know how to replicate the effect and do same thing in other custom elements.

You can also copy the layer styles and play around with a few of them, like pre-made effects (wooden, brushed metal, carbon fiber…), so you’ll learn a lot of cool stuff about effects, objects, organization and why not, color combinations and styles.

UI kits are for designers as Frameworks are for Developers

WordPress

I bet you see a lot more projects based on Frameworks or CMS’ than built from scratch. That’s something that designers have a lot more to learn with developers: they are not ashamed to reuse stuff. There are plenty of code sharing services, frameworks, plugins, and themes.

But designers tend to do things on their own, just relying on inspiration. As a wise guy (Picasso, maybe?) said “Good artists copy, great steal”. Don’t be afraid to make use of things out there (as long as you don’t break copyright laws, of course). Don’t be afraid to don’t reinvent the wheel. Just focus on the key points, on the real uniqueness of your work.

And developers can just do things by themselves

In addition to what UI does for designers, they can also help developers. Since developers get a lot of things already made with UI Kits, they can just do projects without hiring designers at all. Same way that designers can just use WordPress and a theme, developers can just use UI kits and a little knowledge on design to get good looking layouts saving a few bucks.

Standardized interface

Impressionist Icons

Another important thing is about standards. Once you use User Interface Kits, Icon Packs and stuff like this, you’ll keep the same look for all elements in your website. People will look to different pages and different components and still feel that they are similar.

Also, they are made in a way that it’s easy to integrate new items. If you don’t find what you’re looking for in your UI Pack, you can create your own items!

It’s far way easier to completely change the look

Clients are crazy, aren’t they? So if by the end of the project the client calls you saying “Hey, how  about changing the whole design to pink? My wife would love it!” you can just change a few layers and you’re done. Also if even after the implementation client asks you to change all the icons the Front-End guy will love you, because he would have done the whole thing with sprites and just have to change a single image, not the whole code.

“I’ve been there, kid”

As a Front-End Guy and Designer I’ve seen both sides of this story. I can ensure you that UI kits do save a lot of time and hassle, doing really well a job that you shouldn’t be doing. At the same time, well layered layouts, especially for small and detail-oriented components are much better to work with.

So, what are you waiting for to use them?

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

31 Comments
  1. ddmagstuff Apr 18, 3:07 pm

    First of all i am very thanks from my heart for very useful and informative resources you have cover on the website.this type of informative topics and information is very very use full and guide us.

    Reply
    +6
    • Rochester Apr 20, 8:46 am

      Hi!

      Thanks, I’m glad you liked it. And keep coming, we’re doing a lot more posts on this right now!

      []’s

      Reply
      +3
  2. Dainis Graveris Apr 18, 3:33 pm

    I really like how you promote your own icon pack really showing how to use it in action better than others. That’s really helpful and hopefully will make more people understand how easy is to use high quality icons in your own projects, look professional and not pay a lot.

    Good post, Rochester!

    Reply
    0
    • Rochester Apr 20, 8:47 am

      Hi Dainis!

      I’m glad to see you here, my friend!

      Yeah, Adrian had this great idea, it’s an amazing approach, isn’t it? I’m sure we can use same idea for other products :)

      Thanks for commenting!

      []’s

      Reply
      0
  3. Vladimir Kudinov Apr 18, 4:01 pm

    Great article! Nice way to show us how we can use this kits. Very useful

    Reply
    0
    • Rochester Apr 20, 8:48 am

      Hi Vladimir,

      That’s the idea :) We’ll have much more practical guides soon, this one was just the 101 ;)

      []’s

      Reply
      +1
  4. Mike Apr 18, 5:28 pm

    Great Article! I always make my UI kits myself, but occasionaly use some elements from other kits. I can confirm it saves a lot of time, and as you stated time is money. I think i’m saving over 2 hours per project with my own kits.

    My only tip is to change your UI kits frequently, otherwise your designs look always the same.

    Reply
    0
    • Adrian Apr 18, 6:03 pm

      Very good advice, totally agree with you.

      Reply
      0
    • Rochester Apr 20, 8:49 am

      Agreed!

      Specially if you have a lot of projects per month (like more than 4). I’m sure you can buy a lot of them by saving 2h per project :)

      []’s

      Reply
      0
  5. dekan Apr 18, 5:47 pm

    Great article, but I don’t understand how to use them in my project’s. I can’t find any tutorial or am I blind? ;)

    Reply
    0
    • Adrian Apr 18, 6:01 pm

      stay in touch with us, “how to use our ui packs” tutorials coming soon :)

      Reply
      0
      • kpolo Apr 19, 3:07 pm

        Yes, a “how to use” tutorial specifically focused on web apps would be awesome.

        Reply
        0
  6. Andrew Apr 18, 9:16 pm

    Great article. What would be really useful is a blog about how to use the PSD file and customize standard HTML objects. E.g. we see radio buttons on the ui kit, but how do we use it?

    Reply
    0
  7. GRR Apr 19, 11:53 am

    Will definitely need those UI kits for future works. Thanks for sharing these precious advices.

    Reply
    0
    • Rochester Apr 20, 8:53 am

      Hi!

      That’s great! Stay tuned for more practical insights soon!

      []’s

      Reply
      0
  8. Bharat Chowdary Apr 20, 1:22 am

    Half of my doubts regarding UI kits are cleared. Thanks for this timely article.

    Reply
    0
    • Rochester Apr 20, 8:53 am

      I’m glad we could help you :)

      And don’t forget to subscribe to get all our updates, we have much more great content to go!

      []’s

      Reply
      0
  9. Shani Apr 23, 7:50 am

    Thanks so much for this. Now I know what a UI kit is and how useful it can be, especially to a fledgling web designer as myself.

    Reply
    0
  10. Jessica Apr 23, 12:36 pm

    I have never heard about it, but as far as I understood then it can be much interesting and necessary for every user’s interface design. UI-kit usage can make it very creative and alluring

    Reply
    0
  11. Cata May 9, 7:59 am

    Nice article, i’ve always been sceptikal about usin UI Kits :) i thought i was using somebody else’s work. As you said, using a kit will give a feel of familiarity for the user (consistency for designers). Keep up the good work.

    Reply
    0
  12. Simone Jul 3, 8:47 pm

    Hi there!
    First I want to tank you for your great work!
    I just tried some of those nice UI KITS in the form of psd files out there but… I’m a programmer and, even using Photoshop, I could not find an easy way to export ui elements I need, such as checkboxes or buttons.

    In fact, if I could use Gimp, I would simply group levels of interest, merged them together, copied end pasted in a new file and then exported it as png keeping quality and transparency.

    Unfortunately, even if those elements are already grouped into layers and sublayers inside the psd file, I cant generate a png file of, say, a checkbox without loosing lot of time trying to manual select the shape and then use some sort of copy and paste: this wastes time and the result is very bad!

    Could you please suggest hot to achieve this basic thing with Photoshop? I mean something like “right click on the group of layers related to an ui element and save as png file”!!

    Thank for your help,
    Simone

    Reply
    0
  13. Dhawal Limbuwala Jun 2, 1:59 pm

    I Am new bee to ui can you guide me that how can get start. If you so much thanks Rochester.!!!

    Reply
    0
  14. Thomas Jul 9, 11:16 am

    Most of the .psd ui kits are only usable for Photoshop users thats awful.
    Many web-developers use gimp. So please, all you ui-kit designers make them compatible for Gimp. Its just so easy! All you have to do is to APPLY the layer effects to the layer, and not just save them into the file.
    (Gimp can handle nearly everything from photoshop except those pesky layer effects)

    Please….

    Reply
    0
  15. Bernard Aug 8, 4:23 am

    The thing I cannot find is HOW does one make use of a UI? Like, how do you make the UI function.. javascript?

    Reply
    0
  16. Vhin Manansala Sep 28, 7:19 am

    Thank you for this one mate. I will try to use this and see the advantages of using this one

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters