How to Build and Market a Successful UI Kit
The story behind the Paper Kit
The main challenge that me and my team at Creative Tim have faced since day 1 was how to make our hobby an economical way of sustaining ourselves. To do this, we had to learn how to build beautiful UI Kits that people actually want to use and how to get them in front of users. After a few tries and a lot of effort put into it, we have understood a couple of things that we think can help anyone trying to get into this space.
During the first couple of months, my partner Alex was in charge of the development for the products. After we started getting traction on some of the kits, we got feedback from our customers saying they wished we released more. So that was the point that I have gotten myself involved directly into the coding for the product. Keep in mind this was my first try.
During this article I will try to explain as best as I can my efforts in creating and then finding an audience for one of our most popular kits: the Paper Kit. I will try to give as much details as possible, so the result is like this picture describing how to draw a horse:
A couple of years ago I saw a quote on twitter. It goes like this: “Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” It is attributed to Abraham Lincoln. This made a lot of sense for me and really changed my perspective on the way I approach work.
I used to be a really get-shit-done kind of person, powering through the tasks. Over my years of work I have learnt to be more patient, sharpen my axe. How does this translate to developing and UI Kit? Basically, research. Before writing any line of code I have inspected all UI Kits I found on the internet.
Markets such as ThemeForest and BootstrapBay have a great variety of themes. Most of them are built for a specific purpose. They usually do a great job if you are trying to build a specific presentation site. But we wanted to build something that a back-end developer can use with a complex project. So we shifted my attention towards real complex sites like Airbnb, Uber, Twitter, Paper53 etc. What elements do they use? What design do they prefer?
The elements
After going through a lot of sites with different purposes: presentation, portfolio, social, we came up with the list of the elements that are the core:
- buttons
- inputs
- checkbox/radio
- navigation
- dropdown
- progress bars/sliders
- menus
- typography
- images
- notifications
- labels
- carousel
These cover over 90% of the functionality you need to build a page.
Design and Development
One of the biggest trends in design at the moment were Material and the iOS flat look. I really liked those, but they weren’t my style. I wanted to build something playful, fun, easy to follow. I went on a lot of mediums for designers, like Dribbble and Behance. But I eventually settled on the design of some really cool sites that I used myself: Paper 53 and Headspace. I thought they looked great and they had a really calming effect when you navigated them.
So I created a colour palette with 6 colours, to cover the basic classes for Bootstrap. All backgrounds are trying to resemble sheets of paper and the animations are meant to imitate the movements of a piece of paper. For the fonts I went with a free font offered by Google Fonts. It’s called Montserrat.
A kit can be very useful but often people don’t understand how to use it. So I created 3 example pages: a Login, a Profile and a Landing Page to show what you can build with it. People could also use them directly when building their projects.
The development meant creating SASS files for every components. These Sass files were compiled to CSS and added after Bootstrap. So, someone who already has a Bootstrap project can just add the custom files and get the new design. The Javascript modifications were minimal since we only played with the default animations for some of the default elements in Bootstrap.
After developing the elements, we tested them on all browser and device screens. A great tool to do this is this. And the final part of adding the images. I got in touch with some of my fav artists on Paper 53 and asked them if it is ok to use their drawings. And they were happy to do so :)
The good news is that making all the former preparations led to a total development time of 3weeks. Iuhuu!
Promotion
When everything was ready, we have posted the kit on Paper Kit. We have also shared the kit with a couple of friends so they could let us know if they found any bugs we missed. When everything got the green light, we did some inbound email marketing campaigns announcing the kit (to the users already subscribed on Creative Tim). The feedback was positive so we reached out to some communities. We got great responses on Hacker News, Product Hunt, Reddit. Even more, some picked it up and used it for their own work. Take example Chris Pena, who did a video tutorial with it.
Since most of the items we used to create the kit were open-source we thought it was only fair we also release it for everyone for free. So we created a repo on GitHub and everyone can contribute to it.
Maintenance
After lauching it, we discovered new things we had to take care of.
The best way for us to sustain our activity moving forward was making a PRO version that users will be able to pay for. So we looked back to the features we overlooked when we first made the plan for the kit. We took those elements and built a bigger pack. The product was a hit and a lot of the people that used the free kit were happy to upgrade and develop their products even more easily.
This gave us the time to also develop a dashboard with the same design. This integrates nicely for the back-end. So, if you are building your presentation and the part that the user interacts with using the Paper kit; the Paper Dashboard makes for a great admin. We have also open-sourced it and received positive reviews.
In the future, we plan on creating more versions for the product. The Sketch is already available and we are also building the PSD version. We have started creating the Angular version, this is one of the biggest request from our users. And we are looking into ReactJS, VueJS, etc.
If you are interested in collaborating with us, send me an email at cristina@creative-tim.com
