42

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.

  • 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 Jan 22 '13 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 Jan 22 '13 at 3:21
  • You forgot the Yellow in the "Google" Logo – iProgrammed Jan 22 '13 at 4:19
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.

  • 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 Jan 22 '13 at 9:03
  • 1
    Awesome, thanks Daniele. For the most part, the Create/Do approach seems to hold up with their designs. – MegaMatt Jan 28 '13 at 3:03
  • 1
    What is grey for, then? In the image above "New folder" is grey, shouldn't it be red? – DisgruntledGoat Jan 28 '13 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 Jan 29 '13 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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