4 ms·

Material-UI

46 points by jhund 9y ago

transitorykris 9y ago
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 9y ago
  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 9y ago
    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 9y ago
      Not that I know of, but haven't done any tablet work.
shroom 9y ago
This is good design but, and forgive me, what is news?
- infogulch 9y ago
  news nown: newly received or noteworthy information, especially about recent or important events.
  - rco8786 9y ago
    > nown 0_o
- safeharbourio 9y ago
  see my comment on BinaryBullet's comment: https://news.ycombinator.com/item?id=14525019 https://news.ycombinator.com/item?id=14525019
BinaryBullet 9y ago
The new material-ui@next (version 1.0) docs are here: https://material-ui-1dab0.firebaseapp.com/ https://material-ui-1dab0.firebaseapp.com/
- safeharbourio 9y ago
  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 9y ago
    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.
  - BinaryBullet 9y ago
    ...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.
- technion 9y ago
  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.
JoshMnem 9y ago
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 9y ago
  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
evilDagmar 9y ago
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 9y ago
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...

46 points by jhund 9y ago

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 9y ago
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 9y ago
  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 9y ago
    Not that I know of, but haven't done any tablet work.

shroom 9y ago

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

infogulch 9y ago
news nown: newly received or noteworthy information, especially about recent or important events.
- rco8786 9y ago
  > nown 0_o
safeharbourio 9y ago
see my comment on BinaryBullet's comment: https://news.ycombinator.com/item?id=14525019 https://news.ycombinator.com/item?id=14525019

BinaryBullet 9y ago

The new material-ui@next (version 1.0) docs are here: https://material-ui-1dab0.firebaseapp.com/ https://material-ui-1dab0.firebaseapp.com/

safeharbourio 9y ago
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 9y ago
  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.
- BinaryBullet 9y ago
  ...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.
technion 9y ago
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.

JoshMnem 9y ago

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 9y ago
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

evilDagmar 9y ago

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 9y ago

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