
Material UI - eskimobloood
http://material-ui.com/
======
tomelders
I had a talk with myself at the weekend about making a concerted effort to cut
out the snark when I comment on the web.... And I'm about to fall at the first
hurdle.

Being "on trend" isn't good UI design. But I can see how we got here. Through
OS X and iOS, Apple's UI ethos became the gold standard in UI design. It was
so well designed that it was easy to imitate and by simply adopting the core
elements of Apples UI language, stuff became intuitive and usable without the
designer needing to understand "why" something looked the way it looked.

And then came a new trend, the current trend, that appears to me to be rooted
in nothing more substantial than a desire to replace the old with something
new at all costs. And when the likes of Apple and Google fall for the same
trap, it's nigh on impossible for fundamental UI design knowledge to make
itself heard above the noise of a million designers advocating the new and
pointing to Apple for credibility.

You can see that I don't like Material. I also don't like iOs's new UI
language. It doesn't work. Ive seen no evidence that it's any more useable and
I struggle everyday to make sense of software and tools that have adopted
these new trends so anecdotally, I have to say to myself that we're going the
wrong way.

~~~
orbifold
The current trend is rooted in the fact that computer displays approach the
visual fidelity of paper prints by now (> 300dpi). Consequently a more print
like design language is adopted, which often features a small selection of
colours and simple geometric shapes.

The large variety in print design demonstrates that this is not an
unreasonable restriction. In my eyes the translucency of windows in Yosemite
is a much nicer choice than "brushed aluminium" or "black with fake
highlights", it does not pretend to be something it is not. Eventually I would
prefer if the "Desktop" metaphor, including "Folders", was given up and
replaced with something different. The faster the design language becomes more
abstract to facilitate that change, the better. We are stuck with an overall
UI design initially conceived in the 70s, alternative versions of personal
computing like the Lisp Machine died unfortunately.

~~~
petilon
Unlike print, computer user interfaces are interactive. When you adopt a
print-like design language you remove cues that indicate how to interact with
the interface.

For examples of how Apple's new UI is less usable than their old UI see:
[http://uxcritique.tumblr.com](http://uxcritique.tumblr.com)

~~~
smt88
I wish I could up-vote this a thousand times.

I often tap things that are just rectangles and fail to realize that other
rectangles are buttons.

I can't wait for "everything is flat, two-tone, and rectangular" to be
replaced by whatever the next trend is. Hopefully something more useful.

Ironic note: the flat trend was really made mainstream by Microsoft when it
released Windows Phone 7.

~~~
AtTheLast
With flat design, sometimes it's really hard to know what you are suppose to
click on. I enjoy its simplicity, but it does have some usability problems
that come with it.

I think we went way overboard with it and the pendulum swung to far to the
side of flat design. Hopefully we start moving away from super trendy flat
design, much like we moved away from those crazy web 2.0 design styles.

~~~
peterchon
flat design is trending because we have so many "designers" who can't design.

~~~
AtTheLast
What do you think separates a "designer" from a designer?

~~~
tomelders
I would say Consideration. I am a designer, and I work with lots of designers.
Design is harder than it looks and even brilliant designers don't get it right
100% of the time, but I can see a clear difference between the types of
designers whose work "looks right" and designers who have approached a brief
with the aim of figuring out what "works right".

It's easier to be the former than the latter both in terms of skill and the
politics of the client relationship, and that's why there are so many
"designers" and so few designers.

~~~
nazka
Yes. A real designer isn't just a UI artist. Art is one skill among others. A
real designer should also understand: UX, human behaviour and interaction,
logic, visual language (architecture, shape, color, animation) and other
skills...

Most designers don't get it right because they don't have these skills, they
are only artists. And because of that they don't understand why a particular
design is better than another or even what their own design expresses.

To do a real design, it asks you to do a ton of research and going back and
forth between art and UX. Doing brain storming to implement old and new logic
elements in a fashion way.

It's like the iOS 6 it was a big step forward because it was a design: simple,
expressive, and functional. The guys who created it understood all of that.
Then again, Apple followed the fashion trend more than the logic and did the
iOS 7 design criticized even before it was out. The problem, among its
specific fashion, was that the design was so flat it was destroying UI
information. Plus visual problems: sometimes the color seems to mean something
but you find one red button that isn't one, sometimes the shape, sometimes the
animation...

Here is an example of what a designer should do to design a UI.
[http://blogs.msdn.com/b/visualstudio/archive/2013/06/27/desi...](http://blogs.msdn.com/b/visualstudio/archive/2013/06/27/designing-
the-visual-studio-2013-user-experience.aspx)

------
franze
[http://material-ui.com/#/components/dropdown-menu](http://material-
ui.com/#/components/dropdown-menu) really? how can this be good usability.
it's text and an arrow far, far away. this could be anything and does not in
any way imply any kind of select action. if this is really implemented after
the material design spec of google, than oh man, google really has an issue.

~~~
colinramsay
Here's the Google spec for this:

[http://www.google.co.uk/design/spec/components/menus.html#me...](http://www.google.co.uk/design/spec/components/menus.html#menus-
usage)

If you look at the menu with "All", "Family", "Friends", "Coworkers",
initially it shows "All" and the arrow is immediately to the right of the
text. I expect that if you select "Coworkers" then the arrow moves.

~~~
clay_to_n
Yeah, I think standalone it should have the arrow right at the end.

When the dropdown is used in a form, it should have an underline, like so from
the Material spec: [http://material-
design.storage.googleapis.com/publish/v_1/qu...](http://material-
design.storage.googleapis.com/publish/v_1/quantumexternal/0Bx4BSt6jniD7MHBnQlFGeFRtYTQ/components_menus_usage5.png)

~~~
calinet6
Yeah, let's not consider every copycat that comes along a valid and complete
implementation of good UI guidelines... This one surely is not.

~~~
xg15
The problem is that many people will use those copycats as the basis for their
own app designs. Not everyone is willing to really understand the reasoning
behind the design spec down to such minute details as an arrow placement if he
can be hip and trendy with something that superficially looks like the same
design.

If a design is so easily misunderstood with such (comparably) large
consequences for the user, that's a flaw in the original spec IMO.

~~~
calinet6
I don't believe it's easily misunderstood; I think people just don't know how
or why to create a quality implementation based on an original. The spec is
actually remarkable in the level of depth it goes to teach you not only about
the design guidelines themselves, but also the reasoning and psychology behind
it. Really, it's probably the best full on UX specification ever produced (and
I'm not saying that lightly).

It just shows that it's very difficult to get this stuff right. There's still
going to be a bell curve, with most implementations and copies ending up in
the mediocre middle, but overall, the guidelines might bring the quality of
the overall market up. That's all we can hope.

------
colinramsay
The comments thus far are disappointing. People go to the trouble of making a
pithy comment on hackernews, but surely since many of us here are developers
we understand the frustration of bad bug reports. Is it so hard to bottle up
your negative comments and spend another two minutes doing something
constructive - like heading over to github and adding an issue with your
system specs?

~~~
xorcist
It's not "negative comments" to point out to other people what works and what
doesn't.

Complain as much as you want about how I don't push fixes, but as long as I'm
not paid those complaints are better kept to yourself.

(I realize you are not one of the developers for this project. I only want to
illustrate how negativity goes both ways. I'm a bit tired of "contribute or
shut up". There's a big gray area inbetween.)

~~~
Mbvhfchffdsr
It's kind of strange how there's a whole generation of young developers who
are supposedly «hurt» by perfectly valid criticism of objectively flawed or
bad work.

This wasn't always the case. Before the whole «social justice» movement
infected the software development industry and hobby, it was expected that bad
work would get publicly criticized. This was a good thing, because it fostered
improvement, and high quality work. But now that apparently all takes a back
seat to making sure nobody has «hurt feelings».

~~~
xorcist
It needn't be bad, even. Pointing out a bug in the comment field is somehow
"negativity", while working through the bug tracker of github is
"constructive".

In this case one could say thank you for the input and register the issue
oneself, if the project was dear to ones heart.

I wonder if it is a product of young developers being told to build a public
github profile, that they are increasingly careful about?

------
some1else
Similar efforts:

1) Angular Material Design

[https://material.angularjs.org](https://material.angularjs.org) \- _Good,
light framework, but intended for Angular apps_

2) Materialize

[http://dogfalo.github.io/materialize](http://dogfalo.github.io/materialize)
\- _Beta stage, follows Material guidelines closely, incomplete though_

3) Leaf Framework

[http://getleaf.com](http://getleaf.com) \- _Not as good, front-end framework,
strays from Google direction_

Use this for maximum Material design feel:

4) Polymer Paper Elements

[https://www.polymer-project.org/docs/elements/paper-
elements...](https://www.polymer-project.org/docs/elements/paper-
elements.html) \- _Super awesome, disjoint components, not a framework_

5) Google Material Web Starter Kit

[http://google.github.io/web-starter-
kit/material](http://google.github.io/web-starter-kit/material) \- _Good
enough, light framework_

6) Google Web Starter Kit

[https://developers.google.com/web/starter-
kit](https://developers.google.com/web/starter-kit) \- _Full fledged
framework, doesn 't fully capture Material though_

------
corford
Bug report: If I follow the "Demo" link from the homepage, the first demo
("Buttons") works but clicking on any of the others (via the left hand menu)
e.g. "Dialog" doesn't do anything. No obvious errors in the console.

I'm using FF 33.0.3 on Win7.

Edit: looks promising though - just get them bugs ironed out! :)

~~~
regularfry
Same here, iceweasel 33.0 on Debian Wheezy.

~~~
hutattedonmyarm
Works for me, Safari 8.0 ons OS X 10.10

------
vanderZwan
[http://material-ui.com/#/components/buttons](http://material-
ui.com/#/components/buttons)

Aaaand the first three buttons are hidden until you hover over them. How
visual designers keep making mistakes like this _in the age of mobile
browsing_ is beyond me.

EDIT: As has been pointed out to me below, they have their use-cases. I still
wouldn't put them as the first shown option though - they're not exactly the
sensible default fall-back.

Also, the menu doesn't work on my Firefox Aurora browser.

~~~
treerock
Google's design guidelines advise using flat buttons "for contexts such as
toolbars and dialogs to avoid gratuitous layering". Seems to me there may be
cases where they are useful.

[http://www.google.co.uk/design/spec/components/buttons.html#...](http://www.google.co.uk/design/spec/components/buttons.html#buttons-
flat-raised-buttons)

~~~
vanderZwan
Fair enough. I still think putting them first is sending the wrong signal
though: using a flat UI should be a deliberate, carefully evaluated choice
(like the example you gave). Not the default.

------
spain
Doesn't seem to embody the principles of Material Design other than the flat
design and use of colors. For example for the dialog[0] when you click it it
just appears out of nowhere instead of sliding in or expanding out from the
button. Material Design isn't only about everything being flat but there being
good animations to make transitions clear.

I wonder what Google's design team thinks of all these creations masquerading
as "Material Design."

[0] [http://material-ui.com/#/components/dialog](http://material-
ui.com/#/components/dialog)

~~~
calinet6
It highlights the fact that it actually takes a lot of work to do all of these
details and get the UI right, and if you miss one or two, it really doesn't
hold up. Something we should all take to heart. Not many design frameworks
have such complete and irreducible properties. The Material design guidelines
and (good) implementations so far are really very impressive.

------
flavj
I have been using the angular team's material design project[0] with great
success.

"This project is still in early preview."[1] Worth keeping an eye on if you
are working on any angular projects.

Not to take away anything from OP's, I feel their implementation of material
is a little closer to the mark.

[0][https://material.angularjs.org](https://material.angularjs.org)
[1][https://github.com/angular/material](https://github.com/angular/material)

~~~
Bahamut
From what I understand, the Angular version is being developed by someone who
works for Drifty, the company behind Ionic.

------
uxwtf
I like the animations, inputs are really what I need today for my UI designs.
Checkboxes have different styles in Chrome and Safari. Safari checkboxes look
a bit weird as in unchecked mode a rotated green tick is displayed inside a
checkbox, and in checked mode one of the tick's lines extends horisontally. In
Chrome the checkbox looks really nice though.

~~~
0942v8653
OK, I'm glad they didn't actually intend to have the checkboxes look like that
:)

------
espadrine
This is my first introduction to Material Design. I am confused about an
aspect of it.

Here[0], we see two separate cards next to each other, with the same
dimension, but at a different elevation. As a result, one casts a larger
shadow.

Here[1], they specify that "Shadows are never approximated using material".
Wouldn't that require that one of those two cards with the same dimension
appear to be larger, since it is closer to the eye?

What do they mean by that rule?

[0]: [https://www.google.com/design/spec/what-is-
material/objects-...](https://www.google.com/design/spec/what-is-
material/objects-in-3d-space.html#)

[1]: [https://www.google.com/design/spec/what-is-
material/material...](https://www.google.com/design/spec/what-is-
material/material-properties.html#material-properties-physical-properties)

------
NewsReader42
Can't even click the links down the RHS in the demo. (FF 33.0.2)

~~~
amatera
Me too on FF 33.0.3 (MAC OS).

~~~
kissickas
Nor on FF 33.0.3 Windows.

------
nogridbag
Nicely done. Material design looks great on Android. I'm not sure if I'm sold
on material design for desktop use. I started building a material design look
and feel for a new web app we're building and besides the fact that it lacked
all the subtle animations no one really was digging the vibrant colors, flat
buttons, and drop shadows. We ditched it for a more conservative theme and so
far we've had no complaints.

Any Inbox users here? What do you think of the full desktop web app for Inbox?
Personally while I love the mobile material design version, there's just
something off about the desktop version.

~~~
FlailFast
Inbox user chiming in: I actually like the desktop interface, and it's nice to
not have to change mental context when using Inbox on mobile vs the desktop
(probably the best, if more subtle, benefit to the Material overhaul of
Google's services). My biggest gripe is the more restrictive keyboard
shortcuts compared to Gmail, which basically necessitates using a mouse for
some operations. But I imagine that will be remedied over time.

~~~
visarga
I tried Inbox in Chrome on OS X Yosemite on rMBP 13'' last year's model and it
stutters and freezes when scrolling, and takes a minute to load all
dependencies. I tried in Safari too, but it does not work with Safari yet, and
in Chrome it's a disaster.

------
supercoder
Sorry but this looks like a huge mess on iOS

~~~
twelvechairs
It looks like a huge mess on Firefox/android too

------
emehrkay
This is the best implementation of Material in html/css i've seen. It's a
little buggy, but nothing a few tickets won't fix. I'm constantly impressed
with how fast you guys work.

------
rpwverheij
this is a nice start of a cool and handy tool. As someone who recently got
into React, browserify and uses less by default, I really apreciate people
making libraries like this and will probably try using this at some point.
Yes, as others seem to note aswell, it needs some work finetuning and
improving (are buttons in the dialog supposed to have no borders?). But I
think it's a very nice initiative, thank you.

------
kellros
Looks pretty good, I'm a big fan of the placeholder without input -> label +
description when active -> label with input style.

------
rattray
I was recently looking into libraries to use Material Design with React.js.

I found the material-ui project to be implemented less well than this one:
[http://sanderspies.github.io/react-
material/](http://sanderspies.github.io/react-material/) (though I have my
reservations about the approach taken here, too -- and it's less complete).

~~~
ssp_
react-material is mostly an experiment to use react-style (CSS written in JS).
Unfortunately I do not have enough free time to give react-material the right
attention, so I wouldn't recommend using it for now.

------
igravious
Is there a way that I can use this as a drop-in replacement to Bootstrap or on
top of Bootstrap? If not, what would be the easiest way to re-skin a project
that currently Bootstrap to use this?

Then I could have Facebook/Google/Twitter design and coding chops baked in :)

------
jtollerene
Thanks to everyone for checking out our little project. It is very much a work
in progress. We released it because we are excited about it and knew that the
open source community will only help to make it better. Let's make something
awesome together!

------
Touche
Does React have something like web component's <content/> ? It's really
unfortunately that the LeftNav component takes an array of objects to turn
into links instead of allowing you to define arbitrary html as <content/>

~~~
kfinley
Yes, React components have a special `this.props.children` property [0]. Which
works similarly to web components's <content/>.

The current implementation of `LeftNav` doesn't allow for this, but it would
be easy to add.

0: [http://facebook.github.io/react/docs/multiple-
components.htm...](http://facebook.github.io/react/docs/multiple-
components.html#children)

------
TeeWEE
While I like the project and effort put into this, I think, if you considering
using this project, you should also look at google's own polymer project. Its
based on the industry standard web-components. [https://www.polymer-
project.org/](https://www.polymer-project.org/)

React is using "virtual dom" which is kind of a hack to support web-components
kind-of technology. Since the technology is currently here, i would recommend
using it, and not using React.

However a consideration is also browser support. I'm not sure if polymer is
production ready.

~~~
colinramsay
Is this correct? React doesn't use the virtual DOM to create HTML-like
elements, it uses JSX for that, and JSX is optional. As far as I know the
virtual DOM is used to avoid updating the "real" DOM in the browser when you
don't have to.

~~~
marknutter
React does use a virtual DOM, namely so that it can efficiently track changes
to the DOM. That's different than the shadow DOM that web components use,
though, where they have their own sandboxed DOM that's completely isolated
from the parent DOM.

~~~
TeeWEE
Indeed. That's what i try to say. I think the knowledge regarding the shadow-
dom and true standards-based web-components is not widely spread yet among
devvers.

------
alexweberk
I hope they do away with the flare effect on button clicks. Just weird...

~~~
zorbo
It's not just weird. Every click on any item now takes approximately 1 second
longer.

------
maga
Is anyone working on pure CSS theme/framework with Material UI?

------
prawn
A few things looked slick but not particularly usable, but I found the flare
animation on-click got old (and a bit slow) after a while. Might be worth
toning that down a bit?

------
igl
I like these small frameworks. Bootstrap is almost a little too big for my
taste. You end up having custom builds which are hard to maintain and update.
New frameworks like semantic-ui make the mistake and are even bigger and more
interwoven with js code. Fluff that! I really don't need 5 variations of every
component!

And drop your icon library into a seperate project! So i can choose between
font-awesome, boostrap-gylphs or this MUI-Icon set. FA-like is the way to do
it.

------
nicgutierrez
Very good job indeed. I think it's a good implementation of Material Design.
(PS: works just fine on Chrome.. I like all the smooth animations!)

------
jwr
I worked through the demo and actually kind-of liked it, until I got to the
checkbox page.

How is that checkbox design better than the commonly used empty square for
unchecked, and square containing an X or a V for checked? I can't even tell if
the boxes are checked or not!

I would seriously advise taking a look at the usability of these checkboxes.

~~~
jwr
[can't edit the comment anymore and this merits a correction]

It turns out that it was a bug and checkboxes were rendered on my screen in a
way that was not intended by designers. So the comment above is invalid.

------
esschul
I think it's just lazy when a page like this that doesn't have media queries.
Seriously.

------
UUMMUU
I have to say I REALLY like what you did with the inputs. That action is
really cool. I thought the spec said that buttons with just text and no
background or borders were discouraged as they looked too unactionable?

------
untilHellbanned
Tangential, but not really:
[https://medium.com/@timrpeterson/cynicism-21258dc48246](https://medium.com/@timrpeterson/cynicism-21258dc48246)

------
alvare
I love how it works all wrong.

It's like a recursive "This is Bad Idea".

------
carlob
Why can't I use esc to dismiss the dialog? Why do arrows in menus also scroll
the page? Is this because this is not pure CSS? Would this be a problem for
accessibility?

------
vlucas
Can anyone explain to me why having the dropdowns and other items in
JavaScript is better than the DOM? Seems like we fixed this approach on the
web 10 years ago.

------
adrianlmm
Nice, but is useless to me, it doesn't work on IE11.

------
dickvdbrink
Nice, really like the `input` demo, looks really slick!

------
swah
Looks good, but the transition delays are long.

------
matthewmacleod
Needs a huge amount of work before it's usable, but it's nice to see this
being implemented.

------
z5h
Great work. Thanks so much. I'll definitely consider using this.

------
pc86
Left nav menu and dropdowns don't work in FF Dev version.

------
grandalf
Those radio buttons and checkboxes are painful to use.

------
peterchon
animation is bit choppy and jumpy. This goes completely against the animation
principal that google's Material UI talks about.

------
imaginenore
No keyboard support. Fail.

------
joshkpeterson
Layout is broken on my android phone.

~~~
AlexMuir
And completely unusable on iPhone.

------
notastartup
I really like it. It's very different from what we have. I guess it makes
sense (it is google after all). One complain I have is that it's so cosmetic,
feminine almost, but I guess that's the color scheme.

------
CmonDev
Nice play on Microsoft's Metro/Modern UI!

I couldn't find the tiles however and they seem to be abandoned in the
original documentation (called "cards" for some reason :S):

[http://www.google.com/design/spec/components/cards.html#](http://www.google.com/design/spec/components/cards.html#)

~~~
seanmcdirmid
> couldn't find the tiles however

So you mean, not Metro at all right?

~~~
CmonDev
There used to be in the original copy, here is a saved image at the top:

[http://www.eyeonwindows.com/2014/06/25/googles-material-
desi...](http://www.eyeonwindows.com/2014/06/25/googles-material-design-
language-is-strangely-similar-to-metro)

Maybe they couldn't reconcile them with other alterations or are simply trying
to respond to criticism.

~~~
Geee
That image has nothing to do with material design and cards have nothing to do
with tiles. It's very far-fetched to even suggest that Material design and
Metro UI are even remotely similar.

~~~
guardian5x
There are not similar, but there are similarities. The way the controls are
designed, the flat style, the whole content-first approach, and giving the
content space to breath.

------
akrymski
I've never been a fan of material design and surely hope it doesn't become a
standard. Design guidelines from a company that is widely known not to care
about design? No thanks. Even Google Inbox shows how engineering-driven
everything is at Google - the navigation is completely unorthodox (going back
= drag _down_ ), like someone above decided "this is the way we do everything
from now on" and nobody had the balls to question 'em. I'd never accept
Microsoft's design guidelines or Google's. If you truly care about design,
you'd stick to Apple's or develop your own, which frankly isn't too hard in
CSS anyway, and it means you aren't tied to a particular OS feel or a big-corp
policy.

