43

This has been an elusive topic, and I haven't yet been able to form my own conclusion about what Google's reasoning is to make a given button blue, red, or gray, given their latest design ethos. Take the Drive page, for instance:

enter image description here

In general, on these types of pages, they'll make the button on the left red, and the others gray, but I've seen it more sporadic on other sites of theirs.

I like the simple look-and-feel, and wanted to adopt something similar for my site, but I'm struggling to design the UI rules for developers to follow to choose what button is what color. Maybe large-scale definitive actions are red buttons, routine actions are gray, and new features are blue? I dunno, but I thought I'd see if anyone has any ideas, or maybe even a source for this information.

Thanks.

Improve this question
3
  • I think it's a legitimate question, but probably not the right audience. You'd really have to take this up with the Google UX team.
    – DA01
    Commented Jan 22, 2013 at 0:46
  • Thanks. Not that I'd go that far to know, but is it even possible to get in touch with the Google UX team?
    – MegaMatt
    Commented Jan 22, 2013 at 3:21
  • You forgot the Yellow in the "Google" Logo
    – iProgrammed
    Commented Jan 22, 2013 at 4:19

2 Answers 2

Reset to default
43

The following screenshot is taken from the speech by Jon Wiley at UXweek 2011 (Original video). He explains the design decisions made by google in the past months.

Meanings of color in google buttons

Look towards the end (after minute 27) of the video to see it by yourself:

  • red is for "create something"
  • green is for "share something"
  • blue is for "do something" (e.g. submit a form)

Keep in mind that this may be slightly outdated. For instance in the latest version of google+ for Android, google started using colors in a different way. In any case the video is worth seeing, since a lot of examples are made and the process that took google to this design is clearly outlined.

Improve this answer
4
  • 4
    Can you summarize the speech, or at least detail the particular relevant parts for this question so that you're providing an answer, rather than just linking elsewhere and forcing everyone to have to follow that link and find the answer themselves?
    – JonW ♦
    Commented Jan 22, 2013 at 9:03
  • 1
    Awesome, thanks Daniele. For the most part, the Create/Do approach seems to hold up with their designs.
    – MegaMatt
    Commented Jan 28, 2013 at 3:03
  • 1
    What is grey for, then? In the image above "New folder" is grey, shouldn't it be red?
    – DisgruntledGoat
    Commented Jan 28, 2013 at 11:30
  • Good question. Maybe we should assume that Google wants only one giant red button per page, and they reserve it for the "biggest" and most impactful creation.
    – MegaMatt
    Commented Jan 29, 2013 at 2:20
1

I would classify the grey buttons as utilities. Actions that do no create/edit/destroy objects. For example: The grey buttons in your screenshot revolve around modifying the UI or behavior of the app.

  • Sort
  • Change View
  • Setttings
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.