Effective Twitter Backgrounds: Examples and Current Practices

Advertisement

Smashing Magazine has been on Twitter for about a year now (@smashingmag1), 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.

@adamplitt592

@adamplitt603

@adamplitt614

@gaksdesigns5

@gaksdesigns6

@gaksdesigns7

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.

@spurrachel8

@spurrachel9

@spurrachel10

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.

@Doubleolee11

@Doubleolee12

@Doubleolee13

@mailchimp14

@mailchimp15

@mailchimp16

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.

@sitepointdotcom17

@sitepointdotcom18

@sitepointdotcom19

@benek20

@benek21

@benek22

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.

@aaronmillerillz23

@aaronmillerillz24

@aaronmillerillz25

@robingood26

@robingood27

@robingood28

@sickbrain29

@sickbrain30

@sickbrain31

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.

@problogger32

@problogger33

@problogger34

@unmarketing35

@unmarketing36

@unmarketing37

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.

@lanesa38

@lanesa39

@lanesa40

@rjacquez41

@rjacquez42

@rjacquez43

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.

@thegraphicmac44

@thegraphicmac45

@thegraphicmac46

@elitistsnob47

@elitistsnob48

@elitistsnob49

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:

@line25blog50

@line25blog51

@line25blog52

@idesignstudios53

@idesignstudios54

@idesignstudios55

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:

@SohTanaka56

@SohTanaka57

@SohTanaka58

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

@adamplitt592

@adamplitt603

@adamplitt614

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.

@dickieadams62

@dickieadams63

@dickieadams64

@iamFinch65

@iamFinch66

@iamFinch67

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.

@sharebrain68

@sharebrain69

@sharebrain70

@iamkhayyam71

@iamkhayyam72

@iamkhayyam73

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.

@ramesstudios74

@ramesstudios75

@NIK0_BELLIC76

@NIK0_BELLIC77

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.

@MdFilmFestival78

@MdFilmFestival79

@fragments7780

@fragments7781

@happytreefriend82

@happytreefriend83

@LoungeKat84

@LoungeKat85

@ellingson86

@ellingson87

@hootsuite88

@hootsuite89

@G_Obieta90

@G_Obieta91

@willbryantplz92

@willbryantplz93

@grant_clark94

@grant_clark95

@hugeinc96

@hugeinc97

@JJunkins98

@JJunkins99

@Baldy67100

@Baldy67101

@thelaughbutton102

@thelaughbutton103

@bickov104

@bickov105

@jayjdk106

@jayjdk107

@nathanhoad108

@nathanhoad109

@robertomas110

@robertomas111

@mayhemstudios112

@mayhemstudios113

@ThirstEase114

@ThirstEase115

@cameronolivier116

@cameronolivier117

@studio3k118

@studio3k119

@sixreffie120

@sixreffie121

@TheTwiddict122

@TheTwiddict123

@mountainash124

@mountainash125

@Hallisar126

@Hallisar127

@mywayhome128

@mywayhome129

@TheArtificer130

@TheArtificer131

@webdude75132

@webdude75133

@colourofair134

@colourofair135

@jodyphillips136

@jodyphillips137

@emilychang138

@emilychang139

@ijustine140

@ijustine141

@boagworld142

@boagworld143

@collis144

@collis145

@chrisspooner146

@chrisspooner147

@webb_art148

@webb_art149

@Hicksdesign150

@Hicksdesign151

@rww152

@rww153

@ThemeForest154

@ThemeForest155

@technikwuerze156

@technikwuerze157

@Designfeedr158

@Designfeedr159

@Malarkey160

@Malarkey161

@Trenti162

@Trenti163

@zomigi164

@zomigi165

@carsonified166

@carsonified167

@WiliamAu168

@WiliamAu169

@wpbeginner170

@wpbeginner171

@brandonacox172

@brandonacox173

@inspiredmag174

@inspiredmag175

@guardiantech176

@guardiantech177

@DesignerDepot178

@DesignerDepot179

@carywood180

@carywood181

@designia182

@designia183

@_finderskeepers184

_finderskeepers185

Tools

  • Twitter Background Template186: 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.
  • Peekr187: 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 Checker188: Lets you check how your Twitter profile looks in smaller or higher resolutions.
  • ClickableNow189: Add Clickable Links to your Twitter background image.

Additional Resources

Related posts

Footnotes

  1. 1 http://www.twitter.com/smashingmag
  2. 2 http://twitter.com/adamplitt
  3. 3 http://twitter.com/adamplitt
  4. 4 http://twitter.com/adamplitt
  5. 5 http://twitter.com/gaksdesigns
  6. 6 http://twitter.com/gaksdesigns
  7. 7 http://twitter.com/gaksdesigns
  8. 8 http://twitter.com/spurrachel
  9. 9 http://twitter.com/spurrachel
  10. 10 http://twitter.com/spurrachel
  11. 11 http://twitter.com/Doubleolee
  12. 12 http://twitter.com/Doubleolee
  13. 13 http://twitter.com/Doubleolee
  14. 14 http://twitter.com/mailchimp
  15. 15 http://twitter.com/mailchimp
  16. 16 http://twitter.com/mailchimp
  17. 17 http://twitter.com/sitepointdotcom
  18. 18 http://twitter.com/sitepointdotcom
  19. 19 http://twitter.com/sitepointdotcom
  20. 20 http://twitter.com/benek
  21. 21 http://twitter.com/benek
  22. 22 http://twitter.com/benek
  23. 23 http://twitter.com/aaronmillerillz
  24. 24 http://twitter.com/aaronmillerillz
  25. 25 http://twitter.com/aaronmillerillz
  26. 26 http://twitter.com/robingood
  27. 27 http://twitter.com/robingood
  28. 28 http://twitter.com/robingood
  29. 29 http://twitter.com/sickbrain
  30. 30 http://twitter.com/sickbrain
  31. 31 http://twitter.com/sickbrain
  32. 32 http://twitter.com/problogger
  33. 33 http://twitter.com/problogger
  34. 34 http://twitter.com/problogger
  35. 35 http://twitter.com/unmarketing
  36. 36 http://twitter.com/unmarketing
  37. 37 http://twitter.com/unmarketing
  38. 38 http://twitter.com/lanesa
  39. 39 http://twitter.com/lanesa
  40. 40 http://twitter.com/lanesa
  41. 41 http://twitter.com/rjacquez
  42. 42 http://twitter.com/rjacquez
  43. 43 http://twitter.com/rjacquez
  44. 44 http://twitter.com/thegraphicmac
  45. 45 http://twitter.com/thegraphicmac
  46. 46 http://twitter.com/thegraphicmac
  47. 47 http://twitter.com/elitistsnob
  48. 48 http://twitter.com/elitistsnob
  49. 49 http://twitter.com/elitistsnob
  50. 50 http://twitter.com/line25blog
  51. 51 http://twitter.com/line25blog
  52. 52 http://twitter.com/line25blog
  53. 53 http://twitter.com/idesignstudios
  54. 54 http://twitter.com/idesignstudios
  55. 55 http://twitter.com/idesignstudios
  56. 56 http://twitter.com/SohTanaka
  57. 57 http://twitter.com/SohTanaka
  58. 58 http://twitter.com/SohTanaka
  59. 59 http://twitter.com/adamplitt
  60. 60 http://twitter.com/adamplitt
  61. 61 http://twitter.com/adamplitt
  62. 62 http://twitter.com/dickieadams
  63. 63 http://twitter.com/dickieadams
  64. 64 http://twitter.com/dickieadams
  65. 65 http://twitter.com/iamFinch
  66. 66 http://twitter.com/iamFinch
  67. 67 http://twitter.com/iamFinch
  68. 68 http://twitter.com/sharebrain
  69. 69 http://twitter.com/sharebrain
  70. 70 http://twitter.com/sharebrain
  71. 71 http://twitter.com/iamkhayyam
  72. 72 http://twitter.com/iamkhayyam
  73. 73 http://twitter.com/iamkhayyam
  74. 74 http://twitter.com/ramesstudios
  75. 75 http://twitter.com/ramesstudios
  76. 76 http://twitter.com/NIK0_BELLIC
  77. 77 http://twitter.com/NIK0_BELLIC
  78. 78 http://twitter.com/MdFilmFestival
  79. 79 http://twitter.com/MdFilmFestival
  80. 80 http://twitter.com/fragments77
  81. 81 http://twitter.com/fragments77
  82. 82 http://twitter.com/happytreefriend
  83. 83 http://twitter.com/happytreefriend
  84. 84 http://twitter.com/LoungeKat
  85. 85 http://twitter.com/LoungeKat
  86. 86 http://twitter.com/ellingson
  87. 87 http://twitter.com/ellingson
  88. 88 http://twitter.com/hootsuite
  89. 89 http://twitter.com/hootsuite
  90. 90 http://twitter.com/G_Obieta
  91. 91 http://twitter.com/G_Obieta
  92. 92 http://twitter.com/willbryantplz
  93. 93 http://twitter.com/willbryantplz
  94. 94 http://twitter.com/grant_clark
  95. 95 http://twitter.com/grant_clark
  96. 96 http://twitter.com/hugeinc
  97. 97 http://twitter.com/hugeinc
  98. 98 http://twitter.com/JJunkins
  99. 99 http://twitter.com/JJunkins
  100. 100 http://twitter.com/Baldy67
  101. 101 http://twitter.com/Baldy67
  102. 102 http://twitter.com/thelaughbutton
  103. 103 http://twitter.com/thelaughbutton
  104. 104 http://twitter.com/bickov
  105. 105 http://twitter.com/bickov
  106. 106 http://twitter.com/jayjdk
  107. 107 http://twitter.com/jayjdk
  108. 108 http://twitter.com/nathanhoad
  109. 109 http://twitter.com/nathanhoad
  110. 110 http://twitter.com/robertomas
  111. 111 http://twitter.com/robertomas
  112. 112 http://twitter.com/mayhemstudios
  113. 113 http://twitter.com/mayhemstudios
  114. 114 http://twitter.com/ThirstEase
  115. 115 http://twitter.com/ThirstEase
  116. 116 http://twitter.com/cameronolivier
  117. 117 http://twitter.com/cameronolivier
  118. 118 http://twitter.com/studio3k
  119. 119 http://twitter.com/studio3k
  120. 120 http://twitter.com/sixreffie
  121. 121 http://twitter.com/sixreffie
  122. 122 http://twitter.com/TheTwiddict
  123. 123 http://twitter.com/TheTwiddict
  124. 124 http://twitter.com/mountainash
  125. 125 http://twitter.com/mountainash
  126. 126 http://twitter.com/Hallisar
  127. 127 http://twitter.com/Hallisar
  128. 128 http://twitter.com/mywayhome
  129. 129 http://twitter.com/mywayhome
  130. 130 http://twitter.com/TheArtificer
  131. 131 http://twitter.com/TheArtificer
  132. 132 http://twitter.com/webdude75
  133. 133 http://twitter.com/webdude75
  134. 134 http://twitter.com/colourofair
  135. 135 http://twitter.com/colourofair
  136. 136 http://twitter.com/jodyphillips
  137. 137 http://twitter.com/jodyphillips
  138. 138 http://twitter.com/emilychang
  139. 139 http://twitter.com/emilychang
  140. 140 http://twitter.com/ijustine
  141. 141 http://twitter.com/ijustine
  142. 142 http://twitter.com/boagworld
  143. 143 http://twitter.com/boagworld
  144. 144 http://twitter.com/collis
  145. 145 http://twitter.com/collis
  146. 146 http://twitter.com/chrisspooner
  147. 147 http://twitter.com/chrisspooner
  148. 148 http://twitter.com/webb_art
  149. 149 http://twitter.com/webb_art
  150. 150 http://twitter.com/Hicksdesign
  151. 151 http://twitter.com/Hicksdesign
  152. 152 http://twitter.com/rww
  153. 153 http://twitter.com/rww
  154. 154 http://twitter.com/ThemeForest
  155. 155 http://twitter.com/ThemeForest
  156. 156 http://twitter.com/technikwuerze
  157. 157 http://twitter.com/technikwuerze
  158. 158 http://twitter.com/Designfeedr
  159. 159 http://twitter.com/Designfeedr
  160. 160 http://twitter.com/Malarkey
  161. 161 http://twitter.com/Malarkey
  162. 162 http://twitter.com/Trenti
  163. 163 http://twitter.com/Trenti
  164. 164 http://twitter.com/zomigi
  165. 165 http://twitter.com/zomigi
  166. 166 http://twitter.com/carsonified
  167. 167 http://twitter.com/carsonified
  168. 168 http://twitter.com/WiliamAu
  169. 169 http://twitter.com/WiliamAu
  170. 170 http://twitter.com/wpbeginner
  171. 171 http://twitter.com/wpbeginner
  172. 172 http://twitter.com/brandonacox
  173. 173 http://twitter.com/brandonacox
  174. 174 http://twitter.com/inspiredmag
  175. 175 http://twitter.com/inspiredmag
  176. 176 http://twitter.com/guardiantech
  177. 177 http://twitter.com/guardiantech
  178. 178 http://twitter.com/DesignerDepot
  179. 179 http://twitter.com/DesignerDepot
  180. 180 http://twitter.com/carywood
  181. 181 http://twitter.com/carywood
  182. 182 http://twitter.com/Designia
  183. 183 http://twitter.com/Designia
  184. 184 http://twitter.com/_finderskeepers
  185. 185 http://twitter.com/_finderskeepers
  186. 186 http://www.fuelyourcreativity.com/free-psd-twitter-background-template/
  187. 187 http://peekr.net/
  188. 188 http://twtbg.me/
  189. 189 http://www.clickablenow.com/
  190. 190 http://www.blog.spoongraphics.co.uk/tutorials/twitter-background-design-how-to-and-best-practices
  191. 191 http://www.creativepro.com/article/design-unique-twitter-background
  192. 192 http://www.10e20.com/blog/2009/08/18/4-ways-to-optimize-your-twitter-background/
  193. 193 http://www.w3avenue.com/2009/08/28/resource-kit-to-create-customize-find-twitter-backgrounds/
  194. 194 http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  195. 195 http://www.smashingmagazine.com/2009/03/04/15-useful-twitter-plugins-and-hacks-for-wordpress/
  196. 196 http://www.smashingmagazine.com/2009/02/03/8-useful-tips-to-become-successul-with-twitter/
  197. 197 http://www.smashingmagazine.com/2009/03/17/99-essential-twitter-tools-and-applications/
  198. 198 http://www.smashingmagazine.com/2009/06/24/birdies-cute-free-twitter-icons-for-your-blog/

↑ Back to top Tweet itShare on Facebook

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

Advertising
  1. 1

    quero fazer um twiter me ajuda porfavor

    0
  2. 152
  3. 303

    helle pereira araujo

    July 27, 2010 12:37 pm

    amo o twitter

    0
  4. 454

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

    1
  5. 605

    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
  6. 756

    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
    • 907

      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
  7. 1058

    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
  8. 1209

    very very useful tips,i like it….

    0
  9. 1360

    hello ,

    my new background theme with the new interface.

    let me know what you think !

    twitter.com/cattias

    1
  10. 1511

    hello ,

    my new background theme with the new interface.

    let me know what you think !

    twitter.com/cattias

    0
  11. 1662

    quero fazer um twitter

    0
  12. 1813

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

    0
    • 1964

      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
  13. 2115

    quero ter um blog

    0
  14. 2266

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

    0
  15. 2417

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

    0
  16. 2568

    quero hum Twitter

    1
  17. 2719

    @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
  18. 2870

    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
  19. 3021

    Feel free to check mine out as well @GodwinNdlovu

    0
  20. 3172

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

    0
  21. 3323

    A ver que les parece el mío @floresdeoaxaca

    0
  22. 3474

    Did one for a client today @PiattoRest

    0
  23. 3625

    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
  24. 3776

    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
  25. 3927

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

    0
  26. 4078

    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
  27. 4229

    @ joelmoney – nice! =)

    0

↑ Back to top