Why you should start using an UI Kit

Elena-Cristina Conacel
Creative Tim’s Blog
4 min readSep 23, 2016

--

UI Kits are tools that help you reach your design needs. That can be tricky, right? Well, everything is. But you know what? It gets easier. We’re gonna give some guidelines if you want to try one.

What is an UI kit?

An UI Kit is a set of components and rules that you can use when building your digital platform. It is not ‘one size fits all’ as some may say. All sets of elements are built with a structure behind which is usually explained as guidelines. It is not every variation of every element and it will not do the work for you! But it offers a lot of advantages.

When should you use them?

When you are looking to get the job done! UI Kits mainly allow rapid development and encourage consistency and unified design vision. What does that mean exactly? That your end user will have a smooth UX while using the site you are building.

UI Kits are also extremely useful when you are not working alone, because they give you a common language. Establishing an environment where people are on the same road can be a hastle, so it’s better to plan ahead. Having the same vision reflects in the final product and the way users interact with it.

And one of the things that you will figure out immediately is that it saves you time and money. It improves the development process at every step of the way, meaning that you will finish your wireframing, designing and dynamic code a whole lot faster. Really, you can read some more complex ROI math about it here: Save and Money using UI Kits.

Challenges

You need to know what you are importing into your project. And not just visually, but read the documentation, don’t get surprised by an element. Check it everytime everytime something may seem difficult, the guys who made the kit probably have the answer.

And then you will have the normal stuff coming your way, like it does with every project. How can you prepare ahead for designing something new and how to balance efficiency with what is needed. We’ve been through it, tried it both ways: with or without UI Kits and we learned the second way is better for us. If you are using Twitter Bootstrap, its’s almost a standard not to use it straight out of the box. It’s the Times New Roman of design.

CSS is not rocket science, it is a language where you declare the style for an element and that happens. It’s straightforward, it works! We don’t want a web where you see the same blue button and the same fonts. Let’s build something that makes people say ‘wow’! Build something unique, and come to think of it, since you are the one knowing the unique challenges you are confronted with you should be able to get your shit done the best!

How do you get started ?

You should really inspect your options, and we recommend really seeing what feels like a good structure for you. We obviously recommend the Get Shit Done kit from Creative Tim, you can see it and download it here:http://www.creative-tim.com/product/get-shit-done-kit. Some said ‘it has become a trademark for the online community of a clean and nice looking interface’. We are trying to build a standard, both visually and structurally.

Get Shit Done Kit
http://www.creative-tim.com/product/get-shit-done-kit

We are also big fans of everything Designmodo does, so have a look at their Flat UI, give their free version a try, they are totally worth it: http://designmodo.github.io/Flat-UI/

Flat UI Kit
http://designmodo.github.io/Flat-UI/

BootFlat is another great Kit that offers great customisation and offers great options for building an unique website. Find it free here: https://github.com/bootflat/bootflat.github.io

BootFlat Kit
https://github.com/bootflat/bootflat.github.io

PixelKit also offers a great looking UI Kit that you can download for free here: http://pixelkit.com/free-ui-kits/modern-touch/

Modern UI Kit
http://pixelkit.com/free-ui-kits/modern-touch/

You can see from the images that the Kits are very different estetically and they reflect certain styles. It is up to you to find the one that goes with your work. If you are still searching, check out these lists from Design Crazed and WebUIKits

We will continue to share and publish new UI stuff and tools to help with building websites as well as develop site specific patterns. Basic idea was obvious from the get-go, get your shit done!

--

--

Elena-Cristina Conacel
Creative Tim’s Blog

Web developer and owner of BootstrapBay. I like foxes, clean design, writing blog posts and creating themes that are useful to other developers.