Meeting with a client recently, we came to an increasingly common impasse in today’s Web design world. Facebook’s dominance of the web has small businesses convinced that their Facebook links (Facebookmarks?) have to be Facebook blue, regardless of whether or not the color works in the overall design of their own websites, or with their own brands.
Brand yourself. Facebook is doing just fine on its own.
Remember, it isn’t your job to brand Facebook (or Twitter, or Tumblr or any other social media site you use). While it’s true that you’re leveraging their brands for your own needs, you’re doing so because that’s where your audience hangs out.
If your own brand or the look and feel of your website already has a lot of blues, the typical Facebook blue icon is going to either blend into the background or clash. Fortunately, blue isn’t your only option.
The argument for a blue Facebook icon is that people recognize it. But people also pick up on other visual cues, such as the shape of the “F,” or – thanks to web design conventions – the shape and placement of the badge itself. That gives you some options for Facebook badge alternatives.
Here are a few examples that break the blue rule, integrating Facebook badges in ways that
- Respect Facebook’s branding
- Build their own brands
- Give users the necessary visual clues, and
- Stand out thanks to thoughtful design
While there is some blue in this one, it’s subtle and keyed to support Griffith’s brand, not Facebook’s. Full disclosure: this is one of ours.
Note: The inclusion of the Obama 2012 website doesn’t constitute an endorsement of anything except his graphic design staff.
And they’re good. The red is visually striking, brand appropriate and patriotic. Everything you’d want in a Social Media badge on a presidential campaign website.
This one is simple. Black. White. A little gradient. It’s placed prominently on the website, so you can’t miss it; the “f,” is the familiar shape, so there’s no confusion as to what it’s for.
Air1 Radio does a nice job with these watermarked icons. The green matches the highlight colors of the website.