12 ms·

Material Design

138 points by twapi 10y ago

serg_chernata 10y ago
Are these tools going to be part of Android Studio? I kind of wish they were.
iraphael 10y ago
So is material going flatter? Isn't that partly abandoning the paper-like material metaphor?
- chrismorgan 10y ago
  Doesn’t seem so: https://material.google.com/material-design/whats-new.html 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.
- fredgrott 10y ago
  no paper and ink metaphor was referring to behavior not look
Matachines 10y ago
I wish the web would be designed with Swiss style, typography-heavy design though not sure how viable that'd be
- macandcheese 10y ago
  See: Bloomberg's redesign last year or so.
- MaxKK 10y ago
  Do you have a few links where I can read more about this design direction?
  - Nadya 10y ago
    Not the parent, but here are some examples, with a brief description of the style: http://splashnology.com/article/swiss-style-in-modern-web-design/7945/ 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_Style https://en.wikipedia.org/wiki/International_Typographic_Styl...
    - jordache 10y ago
      Target is pretty much all Swiss with their heavy dependency on Helvetica for everything
- b34r 10y ago
  Microsoft tried and no one liked Metro.
mi100hael 10y ago
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.
- pbreit 10y ago
  Is there a version without all the ridiculous animations?
- bad_user 10y ago
  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.
  - mi100hael 10y ago
    To be fair, Apple Music is a piece of shit on iOS, too.
Numberwang 10y ago
I really hate that everything must now look the same. Especially since I think it looks and feels bad.
- ashark 10y ago
  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.
  - pestaa 10y ago
    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.
    - ocdtrekkie 10y ago
      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.
- whamlastxmas 10y ago
  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.
kough 10y ago
Does anyone know any open source implementations of Material Design? I've been using https://getmdl.io/ https://getmdl.io/ but I'd be interested if there are any other projects of similar or better quality.
- lloeki 10y ago
  http://www.material-ui.com/ http://www.material-ui.com/
  - Klathmon 10y ago
    And along this same line is the (terribly named IMO) React toolbox. http://react-toolbox.com/ http://react-toolbox.com/
  - wruza 10y ago
    These fancy click-waves became annoying after less than two minutes.
- rpeden 10y ago
  Google just made their Angular 2 Dart MD components available: https://github.com/dart-lang/angular2_components 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).
- d4l3k 10y ago
  There's a bunch of Polymer "Elements" that implement Material Design. All the "paper-" use MD. https://elements.polymer-project.org/browse?package=paper-elements https://elements.polymer-project.org/browse?package=paper-el... https://elements.polymer-project.org/ https://elements.polymer-project.org/
- dharma1 10y ago
  http://materializecss.com/ http://materializecss.com/
- 6DM 10y ago
davnicwil 10y ago
Buried in there is a tool for a quick view of any site across laptop, tablet and smartphone form factors: http://material.io/resizer/ 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.
- alexbock 10y ago
  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.
- SippinLean 10y ago
  A similar (better) tool is baked into Chrome devtools
  - bsimpson 10y ago
    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.
- jordache 10y ago
  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.
- telesilla 10y ago
  I agree: while I use the Chrome tools for resizing, this is a lovely interface you could use to impress a client.
davidw 10y ago
I'd love to see a parody... twm design: https://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG https://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG
drusepth 10y ago
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/ http://www.notebook.ai/ [2] https://material.google.com/ https://material.google.com/
- desuvader 10y ago
  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/ https://design.google.com/
  - mcv 10y ago
    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.
on_and_off 10y ago
>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.
rsrsrs86 10y ago
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?
- mcjiggerlog 10y ago
  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.

Material Design

138 points by twapi 10y ago

serg_chernata 10y ago

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

iraphael 10y ago

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

chrismorgan 10y ago
Doesn’t seem so: https://material.google.com/material-design/whats-new.html 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.
fredgrott 10y ago
no paper and ink metaphor was referring to behavior not look

Matachines 10y ago

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

macandcheese 10y ago
See: Bloomberg's redesign last year or so.
MaxKK 10y ago
Do you have a few links where I can read more about this design direction?
- Nadya 10y ago
  Not the parent, but here are some examples, with a brief description of the style: http://splashnology.com/article/swiss-style-in-modern-web-design/7945/ 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_Style https://en.wikipedia.org/wiki/International_Typographic_Styl...
  - jordache 10y ago
    Target is pretty much all Swiss with their heavy dependency on Helvetica for everything
b34r 10y ago
Microsoft tried and no one liked Metro.

mi100hael 10y ago

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.

pbreit 10y ago
Is there a version without all the ridiculous animations?
bad_user 10y ago
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.
- mi100hael 10y ago
  To be fair, Apple Music is a piece of shit on iOS, too.

Numberwang 10y ago

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

ashark 10y ago
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.
- pestaa 10y ago
  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.
  - ocdtrekkie 10y ago
    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.
whamlastxmas 10y ago
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.

kough 10y ago

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

lloeki 10y ago
http://www.material-ui.com/ http://www.material-ui.com/
- Klathmon 10y ago
  And along this same line is the (terribly named IMO) React toolbox. http://react-toolbox.com/ http://react-toolbox.com/
- wruza 10y ago
  These fancy click-waves became annoying after less than two minutes.
rpeden 10y ago
Google just made their Angular 2 Dart MD components available: https://github.com/dart-lang/angular2_components 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).
d4l3k 10y ago
There's a bunch of Polymer "Elements" that implement Material Design. All the "paper-" use MD. https://elements.polymer-project.org/browse?package=paper-elements https://elements.polymer-project.org/browse?package=paper-el... https://elements.polymer-project.org/ https://elements.polymer-project.org/
dharma1 10y ago
http://materializecss.com/ http://materializecss.com/
6DM 10y ago

davnicwil 10y ago

Buried in there is a tool for a quick view of any site across laptop, tablet and smartphone form factors: http://material.io/resizer/ 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.

alexbock 10y ago
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.
SippinLean 10y ago
A similar (better) tool is baked into Chrome devtools
- bsimpson 10y ago
  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.
jordache 10y ago
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.
telesilla 10y ago
I agree: while I use the Chrome tools for resizing, this is a lovely interface you could use to impress a client.

davidw 10y ago

I'd love to see a parody... twm design: https://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG https://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG

drusepth 10y ago

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/ http://www.notebook.ai/ [2] https://material.google.com/ https://material.google.com/

desuvader 10y ago
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/ https://design.google.com/
- mcv 10y ago
  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.

on_and_off 10y ago

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

rsrsrs86 10y ago

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?

mcjiggerlog 10y ago
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.