A white, lowercase “f” in a blue square (hexidecimal color #4c66a4) is the logo for Facebook. Connected, white, rounded letters “CNN” surrounded by a red gradiant that runs from hexidecimal shade #920000 to hexidecimal shade #D60000 is the logo for CNN. The letters WSJ written in “Escrow” font in black on a white background tell us we’re seeing something about the Wall Street Journal. Absent any other cues, these logos, colors, and fonts immediately signal us that we’re looking at content or reference to a specific brand. The brand may change the size or orientation of aspects of its visual placements online, but it’s unlikely that we’ll ever see any of these three brands represented without recognizing them immediately.
You can — and should — do this with your brand, too. It’s more than just your logo that needs to go onto all the places where you represent yourself. While you may start with your web site — the place where you’ll spend the most time considering your visual identity, since there is no other brand competing for the eyes of your reader — it’s important to consider how you’ll present yourself in all the other places where your brand will appear. Today, I’m going to use the Jebraweb brand to illustrate how aspects of your brand’s visual identity can be used online.
On the current Jebraweb site, I started with our logo, which is two pop-art style forget-me-nots, one in yellow and one in blue. We use them differently depending on the requirements of the destination page.
Color: These colors work well across a wide variety of the social networks we use. For example, the yellow flower stands out against Facebook’s blue very nicely:
The blue flower, on the other hand, looks good on Twitter:
Size: The flowers themselves are square. This comes in extremely useful for lots of places online where the logo placement spot is optimized for a square shape. For us, these include
- Our Facebook business profile image. This should be 200×200 pixels, with a 12×12 pixel border around it that won’t be seen in the final image.
- Our favicon. This is the tiny image that shows up in the top of your browser window next to the name of your web site. This should be 16×16 pixels.
- Our Twitter profile image. This is 81×81 pixels.
There are other social networks that require square shapes for their branding. While we don’t use these networks for our business (yet!), they are:
- The YouTube channel icon, which should be 90×90 pixels.
- The Google+ profile image, which should be 250×250 pixels.
- The Pinterest profile image, which should be 165×165 pixels.
- The Instagram profile image, which should be 110×110 pixels.
Of course, these dimensions could change at any time, but if you begin with a square version of your logo larger than any of these options, it will be easy to shrink it to any of these dimensions later.
Your Background Image
Jebraweb’s web site background is a distinctive wood grain. We use it in as many places as we can, and you can do this too, if you choose a custom background for your site. If your background is a solid color, this still stands — you’ll just need to create an image file of your color that can serve as the background of any social network that allows you to upload a background image. We use our wood grain in two places aside from our web site:
- Our Facebook cover image, which should be 851×315 pixels.
- Our Twitter background image, with dimensions that can be tricky. Most users see about 78 pixels of your background image, so whatever you use has to be very flexible. While many Twitter users create an advertising-like background for their pages, we prefer one that subtly displays branding through color, pattern, or texture — not through anything that has to be a specific size. Our wood grain is perfect for us here.
- Many of our infographics feature this as the background. It’s just another nice opportunity to reinforce our ownership, since infographics often get shared widely and without all of the original supporting materials to give it context.
We use a font called Questrial in our logo and in as many of our infographics as we can. This is a subtler branding opportunity, but because our font is less often used online, it does make a difference. It’s likely that very few people could put their finger on it, but they’ll notice that things are consistent without being able to identify why. This is the case with the Wall Street Journal, too — a WSJ in any other font might not jog the memory of the reader, but in their custom font, it will. Here are some places we used our font — often in conjunction with our brand colors:
It makes sense to set your colors, logo, and fonts before you begin developing the images that will follow you around the web. It ensures that people will start identifying you with your image, and if they like you, their subconscious will pick your branding out of the sea of logos and images. A good graphic designer will plan this with you from the very beginning — so be sure to ask how your designer plans to handle all of the places you’d like to have a presence.