5 tips for great Twitter background design

Recently I made a new background for @newsadvance on Twitter, the Twitter presence of The News & Advance.

Click the image below to see the full-size background.

It was a fun process and I thought I would share some tips on Twitter background design.

1. Identify your goals

Different people have different goals when designing a Twitter background. Some people want to wow visitors with stunning visuals; others simply want to convey information.

Regardless of what your goals are, you should at least have some. A Twitter background can make a big impression, especially when someone is seeing your profile for the first time.

The three main goals in designing the @newsadvance background were, in order of importance:

1. Provide additional contact information for our organization: This was satisfied by an info box on the left side that lists an e-mail address, two phone numbers and two physical addresses (one for visiting, one for mail).
2. Keep the file size small for fast loading: Using Photoshop to optimize the image, I struck a balance between picture quality and file size. It’s about 95 kb, far lower than the maximum Twitter allows.
3. Be visually appealing: A variety of free images from Stock.XCHNG helped here.

2. Emphasize the upper left

Twitter backgrounds are anchored at the upper left corner. No matter what your screen resolution, you will always see at least some of the upper left.

That’s why the infobox and graphic items are all there on the @newsadvance background.

The layer of less important graphic items – the binary code and the white streaks -  extends farther out until it fades into a solid color background.

3. Design for multiple screen sizes

The @newsadvance background is designed so that even people with smaller 1024×768 screen resolutions can see the info box, the minimum requirement for this background.

Those with larger screens can see more of the background image.

Additionally, the bottom of the info box is only about 420 pixels from the top of the image, so it can be seen even on smaller netbooks.

An invaluable tool for making sure a Twitter background design works for 1024×768, 1280×1024 and other screen resolutions is Chris Spooner’s Twitter background template, which has layers that show you how much of your design is visible at various resolutions.

I found Spooner’s template while reading his excellent blog post, “Twitter Background Design How-To and Best Practices.”

4. Use your visuals to send a message

It’s great to have a visually appealing Twitter background, but it should also mean something.

One of The News & Advance’s missions is to provide news and information to readers regardless of their choice of platform: print, computer, mobile device, etc.

On the Twitter background, the presence of the printed newspaper, the computer mouse and the cell phone are intended to suggest that philosophy.

5. Don’t repeat yourself

When designing the info box, I thought about including the logo, the name (either “The News & Advance” or “Newsadvance.com”) and/or the Web URL.

However, these items are all, in one way or another, already a part of the Twitter sidebar information.

So why clutter up the background design with extra information?

Including those redundant elements may have increased the height of the info box to the point where it would have been cut off on some netbooks, some of which have screen heights smaller than 600 pixels.

As a bonus, the newspaper logo is partially visible anyway because of the paper’s positioning in the corner.

That’s about it. Have any other tips you’d like to share? Leave a comment!