Effective Twitter Backgrounds: Examples and Current Practices

Advertisement

Smashing Magazine has been on Twitter for about a year now (@smashingmag), and it turned out to be a great medium to communicate with our audience, build connections, discuss design-related topics and give away some nice prizes. However, even a year later, we still don’t have a Twitter background page and now is a good time to change that. So because we decided to create our own Twitter page, we wanted to first find out how other designers do it and what tips and techniques they use to create a truly outstanding, beautiful Twitter page.

Your profile page is the only place on Twitter where you get opportunity to showcase your visual brand and possibly communicate additional information that can last longer than a tweet. You can customize your profile page by changing background, text and link colors. It’s as simple as changing the skin, but ability to change background image has allowed designers to create really unique profile pages.

Primary focus of this article is to explore various techniques to create unique, memorable and effective Twitter profile pages. However, before proceeding to the list, it is important to briefly discuss the structure of the Twitter profile page.

Twitter Profile Page

Most important thing to note is that the main content block in the layout of a Twitter profile page has the fixed width of 765 pixels, and it is always centered. This is good, because it makes it possible for you to show your background image using the extra space created on the both sides of the block when displayed at higher resolutions.

1280 Wide Screen Resolution

1024 Wide Screen Resolution

Other things that you should keep in mind:

  • timeline background is always white
  • menu bar background is always white
  • footer bar background is always white
  • logo is always the Twitter logo
  • picture can be changed
  • you can change text color, link color, sidebar background color and sidebar border color
  • you can change background image and background color
  • you can also tile background image
  • the background image start position is always top left corner

Note that if you are only interested in designing a nice profile page, you can easily do that by incorporating a stunning background image and customizing text, link and sidebar colors accordingly. But if your intentions are to be unique, incorporate brand identity and communicate additional information, then you will need to be little bit more creative with your background image.

Tips & Techniques

Following is a list of profile pages, illustrating various tips & techniques that you can incorporate in your own backgrounds. Please note that most of these profile pages incorporate more than one technique, and you should also consider mixing multiple techniques according to your own requirements.

Merge Background With Timeline / Sidebar

This is probably the least used technique among all tips and techniques discussed here. By merging your background graphics with timeline and/or sidebar, you can create a unique layout with a very distinctive look and form.

@adamplitt

@adamplitt

@adamplitt

@gaksdesigns

@gaksdesigns

@gaksdesigns

Mix Tiled Pattern With Other Graphics

Twitter allows you to integrate one background image that can be either tiled or not. But you can create unique look for your profile page by creating a background image that has both.

@spurrachel

@spurrachel

@spurrachel

Reveal More With Your Pictures

Your profile picture (it can be an avatar, logo or photo) is your main identity on Twitter; it will be displayed next to every tweet that you send out to your followers. For instance, you can use a background image that is somehow related to your profile picture and thus convey more information about yourself or your brand. In other words, you can use this classic approach of creating design around your logo or brand identity to communicate information in a more effective way.

@Doubleolee

@Doubleolee

@Doubleolee

@mailchimp

@mailchimp

@mailchimp

Reveal More With The Page Peel Effect

If you have an established visual identity, you can use page peel effect to show users who is actualy behind the Twitter profile. This technique provides you with a freedom to design the rest of the background as you wish, because you may no longer need to worry about integrating brand visuals and its colors.

@sitepointdotcom

@sitepointdotcom

@sitepointdotcom

@benek

@benek

@benek

Add Personalized Sidebar To Your Profile

The following profiles illustrate a specific use of the first technique by adding sidebars to the layout. You can add such panels to effectively highlight additional information that you want to communicate.

@aaronmillerillz

@aaronmillerillz

@aaronmillerillz

@robingood

@robingood

@robingood

@sickbrain

@sickbrain

@sickbrain

Show Yourself

In social media world, you are the brand. With Twitter, being one of the major players in social media, showing yourself on the profile page can be very effective way of strengthening your brand and community around your website.

@problogger

@problogger

@problogger

@unmarketing

@unmarketing

@unmarketing

Use Icons and Logos

Following profiles illustrate simple, yet very effective technique to communicate association with or involvement in certain community, service, skill, etc by showcasing relevant icons or logos.

@lanesa

@lanesa

@lanesa

@rjacquez

@rjacquez

@rjacquez

Add a Header Bar

Adding a header bar could be used for creating unique look for your profile page, but it can also be used to separate Twitter logo and top menu (which contain links to user’s profile) from the rest of your page.

@thegraphicmac

@thegraphicmac

@thegraphicmac

@elitistsnob

@elitistsnob

@elitistsnob

Less is More

Andre Gide once said that “Art is a collaboration between God and the artist, and the less the artist does the better”. Here are few illustrations of how minimalism can be used to its full effect:

@line25blog

@line25blog

@line25blog

@idesignstudios

@idesignstudios

@idesignstudios

Accommodate the 1024px Width

If you care how your profile page will appear on 1024px wide screens, you will need to work near the top and left borders of your background image. Here is an example of how a nice visual design can be used properly for various screen resolutions:

@SohTanaka

@SohTanaka

@SohTanaka

Here is another interesting technique to ensure that your profile page has a very similar look on both 1024 and 1280px wide resolutions:

@adamplitt

@adamplitt

@adamplitt

Use Typography

Use of typography in Twitter backgrounds is not very common; however if used creatively, you can create unique, very effective profile pages to communicate additional information.

@dickieadams

@dickieadams

@dickieadams

@iamFinch

@iamFinch

@iamFinch

Put Information In a Memorable Way

Composition is the plan, placement or arrangement of the elements. You can arrange elements on your background in a unique and memorable, showcasing information that is important to you and your readers. This techniques allows you to create an environment, show your personality and provide additional information.

@sharebrain

@sharebrain

@sharebrain

@iamkhayyam

@iamkhayyam

@iamkhayyam

Do Whatever You Want To Do

The more original, creative and distinctive your background image is, the more likely it is to be memorable and strengthen your online presence. Experiment with beautiful, personalized illustrations, background images and typography. Make sure that your background image has a personal voice, doesn’t look generic and has an unusual twist. Your first time visitors will appreciate it.

@ramesstudios

@ramesstudios

@NIK0_BELLIC

@NIK0_BELLIC

Gallery

Now that we discussed a couple of techniques for the design of Twitter backgrounds, here is a collection of some well-designed profile pages to tame your appetite for Twitter profile page inspiration.

@MdFilmFestival

@MdFilmFestival

@fragments77

@fragments77

@happytreefriend

@happytreefriend

@LoungeKat

@LoungeKat

@ellingson

@ellingson

@hootsuite

@hootsuite

@G_Obieta

@G_Obieta

@willbryantplz

@willbryantplz

@grant_clark

@grant_clark

@hugeinc

@hugeinc

@JJunkins

@JJunkins

@Baldy67

@Baldy67

@thelaughbutton

@thelaughbutton

@bickov

@bickov

@jayjdk

@jayjdk

@nathanhoad

@nathanhoad

@robertomas

@robertomas

@mayhemstudios

@mayhemstudios

@ThirstEase

@ThirstEase

@cameronolivier

@cameronolivier

@studio3k

@studio3k

@sixreffie

@sixreffie

@TheTwiddict

@TheTwiddict

@mountainash

@mountainash

@Hallisar

@Hallisar

@mywayhome

@mywayhome

@TheArtificer

@TheArtificer

@webdude75

@webdude75

@colourofair

@colourofair

@jodyphillips

@jodyphillips

@emilychang

@emilychang

@ijustine

@ijustine

@boagworld

@boagworld

@collis

@collis

@chrisspooner

@chrisspooner

@webb_art

@webb_art

@Hicksdesign

@Hicksdesign

@rww

@rww

@ThemeForest

@ThemeForest

@technikwuerze

@technikwuerze

@Designfeedr

@Designfeedr

@Malarkey

@Malarkey

@Trenti

@Trenti

@zomigi

@zomigi

@carsonified

@carsonified

@WiliamAu

@WiliamAu

@wpbeginner

@wpbeginner

@brandonacox

@brandonacox

@inspiredmag

@inspiredmag

@guardiantech

@guardiantech

@DesignerDepot

@DesignerDepot

@carywood

@carywood

@designia

@designia

@_finderskeepers

_finderskeepers

Tools

  • Twitter Background Template: Free Twitter Background template in PSD format from “Fuel Your Creativity”, includes guides that match up with different resolutions from 800×600 to 1900×1200.
  • Peekr: A bookmarklet that you can drag to your browser’s toolbar and click on to see a twitter user’s entire background graphic and then click again to get things back to normal.
  • Twitter Background Checker: Lets you check how your Twitter profile looks in smaller or higher resolutions.
  • ClickableNow: Add Clickable Links to your Twitter background image.

Additional Resources

Related posts

Saud Khan is a software/web developer and consultant with over 12 years of professional experience. He is also founder of W3Avenue, an online publication providing advice & resources for rapid web development. You can also follow him on Twitter. http://twitter.com/w3avenue

  1. 101
  2. 102

    Great article!!
    @timeforfit

    0
  3. 103

    cool colection

    0
  4. 104

    I can recall seeing some of these examples. None the less great show of creativity. Thanks!

    0
  5. 105

    I read this article and was inspired to create a background for my employer’s twitter page.
    http://twitter.com/lids4hats. Designed by @EllisGary

    0
  6. 106

    Thank you very much for the mention, really appreciate it!

    Sincerely,

    RJ Jacquez @rjacquez

    0
  7. 108

    Amy, anyone who views the web in a browser that’s scaled or setup in any unorthodox way has no right to complain about how pages then appear to them. *sigh*

    0
  8. 109

    Wonderful Post

    0
  9. 110

    karl mariner

    a bit left of center…

    0
  10. 111

    Did i do mine right twitter.com@innerclick

    0
  11. 112

    I like Right mobile phone as its simple and effective and I like their colours :)

    0
  12. 113

    @innerclick Looks fine to me.

    0
  13. 114

    Check mine out! @DigitalSkraps

    0
  14. 115

    Cre8ive Commando

    September 23rd, 2009 2:18 pm

    Great post, there are some cool twitter background designs here. ;-)

    Some of them however don’t display properly on larger sized monitors. Check out this post to see how to create a twitter background the right way. Create a twitter background the right way

    0
  15. 116

    Great article! It helped me re-do my background. @joelmoney

    0
  16. 118

    Great article…the rising popularity of twitter will make your twitter backdrop just as important as the home page of your website. Check out the Twitter design package that Logoworks is offering – http://bit.ly/OZD3j

    0
  17. 119

    Wow, that is so helpful! Thanks for a great article.

    0
  18. 120

    nice collections of twitter background.

    this page is a great example to show a twitter profile over different screen resoultions.

    0
  19. 121

    You did not mention Twitter and Beyond at twitterandbeyond.com, the company that handled our Titter background for us. We tried to create our own in Photoshop, which turned out to be a hilarious waste of effort. I am surprised more businesses don’t take advantage of this and use it like one would use a billboard on the side of the freeway. It’s another way to get your message out there. Some of these backgrounds are so cool!

    0
  20. 122

    Could it be that I was the only one who thought about designing the following-tail? See http://twitter.com/ysfr for a proof of concept.

    0
  21. 123

    great list…very creative backgrounds…

    0
  22. 124

    @pausedesign
    my custom made background

    0
  23. 125

    Great list! I made my brand new background about a month ago:@m4rcosx

    What do you think about it?

    0
  24. 126

    Great article! The gallery is very inspiring. I’m working on mine now look for me on twitter joshhatcher

    0
  25. 127

    lol, how can you be an elitist snob with massive spelling/grammar errors :) loved the post though!

    @stellarjae

    0
  26. 128

    Well….I can say that it’s great to see people wanting to customize their Twitter pages and it allows for creativity. I would imagine that custom backgrounds are more preferred so that no one has a background that someone else might have but would probably be more for the business twitterite but for the individual personal pages, it’s not related to “branding”. Anyway, now I am thinking perhaps I should start the Twitter design process…albeit, to get creative.

    0
  27. 129

    Thank you all for your comments and sharing links to your profile pages. I have written a new article based on screen resolution issue that we face when designing a background for twitter profile page:

    Simple Feature That Will Really Make Twitter Designer Friendly – http://bit.ly/8pleW

    0
  28. 130

    I am pretty proud of mine @utahluxury

    0
  29. 131

    The pixel dimensions seem to have changed since this article was written because many of the examples above no longer appear streamlined. Many are a bit off now.

    0
  30. 132

    @adamplitt has worse background ever! I guess he never heard about TESTING

    0
  31. 133

    Dear twitter… please allow us to center the f##king background.

    Love, Tim.

    0
  32. 135

    The width is 763px not 765.

    0
  33. 136

    What about http://twitter.com/AnthonyNolan

    That is quite a nice background – and they are a charity rather than a personal/portfolio twitter so it is nice to see them doing something cool

    0
  34. 137

    Very interested by this post some weeks ago, I made a .png “template” to personalize my twitter background.
    If this can help you I share it with the world on my little blog here : http://bit.ly/1dAvpJ :)

    (it’s like other template but include the barre above and belove the time line for precise adjustment)

    0
  35. 138

    Curiously since the “lists” where active it seems to me that the wide-size had slightly changed (as Dan said “763-765″), so I updated my little template here http://bit.ly/29hp4X in .png (just drag and drop) or .psd (download).
    And tried also to make a better background than the precedent ^^

    0
  36. 139

    I change my twitter page background often, (sometimes several times a week) because it is also partially a showcase of new items just listed or about to be listed on ebay or tia.com
    What always stays the same is the name and the picture of maxwell.
    maxwellvintage – sophistomax
    Happy Holidays

    0
  37. 140

    Guess it’s time to step up my Twitter BG game. Thanks for the post, great for ideas AND resources.

    ~Oh!

    0
  38. 141

    Any thoughts/comments/suggestions for mine? http://twitter.com/designerfoo

    0
  39. 142

    Great article. Good to know I’m doing something right… I’m pretty proud of mine… :D
    @BeauteMineral
    @KineticImages

    0
  40. 143

    wow… very useful sharing. love it! :)

    0
  41. 144

    Great article and some fantastic designs. I came across @ClarionIreland and thought is was a fantastically simple and clean layout.

    0
  42. 145

    Great article! I recently stumpled upon @duonz, which I thought was nice too.

    0
  43. 146

    Love them all could I submit our new one or has the ship sailed? http://twitter.com/searchdesigndev

    0
  44. 147
  45. 148
  46. 149

    Michael Murdoch

    March 10th, 2010 1:33 am

    Great post.

    Would love to add ours http://twitter.com/thehouselondon to the list.

    Thanks!

    0
  47. 150

    Nice list!
    If you like you can see my twitter-background @ http://twitter.com/_morpher_
    Thanks,
    Daniel

    0
  48. 151

    Thank you for the techniques, nice list!
    You can see some other great Twitter backgrounds here: http://www.viuu.co.uk

    0
  49. 152

    veronica lailla

    April 29th, 2010 6:02 am

    oi eu quero fazer um twitter

    0
  50. 153

    I love mine. Since i found them they´re my favorite.

    You can see mine here http://twitter.com/Curiosa

    0
  51. 154

    quero fazer um twiter me ajuda porfavor

    0
  52. 155
  53. 156

    helle pereira araujo

    July 27th, 2010 12:37 pm

    amo o twitter

    0
  54. 157

    And what about this : http://twitter.com/TomBalev ?

    +1
  55. 158

    no entendy nada sobre o twiteer de ser melo to lolcopois re re tefísel uno pouco.io acho que aquine em Londres ê mais fácil uno pouco.já esperrimentei o twiteer mais não sei meixer direito no máximo tem sô ene cerca te 100 pessolas.um bju….

    0
  56. 159

    The new Twitter redesign changes everything: the wider content area means people who had designs that worked before are now seeing their marketing messages chopped off… time to update your backgrounds everyone!
    http://www.usingmyhead.com/2010/09/28/twitters-new-design-cuts-out-marketing-messages-redesign-your-background-now/

    +2
    • 160

      Update to what, though? On any res below like 1600px wide, there isn’t enough space to make anything truly effective. Not saying the new Twitter kills custom backgrounds, but it does almost ruin them on a lot of smaller screen sizes.

      0
  57. 161

    micaele martins

    October 4th, 2010 10:59 am

    oi eu amo neymar demais gostaria de conhece-lo se vc neymar tive
    lendo isso anote meu email:micaele_neymar@hotmail.com,,,,bjss eu te amo!!!Boa sorte na sua carreira!!!

    0
  58. 162

    very very useful tips,i like it….

    0
  59. 163

    hello ,

    my new background theme with the new interface.

    let me know what you think !

    twitter.com/cattias

    +1
  60. 164

    hello ,

    my new background theme with the new interface.

    let me know what you think !

    twitter.com/cattias

    0
  61. 165

    quero fazer um twitter

    0
  62. 166

    how make the sidebar semi transparent ?
    i only find scrit that make it disappear.

    0
    • 167

      Jorge Luis Jaral

      November 30th, 2010 1:06 pm

      Hi David; the sidebar looks semi transparent on any non IE browser like Firefox, Safari, Chrome and Maxthon (my current favourite), hopefully IE9 will fix this… Naah! Move to a better browser buddy (and move your customers too) :¬)

      +1
  63. 168

    quero ter um blog

    0
  64. 169

    eu me chamo pedro quem quizer se diverti no meu twiter esta convidado.

    0
  65. 170

    I think my background with purple paisleys should be in that list !
    Check it out http://twitter.com/#!/DesignByNur

    0
  66. 171

    quero hum Twitter

    +1
  67. 172

    @Saud Khan
    I was searching for best Twitter background on Google and land on this great blog post. I am PHP web developer & CEO of web development company so my friend advice me to create strong Twitter profile to create strong network in relevant technology. I have account with Twitter & update my status on daily basis. Now, I realize that: without good Twitter background my profile will not be strong. So I am going to design Twitter background for my Twitter profile. I forwarded this post to my web design team. Thanks to share & create very excellent blog post.

    0
  68. 173

    This is a pretty damn neat background from some video company it came 8th in Twitter competition ! http://twitter.com/WebVideoCompany nice… peace out Jay

    0
  69. 174

    Feel free to check mine out as well @GodwinNdlovu

    0
  70. 175

    I like mine, it’s tiled. @LoganKeown
    feel free to follow too!

    0
  71. 176

    A ver que les parece el mío @floresdeoaxaca

    0
  72. 177

    Did one for a client today @PiattoRest

    0
  73. 178

    We just updated our twitter background in that we modeled our logo in 3D in Monster Fur – it’s just something a little non-standard and a bit fun. @brandrally

    0
  74. 179

    Twitter recently added the New Header feature, you can now show your Contacts as well Ads in the Header Image. There is a nice tutorial i found, have a look at it here : /ow.ly/e1oUj

    0
  75. 180

    twitter is the powerful way for on line presence by updates suitable profile pic it will become more effective…

    0
  76. 181

    Saw your post & was inspired to change my background. If you guys are doing a new post please consider showing this: twitter.com/USAMail1

    Thanks.

    0

  1. 1

    The new Twitter redesign changes everything: the wider content area means people who had designs that worked before are now seeing their marketing messages chopped off… time to update your backgrounds everyone!
    http://www.usingmyhead.com/2010/09/28/twitters-new-design-cuts-out-marketing-messages-redesign-your-background-now/

    +2
  2. 2

    Great article. Cool to see how limitations and constraints can help creativity really take off. (Oftentimes much easier to get some initial boundaries than hearing from a client “Just do whatever you want”). I really like the fuller, more complicated designs on here, but went with clean and simple for mine – @aptdesign

    +1
  3. 3

    what I still it amazing the amount narcissism that is out there, and how Twitter just fuels so many! Why would I want to follow the every “important thought” you have? Why do you feel the need to tell everyone your every thought… and why do I have to look at your ugly mugs now too! How many of these self-involved idiots out there thought “ooh I gotta setup up a portrait session with someone so I can have some fresh pics for my twitter background”… They say in fashion, each decade comes around again… I’d say the 70′s “Me Decade” is coming back… and in greater numbers!

    +1
  4. 4

    @Allen

    AMEN to that.

    +1
  5. 5

    I thought it was a confusing article. I expected a list of best practices, and then was given a list of a bunch of things to add….followed by “less is more”….followed by “do whatever you want to do”.

    Design is about communication. And when ‘best practices’ cause communication to be lost on potential clients and customers, I think there’s a disconnect from best practice. I’ve been struggling with the best way to do this, myself, was excited about seeing this article.

    Was a great showcase of art. Could revisit the best practices idea again in the future.

    +1
  6. 6

    I still fail to find Twitter fun or usefull or whatever… :/

    +1
  7. 7

    People need to remember to create their twitter backgrounds for various screen resolutions. Lots of these backgrounds look great in the screenshots, but they look awful on my monitor (1900×1280).

    +1
  8. 8

    And what about this : http://twitter.com/TomBalev ?

    +1
  9. 9

    Jorge Luis Jaral

    November 30th, 2010 1:06 pm

    Hi David; the sidebar looks semi transparent on any non IE browser like Firefox, Safari, Chrome and Maxthon (my current favourite), hopefully IE9 will fix this… Naah! Move to a better browser buddy (and move your customers too) :¬)

    +1
  10. 10

    hello ,

    my new background theme with the new interface.

    let me know what you think !

    twitter.com/cattias

    +1
  11. 11

    quero hum Twitter

    +1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top