5 ms·

It looks like the first (hero) element on the page breaks Material conventions. You have a photo with a large z-index somehow below a panel with a smaller z-ind

by adyus 10y ago

It looks like the first (hero) element on the page breaks Material conventions. You have a photo with a large z-index somehow below a panel with a smaller z-index. The idea of Material design was not just pretty shadows and drip animations on click. It was about providing a metaphor for digital content on screens. Still, great job on the technical effort of converting everything to Material!

anmorgan 10y ago
Agreed. The drop shadow needs to be swapped between the two.
davidw 10y ago
> It was about providing a metaphor for digital content on screens. Sounds complicated. Why not just directly provide the digital content on the screen?
- cyberferret 10y ago
  I'd suggest you check out Google's philosophy on Material Design [1] - it explains it quite well. HN readers are probably not the intended audience for MD. It was basically intended so that layperson users would intuitively understand how to use an interface without thinking too hard about it - e.g. which areas are clickable? Did I really press that button (The ripple and/or bounce effect gives them a visual confirmation that yes, they indeed did). Items appear to float above each other to give the idea that there is more content underneath, or that they can drill down further etc. [1] - https://material.google.com/#introduction-principles https://material.google.com/#introduction-principles
  - davidw 10y ago
    So basically attempting to do what UI's have always attempted to do. But as a 'metaphor'.
  - deathanatos 10y ago
    > e.g. which areas are clickable? Hasn't (at least what I interpret to be) "material design" removed the ability of the user to determine what is clickable today? It feels like a flat colored box suffices as a "button" … sometimes. Sometimes it is really just a flat colored box, and you can't tell up until the point you click it. Buttons used to have a nice bevel around them, giving them the appearance of being … a button. Being a bump on the page that could be pushed inwards. Everything is flat now. > Items appear to float above each other to give the idea that there is more content underneath, or that they can drill down further etc. If I've ever seen drops shadows used to indicate anything other than just being there for looks, then it went well over my head. That seems like the most subtle, impossible to discover UI aspect. Can you show me one recent "material design" UI that uses drop shadows to convey information about the workings of the UI?
    - adyus 10y ago
      "Material Design" and Google's Material Design are different things. The former is a label generally applied to flat, square design with minimal flourishes. The latter is a set of principles and standards for how digital interfaces should behave, along with a sample implementation. In Google's MD, the clickable items are supposed to be identified either by their elevation (drop shadows) or an all-caps, secondary-color treatment and position at the bottom of elements. It's true, icons and some text links could use some improvement.
- adyus 10y ago
  Well, that content has to take some form. Previously it was all about skeuromorphic design, to make things look like their real-life equivalent. Then, the balance swung to the other extreme, with completely-flat design. Things were decidedly 2D and "digital". Material Design is Google's attempt (among others [1]) to standardize while providing subtle cues of depth and interaction. [1] - https://www.lightningdesignsystem.com/ https://www.lightningdesignsystem.com/

by adyus 10y ago

anmorgan 10y ago

Agreed. The drop shadow needs to be swapped between the two.

davidw 10y ago

> It was about providing a metaphor for digital content on screens. Sounds complicated. Why not just directly provide the digital content on the screen?

cyberferret 10y ago
I'd suggest you check out Google's philosophy on Material Design [1] - it explains it quite well. HN readers are probably not the intended audience for MD. It was basically intended so that layperson users would intuitively understand how to use an interface without thinking too hard about it - e.g. which areas are clickable? Did I really press that button (The ripple and/or bounce effect gives them a visual confirmation that yes, they indeed did). Items appear to float above each other to give the idea that there is more content underneath, or that they can drill down further etc. [1] - https://material.google.com/#introduction-principles https://material.google.com/#introduction-principles
- davidw 10y ago
  So basically attempting to do what UI's have always attempted to do. But as a 'metaphor'.
- deathanatos 10y ago
  > e.g. which areas are clickable? Hasn't (at least what I interpret to be) "material design" removed the ability of the user to determine what is clickable today? It feels like a flat colored box suffices as a "button" … sometimes. Sometimes it is really just a flat colored box, and you can't tell up until the point you click it. Buttons used to have a nice bevel around them, giving them the appearance of being … a button. Being a bump on the page that could be pushed inwards. Everything is flat now. > Items appear to float above each other to give the idea that there is more content underneath, or that they can drill down further etc. If I've ever seen drops shadows used to indicate anything other than just being there for looks, then it went well over my head. That seems like the most subtle, impossible to discover UI aspect. Can you show me one recent "material design" UI that uses drop shadows to convey information about the workings of the UI?
  - adyus 10y ago
    "Material Design" and Google's Material Design are different things. The former is a label generally applied to flat, square design with minimal flourishes. The latter is a set of principles and standards for how digital interfaces should behave, along with a sample implementation. In Google's MD, the clickable items are supposed to be identified either by their elevation (drop shadows) or an all-caps, secondary-color treatment and position at the bottom of elements. It's true, icons and some text links could use some improvement.
adyus 10y ago
Well, that content has to take some form. Previously it was all about skeuromorphic design, to make things look like their real-life equivalent. Then, the balance swung to the other extreme, with completely-flat design. Things were decidedly 2D and "digital". Material Design is Google's attempt (among others [1]) to standardize while providing subtle cues of depth and interaction. [1] - https://www.lightningdesignsystem.com/ https://www.lightningdesignsystem.com/