October 29, 2015

An Introduction to Google’s New Framework: Material Design Lite

Awhile back, Google introduced the Material Design Language, which has been adopted by a lot of different libraries and frameworks. Google recently introduced their own implementation for the web in the form of Material Design Lite (MDL), which is usually a Flat Design Framework.  It also uses grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows, but more liberally and effectively.

According to Google, their design language is based on paper and ink, meaning just as paper renders expansion and shadows in the physical world, digital components replicate the same behavior in applications using this new design language.

Before getting started with MDL, I had a few doubts because there are multiple frameworks available in the market. So why should I use MDL? I’ve unpacked this question, as well as subsequent ones that come up when answering it, below.

Why should we choose MDL over other frameworks available?

In terms of advantages and disadvantages in a technical sense, there is no solid reason to choose MDL over any other framework. However, Flat design is generally easy to pull off with basic CSS3. Graphic effects made purely in CSS would cause a huge performance decrease past just loading the file because of gradients and box shadows, among other issues. This is where MDL has an advantage, with its capability to create a lightweight app without using complex CSS.

Is it developer friendly?

MDL is framework-agnostic, which means it can be used with any front-end solution. The tools are responsive and will function on any modern browser, such as Chrome, Firefox, Microsoft Edge, Safari, and Opera.

How does MDL compare to other frameworks with rich graphic app designs?

The material is too minimalist, but I hope that Google will incorporate more richness into its mobile design because we have a more powerful device that can render graphics and images more efficiently than ever before.

The Google Play Store, for instance, is a good example of the use of Material Design. It has nicely placed content with so many colors and sections in it, but it still looks very edgy and neat.

On the other hand, there are a lot of applications that don’t have that much content and therefore don’t need that much color. The problem, then, is that Material Design was designed for apps that have a lot of stuff going on, while the simplicity of basic geometric shapes and bright colors work to compliment the complexity of the application itself. That’s why when you see things like the Google Play Store with Material Design, it looks extremely impressive.

In conclusion, MDL is suitable to develop mobile apps and business-related software or web apps. Softwares for banks, e-commerce, BPOs, and people management tools can be easily built with MDL because it provides a light appearance and clean interface, which is clearly visible on hand-held devices. For more information, you can visit the Material Design Lite website or their home on Github.