Top 5 Material Design Frameworks to Use in 2015

Google's Material Design has taken the internet UI world by storm. Since it's arrival on Google's Inbox and then progressive across Google’s network sites, many web applications like Telegram have begun deploying the framework. Material Design has introduced us to a simple yet meaningful philosophy of modern UI design.

Google's Material Design

Material Design is one of the most comprehensive and polished design philosophies that we have seen in recent years and I suspect many of us will want to implement it in the coming year. So, let’s look at what I think are five of the best material design-based frameworks to use in your project.

Angular Material

Angular Material seems to be the big brother of all the material design frameworks that are available today because of Angular’s popularity and the fact that it’s supported internally at Google.

ANGULAR MATERIAL

The documentation, demos and the API reference is well written and comprehensive and portrays all the features that were specified by Google in it’s material design philosophy.

Materialize

Materialize is a responsive front-end design framework based on Material Design that you can use in your application just like Bootstrap. This is undoubtedly one of the most impressive Material Design frameworks. It provides both CSS and SCSS files along with JavaScript, material design icons and Roboto font.

You can use this framework just like Bootstrap by importing the CSS and you are good to go.

Materialize

The project is open-source and the source code of the project is available on Github.

Material UI

Material UI is a CSS Framework that makes use of React components to implement the material design philosophy. Although this framework is quite robust, you might want to skip it if you are not 100% comfortable working with Facebook’s React. Some newbies to React find it’s JSX (Javascript and XML) syntax quite unconventional.

The repository of this framework has good documentation on how to set up this framework and install React using npm (Node Package Manager). You can access the repository of Material UI here.

Material UI

MUI CSS Framework

MUI CSS Framework is a lightweight framework for sites and provides an easy ‘bootstrap-like’ solution for your front-end requirements. Since it is designed from ground-up, it is slightly faster than some of it’s competitors and it’s recommended to use in small projects, where the main focus is not the precise implementation of material design.

MUI CSS Framework

Interested in contributing code to the project? You can find it's repository here.

Polymer

Google’s Polymer Project which advocates the use of web-components for web development, has also released their own take on Material Design.

Polymer

The Polymer core elements set includes several elements for application layout, including creating toolbars, app bars, tabs, and side nav consistent with the material design guidelines.

The Verdict

So, perhaps you are considering implementing a Material Design UI in your next project? If so, I would advise that you start with the Materialize as this framework works just like Bootstrap with the elements accessible through CSS classes.

Maybe you've used Angular and have enjoyed working with Angular's Animation function? If so, then your best bet may be Angular Material, since it is very full-featured and backed by Google’s very considerable resources.

Material Design appears to have a very promising future in the UI design world. It is very well-researched and polished and we’re seeing more and more websites have begun integrating Material Design based frameworks each month.

So, are we looking at a long term design direction or is this a more fickle fashion trend? Personally I think there's every chance we may face a Material-Design-saturated future, just as we have a Bootstrap-saturated Internet right now.

What are your thoughts on the above mentioned frameworks? What material design frameworks have you used?

Replies

  1. So, I did a talk on Material Design at the Nashville UX meetup group last month. I cover some of these frameworks.
    You guys should check it out!

  2. Here's another one that I started using a few days ago: "Material" from Daemonite - http://daemonite.github.io/material/

    The problem with this framework is that it has no documentation :/, so you're left with DevTooling (did I just make a verb out DevTools? lol) with F12 all the time.

    So I might be switching to Materialize since it's documentation is so good.

  3. Thanks. Will watch the video.

    Have you reviewed the Foundation Zurb material design framework?

    I have been using the Foundation Zurb responsive design framework for about 2 years and I have to decide whether i will use their material design framework with their responsive design framework or use a different third party material design framework with their responsive design framework.

    Does anyone see an issue with using Foundation Zurb with Materialize ?

    Thanks in advance,

    Braulio

  4. Also an avid foundation user. Trying to not get overwhelmed with frameworks! Somebody reply to this thread if you know anything about comparing the two.

13 more replies