Honest question: why would you want to use this? Material design is intended for Android native apps isn't it?
It strikes me as a strange idea:
- Material design uses lots of UI idioms that work well for an OS (user will learn them), but not so well for a website (that needs to be instantly usable on first use, or user will leave for a competitor). The overflow icon (three vertical dots) is one example.
- Material design is the Google "branded" look and feel. No sane web business would want to give up their own look and feel. It even strikes me as a weird choice for @minimaxir's personal blog. If you're going to skin your site with another brand's look and feel, why not Uber? Amazon? etc?
- It's never going to feel quite right. Uncanny valley between native app and website.
And generally have really awful experiences on both desktop and mobile.
On desktop there is tons of wasted space, key actions are generally hidden behind pointless hidden menus or silly + buttons that do multiple things even though there's loads of space to fit multiple buttons. Google Drive, Sheets, etc. are total jokes now. And I personally find Google play music is an incredibly bad user experience now for my habits. I like listening to my thumbs up playlist (unnecessarily hidden behind a slide out menu) and I like seeing my shuffle playlist (hidden behind a button that opens an idiotic floating modal).
On mobile, everything is too spaced out so you can only see 5 out of the 50 things you might need to actually see. A perfect example is the calendar which is an unusable joke compared to the old one. Another good example is the new clock app where the alarms only show 3, and the timers are bizarrely stacked with only a tiny indicator showing there are multiple timers running.
Material is a tablet design paradigm masquerading as a total solution.
It is not only intended for mobile. Check out https://developers.google.com/ for what I think is a great use of material design. I agree that using it in your site may be somewhat Google branding of your site though.
>Honest question: why would you want to use this? Material design is intended for Android native apps isn't it?
Material Design aims to be a design language for any form factor, including the desktop. Some Google properties on the web have already started moving to a more 'material-esque' design, like Photos or Drive. The reasoning is that some metaphors can be borrowed so there is a much familiarity as possible when discovering the same app on another form factor.
Material is not supposed to be uniquely Google branded but Google might have dropped the ball here when they decided to use it on their iOS apps as well. Their justification is that most many material elements have been used in iOS apps before,which is true, but they might have wanted to find a middle point instead (use the parts of material that feel native to iOS, ditch the rest).
I've noticed that some designers are really copyists. They can't create an original look for a website. They merely copy whatever style is popular. They moved from faux wood finishes to completely flat, and now they seem to think "material" is a design movement, and not a limited set of guidelines from Google. No doubt, they will get jobs making everything look material, until the next fad rolls along.
This is such a cool move from google. Doing material design in HTML/CSS/JS is pure win.
I am working on React.js components for this. I have already did half of them. Check out https://github.com/pksunkara/react-mdl. I welcome any contributions.
Thankyou. Until I saw your comment, I had no idea this came from Google. The domain is http://www.getmdl.io/, the site doesn't mention it, and a "lite" version sounds unofficial. The only clue is the Github icon links to https://github.com/google/material-design-lite link.
I also started the same thing a few weeks ago but I chose a different approach. I decided to use their `upgradeElement` function to upgrade the component, instead of re-writing everything.
https://github.com/tleunen/react-mdl
I think this has been around for a little while. I remember seeing it pop up on my feed.
I think it's a great idea, but a lot of the animations are still a bit clunky (slow/choppy). Polymer still has the leg up, but this is neat for projects where you know your user base won't have access to the latest and greatest browser.
I'm looking into using MDL for a redesign for my blog. Some of the layouts (e.g. the navigation and cards) seem more efficient than using Bootstrap.
> Polymer still has the leg up, but this is neat for projects where you know your user base won't have access to the latest and greatest browser.
MDL only loses support for IE9, which a) has a low market share b) will drop market share further as Win7 users upgrade to Win10 and c) heavy-duty websites have been dropping support.
I really don't understand the hype surrounding material design.
I get the widgets as "material" metaphor, space, motion, etc., but as I understand it the redefinition of every widget's appearance and ignoring UI conventions is the opposite of good design.
The new design language (Material Design) is not made with any apparent metaphors in mind (e.g. the "tabs" are just plain nonsensical as elements), do not convey the system status or their use in any intuitive way, and is inconsistent with the widget look users are already accustomed to (as defined by their systems and by history).
As others have mentioned, it's hard to see any real value in this outside of Google's own systems.
Readit News
It strikes me as a strange idea:
- Material design uses lots of UI idioms that work well for an OS (user will learn them), but not so well for a website (that needs to be instantly usable on first use, or user will leave for a competitor). The overflow icon (three vertical dots) is one example.
- Material design is the Google "branded" look and feel. No sane web business would want to give up their own look and feel. It even strikes me as a weird choice for @minimaxir's personal blog. If you're going to skin your site with another brand's look and feel, why not Uber? Amazon? etc?
- It's never going to feel quite right. Uncanny valley between native app and website.
Many Google properties on the web are Material Design now (Play Music, Google Photos, Google Plus...
On desktop there is tons of wasted space, key actions are generally hidden behind pointless hidden menus or silly + buttons that do multiple things even though there's loads of space to fit multiple buttons. Google Drive, Sheets, etc. are total jokes now. And I personally find Google play music is an incredibly bad user experience now for my habits. I like listening to my thumbs up playlist (unnecessarily hidden behind a slide out menu) and I like seeing my shuffle playlist (hidden behind a button that opens an idiotic floating modal).
On mobile, everything is too spaced out so you can only see 5 out of the 50 things you might need to actually see. A perfect example is the calendar which is an unusable joke compared to the old one. Another good example is the new clock app where the alarms only show 3, and the timers are bizarrely stacked with only a tiny indicator showing there are multiple timers running.
Material is a tablet design paradigm masquerading as a total solution.
Material Design aims to be a design language for any form factor, including the desktop. Some Google properties on the web have already started moving to a more 'material-esque' design, like Photos or Drive. The reasoning is that some metaphors can be borrowed so there is a much familiarity as possible when discovering the same app on another form factor. Material is not supposed to be uniquely Google branded but Google might have dropped the ball here when they decided to use it on their iOS apps as well. Their justification is that most many material elements have been used in iOS apps before,which is true, but they might have wanted to find a middle point instead (use the parts of material that feel native to iOS, ditch the rest).
To be hip obviously. Not for usability reasons, that I can assure you. :)
I am working on React.js components for this. I have already did half of them. Check out https://github.com/pksunkara/react-mdl. I welcome any contributions.
EDIT: Components can be seen at https://github.com/pksunkara/react-mdl/tree/master/src
Can you just use polymer though?
I think it's a great idea, but a lot of the animations are still a bit clunky (slow/choppy). Polymer still has the leg up, but this is neat for projects where you know your user base won't have access to the latest and greatest browser.
I'm looking into using MDL for a redesign for my blog. Some of the layouts (e.g. the navigation and cards) seem more efficient than using Bootstrap.
> Polymer still has the leg up, but this is neat for projects where you know your user base won't have access to the latest and greatest browser.
MDL only loses support for IE9, which a) has a low market share b) will drop market share further as Win7 users upgrade to Win10 and c) heavy-duty websites have been dropping support.
I get the widgets as "material" metaphor, space, motion, etc., but as I understand it the redefinition of every widget's appearance and ignoring UI conventions is the opposite of good design.
The new design language (Material Design) is not made with any apparent metaphors in mind (e.g. the "tabs" are just plain nonsensical as elements), do not convey the system status or their use in any intuitive way, and is inconsistent with the widget look users are already accustomed to (as defined by their systems and by history).
As others have mentioned, it's hard to see any real value in this outside of Google's own systems.