UI Kits for Developers – Prototyping and Homemade Design

Hope you guys are enjoying our posts on UI Kits functionality. It’s such a new topic that it’s even hard to find other opinions out there, all we find is UI Kits collections, but no reflections or creative uses. So, hope to see more discussion on this, the door (a.k.a. comments / trackbacks section) is open!

This is the last part of our UI Kits “series” (at least for now :D) we’ll talk a little more on how developers can me use of them, focusing on increase the value of the final work for clients.

In our comments section I’ve heard once “why should I pay $20 for something that I can get for free?”. I mean, why should I get premium UI Kits, while free ones are clearly “good enough”?

Well, dear Padawan, here we’ll see a lot of reasons. And those uses that we’ll see here is almost restricted to premium UI Kits. The free ones are good to try things, but they are often limited or just not so good, so every time we write “UI Kits” you should read “The really good UI Kits”.

I’m not trying to convince you to do anything, I’m just telling my own experience as a 7-year-experienced-developer. If I’d been asked one, and only one advice to give to anybody on this field, I’d say: there are things out there that you just should use. I mean, what makes my job easier and my incomes higher are things like:

  1. WordPress
  2. Premium job boards
  3. jQuery mobile
  4. UI Kits

So, today we’ll be talking about how you can use UI Kits as a Developer, so you can impress your clients with higher quality and faster service.

Are you ready? So, let’s rock!

The developer / designer syndrome

The developer / designer syndrome

Since many of the tasks in our area are so close it’s pretty easy to suffer the developer designer syndrome. We tend to be more a jack of all trades, doing one thing really well and the others just ok.

Also, especially for the guys who go programming first and then learn a little on design it’s easy to go for “Ignore the design, please” pages, where you have functionality and little or no design, or even worse, you have a really bad design.

The truth is that it’s pretty easy to do “good” things. You just need to know color combinations, a little on typography, set spacing and aligning right. Grid systems and even WordPress themes will help you on this. You can be good at this stuff in no more than 30 days.

But, though you’ll have a good overall aspect you will need to be a way better designer to get a professional look for every single element in your page. And it’s hard to really look professional.

The magic is that instead of hiring a guy to do a few components for you, you can just buy UI kits and get enough elements for a plenty of projects. So you can do the basic design stuff you already know and use the UI Kits as your secret sauce. You don’t need to reject projects because your designer can’t do things right now, just accept as many stuff as you can and try to invest more in the details.

Notice that I’m not saying that UI Kits replace good designers. It’s just that they can allow not-so-good designers to get a much better result, in spending less time. Same thing for premium themes or sliced PSD’s out there, but the UI Kits are focused in the small stuff so you can do your own the big things (like good headers, AI, select the best grid system).

Proof-of-Principle Prototyping: super fast & useful feedback

Proof-of-Principle Prototyping: super fast & useful feedback

Proof-of-Principle prototypes are prototypes that don’t need to contain the final look and feel of things, they are there just to try and proof concepts. So you can try a big button that you can click, a smaller button at the top of the page, and just a text-only CTA.

It’s a simple principle to achieve the best option for elements. Instead of just sticking with your first idea for every single item, you keep on trying, assuming that the previous thing didn’t work. So you try and try and try again.

This technique is especially good for critical elements. Slideshows, forms, CTAs, menus. You just keep on trying until you find a thing that will just grab user’s attention.

For me those are the best ones. Clients are glad to give you feedback when they can actually click on things, even if you just set a few image maps over that final png you just sent him. I’ve done once a Proof-of-Principle Prototype for mobile. You can’t imagine how amazed the users were to try things on their own mobiles. That was one of the best things I’ve done, such great input and actually understanding what works and what doesn’t.

But by “Proof-of-Principle Prototype” the first thing that may spring to your mind is a wireframe. Well, it isn’t (or doesn’t need to be!). With UI Kits and your basic design you can easily set up a better looking page and get a more “real-world” experience.

Remember what I just said about “Ignore the design, please” pages? They could actually work if you are showing your work to a developer, that kind of guy who could do same thing you are doing, so he can imagine how things should work. But it just won’t work for other normal people.

Now what happens if you show this kind of thing to your clients? It’s the same as taking you to an oil well and telling you to just imagine how those pumpjacks works, by looking at a technical drawing.

Pretty hard, huh?

It’s far easier if you just show them something closer to the final look, and make things clickable. For each component you’ll probably get a few options in your UI Kit. So why not just setting them up and showing to users? See how each one performs and chose the best for each project.

You’ll see how you’ll get a much better feedback if the client doesn’t need to worry about missing colors, or that Latin text (seriously, only nerds can see how the actual text will be when you remove the lipsum stuff).

Despite of UI Kits help on this, here a few checkpoints for good prototyping:

  1. It should be fast – Since you want to try at least 2 things, you don’t want to lose time
  2. Client should understand how things will work before you have the actual code – Ok, A/B testing works pretty well, but any change in the final work will have at least double the cost of same change in the beginning.
  3. Clients should be able to give you good feedback without having to guess which element is real and which isn’t – If you have a bunch of lipsum’s there client may assume that the element you’re testing is also a placeholder
  4. Image maps are good – They are really bad for your final code, but just to test things they’ll work great
  5. Get a few friends to try this – You don’t need to get tons of users, just get a few friends of yours (if they are the target user, the better) and tell them to do a few simple tasks

So, what do you think?

Do you have any use for UI kits that we missed? We’d love to hear from you!

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. KevinM1 May 11, 8:46 pm

    Will there be a tutorial on how to use these UI kits? Something from kit -> layout -> HTML/CSS? I’ve downloaded a few free ones, but don’t know how to use them efficiently.

    Reply
    0
  2. Saya May 15, 3:41 am

    I like UI KITS but it can not replace the design foundation by any chance. It saves time, like pieces of legos but without a real plan (real design) not helpful

    Reply
    0
  3. Dzinepress May 15, 7:24 am

    interesting article and also like UI kits as designer.

    Reply
    0
  4. Ian Jeffries Jan 29, 2:20 am

    The internet and I grew up together. I’ve been developing for it since dialup. What Rochester stated about working with clients is spot on — it doesn’t matter if you’re using a UI Kit or not. How you work with your clients is your product; not what you design. Your design doesn’t pay you or refer you customers… your client does! =

    Reply
    +1
  5. Kamalpreet Apr 24, 4:00 pm

    I am developer and thorougly enjoyed reading this article. UI kits rock. I wish they were out a couple of years ago (unless they were any I didn’t know about them). Thank you.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters