What is Material Design?

In case you’re completely profane to front-end development and user interfaces, Material Design is Google’s recent attempt at creating a unified UI/UX design philosophy, that is already being used extensively on company products like the Gmail app for Android, as well as by other companies like Telegram.

Material Design is a set of rules and principles about user interaction, responsiveness, colour, movement, positioning, and relationships between interfaces elements that tries to unify how applications look and feel on every possible device.

Looking for an usable implementation

Google has its own Polymer Project, which revolves around web components based on material design. We wanted something we could use straight away on an application, so we considered using MaterializeCSS, which despite being still in alpha status, is well documented and covers the basics very well in terms of layouts, components and CSS, as well as having several JS plugins to achieve certain effects. It even has a SASS based Rails gem, and just works out of the box.

In the end, we opted for CON, a theme based on MaterializeCSS that offers several other plugins for extended dashboard-like functionalities that went well with the app we were building.

Using it – Pros and Cons

The only (minor) problem we had to face was getting used to the class names MaterializeCSS uses for columns, as they’re slightly different from Bootstrap, to which we are more used to. Apart from that, it was fairly easy to grasp the way UI elements in material and the theme worked to layout our application rapidly.

Apart from that, it’s really easy to use and get something looking nice and working in little time. Anyway, our main concern was that we weren’t quite liking the appearance of our application. Material looks good, and the effects are nice when you get used to them. But after seeing several applications, it like its streamlines visuals a bit too much, not only inter-devices, but also making all applications look too similar, no matter which theme you are using.

In any case, we had this feeling that we weren’t really satisfied, so we ended up switching back to standard Bootstrap. We can work not only faster using Bootstrap, but feel more secure about how and when to use the UI elements we have at our disposal.

Conclusion

We think Material Design is a nice step forward in terms of modernizing how web applications look and feel, and the effort to streamline inter-devices design is great. Right now, material apps on mobile devices are working very well, but on desktop we feel there’s still something missing. Perhaps we need still to find out how to build UI’s on top of material design that use its principles and rules but “bends them a little” to make applications look less ‘vanilla’.

In any case, it’s really worth giving it a try and learning to use it. And coming from Google, it’s very likely we’ll be seeing more and more of it much sooner than we expect!

Photo ‘Free Texture – Old Material’ by Matt Andrews on Flickr, used under (CC BY-NC 2.0) license