Material Design vs Non Material Design – Web Designing Dilemma

Material Design vs Non Material Design – Web Designing Dilemma

When it comes to design a web based application, most of the designers have to think whether to go with the Non Material Design using well established and stable frameworks like Foundation or Bootstrap, the Material Design with new frameworks like Google MDL, Angular Material. But there are few points worth noting before starting with some designing strategy.

Foundation and Bootstrap are two of my personal favorite frameworks for designing web based applications. But from the last few months, we are working on material design using Angular Material. The decision was just because Foundation & Bootstrap don’t have an official Angular port and we haven’t tried the Material Design Strategy yet.

As we started developing with material design, we found that it’s not just a design, it’s an art of simulating real world objects inside the browser and to make it happen, it follows strict guidelines and design constrains. Material Design is not just about using material frameworks, it’s about implementing the the Material Design Concept into your application. For example just implementing a FAB button does not turn your application or site into Material Design, rather this Floating Action Button (FAB) is a very distinctive Material Design UI element and it should be used only for the key action in the application, that is the real design constraint.

This material UI looks cool, as it provides out of the box UI components for use and implements the real world objects. It also comes with built in animations that eliminates overhead of handling it. UI looks fantastic. But definitely “NOT” easier to use than non-material design (as opposed to many people think) – the reason being – we are using non material design since long time and are well familiar with it, while Material Design is quite new. It also uses animations, not all systems are be able to pull off the intended frame-rates. And it can be hard to know what, if anything, you can do to improve usability for those who can’t. One of the many reasons, people don’t prefer Bootstrap much, is because of it’s uniform look and feel. The same thing is with the Material Design, as it is inextricably tied to Google and will look similar to Google sites and apps. So if you want to distance yourself from the crowd, and create a unique identity for your site, it will be a hard task.

On other hand, we have mature, stable frameworks like Foundation and Boostrap that enables you to quickly design site which are less resource-intensive, and produce shorter loading times and much smoother experience even on mobile devices, thanks to mobile first design approach. And the most important thing, people are familiar with these sites and hence it’s easier to portray the contents in easiest possible way. For developers, these frameworks can be easily installed with front-end dependency management tool like Bower and are available as SASS that helps faster development and makes developer’s life easier.

So now we have, non-material design strategy on one side, which focuses more on usability than aesthetic component, which has more lightweight design, more stable and mature frameworks and focuses on content than visual attraction and are extremely mobile friendly. On other hand we have material design, which provides an elegant minimalist look of design, focuses on simulating real world objects using shadows and motions with which you can definitely show-cast your creativity and thoughts.

Ultimately the choice is yours, whether you want to go the usual, easier way or the better, difficult way!!