6 ms·

The Best of Material Design, Daily

79 points by rohan1024 12y ago

Zak 12y ago
I find the white backgrounds in Material obnoxious. It's as if Google's designers work in well-lit offices and don't test this stuff in dark environments where a white background hurts to look at. Light backgrounds also waste power with AMOLED screens. I can understand why Google wasn't inclined to include a full theme engine on Android and ask to app developers to support that, however it seems to me that having a system-wide light-mode and dark-mode would be a great feature for devices centered around mobility and therefore not always used in well-lit offices.
- tadfisher 12y ago
  There are plenty of apps that include alternate themes for night-mode and AMOLED screens. There is nothing in MD that dictates usage of a light theme.
- clay_to_n 12y ago
  Material on Android supports dark themes super well. Comes with MATERIAL.LIGHT and MATERIAL.DARK by default. It's up to the app developer to include an option to switch in the settings, but this is common in apps that are focused on reading. Most people prefer light.
  - skeoh 12y ago
    Would be nice in this case for the setting to be global rather than per app.
    - proexploit 12y ago
      And force the developer of every app to do two complete themes (assuming they have some branding / color scheme)? While I agree it would be nice if everyone did have the option, I don't think it makes sense as a requirement.
      - karl42 12y ago
        You could have a global setting which is used by all apps supporting that theme.
      - Zak 12y ago
        I would like to see developers strongly encouraged to support a light and dark theme via system-wide setting. My preference would be for default colors to exist for each for when developers make no active effort to do so. If your app looks bad with the defaults, that's on you. A kinder, gentler approach would be for the global setting to only apply if the app supports the user's preference, but big commercial apps often don't support themes now, and probably wouldn't then.
- seanmcdirmid 12y ago
  Dark backgrounds are painful to look at unless you have an AMOLED screen, backlit displays just can't do black very well and the foreground text bleeds to much.
- ocdtrekkie 12y ago
  Fully agree. I've been deleting Google apps off my phone and replacing them with apps using the Holo Dark style UI. Far superior to what they create now.
neals 12y ago
I made a couple of apps now in Material design, but I must say it is hard to maintain some form of unique identity. It's hard to not just be 'skinning' and come up with interesting ways of display UI elements and data.
adriancooney 12y ago
I'm all for emulating good design but I feel like these guys are blatantly ripping of Product Hunt [1], right down to the last detail. Everything from the daily aggregation concept and the flyout preview to the presentation of the likes as avatars. [1] http://producthunt.com http://producthunt.com
- pulkitanand 12y ago
  Why should that be a problem? Product Hunt wasn't the first to do aggregation. I personally feel this is a really neat attempt!
- clay_to_n 12y ago
  There are tons of "ProductHunt for X" websites. Here's a list of them, on ProductHunt: https://www.producthunt.com/kwdinc/collections/product-hunt-for-x https://www.producthunt.com/kwdinc/collections/product-hunt-...
  - adriancooney 12y ago
    Wow, I stand corrected. I had no idea the idea had spread this far. My apologies!
rebelidealist 12y ago
I'm not a designer and would like professional designers to weigh in. With most Material Design apps/sites, doesn't the ultra bold colors distract away from the content? I thought content is suppose to be king not the UI.
- mhomde 12y ago
  Yes, I would agree. Material is clearly designed to brand apps as "Google apps" not necessarily provide the best UX possible. To be fair though there are some more subtle accents, like Gray and Blue Gray than can be used
- clay_to_n 12y ago
  I don't think this is a fault of Material Design, but a fault of some of the early apps implementing it. IMO the designs that catch my eye on this site are the ones with full-bleed photos and content taking precedence over UI. More dynamic. Sidenote, but I can't wait to play with Android's Palette API that lets you extract colors from an image to use in your interface: http://www.willowtreeapps.com/blog/palette-the-new-api-for-android/ http://www.willowtreeapps.com/blog/palette-the-new-api-for-a...
- bluthru 12y ago
  I agree. The amount of color used in most Material Design apps is overbearing and heavy-handed.
- pcurve 12y ago
  I design enterprise apps. I have to justify every single color used. If a color doesn't serve function, then I don't use it. In my opinion, Google hasn't had good track record with UI/UX and building usable products. Microsoft's take of Material design is superior. Case in point, their outlook.com.
  - ewzimm 12y ago
    You bring up a good point. If people want to figure out how to do Material Design in a non-Google context, all they need to do is get a Windows Phone and see how it's implemented in apps there, both dark and light themes. Google's design language is mostly a variation on Microsoft's.
Animats 12y ago
Those are the best examples of material design? Most of them are phone screenshots, higher than they're wide, on a blah background. The "material design" thing is supposed to be about dynamic effects. You click on things and they ripple. If the site let you go to the actual site or app being described, that would be more interesting. Or they showcased the material effects on their own site. Everybody has solid-color rectangles now. They're boring.
- mattaus 12y ago
  MaterialUp is actually pretty smart about this: - It integrates with sites such as CodePen or JSFiddle: i.e: http://www.materialup.com/posts/add-button http://www.materialup.com/posts/add-button - You can view app screenshots directly from the site (see below) and it you click on the big preview, it'll take you to the actual app. i.e: http://www.materialup.com/posts/dailymotion http://www.materialup.com/posts/dailymotion
- clay_to_n 12y ago
  They're not all phone screenshots - many are animations, JS snippets that run in-browser, or components. This is a producthunt-like website with daily submissions, not a curated best-of collection. For people working with or interested in Material Design, it seems like a cool site to keep up with resources and inspiration.
moeedm 12y ago
Really hope this Material Design nonsense doesn't take off. It's awful (especially on the web).
- andybak 12y ago
  Considering a bunch of people seem to be a) fairly keen on it and b) seem - at least at first glance - seem to have thought fairly hard about issues related to UX and aesthetics, surely you can put a teensy bit more effort into your critique? EDIT - money where one's mouth is time. Here's my take: There's some great stuff and some slightly less convincing stuff in the original 'Material' concept pitch but the problem is that the devil lies firmly in the details and it's already getting Cargo Cult-ed to hell and back - even in Google's own core products. However - I've generally found the quality of the critiques to be far below the quality of the topic being critiqued and I'm quite comfortable calling people out on lazy reactions if they haven't bothered to convince me that they've given the subject the attention it deserves. EDIT2 - Another thought has congealed after reading some more comments. The cargo cult is partly the fault of the original pitch. You can't propose something that is ostensibly as based on abstract principals as 'Material Design' is and only give a single implementation as the example without inviting people to fail to see through the surface details. Show us 'Material Design' with a completely different look and feel and then we might find it easier to grok the underlying principles and not get hung up on the specific choices made for this particular implementation. Or to put it another way - how would Material Design look if you wanted to distance yourself from the new Google branding as much as possible? What would remain constant?
  - moeedm 12y ago
    I don't have to say much, just go and read the manifesto for Material Design. It's a lot of words that don't mean anything [1]. Another problem with it is that it's extremely trendy. Bright, almost fluorescent colors, ridiculous amounts of whitespace almost to a fault, long shadows, arbitrary grids for icons, etc. The bigger problem is that Google decided to become smartasses about creating a new design language. They took it way too seriously and I think who this hurts the most is the developers who make apps for Android. They don't know what Material Design means -- really means, as in how Google sees it. Third party developers will never really be able to adapt it properly and what you're going to end up with is a whole new type of visual fragmentation in Android. This look already looks dated, and I can't imagine what it will look like in a year. [1] http://www.google.com/design/spec/material-design/introduction.html#introduction-goals http://www.google.com/design/spec/material-design/introducti...
bobykarot 12y ago
The constant zoom-in/zoom-out on the Tools page is killing my eyes. Dont know if that's intended but that's really annoying.
Bud 12y ago
The "best" of light grey text on a white background!
gavinpc 12y ago
Material design is about semantics; the documents make that clear [0]. When people "get it wrong," that's what they are usually missing. Even deeper than the semantics of material, though, is the ontology of the space. If you think that most bad design decisions flow from an inadequate conceptual model of the domain, check out this 1998 MIT thesis from Mark Foltz, "Designing Navigable Information Spaces." It has changed my world. [0] http://google.com/design http://google.com/design [1] http://www.ai.mit.edu/projects/infoarch/publications/mfoltz-thesis/ http://www.ai.mit.edu/projects/infoarch/publications/mfoltz-... PDF version at http://rationale.csail.mit.edu/publications/Foltz1998Designing.pdf http://rationale.csail.mit.edu/publications/Foltz1998Designi...
joncp 12y ago
I just updated to Android Lollipop and now my phone is full of that MD crap. I soooo want to roll back.
- ocdtrekkie 12y ago
  Yeah, I won't accept the update, and I've disabled most of my Google apps, where they shove Material on you even if you're on KitKat.
deleted 12y ago
[deleted]
pcurve 12y ago
I think people are taking Material Design too literally. All these sites look the same. They're letting Material Design become 'the' primary branding element.
TheAceOfHearts 12y ago
Anyone else notice that all images flicker slightly when you hover over any image? I'm on a 15" rMBP and scrolling on Chromium is painfully laggy. It's also painfully obvious that the people responsible for making this did not bother reading the actual spec.
aikah 12y ago
flat design is dead already ? /s
happster 12y ago
Here is a good explanation of Material Design principles: http://materialdesignblog.com/the-ultimate-guide-to-googles-material-design/ http://materialdesignblog.com/the-ultimate-guide-to-googles-...

79 points by rohan1024 12y ago

Zak 12y ago

I find the white backgrounds in Material obnoxious. It's as if Google's designers work in well-lit offices and don't test this stuff in dark environments where a white background hurts to look at. Light backgrounds also waste power with AMOLED screens. I can understand why Google wasn't inclined to include a full theme engine on Android and ask to app developers to support that, however it seems to me that having a system-wide light-mode and dark-mode would be a great feature for devices centered around mobility and therefore not always used in well-lit offices.

tadfisher 12y ago
There are plenty of apps that include alternate themes for night-mode and AMOLED screens. There is nothing in MD that dictates usage of a light theme.
clay_to_n 12y ago
Material on Android supports dark themes super well. Comes with MATERIAL.LIGHT and MATERIAL.DARK by default. It's up to the app developer to include an option to switch in the settings, but this is common in apps that are focused on reading. Most people prefer light.
- skeoh 12y ago
  Would be nice in this case for the setting to be global rather than per app.
  - proexploit 12y ago
    And force the developer of every app to do two complete themes (assuming they have some branding / color scheme)? While I agree it would be nice if everyone did have the option, I don't think it makes sense as a requirement.
    - karl42 12y ago
      You could have a global setting which is used by all apps supporting that theme.
    - Zak 12y ago
      I would like to see developers strongly encouraged to support a light and dark theme via system-wide setting. My preference would be for default colors to exist for each for when developers make no active effort to do so. If your app looks bad with the defaults, that's on you. A kinder, gentler approach would be for the global setting to only apply if the app supports the user's preference, but big commercial apps often don't support themes now, and probably wouldn't then.
seanmcdirmid 12y ago
Dark backgrounds are painful to look at unless you have an AMOLED screen, backlit displays just can't do black very well and the foreground text bleeds to much.
ocdtrekkie 12y ago
Fully agree. I've been deleting Google apps off my phone and replacing them with apps using the Holo Dark style UI. Far superior to what they create now.

neals 12y ago

I made a couple of apps now in Material design, but I must say it is hard to maintain some form of unique identity. It's hard to not just be 'skinning' and come up with interesting ways of display UI elements and data.

adriancooney 12y ago

I'm all for emulating good design but I feel like these guys are blatantly ripping of Product Hunt [1], right down to the last detail. Everything from the daily aggregation concept and the flyout preview to the presentation of the likes as avatars. [1] http://producthunt.com http://producthunt.com

pulkitanand 12y ago
Why should that be a problem? Product Hunt wasn't the first to do aggregation. I personally feel this is a really neat attempt!
clay_to_n 12y ago
There are tons of "ProductHunt for X" websites. Here's a list of them, on ProductHunt: https://www.producthunt.com/kwdinc/collections/product-hunt-for-x https://www.producthunt.com/kwdinc/collections/product-hunt-...
- adriancooney 12y ago
  Wow, I stand corrected. I had no idea the idea had spread this far. My apologies!

rebelidealist 12y ago

I'm not a designer and would like professional designers to weigh in. With most Material Design apps/sites, doesn't the ultra bold colors distract away from the content? I thought content is suppose to be king not the UI.

mhomde 12y ago
Yes, I would agree. Material is clearly designed to brand apps as "Google apps" not necessarily provide the best UX possible. To be fair though there are some more subtle accents, like Gray and Blue Gray than can be used
clay_to_n 12y ago
I don't think this is a fault of Material Design, but a fault of some of the early apps implementing it. IMO the designs that catch my eye on this site are the ones with full-bleed photos and content taking precedence over UI. More dynamic. Sidenote, but I can't wait to play with Android's Palette API that lets you extract colors from an image to use in your interface: http://www.willowtreeapps.com/blog/palette-the-new-api-for-android/ http://www.willowtreeapps.com/blog/palette-the-new-api-for-a...
bluthru 12y ago
I agree. The amount of color used in most Material Design apps is overbearing and heavy-handed.
pcurve 12y ago
I design enterprise apps. I have to justify every single color used. If a color doesn't serve function, then I don't use it. In my opinion, Google hasn't had good track record with UI/UX and building usable products. Microsoft's take of Material design is superior. Case in point, their outlook.com.
- ewzimm 12y ago
  You bring up a good point. If people want to figure out how to do Material Design in a non-Google context, all they need to do is get a Windows Phone and see how it's implemented in apps there, both dark and light themes. Google's design language is mostly a variation on Microsoft's.

Animats 12y ago

Those are the best examples of material design? Most of them are phone screenshots, higher than they're wide, on a blah background. The "material design" thing is supposed to be about dynamic effects. You click on things and they ripple. If the site let you go to the actual site or app being described, that would be more interesting. Or they showcased the material effects on their own site. Everybody has solid-color rectangles now. They're boring.

mattaus 12y ago
MaterialUp is actually pretty smart about this: - It integrates with sites such as CodePen or JSFiddle: i.e: http://www.materialup.com/posts/add-button http://www.materialup.com/posts/add-button - You can view app screenshots directly from the site (see below) and it you click on the big preview, it'll take you to the actual app. i.e: http://www.materialup.com/posts/dailymotion http://www.materialup.com/posts/dailymotion
clay_to_n 12y ago
They're not all phone screenshots - many are animations, JS snippets that run in-browser, or components. This is a producthunt-like website with daily submissions, not a curated best-of collection. For people working with or interested in Material Design, it seems like a cool site to keep up with resources and inspiration.

moeedm 12y ago

Really hope this Material Design nonsense doesn't take off. It's awful (especially on the web).

andybak 12y ago
Considering a bunch of people seem to be a) fairly keen on it and b) seem - at least at first glance - seem to have thought fairly hard about issues related to UX and aesthetics, surely you can put a teensy bit more effort into your critique? EDIT - money where one's mouth is time. Here's my take: There's some great stuff and some slightly less convincing stuff in the original 'Material' concept pitch but the problem is that the devil lies firmly in the details and it's already getting Cargo Cult-ed to hell and back - even in Google's own core products. However - I've generally found the quality of the critiques to be far below the quality of the topic being critiqued and I'm quite comfortable calling people out on lazy reactions if they haven't bothered to convince me that they've given the subject the attention it deserves. EDIT2 - Another thought has congealed after reading some more comments. The cargo cult is partly the fault of the original pitch. You can't propose something that is ostensibly as based on abstract principals as 'Material Design' is and only give a single implementation as the example without inviting people to fail to see through the surface details. Show us 'Material Design' with a completely different look and feel and then we might find it easier to grok the underlying principles and not get hung up on the specific choices made for this particular implementation. Or to put it another way - how would Material Design look if you wanted to distance yourself from the new Google branding as much as possible? What would remain constant?
- moeedm 12y ago
  I don't have to say much, just go and read the manifesto for Material Design. It's a lot of words that don't mean anything [1]. Another problem with it is that it's extremely trendy. Bright, almost fluorescent colors, ridiculous amounts of whitespace almost to a fault, long shadows, arbitrary grids for icons, etc. The bigger problem is that Google decided to become smartasses about creating a new design language. They took it way too seriously and I think who this hurts the most is the developers who make apps for Android. They don't know what Material Design means -- really means, as in how Google sees it. Third party developers will never really be able to adapt it properly and what you're going to end up with is a whole new type of visual fragmentation in Android. This look already looks dated, and I can't imagine what it will look like in a year. [1] http://www.google.com/design/spec/material-design/introduction.html#introduction-goals http://www.google.com/design/spec/material-design/introducti...

bobykarot 12y ago

The constant zoom-in/zoom-out on the Tools page is killing my eyes. Dont know if that's intended but that's really annoying.

Bud 12y ago

The "best" of light grey text on a white background!

gavinpc 12y ago

Material design is about semantics; the documents make that clear [0]. When people "get it wrong," that's what they are usually missing. Even deeper than the semantics of material, though, is the ontology of the space. If you think that most bad design decisions flow from an inadequate conceptual model of the domain, check out this 1998 MIT thesis from Mark Foltz, "Designing Navigable Information Spaces." It has changed my world. [0] http://google.com/design http://google.com/design [1] http://www.ai.mit.edu/projects/infoarch/publications/mfoltz-thesis/ http://www.ai.mit.edu/projects/infoarch/publications/mfoltz-... PDF version at http://rationale.csail.mit.edu/publications/Foltz1998Designing.pdf http://rationale.csail.mit.edu/publications/Foltz1998Designi...

joncp 12y ago

I just updated to Android Lollipop and now my phone is full of that MD crap. I soooo want to roll back.

ocdtrekkie 12y ago
Yeah, I won't accept the update, and I've disabled most of my Google apps, where they shove Material on you even if you're on KitKat.

deleted 12y ago

[deleted]

pcurve 12y ago

I think people are taking Material Design too literally. All these sites look the same. They're letting Material Design become 'the' primary branding element.

TheAceOfHearts 12y ago

Anyone else notice that all images flicker slightly when you hover over any image? I'm on a 15" rMBP and scrolling on Chromium is painfully laggy. It's also painfully obvious that the people responsible for making this did not bother reading the actual spec.

aikah 12y ago

flat design is dead already ? /s

happster 12y ago

Here is a good explanation of Material Design principles: http://materialdesignblog.com/the-ultimate-guide-to-googles-material-design/ http://materialdesignblog.com/the-ultimate-guide-to-googles-...