Design Brief

For contest Design the Official SitePoint Twitter Background, held by mattymcg in the Twitter Background Design category.

Summary

Status
won
Status Comment
Congratulations to the winner, jdez!
Entries
238
Prize
$300
Details

A closer look at this contest

Created:
Mon, 27 Apr 2009 11:21:50 +0000
Ends:
Sat, 02 May 2009 11:21:50 +0000
Modified:
Wed, 29 Apr 2009 07:30:46 +0000
Last Feedback:
Fri, 08 May 2009 05:55:37 +0000
Comments:
47
Feedback:
128
Designers:
46
Brief Summary

SitePoint is looking for a background for its Twitter page. The design will be viewed by the 30,000 people who follow SitePoint on Twitter.

The imagery should be understated and polished, and reflect the SitePoint brand—a fun but professional resource for learning how to build web sites.

This contest has been extended by 2 days.

Brand Name
SitePoint
Description

SitePoint is both a respected book publisher and an extensive online resource for helping people build a better web. We are also home to one of the largest online communities for web professionals—the SitePoint Forums. The SitePoint Twitter feed (@sitepointdotcom) is an essential resource for nearly 30,000 web professionals, who rely upon it to learn about the latest tutorials, discussions and industry news appearing on sitepoint.com.

The SitePoint Twitter background should provide a slick frame for SitePoint’s Twitter updates, without competing with the updates for attention. We’re looking for a beautiful, professional but understated background that complements our Twitter presence and speaks directly to our audience of web designers and developers.

You may propose modifications to the colour scheme currently used on the SitePoint Twitter page to better suit your background design. The colour palette that you use in the image is up to you, but it should not clash with the SitePoint logo. I suspect that highlights of either the SitePoint orange or SitePoint blue would work well, but if you deviate from this and it “still works,” then I won’t rule it out.

Note that SitePoint is based in Melbourne, Australia (Australian Eastern Standard Time timezone). If you don't see feedback for a few hours, I'm probably sleeping. Trust me, you'll get feedback. Those 99designs guys who sit downstairs from me will make sure of it!

Wants
  • the SitePoint logo (graphic plus text) somewhere on the page (use this logo)
  • the tagline “Helping you build a better web” somewhere on the page
  • a background that looks professional when viewed in Twitter at small browser window sizes (e.g. 1024x768) and large window sizes (e.g. 1600x1200). This could be a "big image" or "fade to color" image (see the "Twitter Guidelines" listed below). Understand the position of the Twitter logo and content area, and be smart about how you position your imagery.
  • understated, subtle patterns
  • original illustrations/photographs or stock images are welcome, but see below for “don’t wants”
  • final artwork in Adobe Illustrator (.ai) or Adobe Photoshop (.psd) format
Don't Wants
  • sideways text
  • clichéd “tech” imagery, ie. “The Matrix” style showers of 1s and 0s or photos of computer monitors
  • stock photos of smiling, happy web professionals
  • bold, overdone, complex, high contrast images
  • too much logo-inspired imagery. Taking inspiration from the logo is fine, but don’t too crazy on the orange/blue angled lines.
  • images that don’t scale well when viewed as a Twitter background
  • a tiled (repeating) background
Twitter Guidelines
Composition
Width and height varies. Twitter's design is centred, and shifts left and right across the background image, depending on the size of the user's display and their web browser's window size. The background design should support a wide variety of window dimensions.
Broadly speaking, there are four types of Twitter background designs: extended profile, big image, fade to color, and tiled (repeating):
Extended profile designs allow the user to expand upon their biographical information, display a self-portrait, along with other useful (but non-clickable) links (eg. their Facebook profile, email address, etc). Extended profiles are also usually based on big image, or fade to color designs (see below).
Whether it is an impressive photograph or a just a really large design, a big image design is great for big impact. Unfortunately, they don't work well at all window sizes. Savvy designers can also include extended profiles and/or fade to color in a big image design.
Fade to color designs add some visual interest, without the risk of ending in a harsh edge on larger displays. To achieve this, the image is blended at the edges into a single colour, which is then specified as the background color.
Tiled background designs produce a pattern-like effect. The main advantages of tiled designs is they work at any window size and are fast to load. However, the inherent repetition can be a drawback.
Optimal Dimensions
1280px is a common width to optimize for. Check with your contest holder.
This allows for two 250px wide columns either side of the main content area.
Minimum Dimensions
Small displays may obscure graphics placed to the left of the main content.
Most modern displays have resolutions greater than 1024 × 768px.
Maximum Dimensions
Larger displays may obscure graphics placed to the right of the main content.
1920 × 1200px should account for most display resolutions.
No more than 2560 × 1600px for expansive photographic-based designs.
This supports 30-inch cinema display resolutions!
Branding
99designs suggests 191 × 36px as optimal dimensions for branding (eg. a logo). The width is what is important here—not so much the height.
Add approximately 12px of padding from the top to neatly align with the top of Twitter's logo.
A little padding along the left edge (20px to 40px) is nice and easy on the eye.
If text is incorporated into the background image then small font sizes should be used with caution (due to pixellation).
File Size
Twitter restricts images to a file size of 800 KB, or less.
Aim for 100 KB, or less.
File Types
Twitter accepts: GIF, JPG, and PNG file formats.
Color Palette
In Twitter, you can customize Twitter profile colors, under Settings › Design. Using hex codes, you can change the color of the background, text, links, sidebar, and sidebar border.
Payment Methods

This contest has been pre-paid with 99designs. The winner will be paid directly by 99designs for the full prize amount, excluding any third party transfer fees.

  • Paypal (free, 2-3 day payment turnaround)
  • Moneybookers (charges apply, 5-10 day payment turnaround)
  • AlertPay (charges apply, 5-10 day payment turnaround)
  • Western Union (charges apply, 10 day payment turnaround)
Actions
Badges