
Material-UI - jhund
http://www.material-ui.com
======
JoshMnem
I suspect that my opinion about Material Design will be unpopular, but I think
that using MD is a bad idea.

\- There is too much animation. Too many websites are starting to look like
they are covered with animated Flash banner ads, and that's just the normal
UI. People should be thinking about, "how do I get rid of as much animation as
possible so that users can read without distractions", not "how do I 'spice
up' this webpage by making every little thing animate, even when there is no
need to draw attention to it".

\- The easing sounds good in theory, but in practice it makes MD sites appear
slow. There is sometimes a perceptible delay when clicking on things. It looks
like the event is artificially delayed for a moment before a component speeds
out of its position to do something. It gives the sense that the site is
broken (nothing happens) and then suddenly there is shock that things are
flying around the page, as if something important is happening, even if
nothing important is happening. The average user might not notice the delay,
but it can be really frustrating, especially on slower devices.

\- MD color schemes tend to lack restraint. Some good designers have been able
to work around that, but people who take the spec literally tend to have worse
results. Good color schemes on MD sites: Udacity, LinkedIn. Bad MD color
schemes: Meetup, official MD documentation (oversaturated and/or clashing
colors)

\- If you use MD, you're letting Google's visual brand overtake your own.
Examples: it's bizarre (from a business standpoint) to see Microsoft
(LinkedIn) and Twitter using Google's visual brand elements. I don't think
that it's wise.

\- Websites shouldn't be designed to look like generic Android apps.

\- I would also argue that overzealous implementation of Material Design ideas
into Google Plus helped kill it (and continues to make it unusable for me).

Material Design could be good if the problems with animation, easing, and
colors are fixed, but even then, I think it would be a bad idea to make a non-
Google site look like it uses Google's visual branding.

~~~
yladiz
I agree on a lot of your points. Since a website is interactive, I think its
animation should be present but unobtrusive or subtle. Given the choice
between too much/too strong animation and no animation, I'd choose the latter.
For example, in their demo [1], if you toggle the switch for the Composition
Example, there's a lot of extraneous animation that's happening when it
doesn't need to, and I'd rather take a plain toggle/checkbox because it's
unobtrusive.

Your other points about websites not looking like Google's visual branding or
like a generic Android app are also important, since Google's style is so
distinct it's essentially Bootstrap 3 all over again, but with more animation.

1: [http://www.material-ui.com/#/components/app-bar](http://www.material-
ui.com/#/components/app-bar)

~~~
JoshMnem
On the example you mentioned, clicking the 3-dot "hamburger" is an example of
the easing that I referred to. The menu drops out like it's needlessly
spilling out of the side of the component. The user is already looking where
they are clicking/tapping.

Hovering over the "view source" icons also has an over-the-top easing effect
that is too theatrical for what it does. Try opening and closing the source
windows on a few different sections quickly, and watch how too many things
that aren't important are animating at once and how easing is making them last
too long for fast use of the UI.

Things "ripple" in MD when you click them -- for no coherent reason. Users
don't need such distracting visual feedback for that. It gives UIs a floppy,
cheap plastic look.

Two more examples of problems with Material Design are Google's new login
screen and Trello's Android app -- both due to the distracting animation.
Watch how things animate and then ask _why do those elements need movement
that attracts users attention at this moment?_ (They don't. The user already
knows where to find them.)

I don't think that last few years of Bootstrap have been terrible, except for
the overuse of the parallax effect and animations on homepages as you scroll
down to each new section. There has been a kind of generic look to some
Bootstrap sites, but I don't think that it's bad. Example: this random
Bootstrap-based theme[1] is generally fine and readable, except for the
animation in the menu items when scrolling back to the top. I think that UIs
should be simple and easy to use, and that you shouldn't really notice them
when trying to get to the content. Animation and easing is for computer games,
not content.

[1]
[http://devitems.com/preview/nexo/index.html](http://devitems.com/preview/nexo/index.html)

------
transitorykris
I’ve enjoyed working with material-ui. There are other options such as
Material Design Lite, which might be a better choice if you’re more at home
with CSS. I would really really love to see material-ui support React Native.
This would make creating a consistent web and mobile experience easier.

~~~
rco8786
I've been using react-native-material-ui ([https://github.com/xotahal/react-
native-material-ui](https://github.com/xotahal/react-native-material-ui)) for
a personal project and it's been great.

~~~
scubadude
Does the UI scale up on tablet and down on phone? So are buttons larger on a
tablet? Just curious, if you don't mind!

~~~
rco8786
Not that I know of, but haven't done any tablet work.

------
shroom
This is good design but, and forgive me, what is news?

~~~
infogulch
news _nown_ : newly received or noteworthy information, especially about
recent or important events.

~~~
rco8786
> nown

0_o

------
BinaryBullet
The new material-ui@next (version 1.0) docs are here:

[https://material-ui-1dab0.firebaseapp.com/](https://material-
ui-1dab0.firebaseapp.com/)

~~~
safeharbourio
IMHO this is the most important thing that should be noted, maybe someone can
add this link to the description/make it more prominent. A whole bunch of
components were missing from @next version, now it seems they are finally
here, so that means there is no blocker for guys needing to move to the new
version, which in my opinion is awesome, with things like grids:
[https://material-ui-1dab0.firebaseapp.com/layout/grid](https://material-
ui-1dab0.firebaseapp.com/layout/grid) and such that were/are not present in
0.17x and below.

~~~
BinaryBullet
...and I'm excited to try out the new grid. I had been using
[https://github.com/rofrischmann/react-layout-
components](https://github.com/rofrischmann/react-layout-components) in most
material-ui projects, but I'm glad they decided to add layout features.

------
evilDagmar
I just want to know _why_ , after all the talk of trying to create the
illusion of physicality, did they decide buttons should _rise up_ when they're
being pressed _down_?

------
vladimirkon
We used material-ui for parts of
[https://bannernow.com](https://bannernow.com) I think it looks good, however
the framework has pretty bad APIs and we had to deal with tons of bugs...

