All Bootstrap sites look the same. Here’s how I get around it.

Bootstrap makes your site look and feel good, but it also makes it look and feel like every other Bootstrap site.

Arman Hezarkhani
Last Updated
April 2, 2021
Topics —

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.

Parthean Interactive Lesson
How good is your design eye?
TEST YOUR SKILLS

Developing a Custom UI Kit

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.

Color

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.

  • Primary color: should be used most of the time -- around 60%
  • Secondary color: should be used 30%
  • Accent color(s): should be used to draw attention to the most important elements on the screen -- usually a CTA. Accent colors should be used only 10% of the time

Here are some tools to help you choose your colors:

Parthean Interactive Lesson
Why do some colors look good together?
LEARN MORE

Typography

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).

More Resources:

Basic UI Elements

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
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
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.

Parthean Interactive Lesson
How Spotify Creates Love
LEARN MORE

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.

One Last Thing

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!

Or try a free design lesson instead.
Thank you! Your first lesson is on the way!
Oops! Something went wrong.
"The Design by Parthean program has been mind blowingly great."
Jenny Han, Software Engineer
"I love the idea of improving one's self through a small commitment of time each day."
Nikhil Swaminathan, Student