Using the New Twitter Branding

In case you hadn’t heard, Twitter quietly launched its new profile branding features on September 18, 2012. After playing with it, I have to say I love a lot of things about this new feature, but there are some things I don’t like too. Here are the specs and things to consider along with a screenshot and a Photoshop file to use as guides.

What I love about this is that you’re no longer dependent on the background image to display your priorities and branding. Twitter is taking after the Facebook branding and allowing you a 695×348 space on your profile in which to present yourself.

The background image has a file size limit of 800k, but I’m happy to report that you now no longer have to have it left aligned: you can choose to center or right align it as well!

The new header image has some interesting-ness to it. First off, Twitter pulls in your profile image and plants it in the middle of the header along with your name, twitter handle, bio, website, and location—in your choice of white or white. If you want a Photoshop template with the grid-lines marking off that area, you may download that here.

The installation tool allows you to scale up the background image and the header image, which can become problematic when trying to keep your pictures sharp. You cannot scale them down at this time. I did play with the header image’s size, designing it at the eventual final size of 695×348 in an effort to prevent the blurred look and discovered that the recommended 1200×600 ended up looking sharper for one image and blurrier for the other, though neither was as sharp as my original—or even as sharp as the preview.

Some of the blurriness can be attributed to the other thing I don’t like about this feature. That is that the text Twitter brings in from your profile is always white. To make sure that it’s always legible, they put in a mandatory black gradient overlay. You can see this clearly in example two below. I found no way to change this. Hopefully, in the future Twitter will decide we’re smart enough to handle the option of completely controlling the colors and will let us disable the overlay. The last thing I don’t like is that the gradient on the header image makes it impossible to create graphic illusions where it appears as though your images are bursting out of their borders. One can dream…

A few observations

  1. Because of the gradient and the scaling, text does not display well in the header image. Perhaps Twitter did this on purpose to keep the marketing messages to a minimum. The space is most assuredly best suited to graphics.
  2. Your bio needs to be looked at carefully in its entirety.
  3. Your profile image should be looked at in conjunction with your header image. You need your profile image to reflect your iconology so your tweets reinforce your branding, but if you use that same logo on your header image, you’re wasting valuable marketing real estate.


Tags: , , , , ,

This entry was posted by on Friday, October 12, 2012.
Filed under: Articles, Marketing, Web Design and Development, Web Developer Tools
You can follow any responses to this entry through the feed. Both comments and pings are currently closed.

Comments are closed.