Creating a high-quality user interface is a ton of work. It requires a cohesive brand and an understandable user experience. As engineers, we often don’t have the design skills to meet this bar or the time to write all of the custom CSS.
But this is a solved problem. CSS Frameworks like Bootstrap and Bulma give us simple yet powerful styling, out of the box. With one import line, we have tons of classes to pull from, giving us a cohesive brand and understandable UX with ease. It also presents a problem.
I’ve been a web developer for 7 years and I can easily call out a website’s CSS framework from a mile away. Bootstrap makes your site look and feel good, but it also makes it look and feel like every other Bootstrap site.
So these CSS frameworks are great for getting started -- I particularly find their grid systems useful -- but if you want to take your site to the next level, you have to develop your own, custom UI Kit. Below, I’ll show you how.
A UI Kit determines what your buttons, text, and other elements on your interface will look like. By defining and designing these elements beforehand, you’re able to build a more cohesive design system and save yourself more time in the future.
Every established company has a UI Kit. Here are some for reference:
As companies grow, their UI kit will be more elaborate. In the examples above, you’ll see direction on UI elements as well as imagery, iconography, philosophy, and language.
To get started, though, you just need the basics. Specifically, I’ll walk you through making decisions around Color, Typography, and Basic UI Elements.
Every element on your page uses a color and its color will determine its usage. For example, a bright green button will likely draw more attention (and thus, more clicks) than a light gray button. And a bright red button will inherently invoke some caution on behalf of your user. In addition to impacting user behavior, color elicits emotion and can define your products look, feel, and brand.
In short, color is important and so you should be intentional when choosing your colors.
First, it’s helpful to break your colors into three groups: primary, secondary, and accent.
Here are some tools to help you choose your colors:
Like colors, you’ll want to keep the number of types on your screen to a minimum -- specifically, I’d recommend you use no more than 2 typefaces in a page as additional typefaces increase cognitive load.
Typically, sites will choose 2 fonts, or a font pairing, for their site (see examples on Font Pairings). One of the types will be a Serif (the ones with the squiggles, like Times New Roman) and the other will typically be a Sans Serif (the one without the squiggles, like Arial).
Next, it’s time to put these together and design the actual UI elements for your site. This’ll include buttons, input components, navigation bars, and cards.
Buttons are the most important element in your UI Kit. They drive behavior, provide information, and give the user feedback on their actions.
In your site, you can get away with designing two types of buttons: primary and secondary. Your primary button will be for the main calls-to-action, while the secondary buttons will be for other actions on your site.
To make sure your buttons are providing proper feedback to the user, you’ll need to design their individual states, including: idle, hover, disabled, pressed, and active.
Input components allow users to engage and communicate with your application. Combined with buttons, you can create forms and entire web applications.
As with buttons, you’ll want your input components to provide feedback to your users. As such, you’ll need to design their individual states, including: empty, filled, and error.
Let me be clear: CSS frameworks are not the enemy!
Bootstrap, Bulma, and other CSS frameworks are incredibly useful for quick web development and I still use their grid systems from time to time! But by developing your own simple UI Kit, you can establish your own brand while still taking advantage of the speed and agility afforded by these frameworks.
Thanks for reading! If you've read this far, I hope that you found it useful. I'd really appreciate if you'd share with your friends and colleagues.
We're growing a design for non-designers community where we curate free 5 minute lessons to help you get smarter every day. For more design tips, case studies, and principles, join our community!