Material Design vs Twitter Bootstrap

I’ve been arbitrarily using Twitter bootstrap for my projects for years now. This week, I cracked open the lid on Google’s design framework “material design”. The following is a comparison of the two design methodologies.

Twitter Bootstrap

This framework is comprised of some jQuery components, CSS, page components, and layout tools. When you get comfortable with using it, it ends up making the process of building a web application much faster and simpler. In the past, it used to be that you had to build an entire CSS codebase for your own custom theme, and then you had to deal with all of the various browser compatibility problems, and sites were always at risk of looking like garbage in some random web browser. Using Twitter Bootstrap eliminates almost all of those problems, and lets you focus on actual application value adds.

Colors in TB are basically up to you. You have two options for navbars, black or white. With buttons, you have green, blue, gray, orange, and red. These colors are meant to reflect states of severity of a button’s actions. Coloring a button red would be for an action that is permanent and irreversible, like a delete function, thus, the red button actually is called “btn-danger”, not “red”.

Javascript components are the part of TB that make the whole process awesome. There are all sorts of things that people needed to write custom jQuery for in the past, like scroll loading, auto-complete search fields, dropdown menus, etc. With TB, you basically just use the component HTML and CSS classes for it, and it then inherits that jQuery functionality. Its great. What they do here is pretty much the standard for other libraries, including Material Design.

Material Design

Material design appears to be Google’s answer to Twitter’s Bootstrap. After all, TB is so popular now that most web applications out there these days have some sort of visual flavor of the Twitter Bootstrap design style, and has made that design style somewhat ubiquitous in the industry. Google could stake their claim in the design mentality of web applications too by having something like Material Design, so it makes sense. Is it better? Eh, it serves its purpose, and it comes down to just what you like, visually.

Color in MD is actually more of a feature than it is in TB. In MD, you actually have a precompiled series of colors that you can easily use in any component in your whole framework. For instance, if you wanted your footer to be a darkened earthy orange, you’d append the class “deep-orange” and then you’d darken it by appending the class “darken-3” (where 3 means 3 shades darker). This is very cool, and TB could benefit from something like this.

The other thing that MD really pushes is the notion of visual depth to indicate meaning. I could not agree more with them. In fact, Twitter Bootstrap used to be this way, too, because from what I can tell, TB used to sortof mirror the look and feel of Apple’s design style. And Apple used to have gradients and shadows on things… however, at some point, this “depth” got thrown in with the movement to remove “skeumorphic” design elements. Skeumorphism is where you design UI elements to look like physical objects. While I agree that a UI looks lame if they have a “leather” background with “stitches” in it, having buttons with a flat solid color actually makes it hard to see obvious visual cues in a design, IMHO. Material Design is actually taking a stand here and saying depth is a good thing, and I do like that they’re doing this, because, really, with depth, you can see that something is to be interacted with!

Button feedback is interesting in MD. Because Google is really mobile centric these days, they’re really pushing for increased button feedback. So, whenever you touch a button, it makes a flash of gradient circular animation moving outward from the position of impact. They call this animation the “wave”. It’s cool, but, to me its not a game changer.

The Verdict

Overall, my attitude about it is that you really should, in general, use somethingĀ likeĀ one of these frameworks, even if you’re not using one of them specifically. You really do clear off your workload with one massive swipe when you import one of these libraries and free yourself from having to re-invent the UI and all of its interactivity. Today, I like the colors of Material Design, and I like the maturity of the library of Twitter Bootstrap.

Comments are closed.