7 ms·

Google Design

272 points by radley 12y ago

gress 12y ago
"At Google we say, focus on the user and all else will follow." Presumably they are talking about cameras.
- vicbrooker 12y ago
  I just assumed this was a typo: 'At Google we say, "Focus on the user data and all else will follow"'
  - mrcwinn 12y ago
    Here we go: "At Google we say, 'Focus on the user data and all else will follow.'"
Angostura 12y ago
If only they could describe their simple intuitive design goals, in simple intuitive language > A material metaphor is the unifying theory of a rationalized space and a system of motion.
- illini123 12y ago
  Apple isn't much better: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556 https://developer.apple.com/library/ios/documentation/UserEx...
  - rrrx3 12y ago
    In both cases the idea is to obfuscate the complexity - remove it from the user's view to make it effortless. UX is not easy. What you are looking at is the "how," not the "what."
  - zachrose 12y ago
    I really like: "Throughout, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision."
kreek 12y ago
Tongue firmly in cheek; but does this mean they're going to start applying design to their products? I could fill a book of examples just from Gmail (settings screen, inconsistant placement of reply button, no option to reverse converstation view).
- Synergyse 12y ago
  They briefly mentioned this change would apply to all form factors (mobile, tablet, wearable & desktop) but no solid details yet. The UX components are based on http://www.polymer-project.org/ http://www.polymer-project.org/
- Andrex 12y ago
  Careful what you wish for: http://www.theverge.com/2014/5/10/5704452/screenshots-suggest-google-is-testing-a-completely-redesigned-gmail http://www.theverge.com/2014/5/10/5704452/screenshots-sugges...
- cliveowen 12y ago
  GMail is often trumpeted as great example of a clean, well-designed web app, but I find it downright messy, complicated and unnecessarily simplistic. Everytime I need to do something simple like forwarding or adding a rule for deleting emails, I have to waste a good 10 minutes digging through that horribly designed settings menu. And even the main screen isn't that good, for example, there's no way to delete every email from a given contact, or at least not an obvious one. I try to use GMail as little as I can, because every time I do it's a real nightmare.
  - keevie 12y ago
    I've had the opposite experience. To delete all emails from a given contact....search for from:contact, select all, delete. Idk how that could be more intuitive?
    - wodenokoto 12y ago
      More intuitive would be not having to know the command. Is it still "from" if my gmail is set to German or French? Anyway, I do think google solved this in to ways: type contact and from:contact is suggested If you rest the curser over a contact name, a box with an option to see all conversation appear.
Colliwinks 12y ago
Google "Design"
deleted 12y ago
[deleted]
- randomfool 12y ago
  'Material Design' primarily diverges from Metro around the use of drop shadows, gradients and lighting effects. Where Metro avoids these 'fake' effects as part of it's authentically digital mantra, Material design is embracing them as natural cues that we're pre-programmed to recognize. I won't disagree with the Metro influence but I think this separation in design philosophy is incredibly important. The Material approach has sometimes been called 'almost flat' design, and I think it really embraces the criticisms raised in articles such as: http://www.matthewmooredesign.com/almost-flat-design/ http://www.matthewmooredesign.com/almost-flat-design/ http://gizmodo.com/designers-shadows-are-totally-fine-in-a-flat-ui-633686703 http://gizmodo.com/designers-shadows-are-totally-fine-in-a-f...
aragot 12y ago
From the website: > Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors. Is that announcing they're launching a text generator for design guidelines?
deleted 12y ago
[deleted]
clarle 12y ago
Isn't material design basically re-invented skeuomorphism? From Google's Material Design guide: "...visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances."
- 542458 12y ago
  Kinda. Skeuomorphism includes learned cues from everyday life (button positions on a calculator), while material design technically doesn't (only stuff relating to the physical nature of reality - shadows for depth, motion for reaction, etc).
- tinco 12y ago
  What visual cue that is grounded in our experience of reality does an app with a metallic texture background give you? I'm half joking, of course there's elements of skeuomorphism that work this way, like designing a note taking app that looks like a lined pocket notebook. But the recent trend is to approach this very minimalistically, only taking the "primal parts" and leaving out the leather textures.
- rrrx3 12y ago
  I don't think so. I'd pin it as more of an evolutionary state. Skeuomorphism is the the 1:1 direct relation of digital items to items in the physical world. Material Design seems to be geared toward the behaviors and intent of solely digital items.
- randomfool 12y ago
  Skeuomorphism is adopting the style of physical incantation of an object for its digital display. Material design dictates a single physical incantation for the UI- everything should feel like paper. A contrived example of this is a skeuomorphic car dashboard display would have photo-realistic guages with lighting reflections from the cover glass, detailed bezel, etc. My read of a Material design implementation is that it should have a flat design with lighting and depth effects for contrast and shape recognition.
  - 12y ago
bennettfeely 12y ago
Last October I made a CSS3 demo where the three-bar navicon icon transforms into an arrow. I'm very excited to see Google adopting it to their new designs. http://codepen.io/bennettfeely/pen/twbyA http://codepen.io/bennettfeely/pen/twbyA http://www.google.com/design/spec/animation/delightful-details.html http://www.google.com/design/spec/animation/delightful-detai...
- zghst 12y ago
  I highly doubt Google adopted this from your demo.
- anko 12y ago
  nice, thanks.
hhsnopek 12y ago
Material Design Reel Video: https://www.youtube.com/watch?v=Q8TXgCzxEnw https://www.youtube.com/watch?v=Q8TXgCzxEnw There are soft button differences when they display the nexus devices, could these possibly be part of Googles Re-Design for the next Android release?
ThomPete 12y ago
I worry that this color scheme is very hard to maintain. It's a very opinionated color and heavy color scheme rather than a more generic supporting color-scheme. It feels like at design style rather than a design framework.
- hhsnopek 12y ago
  They aren't any color schemes that they show... They show some examples and give advice on how to make your apps and sites aesthetically pleasing. They give you a pallet of colors [http://www.google.com/design/spec/style/color.html http://www.google.com/design/spec/style/color.html] that should be considered. This isn't a design framework....
  - ThomPete 12y ago
    Yes and it's that pallet I think is problematic.
    - hhsnopek 12y ago
      How is it a problem when you have hundreds of colors to choose from? If you really wanted to you could choose your own...
      - ThomPete 12y ago
        You don't have hundreds of colors to choose from.
lnanek2 12y ago
As a user I've been really unhappy with their designs lately. I often have to click around in maps to try to figure out how the heck to change it from one type of nav to another, for example. There's also often tons of mystery icons in their apps when I try to do something. It's very frustrating. The older versions of maps with more controls were a lot easier to use. Their design patterns fail in user testing too. Moving actions to an unlabeled icon in the top right like they recommend to Android developers now instead of a large clear button just causes users to never find the action. The recent Android Wear release is similar. All notifications are stripped of anything but text and an image and there's no way to put a button in where users may want one like the notification API already supports with RemoteViews. Google is forcing a certain look on the developers at the cost of the users. I think their whole design initiative is just trying to make things look pretty and screwing over their users, personally.
- bryang 12y ago
  I hate their maps UX now. Just trying to pull up traffic is incredibly annoying! The whole auto drop-down thing is terrible.
  - thrownaway2424 12y ago
    How is it annoying? When I load maps.google.com in Chrome on desktop, the link for "traffic" is shown by default. All you have to do is click once to turn it on. On mobile, it's the very first option in the drawer, and if you turn it on it stays on until you turn if off again.
    - kin 12y ago
      It's annoying because it's not always present. Ex: I look up my favorite pizza place and it's 15 minutes away. Now I want to see traffic. How? It's impossible to view both.
      - arnorhs 12y ago
        It is always present. From the moment you see an overview of possible routes, in the route overview and in the TBT nav. If you're not seeing traffic all the time, it either means: - there's no congestion at all in the route that you picked - you have a different version of maps than the latest one in the play store - you didn't select driving directions, but either bus, walking, biking or something else. - traffic for your location/city is simply not supported.
kin 12y ago
I like that they've released all resources. This means 3rd party apps could in turn apply these same layouts and principles, creating a consistent user interface where it won't matter as much how unintuitive it is.
fidotron 12y ago
This really is print design tyranny. When one of the leading web companies distributes their design guide as pdf . . . Google, historically, has benefited from immunity to design nazis, but it now looks like they've completely taken over.
- 21echoes 12y ago
  wait, what? there's one downloadable pdf for offline viewing, the main version (bigger, literally the first thing listed)is not pdf: http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti...
zghst 12y ago
The Material Design PDF seems like it's nothing but pretty pictures with copy. I think Google could do a better job of explaining the concept by using examples from their redesigned UI.
dmalik 12y ago
These new "Material" design guidelines are great and I hope that we see designers start adopting them. I also hope developers start adopting Googles great animation guidelines. The added depth combined with the animation provides a great UX. Start of the next trend in UI for sure. Albeit a combination of skeuomorphism and flat. Reminds me of this post - https://news.ycombinator.com/item?id=7555012 https://news.ycombinator.com/item?id=7555012
r00fus 12y ago
The "Surface Reaction" responsive interaction pattern just seems superfluous and distracting. I care that the button I hit was hit, not where I hit it. Very similar to how in Windows7 the task bar follows your cursor with a glowing highlight - which I found very distracting and useless (not unlike the OSX dock magnify-on-mouseover). At least in Windows and OSX I can turn that off - since these are guidelines for new apps, I don't think Android users are going to be given those options.
zan2434 12y ago
I like that UIs are being given depth, but they should respond as physically expected to, too. Why can't buttons move into the screen when pushed instead of changing color and rippling?
arrrg 12y ago
So … are they really still fully embracing the hamburger menu? That seems like such a horrible design pattern to me.
XorNot 12y ago
Some day I'm hoping Google will deal with the 960px gap, but judging by YouTube and gmail not any time soon. 1920x1080 is a common form factor, yet for some reason they are allergic to the idea (as are a lot of other people) that their web-apps should not break when split to half the screen size.
gavinpc 12y ago
Edward Tufte tells us that we should strive for information-dense, multidimensional visuals. Bret Victor says, "What he said," and adds that these visuals should exploit the magical potential of dynamic displays. As several have remarked, the principles in the OP tend to yield low-information interfaces. Colors, sizes, and spatial relations are not used as variable axes because they are subservient to visual appeal and "responsiveness". I suspect that the Tufte-style displays (besides being difficult to craft in the first place) are difficult to suit to doing a lot, and the "material" style visuals are difficult to use for conveying a lot. This has inspired me to work on an "almost-almost-flat" design that is high on information and affordances, while teaching itself.
basbas 12y ago
Are there any other company design guidelines like this one that someone can recommend?
metaphorical 12y ago
It looks nice. However, my biggest complain is that it's playing too safe. So that it feels more like a style guide than a vision. E.g. When the style guide talks about mass and force in animation, I was expecting something much more than some recommendations on tweening. In many cases, it feels like a shallow reference to the physical / material, not quite the meaningful "metaphor" that it aspires to be. Polymer, on the other hand, is pretty awesome.
seanmcdirmid 12y ago
Does anyone remember the TAT Foldout UI demo from way back in 2009? https://www.youtube.com/watch?v=FtR_zA9elrM https://www.youtube.com/watch?v=FtR_zA9elrM That was definitely way over the top, but there is a lot of potential in naturalism (depth, lighting, shadows, paper) as well as natural motion in a phone UI. I'm glad Google is going in this direction.
Grue3 12y ago
Youtube is one of the worst designed, user-unfriendly websites ever. And it only got worse with each update.

Google Design

272 points by radley 12y ago

gress 12y ago

"At Google we say, focus on the user and all else will follow." Presumably they are talking about cameras.

vicbrooker 12y ago
I just assumed this was a typo: 'At Google we say, "Focus on the user data and all else will follow"'
- mrcwinn 12y ago
  Here we go: "At Google we say, 'Focus on the user data and all else will follow.'"

Angostura 12y ago

If only they could describe their simple intuitive design goals, in simple intuitive language > A material metaphor is the unifying theory of a rationalized space and a system of motion.

illini123 12y ago
Apple isn't much better: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556 https://developer.apple.com/library/ios/documentation/UserEx...
- rrrx3 12y ago
  In both cases the idea is to obfuscate the complexity - remove it from the user's view to make it effortless. UX is not easy. What you are looking at is the "how," not the "what."
- zachrose 12y ago
  I really like: "Throughout, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision."

kreek 12y ago

Tongue firmly in cheek; but does this mean they're going to start applying design to their products? I could fill a book of examples just from Gmail (settings screen, inconsistant placement of reply button, no option to reverse converstation view).

Synergyse 12y ago
They briefly mentioned this change would apply to all form factors (mobile, tablet, wearable & desktop) but no solid details yet. The UX components are based on http://www.polymer-project.org/ http://www.polymer-project.org/
Andrex 12y ago
Careful what you wish for: http://www.theverge.com/2014/5/10/5704452/screenshots-suggest-google-is-testing-a-completely-redesigned-gmail http://www.theverge.com/2014/5/10/5704452/screenshots-sugges...
cliveowen 12y ago
GMail is often trumpeted as great example of a clean, well-designed web app, but I find it downright messy, complicated and unnecessarily simplistic. Everytime I need to do something simple like forwarding or adding a rule for deleting emails, I have to waste a good 10 minutes digging through that horribly designed settings menu. And even the main screen isn't that good, for example, there's no way to delete every email from a given contact, or at least not an obvious one. I try to use GMail as little as I can, because every time I do it's a real nightmare.
- keevie 12y ago
  I've had the opposite experience. To delete all emails from a given contact....search for from:contact, select all, delete. Idk how that could be more intuitive?
  - wodenokoto 12y ago
    More intuitive would be not having to know the command. Is it still "from" if my gmail is set to German or French? Anyway, I do think google solved this in to ways: type contact and from:contact is suggested If you rest the curser over a contact name, a box with an option to see all conversation appear.

Colliwinks 12y ago

Google "Design"

deleted 12y ago

[deleted]

randomfool 12y ago
'Material Design' primarily diverges from Metro around the use of drop shadows, gradients and lighting effects. Where Metro avoids these 'fake' effects as part of it's authentically digital mantra, Material design is embracing them as natural cues that we're pre-programmed to recognize. I won't disagree with the Metro influence but I think this separation in design philosophy is incredibly important. The Material approach has sometimes been called 'almost flat' design, and I think it really embraces the criticisms raised in articles such as: http://www.matthewmooredesign.com/almost-flat-design/ http://www.matthewmooredesign.com/almost-flat-design/ http://gizmodo.com/designers-shadows-are-totally-fine-in-a-flat-ui-633686703 http://gizmodo.com/designers-shadows-are-totally-fine-in-a-f...

aragot 12y ago

From the website: > Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors. Is that announcing they're launching a text generator for design guidelines?

deleted 12y ago

[deleted]

clarle 12y ago

Isn't material design basically re-invented skeuomorphism? From Google's Material Design guide: "...visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances."

542458 12y ago
Kinda. Skeuomorphism includes learned cues from everyday life (button positions on a calculator), while material design technically doesn't (only stuff relating to the physical nature of reality - shadows for depth, motion for reaction, etc).
tinco 12y ago
What visual cue that is grounded in our experience of reality does an app with a metallic texture background give you? I'm half joking, of course there's elements of skeuomorphism that work this way, like designing a note taking app that looks like a lined pocket notebook. But the recent trend is to approach this very minimalistically, only taking the "primal parts" and leaving out the leather textures.
rrrx3 12y ago
I don't think so. I'd pin it as more of an evolutionary state. Skeuomorphism is the the 1:1 direct relation of digital items to items in the physical world. Material Design seems to be geared toward the behaviors and intent of solely digital items.
randomfool 12y ago
Skeuomorphism is adopting the style of physical incantation of an object for its digital display. Material design dictates a single physical incantation for the UI- everything should feel like paper. A contrived example of this is a skeuomorphic car dashboard display would have photo-realistic guages with lighting reflections from the cover glass, detailed bezel, etc. My read of a Material design implementation is that it should have a flat design with lighting and depth effects for contrast and shape recognition.
- 12y ago

bennettfeely 12y ago

Last October I made a CSS3 demo where the three-bar navicon icon transforms into an arrow. I'm very excited to see Google adopting it to their new designs. http://codepen.io/bennettfeely/pen/twbyA http://codepen.io/bennettfeely/pen/twbyA http://www.google.com/design/spec/animation/delightful-details.html http://www.google.com/design/spec/animation/delightful-detai...

zghst 12y ago
I highly doubt Google adopted this from your demo.
anko 12y ago
nice, thanks.

hhsnopek 12y ago

Material Design Reel Video: https://www.youtube.com/watch?v=Q8TXgCzxEnw https://www.youtube.com/watch?v=Q8TXgCzxEnw There are soft button differences when they display the nexus devices, could these possibly be part of Googles Re-Design for the next Android release?

ThomPete 12y ago

I worry that this color scheme is very hard to maintain. It's a very opinionated color and heavy color scheme rather than a more generic supporting color-scheme. It feels like at design style rather than a design framework.

hhsnopek 12y ago
They aren't any color schemes that they show... They show some examples and give advice on how to make your apps and sites aesthetically pleasing. They give you a pallet of colors [http://www.google.com/design/spec/style/color.html http://www.google.com/design/spec/style/color.html] that should be considered. This isn't a design framework....
- ThomPete 12y ago
  Yes and it's that pallet I think is problematic.
  - hhsnopek 12y ago
    How is it a problem when you have hundreds of colors to choose from? If you really wanted to you could choose your own...
    - ThomPete 12y ago
      You don't have hundreds of colors to choose from.

lnanek2 12y ago

As a user I've been really unhappy with their designs lately. I often have to click around in maps to try to figure out how the heck to change it from one type of nav to another, for example. There's also often tons of mystery icons in their apps when I try to do something. It's very frustrating. The older versions of maps with more controls were a lot easier to use. Their design patterns fail in user testing too. Moving actions to an unlabeled icon in the top right like they recommend to Android developers now instead of a large clear button just causes users to never find the action. The recent Android Wear release is similar. All notifications are stripped of anything but text and an image and there's no way to put a button in where users may want one like the notification API already supports with RemoteViews. Google is forcing a certain look on the developers at the cost of the users. I think their whole design initiative is just trying to make things look pretty and screwing over their users, personally.

bryang 12y ago
I hate their maps UX now. Just trying to pull up traffic is incredibly annoying! The whole auto drop-down thing is terrible.
- thrownaway2424 12y ago
  How is it annoying? When I load maps.google.com in Chrome on desktop, the link for "traffic" is shown by default. All you have to do is click once to turn it on. On mobile, it's the very first option in the drawer, and if you turn it on it stays on until you turn if off again.
  - kin 12y ago
    It's annoying because it's not always present. Ex: I look up my favorite pizza place and it's 15 minutes away. Now I want to see traffic. How? It's impossible to view both.
    - arnorhs 12y ago
      It is always present. From the moment you see an overview of possible routes, in the route overview and in the TBT nav. If you're not seeing traffic all the time, it either means: - there's no congestion at all in the route that you picked - you have a different version of maps than the latest one in the play store - you didn't select driving directions, but either bus, walking, biking or something else. - traffic for your location/city is simply not supported.

kin 12y ago

I like that they've released all resources. This means 3rd party apps could in turn apply these same layouts and principles, creating a consistent user interface where it won't matter as much how unintuitive it is.

fidotron 12y ago

This really is print design tyranny. When one of the leading web companies distributes their design guide as pdf . . . Google, historically, has benefited from immunity to design nazis, but it now looks like they've completely taken over.

21echoes 12y ago
wait, what? there's one downloadable pdf for offline viewing, the main version (bigger, literally the first thing listed)is not pdf: http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti...

zghst 12y ago

The Material Design PDF seems like it's nothing but pretty pictures with copy. I think Google could do a better job of explaining the concept by using examples from their redesigned UI.

dmalik 12y ago

These new "Material" design guidelines are great and I hope that we see designers start adopting them. I also hope developers start adopting Googles great animation guidelines. The added depth combined with the animation provides a great UX. Start of the next trend in UI for sure. Albeit a combination of skeuomorphism and flat. Reminds me of this post - https://news.ycombinator.com/item?id=7555012 https://news.ycombinator.com/item?id=7555012

r00fus 12y ago

The "Surface Reaction" responsive interaction pattern just seems superfluous and distracting. I care that the button I hit was hit, not where I hit it. Very similar to how in Windows7 the task bar follows your cursor with a glowing highlight - which I found very distracting and useless (not unlike the OSX dock magnify-on-mouseover). At least in Windows and OSX I can turn that off - since these are guidelines for new apps, I don't think Android users are going to be given those options.

zan2434 12y ago

I like that UIs are being given depth, but they should respond as physically expected to, too. Why can't buttons move into the screen when pushed instead of changing color and rippling?

arrrg 12y ago

So … are they really still fully embracing the hamburger menu? That seems like such a horrible design pattern to me.

XorNot 12y ago

Some day I'm hoping Google will deal with the 960px gap, but judging by YouTube and gmail not any time soon. 1920x1080 is a common form factor, yet for some reason they are allergic to the idea (as are a lot of other people) that their web-apps should not break when split to half the screen size.

gavinpc 12y ago

Edward Tufte tells us that we should strive for information-dense, multidimensional visuals. Bret Victor says, "What he said," and adds that these visuals should exploit the magical potential of dynamic displays. As several have remarked, the principles in the OP tend to yield low-information interfaces. Colors, sizes, and spatial relations are not used as variable axes because they are subservient to visual appeal and "responsiveness". I suspect that the Tufte-style displays (besides being difficult to craft in the first place) are difficult to suit to doing a lot, and the "material" style visuals are difficult to use for conveying a lot. This has inspired me to work on an "almost-almost-flat" design that is high on information and affordances, while teaching itself.

basbas 12y ago

Are there any other company design guidelines like this one that someone can recommend?

metaphorical 12y ago

It looks nice. However, my biggest complain is that it's playing too safe. So that it feels more like a style guide than a vision. E.g. When the style guide talks about mass and force in animation, I was expecting something much more than some recommendations on tweening. In many cases, it feels like a shallow reference to the physical / material, not quite the meaningful "metaphor" that it aspires to be. Polymer, on the other hand, is pretty awesome.

seanmcdirmid 12y ago

Does anyone remember the TAT Foldout UI demo from way back in 2009? https://www.youtube.com/watch?v=FtR_zA9elrM https://www.youtube.com/watch?v=FtR_zA9elrM That was definitely way over the top, but there is a lot of potential in naturalism (depth, lighting, shadows, paper) as well as natural motion in a phone UI. I'm glad Google is going in this direction.

Grue3 12y ago

Youtube is one of the worst designed, user-unfriendly websites ever. And it only got worse with each update.