Live data from Hacker News

Material Design

material.io

11–20 of 65 posts

Re: Material Design

#11

Maybe I'm missing something, but I just don't get MD. * The name: What do a bunch of geometric, flat-looking, solid colors have anything to do with "materials." "Material Design" always makes me think the direct opposite: skeuomorphism. * The look: It goes way past "clean" and "elegant" into "bland" and "childish." I don't want a bunch of tiny buttons with indecipherable icons and pastel colors. I want well-organized…

Is there a version without all the ridiculous animations?

Re: Material Design

#12

I really hate that everything must now look the same. Especially since I think it looks and feels bad.

I think it's largely signaling that a product or site is receiving attention from its creator or owner rather than trying to make anything look nice or work well. Can't let your online storefront look like it's from 2008, even if it's more usable than newer designs and loads 10x as fast, because people will think it looks neglected and possibly abandoned and won't buy stuff from you.

Re: Material Design

#13

Maybe I'm missing something, but I just don't get MD. * The name: What do a bunch of geometric, flat-looking, solid colors have anything to do with "materials." "Material Design" always makes me think the direct opposite: skeuomorphism. * The look: It goes way past "clean" and "elegant" into "bland" and "childish." I don't want a bunch of tiny buttons with indecipherable icons and pastel colors. I want well-organized…

Material Design, contrary to the one you see in iOS or in Windows phone, isn't totally flat. The difference is that objects, such as popups and buttons, have shadows.

Also my main gripe with other flat designs is that it is now hard to see what things can be clicked, because now all of a sudden things are flat without a 3D hint, never-mind the tactile feel you'd get with real objects. But MD compensates not only with shadows, but also with its usage of animations, which are used to get hints about the objects you can interact with. Hence I disagree with you, as MD's direct opposite is not skeuomorphism ;-)

> it also drives me nuts that Google insists on forcing MD where it doesn't belong. They refuse to follow conventions on iOS

Have you seen Apple's apps on Android? I wouldn't blame you if you didn't, because Apple's only Android app is Apple Music and it's a piece of shit. At the very least Google's Play Music is usable on iOS.

Re: Material Design

#14

Maybe I'm missing something, but I just don't get MD. * The name: What do a bunch of geometric, flat-looking, solid colors have anything to do with "materials." "Material Design" always makes me think the direct opposite: skeuomorphism. * The look: It goes way past "clean" and "elegant" into "bland" and "childish." I don't want a bunch of tiny buttons with indecipherable icons and pastel colors. I want well-organized…

WRT the name, Material design is (very loosely) "Skeuomorphism in behavior, not in look".

The idea is that things should act like their physical counterparts where it makes sense. So when you slide a drawer in from the left, it should cast a shadow on something below it, it should slide over-top of things.

Things should always "come from" somewhere, instead of just fading in and out. They should have a "home", and that home should be consistent (EX: the drawer "lives" on the left of the screen, new items in a list should populate by zooming up from the bottom, etc...).

That doesn't mean you can't violate the "laws of physics" by having stuff change shape and size, but the animations and effects should convey a sense that the dialog box or element you are interacting with is a "physical" thing.

Opening a note in a ToDo app should zoom in from it's position in the list to the full screen, saving it should send it back to it's original location. 2 items at the same "elevation" on the screen should never slide over one another, they should either clearly go over or under one another. Deleting notes should send them offscreen somewhere, not just blink them out of existence. Buttons should ripple with ink from where you pressed them to convey that the click/touch was received. Action elements should stand out from the page like physical buttons with a shape and shadow and consistent positioning.

Re: Material Design

#15

Maybe I'm missing something, but I just don't get MD. * The name: What do a bunch of geometric, flat-looking, solid colors have anything to do with "materials." "Material Design" always makes me think the direct opposite: skeuomorphism. * The look: It goes way past "clean" and "elegant" into "bland" and "childish." I don't want a bunch of tiny buttons with indecipherable icons and pastel colors. I want well-organized…

Material Design, contrary to the one you see in iOS or in Windows phone, isn't totally flat. The difference is that objects, such as popups and buttons, have shadows. Also my main gripe with other flat designs is that it is now hard to see what things can be clicked, because now all of a sudden things are flat without a 3D hint, never-mind the tactile feel you'd get with real objects. But MD compensates not only with…

To be fair, Apple Music is a piece of shit on iOS, too.

Re: Material Design

#16
post #9
post #8

Does anyone know any open source implementations of Material Design? I've been using https://getmdl.io/ but I'd be interested if there are any other projects of similar or better quality.

http://www.material-ui.com/

And along this same line is the (terribly named IMO) React toolbox. http://react-toolbox.com/

Re: Material Design

#17

Maybe I'm missing something, but I just don't get MD. * The name: What do a bunch of geometric, flat-looking, solid colors have anything to do with "materials." "Material Design" always makes me think the direct opposite: skeuomorphism. * The look: It goes way past "clean" and "elegant" into "bland" and "childish." I don't want a bunch of tiny buttons with indecipherable icons and pastel colors. I want well-organized…

> What do a bunch of geometric, flat-looking, solid colors have anything to do with "materials."

The idea of material design is not to by flat at all, but to use depth as a cue of information hierarchy. The material design spec has some more information on this:

https://material.google.com/material-design/environment.html...

But I think some of your points are valid - in that a lazy implementation of material design is essentially making things look Googley and calling it a day - sometimes resulting in flat design.

Re: Material Design

#18

Maybe I'm missing something, but I just don't get MD. * The name: What do a bunch of geometric, flat-looking, solid colors have anything to do with "materials." "Material Design" always makes me think the direct opposite: skeuomorphism. * The look: It goes way past "clean" and "elegant" into "bland" and "childish." I don't want a bunch of tiny buttons with indecipherable icons and pastel colors. I want well-organized…

I'm sorta indifferent to it, but these are what I've slowly picked up on.

> The name

I think what they are going for is a language agnostic building set of icons/interactions that sorta relate to real physical objects. Without becoming "floppy disk means save" in 2016

> The look

I think they want high contrast, and for it to work on any device aspect/orientation. And somehow take the previous to a pretty far conclusion.

> looks like you ripped off Google's stylesheet

I'm pretty sure this is just Google's site. Owner OrgName : Google Inc.

Re: Material Design

#19

Buried in there is a tool for a quick view of any site across laptop, tablet and smartphone form factors: http://material.io/resizer/ I've never seen this tool before and don't know if it's new with this site, but it is amazing and I'll be using it a lot from now on! Edit: Thanks for the references to the browser dev tools, which clearly are more appropriate for development - I intended rather more emphasis on the qu…

Safari has this built-in under "Develop->Enter Responsive Design Mode" (⌥⌘R). The Develop menu can be enabled from the Advanced tab of the Preferences window. Firefox appears to have a "Responsive Design View" (⌥⌘M) as well.

Re: Material Design

#20

Buried in there is a tool for a quick view of any site across laptop, tablet and smartphone form factors: http://material.io/resizer/ I've never seen this tool before and don't know if it's new with this site, but it is amazing and I'll be using it a lot from now on! Edit: Thanks for the references to the browser dev tools, which clearly are more appropriate for development - I intended rather more emphasis on the qu…

A similar (better) tool is baked into Chrome devtools
Post reply on HN