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.

I'm interested in getting opinions on changing the colour of social media buttons (facebook/twitter/linkedin sign-up and login as well as sharing) to better fit in with the colour pallet of our website.

Do you think the effectiveness of these buttons is reduced if the relevant social network is identified only by it's logo, without the corresponding colour?

My gut would tell me that the colour gives the user an additional visual queue and lets us leverage the social brand?

Smashing Magazine using established color values VS Codrops website color values used rather than established icon colors

share|improve this question
4  
My gut feeling is that you'll have problems with the respective companies who own these networks and their logos. I doubt you'll be allowed to damage their branding by changing their logo colors. –  André Feb 25 '13 at 15:36
    
Which buttons do you mean? Do you mean the 'click this button to share this page' button, or do you mean the 'click this button to go and visit our Facebook page' button? –  JonW Feb 25 '13 at 16:23
    
Related question: ux.stackexchange.com/questions/13030/…? –  Mark Gavagan Feb 25 '13 at 17:01
    
Thanks guys. @JonW I meant social login/signup buttons ("Login with Facebook"), or share with your friends/import facebook friends. –  Avron Feb 27 '13 at 10:51
    
As a current trend I have seen people detouring from the established social icon colors and rolling their own colors. I was curious if this has had an impact on users. From my own experience when website's roll their own colors I tend to miss the icons as they do not "pop out" on the screen. –  Courtney Jordan Mar 15 '13 at 14:21

13 Answers 13

You are not allowed to change the color or to use custom logos, if you want to adhere to the use policy. See Twitter policy and Facebook policy

share|improve this answer

use these styles with font awesome without icon images

facebook { color:#3C78C3 ;}
linkedin { color:#007bb6 ;}    
google { color:#dd4b39 ;}
twitter { color:#00aced ;}
youtube { color:#bb0000;}
instagram  { color:#517fa4 ;}
pinterest  { color:#cb2027 ;}
quora  { color:#a82400 ;}
flickr  { color:#ff0084 ;}
tumblr  { color:#32506d ;}
vimeo  { color:#aad450;}
foursquare   { color:#0072b1;}
share|improve this answer
    
This doesn't answer the question. The question posed was: "Do you think the effectiveness of these buttons is reduced if the relevant social network is identified only by it's logo, without the corresponding colour?" Your answer is just a list of hex color codes. –  JonW Nov 6 '13 at 13:41

The last thing you want to do when you have worked so hard to get traffic to your site is to invite customers to leave the site to go to your social media pages which are there to get traffic to your site. Infinite loop.

So for function that invoking "sharing" these icons remain as per the social media brand.

For what are essentially external links to other sites, you should design them to suit the site design.

share|improve this answer

What if I came to you and presented you with a milkshake for you to drink and I told you the milkshake was strawberry despite the fact that it was visually "dark chocolate" - meaning it was dark brown and not the beautiful pink concoction with red pieces of strawberry in it. When you taste it, it is indeed Strawberry in flavor but dark chocolate in appearance. How does that make you feel?

I take the same approach with social media icons. Yes, the color is only half the story but it changes one's perspective of the value or experience if the color is something other than what you expect. One could argue that as long as the shape is there (the 'F' for Facebook or the abstracted bird of the Twitter icon) and as long as the link still associates with the intended web site then everything is fine. But the color is equally important. Colors for these icons have become a standard and have become synonymous with the product they are associated with. The same is true for the strawberry milkshake. You expect it not only to taste like strawberry but look like the conventional strawberry milkshake as well.

share|improve this answer

I guess it depends on the branding of your site and also the importance of these icons to what is your website does.

In some ways these icons have become token must-haves on websites. People seem to feel the need to include them, and in some cases they are not necessary and are often implemented but the business doesn't utilizes said social media properly.

I think if your core interest or business is socially orientated, eg. news/discussion site, or if you are quite active on social media and it provides extra value or interest to your site content, then it makes sense giving these icons more prominence and full color.

One interesting scenario is if you have a brand guide that is particularly rigid - let's say for instance it's really minimal, nice stylish typeface and colors are Black/White/Grey, you may feel it would compromise your brand integrity or consistency by placing these multi-colored social icons over a carefully crafted and branded page. So in this case it's a matter of balancing the importance of your brand vs. social media needs.

I have seen some nice examples of this where muted/desaturated social icons (sometimes revealing their full proper colors on rollover) are cleverly crafted into a site design in a way which maintains a strong brand integrity whilst also providing prominence to the icons.

Sorry, I went off on a bit of a tangent there :) I'm not sure if that scenario is applicable to you but I hope it helps.

share|improve this answer

Theoretically the icons could be any colour you want. They can fit with your theme or they can look completely different.

One thing to keep in mind you are using brands, and like every brand these guys have their own brand guidelines: Facebook, Twitter, Pinterest... Also the branding of these sites, including colour and graphic style, is ingrained into the memory of people. By altering it, you make your site feel sketchy and untrustworthy.

share|improve this answer

As a part of their CI (or: convention in case of RSS), the colors used for the social channels are significant to properly recognize them. Of course the bare shapes are also recognizable, but these will be less noticeable in the layout (especially in the second case, where the contrasts are really low). However, if sharing is not one of important strategic requirements of the project you work on, it becomes less important in general, so it is a way to go.

Should you have a design similar to the second one, you may consider putting these icons within a separated, white container to avoid problems with contrast and color matching. These icons always look great on white background.

share|improve this answer

Isn't the whole point of putting them on the page to get people to click them? If they stand out from your color scheme, well, that'll just make them more likely to be clicked. Visual prominence caused by contrast drastically increases the likelihood of click-throughs.

If you're concerned about people clicking the icons instead of clicking some other call-to-action, don't bother putting them on the page in the first place. Otherwise, make them easily recognizable by using their normal colors (possibly toned down a little if you think they look too garish on your site).

share|improve this answer
    
The whole point is to get people to click the icon but it seems people are falling back from the traditional set social media icon colors and rolling their own. It almost looks like websites want to show they are connected to social media but they are blending icons in to appear hidden. Sites like "Codrops"(tympanus.net/codrops) or "Mohawk Fine papers Inc."(mohawkconnects.com) are examples. I was just curious if the current trend is to steer away from the preset social icon colors. –  Courtney Jordan Mar 15 '13 at 14:44

This depends on the attention you want to give the widget and how much you value calm/clean design. Here are the main benefits and drawbacks I can think of.

Single value/redesigned for web theme:

  • Does not draw attention, user will likely only use when she thinks of it herself. Meaning of the button takes a split second longer and a gram of focus more to interpret.
  • First view of the website looks more pleasant, less chaotic.

Established colors:

  • Widget draws attention. User is prompted to share.
  • First view is more chaotic.

Of course, these are only extremes in a spectrum. You can always find shades of orange/blue/cyan that harmonize with your website. You can only show the color on mouseover, or you can use two widgets: minimal and gray where sharing is unlikely and big and colorful where users will likely want to share.

share|improve this answer

Ignoring the branding issues mentioned in other answers, the questions are:

  1. Will changing the color of a social media button make the button harder to find?
  2. Will changing the color of social media button make anticipating/understanding the function of the button more difficult?

The answers to these questions uses these 3 web pages as examples. Links to the pages appear in the answer text.

BBC article Slashdot article Grantland article

Question 1

The first question is about visual search. There are many factors contributing to the ability of a user to find a target (i.e., the button) among a field of distractors (i.e., everything else on the page). In this situation, target color and expected location are the most relevant.

Target Color

A visual display can benefit from preattentive processing through the appropriate use of color. This Slashdot provides an example of this phenomena. Users will find the blue and red social media buttons below the main paragraph quickly because of the difference between their color and the other colors on the page. In contrast, social media buttons on this BBC page are harder to find because the colored buttons compete with the other colored elements on the page. It is unlikely that color contributes to preattentive processing of the social media buttons on the BBC page.

Expected Location

Button location also affect search time. In other words, people expect social media buttons to be in certain locations. There is research on expected location of common web page elements. Those locations have been discussed in other questions on this site. I am unfamiliar with the appropriate location of social media buttons but a quick survey of similar sites/apps might give you the answer. A sample of 3 news sites suggests that immediately above or below the article is the expected location. The BBC puts the buttons above and below the article. Slashdot puts them below. Grantland also puts them below.

You might notice that Slashdot's buttons are below and visible without scrolling whereas Grantland's are below and visible after scrolling. I mention this because it brings the user's expectations into the discussion. If you have regular users then a consistent location, even if it requires scrolling, is the most important factor. It is more important than the button color. However, if you have many infrequent users then making the buttons visible without any effort (e.g., scrolling) would be better.

Question 2

No. Changing the color should affect the user's ability to anticipate/understand the button's function. The logo, rather than the color, is the most salient characteristic of social media buttons. (Note to branding experts - please do not flame me for that statement!).

share|improve this answer

The pure answer is that by changing the official, original social media buttons' color scheme you would be making your site less usable in exchange for advancing your own brand or design preferences.

That said, the major, ubiquitous social media brands (Facebook, Twitter, LinkedIn and a few others) are so easily recognizable that switching from their to your color scheme wouldn't significantly affect most sophisticated users' ability to recognize them.

However, the more you move away on either or both of these factors, the more difficult it will be for your users.

share|improve this answer

The best practice here is to display the social media icons in a neutral color, usually grey. This approach is both widely practiced and accepted.

It's worth noting that most of the major social media brands have usage guidelines that explicitly prohibit the above. For example, Facebook's Brand permission center lists the specific brand assets that are allowed and expressly disallows anything that is "confusingly similar" to the brand assets. This, of course, has not prevented the widespread adoption of the above practice.

share|improve this answer
    
While looking through web patterns and other sites I didn't see much of the grey social icons as you stated above. Can you provide some examples? Through research I found mostly 2-toned colors ranging in blue to tan. –  Courtney Jordan Mar 18 '13 at 11:37
    
As far as I know, all they can do is to recommend that you use their original logo and the certain capitalization etc. What they can prohibit by law is that you use a logo that looks very similar, and then link to something else than the brand. –  Terry Nov 6 '13 at 22:29
    
Meaning they cannot take legal action against you, but I assume they can close your account(s) for violating ToS. –  Robert Kaucher Nov 6 '13 at 23:47

Blue, black and white are colors which are frequently and cleverly used in most social networking websites. They make social networking websites easily recognizable as one. It would be safer to go with these colors. So, my suggestion would be to not to try something radically different unless and until

-- you are a very gifted artist, who can design an outstanding visual design,

-- you have a solid platform and user base to promote your application

Its a nice thing to design a visual experience that has an identity of its own, but you also want that to be used, experienced and witnessed by your user base.

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.