Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
This is a legitimate user experience question, so why was it downvoted? –  Mega Matt Jan 21 '13 at 21:33
    
I've always wondered this and, yes, it is a very legitimate user experience question and I'd like to know if anyone has an answer. –  mattermill Jan 21 '13 at 22:51
    
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? –  Mega Matt Jan 22 '13 at 3:21
    
You forgot the Yellow in the "Google" Logo –  iProgrammed Jan 22 '13 at 4:19

2 Answers 2

up vote 36 down vote accepted

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.

share|improve this answer
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
3  
Done, thanks for pointing that out. –  Daniele Jan 22 '13 at 9:40
1  
Awesome, thanks Daniele. For the most part, the Create/Do approach seems to hold up with their designs. –  Mega Matt 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. –  Mega Matt Jan 29 '13 at 2:20

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
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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