Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Effective Twitter Backgrounds: Examples and Current Practices

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 Link

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 Link

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 Link

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.

@adamplitt562

@adamplitt573

@adamplitt584

@gaksdesigns5

@gaksdesigns6

@gaksdesigns7

Mix Tiled Pattern With Other Graphics Link

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 Link

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.

@Doubleolee8

@Doubleolee9

@Doubleolee10

@mailchimp11

@mailchimp12

@mailchimp13

Reveal More With The Page Peel Effect Link

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.

@sitepointdotcom14

@sitepointdotcom15

@sitepointdotcom16

@benek17

@benek18

@benek19

Add Personalized Sidebar To Your Profile Link

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.

@aaronmillerillz20

@aaronmillerillz21

@aaronmillerillz22

@robingood23

@robingood24

@robingood25

@sickbrain26

@sickbrain27

@sickbrain28

Show Yourself Link

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.

@problogger29

@problogger30

@problogger31

@unmarketing32

@unmarketing33

@unmarketing34

Use Icons and Logos Link

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.

@lanesa35

@lanesa36

@lanesa37

@rjacquez38

@rjacquez39

@rjacquez40

Add a Header Bar Link

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.

@thegraphicmac41

@thegraphicmac42

@thegraphicmac43

@elitistsnob44

@elitistsnob45

@elitistsnob46

Less is More Link

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:

@line25blog47

@line25blog48

@line25blog49

@idesignstudios50

@idesignstudios51

@idesignstudios52

Accommodate the 1024px Width Link

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:

@SohTanaka53

@SohTanaka54

@SohTanaka55

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

@adamplitt562

@adamplitt573

@adamplitt584

Use Typography Link

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.

@dickieadams59

@dickieadams60

@dickieadams61

@iamFinch62

@iamFinch63

@iamFinch64

Put Information In a Memorable Way Link

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.

@sharebrain65

@sharebrain66

@sharebrain67

@iamkhayyam68

@iamkhayyam69

@iamkhayyam70

Do Whatever You Want To Do Link

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.

@ramesstudios71

@ramesstudios72

@NIK0_BELLIC73

@NIK0_BELLIC74

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.

@MdFilmFestival75

@MdFilmFestival76

@fragments7777

@fragments7778

@happytreefriend79

@happytreefriend80

@LoungeKat81

@LoungeKat82

@ellingson83

@ellingson84

@hootsuite85

@hootsuite86

@G_Obieta87

@G_Obieta88

@willbryantplz89

@willbryantplz90

@grant_clark91

@grant_clark92

@hugeinc93

@hugeinc94

@JJunkins95

@JJunkins96

@Baldy6797

@Baldy6798

@thelaughbutton99

@thelaughbutton100

@bickov101

@bickov102

@jayjdk103

@jayjdk104

@nathanhoad105

@nathanhoad106

@robertomas107

@robertomas108

@mayhemstudios109

@mayhemstudios110

@ThirstEase111

@ThirstEase112

@cameronolivier113

@cameronolivier114

@studio3k115

@studio3k116

@sixreffie117

@sixreffie118

@TheTwiddict119

@TheTwiddict120

@mountainash121

@mountainash122

@Hallisar123

@Hallisar124

@mywayhome125

@mywayhome126

@TheArtificer127

@TheArtificer128

@webdude75129

@webdude75130

@colourofair131

@colourofair132

@jodyphillips133

@jodyphillips134

@emilychang135

@emilychang136

@ijustine137

@ijustine138

@boagworld139

@boagworld140

@collis141

@collis142

@chrisspooner143

@chrisspooner144

@webb_art145

@webb_art146

@Hicksdesign147

@Hicksdesign148

@rww149

@rww150

@ThemeForest151

@ThemeForest152

@technikwuerze153

@technikwuerze154

@Designfeedr155

@Designfeedr156

@Malarkey157

@Malarkey158

@Trenti159

@Trenti160

@zomigi161

@zomigi162

@carsonified163

@carsonified164

@WiliamAu165

@WiliamAu166

@wpbeginner167

@wpbeginner168

@brandonacox169

@brandonacox170

@inspiredmag171

@inspiredmag172

@guardiantech173

@guardiantech174

@DesignerDepot175

@DesignerDepot176

@carywood177

@carywood178

@designia179

@designia180

@_finderskeepers181

_finderskeepers182

Tools Link

  • Twitter Background Template183: 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.
  • ClickableNow184: Add Clickable Links to your Twitter background image.

Additional Resources Link

Footnotes Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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

    Great article. I have to create mine soon. :)

    0
  2. 2

    I think you the twitter background should match the product / service / person it is trying to depict. Sitepoint was great! . Check our classifieds revolution at
    Localads Twitter

    0
  3. 3

    Thanks For all the tools, guides, and Inspiration! Maybe my background can make the next list @madesigns

    0
  4. 4

    Designers should also remember that many people use screen resolutions with a height greater than the 900 or so that is standard on a 19″ widescreen. Many use 1024 height (for example, 1280 x 1024) or taller. @adamplitt’s background looks cool but on a 1024-tall window it is cut off at the bottom. The best thing to do is make your background image fade into your background color.

    0
  5. 5

    I think this eclectic background is cool.
    @Jacob_DeGrade

    0
  6. 6

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

    1
  7. 7

    helpful. thank you. not many people actually view twitter from the homepage now do they? well its a lot less before.

    0
  8. 8

    Thanks for the mention. @webb_art

    0
  9. 9

    Thanks for the tips. I need to revisit my messy background.

    0
  10. 10

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

    Great Article, it’d be great to make the round two of this list.

    @aubreyjohnson

    0
  12. 12

    Great works =]

    0
  13. 13

    Cool post, I like to think mine is also pretty good and at the level of being exposed, check it here: http://twitter.com/h1brd

    0
  14. 14

    Some nice examples – The first one’s a good idea but it resizes pretty poorly. Us mac kinds don’t normally conform to standard screen sizes.

    0
  15. 15

    Hey hey … thx for the mention! :)

    0
  16. 16

    They should support more background options (CSS)
    Centered positioning of the background would be nice to have?!

    0
  17. 17

    Cool. I just keep my as simple as possible @IvanBernat

    0
  18. 18

    Great stuff. While I find Twitter too narcissistic to justify a personal page, our news station has one, and we incorporate ti into the show as a way for viewers to interact with stories. The anchors can read responses right from the laptops on their desks.

    0
  19. 19

    Unfortunately all this works with a certain screen resolution.

    0
  20. 20

    Thanks for the mention! I have to agree with an earlier comment though, I hardly ever use my actual Twitter homepage to update, although I still enjoy looking at other peoples’ backgrounds and content through the Twitter site.

    @grant_clark

    0

↑ Back to top