
Material Design Lite - lobo_tuerto
http://www.getmdl.io/
======
lorenzhs
previous discussion on HN:
[https://news.ycombinator.com/item?id=9840682](https://news.ycombinator.com/item?id=9840682)

------
harrybr
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.

~~~
eloisant
Actually no, material design is suppose to unify design for the web and native
apps.

Many Google properties on the web are Material Design now (Play Music, Google
Photos, Google Plus...

~~~
mattmanser
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.

~~~
TranquilMarmot
I went to go add a new spreadsheet to Google Sheets and it took me at least
thirty seconds to find the big + button in the bottom right. It makes sense
(sort of) on my phone where my eyes can see the whole screen but on a monitor
I literally had to scan the whole page before finding the button (the bottom
right corner is the _last_ place I would look for something like that!)

~~~
mattmanser
Who knows what they were thinking when they thought that putting it down there
would be a good idea.

I personally have zero respect for Material, I think it's a complete joke.
Their previous redesign, as fractured as it was, was better thought out than
this not-at-all-responsive 'responsive' design.

~~~
Artemis2
Material has nice animations and transitions, but is a catastrophe of UX. Just
look at
[design.google.com]([https://design.google.com/](https://design.google.com/)).

~~~
mattmanser
I don't actually like the animations either, quite a few are really, really
bad. Fucking idiotic in fact, and I'm not saying that lightly.

The click/tap ones are the worst offenders. Why is the animation of the button
dependant on _where_ I click the button? Because it's an uneven animation my
mind immediately gets drawn to it and thinks "Woah, what just happened there,
did something go wrong? What was that".

And so after having done a simple action I spend a second or two with my mind
replaying what just happened to try and figure out if something's wrong or
not. And it still happens today, even though I know about it and I use several
interfaces with Material design extensively. Because it's not consistent.

It's literally the opposite of what an animation should be. It's incredibly
intrusive and unsettling instead of being subtle but reassuring you that your
desired action happened.

~~~
Artemis2
I haven't used much Material in real life, but that's what I suspected:
animations are nice, not functional.

------
pksunkara
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](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](https://github.com/pksunkara/react-mdl/tree/master/src)

~~~
dominotw
> I am working on React.js components for this.

Can you just use polymer though?

~~~
pksunkara
You can but I didn't like it and wanted to use react.js

~~~
dominotw
you can use both together if you don't care about server side rendering.

------
xdissent
We wanted to use MDL but had already committed to Stylus and weren't willing
to use a prebuilt MDL, so I am maintaining a Stylus port here:
[https://github.com/xdissent/material-design-
lite/tree/stylus](https://github.com/xdissent/material-design-
lite/tree/stylus)

------
aesthetics1
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.

~~~
minimaxir
Yes, it was released last month:
[https://news.ycombinator.com/item?id=9840682](https://news.ycombinator.com/item?id=9840682)

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.

------
eivarv
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.

------
nkozyra
Well this was certainly better than extracting the AngularMaterial CSS,
although I preferred the semantics used for the flexbox grid in the latter.

------
nightpool
Why does this have such a heavy penalty? @dang can you comment on why this
seems to have dropped off the front 3 pages?

------
ConAntonakos
Used Polymer for a part of my team's application, but it seemed too heavy.
Also, Polymer doesn't seem optimized for anything other than Chrome right now.
I think Polymer is great for the web components portion of it. But I feel MDL
might be better if you simply want the UI/UX design.

------
thom_nic
One thing I like about material vs e.g. Bootstrap is their treatment of
widgets. In particular, the range slider & toggle slider (checkbox
alternative) seem common but bootstrap doesn't address these.

------
flowerpot
Neat. Really like the approach.

Is anyone else noticing the distracting optical illusion in the logo when
reading the first paragraph on the landing page? If I am not the only one,
someone should find a way to fix it.

~~~
dboshardy
What are you seeing?

------
r3bl
The blog template[1] looks stunning!

[1]
[http://www.getmdl.io/templates/blog/index.html](http://www.getmdl.io/templates/blog/index.html)

------
pluma
Aren't the transitions between the icon states supposed to be animated? For me
(using the latest Google Chrome on Linux) they just jump from one state to the
next when hovering over them.

------
andreapaiola
Now I can Materialize your sites :D

[http://andreapaiola.name/magpie/](http://andreapaiola.name/magpie/)

------
Goranek
this feels so much faster than the angular material :/

------
PaulHoule
What the hell is this?

Does google pay fanbois to pretend that they want to tattoo themselves with
material design, have a material design toaster, have a material design car,
etc..

Material design is bad enough in Android we don't need it anyplace else.

