Design-wise, TV news Twitter pages need work

twitter_logo_headerIt’s no secret that Twitter has swept through pretty much every industry out there and the TV news business is no exception, but from a design standpoint, the pages are pretty inconsistent.

Many local TV stations are feeding headlines and updates and network shows and personalities are also using the service to push both personal and show-related updates.

One of the elements of Twitter is the ability to customize the page background, colors and icon. This provides a great opportunity for branding and many stations are taking advantage of it, but there are some areas that need improvement.

Examples and details after the jump. Plus vote on how you use Twitter to follow TV news folks.

5-1-2009-9-35-17-am

Cincinnati’s Local 12’s Twitter page conjures memories of the days when tiled backgrounds were all the rage on the Web. Sure keeping your logo and branding front and center is generally a good idea, but this is a bit overboard, especially considering the station’s logo is also the avatar.

There really isn’t any reason to tile a page background unless you’re using a subtle, more spaced out graphic.

Advertisement

WCPO-TV has a different and more effective approach by using the station logo as the icon but keeping the background element simpler. Instead of using the station logo, WCPO-TV opts to use a 3D silver element taken from the station’s graphics package.

This is a good approach since background images tend to work better when they’re more of a subtle or textural element rather than trying to be a dominant design element.

5-1-2009-9-35-44-am

WCPO-TV, however, overlooks a small detail. As computer screens get bigger and bigger (especially among the tech-savvy people who tend to gravitate toward services like Twitter), it’s important to keep this in mind when designing Twitter backgrounds.

For example, the image below shows what the background graphic WCPO-TV uses looks like on its own. While the curved edged lends itself perfectly to a background, the way the graphic ends abruptly to the right and right will be a problem for larger-screen viewers since they’ll see this edge, which dampers the appearance of the page.

5-1-2009-9-36-00-am

A better approach is to gradually fade out the bottom and right side of the image into the same color selected for the background image. In addition, the background image can be purposefully oversized with the fades constrained to that area so users with smaller screens won’t see the fade out and only those with oversized monitors will be affected.

Sure this problem is only an issue on very large monitors, which are still increasing in prevalence, but the solution is pretty simple and pays off in the long run since big screens will become more and more common.

The WESH-TV Twitter page has a similar issue.

5-1-2009-9-36-18-am

Its heavily branded background isn’t wide enough for larger screens and cuts off suddenly. A better approach here would have been to fade the cityscape background into the blue page color.

Meanwhile, Katie Couric’s “CBS Evening News” Twitter page uses this technique but neglects to have the background color set to match the black tone the imagery fades into, instead leaving the default baby blue background, creating a jarring inconsistency in the look and feel of the page.

Advertisement

5-1-2009-9-38-12-am

The Today Show’s Twitter page is plagued by another problem brought about by larger screen sizes: the repeating image. While the page background does a great job of striking an excellent balance between branding and background elements and certainly looks very sharp, the polished look is ruined by the repeating image on the far right side of the page. This problem can be quickly and easily fixed with just one small setting under the design preferences on the Twitter control panel; it should be confirmed, however, the page background color code is set to the same orange tone the image uses.

5-1-2009-9-37-53-am

George Stephanopoulos’s page suffers from several issues, including the large background problem mentioned above. While the design pulls from the show’s broadcast look and feel, it’s done using a low-resolution image that looks awful. It’s important to keep in mind that image quality is important and shouldn’t be sacrificed to this extent just to save download time. Twitter backgrounds have a tendancy to be very large and although this may cause some issues with dial-up users, broadband penetration is growing every day.

Note that page also has a mismatch background color to the far right.

5-1-2009-9-38-58-am

David Gregory is one of the few Twitter pages that doesn’t have any major issues. The background image is a good mix of branding and textural elements (and looks quite sharp with the bright glows running through it). It also fades out to the bottom and right and has a matching background color.

5-1-2009-9-37-37-am

Most of these tips are applicable to YouTube pages as well.

So, in summary, here are some points to look for when creating a Twitter background:

  • Design for larger screens by fading out images to avoid abrupt image cutoffs
  • Make sure your page background color is consistent with the background image
  • Find a good balance between branding and making the page too cluttered
  • Don’t tile or repeat your background image