Material-UI(material-ui.com)
material-ui.com
Material-UI
http://www.material-ui.com
6 comments
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
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
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
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
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.
I've been using react-native-material-ui (https://github.com/xotahal/react-native-material-ui) for a personal project and it's been great.
This is good design but, and forgive me, what is news?
see my comment on BinaryBullet's comment:
https://news.ycombinator.com/item?id=14525019
The new material-ui@next (version 1.0) docs are here:
https://material-ui-1dab0.firebaseapp.com/
https://material-ui-1dab0.firebaseapp.com/
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
and such that were/are not present in 0.17x and below.
...and I'm excited to try out the new grid. I had been using https://github.com/rofrischmann/react-layout-components in most material-ui projects, but I'm glad they decided to add layout features.
The docs site also just "feels" snappier to me in Firefox for some reason. I'm not sure if it's actually faster, but clicking around feels more responsive.
I tried out the first version and really didn't like working with it.. but @next really addressed all my concerns.
If you've used material-ui, you should really check out @next.
If you've used material-ui, you should really check out @next.
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?
We used material-ui for parts of https://bannernow.com
I think it looks good, however the framework has pretty bad APIs and we had to deal with tons of bugs...
- 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.