Learn How to Brand Your Twitter Layouts to Match your Website

Article by sherisaid (4,128 pts ) , published Oct 29, 2009

Twitter is a social networking site, but it is also your company communications portal. The design should reflect company colors, logo and "mood". Just as importantly, page elements should be positioned for visual impact.

Creating your design

The design of your Twitter profile page should incorporate the company image in colors and style that reflect both the corporate image and the company attitude. Do you want to portray a trustworthy, solid and somber image, like FEMA? Hip and lighthearted like @dzgraphicdesign? Chaotic and artsy like @PopArtDiva? Your choice of design should convey a message to contacts and potential clients and match your website and other corporate branding, including printed materials and advertising. Consistency is the key to effective branding.

Controlling the space

How the space is used is important. The main focus of the design should center to the far left, especially if words are included. The most common design mistake on twitter is graphics and words hidden behind the content area with no way for the visitor to see them. This would be fine if most Twitter users had gigantic monitors, but that is unlikely to be the case. Careful consideration goes into what you want people to see, so take just as much care to be sure it shows on the page….and don't forget that the top or side area is a prominent and practical place to display your URL. Here are a few great examples of branding and use of space:

And a few tragic near misses:

  • @todayshow – beautiful graphic, but most of it is behind the content area.
  • @HumerusOnline – looks like a really nice illustration, but it's hard to say for sure.

Avatar and username

If possible, your user name should be the company name to avoid any confusion and also to reserve the name so no one else can claim it. The company logo should be used as the avatar unless the person posting is the face of the company, for example @mashable.

Nuts and Bolts – how to change the background graphic

Twitter profile pages have several areas that can be customized. On your home page, look for the "Settings" link in the top right menu bar. This will open your profile settings. Click the "Design" tab to begin. From there, you can choose to:

1. Change the background image – clicking on this link expands the bottom text on the page to include a "choose file" feature that allows you to browse your computer for an image. Other options are "Don't use a background image" and "Tile background".

2. The other option is "Change design colors" After clicking on this link, you can set colors for the following page areas: background, text, links, sidebar, and sidebar border.

For best results, keep the foreground light, the background striking, and the colors complimentary. The real star of the show should be your content, brilliance delivered 140 characters at a time.

Comments

Oct 29, 2009 7:55 PM
PopArtDiva
I just had to include yours :) When I was thinking of good examples of branding, your profile came to mind immediately. It's distinctive, gorgeous - and totally YOU...which made it a perfect example.
Oct 29, 2009 7:42 PM
PopArtDiva
Twitter Backgrounds
Thanks for the mention! I can understand how even some of the pros can get their backgrounds hidden when setting up their design - unless you use the tile feature you have to figure out what the dimensions and the resolution of Twitters default background is or do some research to get them.
And still Twitter crunches the images a bit and elements don't land where you planned.
It's all a crap shoot - test it out, shuffle things, upload it and test it again.
THEN Twitter will go through some "upgrade" and you start all over again, lol.
 
Subscribe to Web Development
RSS
Get free weekly updates, directly to your inbox.
Browse Web Development