Why Use Twitter Bootstrap? Because I Said So

Written by Patrick Cox on 27 Mar 2013
31,856 Views • Web Development

Most "Why Choose Bootstrap" posts focus on the framework; how easy it is to implement, how it can save you time, how customizable it is and how it uses a responsive grid… you know the same old song and dance. As a designer myself, I wanted to write a post on why I prefer to use Bootstrap from a design perspective. I've heard a lot of designers complain about Bootstrap and how it is just homogenizing web sites and apps, and if your a designer you should be designing your own interface.

For me Twitter Bootstrap is a wonderful design tool because as a designer I don't have to focus so much on the UI components and focus more on the overall design of the app and its users. Let's face it, for the average little website Bootstrap is kind of big framework to use and it's really probably overkill. But for web based applications and large data driven and heavy interactive websites it's a fantastic design tool. We live in a web that demands more from it's designers; better visual design, better interactive design and better information architecture and Bootstrap is a great frame work to help designers and developers meet these standards.

I've put together a list of reasons why I believe you should start using Bootstrap, not only from development stand point, but from a design stand point. Along with my list of reasons I've sprinkled in some great design examples of sites and apps that are using Bootstrap to improve their designs and usability.

Reasons

Fast and Flexible.

Okay, we have all heard that Bootstrap can save us time and it's very true, Bootstrap will save you time. You don't have to think about the UI as much. You don't have to design the UI structures and the foundational elements. Beyond that, the best part is that you don't have to stress of the interaction design of a combo box, a popover or transitions. Bootstrap has already designed easy to use and powerful interactions so all you have to think about is which component will best suit your users.

 

Consistency.

This can be one of the hardest design principles to implement inside a large application or website. Straight out of the box Bootstrap is consistent, not only in its visual design, but more importantly, its interaction design. Consistency is a huge factor in creating an amazing user experience and even with some customization Bootstrap will still remain consistent. Bootstrap allows you to build better relationships and trust with your users because your not changing and altering UI components between views.

 

Blends In and Doesn't Distract.

A great user interface is basically invisible. As a designer you don't ever want a UI that is so distracting a user can't access the content they want or accomplish their goals. Bootstrap is not real flashy, it stands out when it needs to and blends in when it needs to. Bootstrap UI feels and acts more like a tour guide than a hurdle or stumbling block.

 

Promotes Interaction.

Bootstrap is a great way to add interaction and animation to a web site or app without really doing the heavy lifting. It promotes a more intuitive and interactive web site because it has done the work for you. Look, interactions are really hard things to design, test and build. Bootstrap can solve some of these hard things since the majority of interaction has been done for you already and like I said early you can focus on the larger, more critical design elements like how a user will flow through and app and extract its contents with ease. Interactions are fun and Bootstrap is a great, simple way to add slick interactions and animations to your site and app.

 

Appearance Follows Behavior.

A monstrous principle of any really will craft design is "form follows function" and Bootstrap does just that. Bootstrap behaves the way it's designed and users love thing that behave the way they are designed - users like to be comfortable and not feel like they've been tricked. Bad UI doesn't correctly represent what it supposed to do with what it looks like its supposed to do. Visually, the UI components represent exactly what they are supposed to and not only from a functional standpoint, but also from a feedback stand point.

 

Predictable.

This compliments "form follows function" a bit, when the appliance follows behavior the appearance and behavior start to become predictable and predictability is a huge plus when your design needs to be usable.This, combined with the consistency of Bootstrap, make Bootstrap hugely predictable, almost boring. But this is what you want from a great UI, you want predictability, your want reliability and you want clear and fun animations and interactions - Bootstrap accomplished this.

 

Hierarchy.

Most of the time we don't associate UI components and hierarchy. We generally think of them as just buttons, inputs, warnings and drop downs. But when used an a site, Bootstrap does create a great sense of hierarchy - not only visually but functionally as well. From it's use of 'primary' and 'secondary' buttons to the positions and relationships between components, Bootstrap does a fine job of directing the users eye through strong visual relationships to as well as guiding the user through its interactions.

Conclusion

There are a lot of reasons why designers and developers have chosen to use and implement Twitter Bootstrap on their sites and apps. In every case, one of the main reasons will always be how fast and easy it is to use. But Bootstrap is not only just a quick and dirty way to create clean interactive designs, it's also a great set of design tools that can be used to improve the over all design and user experience of your application or web site. To be fair, Bootstrap is not going to be a great solution for every interaction design challenge but what it is, is a very well thought out and well designed and well tested framework that enables today's web designers to accomplish all of the many tasks and demands that are required these days.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

8 comments
Simon 11 years ago
Great article, Patrick! We totally agree with you 100%... Bootstrap can help almost any site. For most it's probably a starting point... But it's definitely one of the best ways to start a new project or revive an old one.

Don't forget, if you're looking for inspiration and motivation, check out http://builtwithbootstrap.com for new sites and apps daily
Reply
Nizar Ben rachid 11 years ago
Impressive post. No doubt ; Twitter Bootstarp is really THE MASTERPIECE for webdesigners looking perfection and distinction.

I have Wappalyzer extension installed in my chrome browser; and believe me when i surf in internet; the first think; even before looking what the website is talking about ; i check if Wappalyser has detected the blue icon or not ; if yes i say this should be added to my favorites ... there's a tons of sites using it !!! so the better idea is looking sites referencing the well designed web sites based on Bootstarp ...

For twitter bootstrap lovers like me ; you should 'urgently' bookmark this : http://lovebootstrap.com/ ... i think some mentioned sites come from; any way enjoy

thx Patrik
Reply
cuckoo 11 years ago
Sometimes i don't really get it why everyone so obsessed with bootstraps just because everyone is talking about it and using it. No one here thinks that foundation - zurb does a better job?
Reply
MAC Design Inc. 11 years ago
Great post! Its is very useful & informative post & Thanks for sharing.
Reply
Ray 11 years ago
Finally, people are realising the beauty of bootstrap! It really is an exceptional thing to add to your web dev arsenal.

I've found this site to be a *great* resources for themes:
http://www.bootstraptheme.net/
Reply
Aaron Brewer 11 years ago
People will never learn underlying code is they obsess over frameworks and libraries. Frameworks and libraries are only promoting laziness and the inability to learn how to build something themselves from scratch.
Reply
RCBX 10 years ago
u use cellphone..imagine building it yourself..
Reply
smart ass 8 years ago
Yes, I can imagine that.

Aaron has a very valid point. He hasn't said you should write all the code you want to use, he was saying that it's a good idea to get your hands dirty and *understand* what is going on under the hood. If you haven't, then you are a designer. Oh, whoops, I just realized you guys are designers. Sorry. You guys should totally stick to Photoshop. Let someone who understands programming do the dirty work.

Either don't be afraid of the CPU or just stick to GUI stuff. There are too many people who don't want to understand what is happening and yet want to program. It's a bit of an oxymoron. Where is my flying car already?!?
Reply