Material Design | Hacker News Reader

Material Design

material.io

138 pointstwapi63 comments

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 controls with obvious labeling and a consistent color scheme.

* The appeal: sites like this seem to be encouraging general usage, but then your site just looks like you ripped off Google's stylesheet. (And like I mentioned above, I don't know why you'd want to go for that look unless required.)

While I'm griping: it also drives me nuts that Google insists on forcing MD where it doesn't belong. They refuse to follow conventions on iOS so things like the navbar and the "current location" or "share icon" don't match any other app on the device.

Is there a version without all the ridiculous animations?

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.

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

"my main gripe with other flat designs is that it is now hard to see what things can be clicked"

everything on the screen can be interacted with these days, so adding hints is pointless

I would argue that many apps/sites don't have UIs where everything can be interacted with these days, and therefore hints are very important.

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.

"Skeuomorphism with sheets of paper".

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

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.

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

His full sentence was:

    The appeal: sites like this seem to be encouraging general usage, but then your site just looks like you ripped off Google's stylesheet.

I took it to mean:

Google is using sites like this to encourage general adoption of Material Design all over the web. But if you, as a designer, adopt Material Design for your own site, visitors to your site will just assume that you ripped off Google's site design.

Why not? It's not that hard and there is nothing special about it. Essentially it's an attempt to introduce consistency into interfaces they design. So people could learn and rely on certain colors, shapes and behaviors for certain things across many apps they use and use them intuitively. Of course there is some evil there too, like branding and being inconsistent with other platforms on purpose, but it's in everything they do these days.

I don't get why on HN, every top voted comment in every submission is a negative criticism.

Often it's a tangent, or supplementary information. Either way, all of these add something to the discussion; it's hard to make a positive comment that's actually interesting.

Maybe you're reading HN submissions about things that people think are bad?

Middlebrow dismissal. https://news.ycombinator.com/item?id=4693920

On the other hand if one reads from the bottom of the page the calibre of comment leaves a lot to be desired.

Ergo, scroll half way down and start reading. Problem solved.

Those who agree with the linked article tend to be less motivated to vote a concurring comment than those who disagree with the article and can't wait to express their disagreement via voting for a contrarian argument.

Things get interesting at the 2nd level; the highest voted reply to the top comment is usually a counter-counter-argument. The roles have been reversed and the yea-sayers are now more motivated to vote than nay-sayers. It's fascinating

I wonder if it's because of ties to academia. The academic origins of the internet, the Google/Stanford thing, the generally high quantity of people with degrees...

Academia is all about criticism. You don't succeed by doing something well, you succeed by situating something new in a context of previous work. That requires you first to understand previous work and its limitations.

Even in the business world, which is quite competitive, you can follow in footsteps. You can see how someone else created a hot dog stand, and just make your own. You don't have to find some flaw in the other hot dog stand, you just have to do it.

Academia demands you to find a flaw in the other hot dog stand and then argue that yours is different.

Coders seem to follow along in that path. We are always needing to find the next thing, so we are constantly finding ways to argue the existing stuff won't do.

>sites like this seem to be encouraging general usage, but then your site just looks like you ripped off Google's stylesheet.

I don't know why you'd use Material Design for a website. I thought that the purpose of Material Design was to provide a common design language for Android Apps, like the Apple Design Guidelines do for iOS apps. Moreover, Material Design, with its simple platonic shapes and solid colors, seems really targeted towards mobile use. Simple shapes and solid colors can be easily implemented with vector graphics, which means that it's easy to render them in a resolution-independent fashion.

My criticisms of material design come from watching inexperienced users (e.g. my parents) attempt to interact with Google's Material Design apps. My dad refuses to upgrade his Android 4.0 HTC phone specifically to avoid the newer versions of Google Maps. He finds the gestures to be undiscoverable and doesn't like the fact that it takes two to three more swipes to access the same functionality. This is especially a problem if you're using the phone one-handed, while walking around or driving.

Sample size of one..._but_ I love material design apps.

For me, it is a attempt to give folks simple / functional patterns that work across different screen sizes and encourage good behaviours such as widget reuse.

MD hopefully discourages organisations from making their own (often weird / lower quality) widgets that only work on certain screen sizes, certain platforms yak yak yak. Furthermore, the standard MD patterns, iconography etc. should decrease the time necessary to understand new apps - reducing user frustration.

I also love their color swatches[1] and naming convention as it allows devs to easily switch colors throughout their apps / widgets.

Sure some might view this as “utility” design _but_ it does give the great unwashed access to good design (quickly and at low/no cost). That enables folk to focus on adding some value.

[1]: https://material.google.com/style/color.html

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 quick view part being the amazing thing, as in lining the three up side-by-side with a nice skeuomorphic ui, and being able to share a link that just works for demos to people not familiar with their browser's dev tools.

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.

A similar (better) tool is baked into Chrome devtools

Resizer is linkable, so it's easy to share with your colleagues in design and product. If you're a developer actively working on your own machine, DevTools is probably the better tool for you.

umm this is just showing a responsive page in iframes of various dimensions.. The smartphone one is especially bad with browser scrollbars throughout.

You can accomplish the same simply by resizing your browser, or achieve even better preview by using chrome's dev tools' device emulation feature.

I agree: while I use the Chrome tools for resizing, this is a lovely interface you could use to impress a client.

Just get a mock up photo of an iphone. Put an iframe inside of it and voila. Zero magic. Just some prep work

Emmet Re:View is an extension that gives you a "device wall" of your site (local or live) across all different viewports - very helpful!

https://chrome.google.com/webstore/detail/emmet-review/epejo...

And, guess what, it works with http://localhost:* too! It's brilliant. Thanks for the tip. As mentioned previously, I think it's super nice non-development related tool.

For being a site about design, I absolutely hate the monospace font they've chosen here; it really wrecks the design as a whole and disrupts the clean and simple paradigms MD shoots for. I love material design (and use it in the majority of my products e.g. [1]), but their existing docs[2] look so much better than this new site.

[1] http://www.notebook.ai/ [2] https://material.google.com/

I actually like the monospaced font. Maybe it's an unpopular view, but it has really grown on me.

Here is another one: https://design.google.com/

It can work, but it's not exactly a universal solution. For a site that tries to sell this as a design that should be a good basis for everybody, it's not.

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.

Most people outside tech don't really care. I've built a couple of webshops at a previous company... fancy loses customers.

Material design is merely a set of guidelines, and can be used as a common language for actually designing an application or website. The "actually designing" is usually the missing part.

Noone should expect MD to substitute thoughtful design.

If you're going to design though, you should design with your own distinctive style. Google has attempted to suggest that Material should be a universal design pattern, but that's silly: It's pretty much Google's brand at this point, given their tendency to slap it on everything, including iOS, where it makes no sense.

And the weakness of Material as a design pattern or common language is that Google's own apps and websites don't bother to consistently apply it.

I have no problem with it. The alternative is having Bill from the marketing department making design decisions ("we need a big pink button in the top right that says AMAZING DEALS") and generally impossible to navigate web pages. I cam across a site on my phone yesterday that forced you to swipe left and right to read multiple screens of text of a news article. Fuck that.

Design standards can be great, especially as pushback against what you mentioned. But MD is a horrible standard for everyone to be following.

I don't think that dichotomy exists. I definitely feel that the entire web should not look like Android.

I feel your pain. Remember when the web looked like the latest Mac OS 10.x of the day? Glossy buttons and brushed aluminum (and later, linen) everywhere. Web design is rather faddish.

Is there something wrong with my computer or did they really use a monospaced font on very ugly colors on the front page so it looks like shit?

Nope, same for me. I know design is subjective but I really do not like the look of this. It may sound hyperbolic but it genuinely hurts my eyes to look at this; those colour combinations are very garish.

I wish the web would be designed with Swiss style, typography-heavy design though not sure how viable that'd be

Do you have a few links where I can read more about this design direction?

Not the parent, but here are some examples, with a brief description of the style: http://splashnology.com/article/swiss-style-in-modern-web-de...

Personally I find most sites that use Swiss Style impossible to navigate/use. They "look nice" (actually, quite amazing in my opinion) but functionality is #1 for most websites and I would never make a site purposefully using this style. Most of the time, there is just too much going on.

[0] https://en.wikipedia.org/wiki/International_Typographic_Styl...

Target is pretty much all Swiss with their heavy dependency on Helvetica for everything

See: Bloomberg's redesign last year or so.

Microsoft tried and no one liked Metro.

I'd love to see a parody... twm design:

https://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG

>Stage : Define dynamic interfaces with interactive motion

>Change the way you and your team design and build interactive experiences. Stage is a design tool that goes beyond a process rooted in static design, enabling a more dynamic, intentional, and systematic workflow for crafting digital experiences.

Signed up for the preview on the spot. Maybe this will be an awful tool, but I have felt the need for a dynamic design tool for years. Many designers are too rooted in the print world and it does not help that most design tools are entirely static. We need a tool that help create dynamic guidelines, not one or two static screens.

Apparently, this is coming from the team behind pixate.

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/

These fancy click-waves became annoying after less than two minutes.

Google just made their Angular 2 Dart MD components available: https://github.com/dart-lang/angular2_components

These are the same components being used on production in the new AdWords UI, and I believe in the new Adsense UI as well (and others I can't recall right now).

There's a bunch of Polymer "Elements" that implement Material Design. All the "paper-" use MD.

https://elements.polymer-project.org/browse?package=paper-el...

https://elements.polymer-project.org/

http://materializecss.com/

So is material going flatter? Isn't that partly abandoning the paper-like material metaphor?

Doesn’t seem so: https://material.google.com/material-design/whats-new.html. I think it’s just this new website ignores Material design and does its own weird thing.

no paper and ink metaphor was referring to behavior not look

Are these tools going to be part of Android Studio? I kind of wish they were.

Reply on news.ycombinator.com