How to Design the Perfect Twitter Profile Page (Free Template Included)


twitter-feature-image
FACT: Almost everybody messes up Twitter profile design. Does this include you? Yes, it does (probably). In this post, we’ll set you straight with a start-to-finish tutorial on designing your Twitter profile, including freebie Illustrator & Photoshop templates to resolve your crappy background once and for all (click here to skip the examples below and go straight to the templates).

In order to make an impact, your brand needs to be consistently crafted from one media channel to the next. This means your social profiles, e-books, white papers, business cards, t-shirts, letterhead, water bottles, brand-encrusted condoms, fluffy stuffed animals with your logo stitched on their forehead, the list goes on!

Aside: For help with designing your Facebook page click here. For help with your Google Plus profile click here.

Now, we understand, you get busy, and there isn’t always time for every little thing. But the way your brand appears on Twitter is serious stuff.

Designing Your Twitter Page Starts with the Background

Sounds simple enough: make a picture, upload it to Twitter. Done deal. Right? Wrong! While slapping your logo on a white background is a start, most tweeters can’t seem to color inside the lines. Even the biggest brands get it wrong:

@CharlieSheen

@CharlieSheen on 21 inch iMac

@CharlieSheen on 21 inch iMac

@Originalchexmix

@OriginalChexMix on 21 inch iMac

@OriginalChexMix on 21 inch iMac

@Shaq

shaq-imac

@shaq on 21 inch iMac

@ChakaKhan

@ChakaKhan on 21 inch iMac

@ChakaKhan on 21 inch iMac

@McDonalds

@McDonalds on 21 in iMac

@McDonalds on 21 in iMac

Even the prince of darkness can’t seem to get Twitter right.

WOW! What does it take to get it right???

With the formats for these social platforms constantly changing, it can be hard to keep up. Here are the 4 most common Twitter background design mistakes

Is your Design too small?

Take for instance, the @JuilliardSchool:

@JuilliardSchool

@JuilliardSchool on 21 in iMac

@JuilliardSchool on 21 in iMac

@Cher

@cher on 21 in iMac

@cher on 21 in iMac

@KatyPerry

@KatyPerry on 21 in iMac

@KatyPerry on 21 in iMac

@Nestle

@Nestle on 21 in iMac

@Nestle on 21 in iMac

Juliard, Cher, Katy Perry, and Satan have the same issue — their background images are just too small. They all need to know their images should be much larger to fit nicely on the largest monitors.

Does the design fit inside a laptop monitor?

The left-aligned design of Mattel’s Twitter profile doesn’t quite fit inside the space. Mattel needs to know that the left column on a 13″ MacBook only shows 195 px worth of space! In 2013 this layout worked because the space was 221 pixels wide.

@Mattel

@Mattel on 13 in laptop

@Mattel on 13 in laptop

@Cher

Cher is really messin up all over. Her background doesn’t fit on big or small monitors. I still believe in life after love though.

@cher on 13 in laptop

@cher on 13 in laptop

@DDLovato

Demi Lovato’s twitter background almost fits inside the 195 px. Beautiful design, but the size is too small.

@ddlovato on 13 in laptop

@ddlovato on 13 in laptop

@JillScott

So close! Kinda…

@JillScott on 13 in laptop

@JillScott on 13 in laptop

@John Legend

I love the art, but it doesn’t show all your curves and all your edges.

@JohnLegend on 13 in laptop

@JohnLegend on 13 in laptop

@KylieMinogue

Though the left side fits perfectly, the right side doesn’t.

@kylieminogue on 13 in laptop

@kylieminogue on 13 in laptop

@Cosmopolitan

Cosmo made good on the width of their design, but not on the height.

@cosmopolitan on 13 in laptop

@cosmopolitan on 13 in laptop

@CageTheElephant

This artwork is the best I’ve seen, but it doesn’t fit.

@cagetheelephant on 13 in laptop

@cagetheelephant on 13 in laptop

@4EverBrandy

Tsk Tsk Tsk Brandy. Almost doesn’t count. Check the right side of your design.

@4everBrandy on 13 in laptop

@4everBrandy on 13 in laptop

Is your design not centered?

This method is actually OK. Everything fits on small and large screens, but on a larger screen the artwork is pulled away from the center.

@Oatmeal

looks great on a 13 inch laptop

@oatmeal on 13 inch laptop

@oatmeal on 13 inch laptop

…but on a 21 inch monitor…

@oatmeal on 21 in iMac

@oatmeal on 21 in iMac

This happens by aligning the image to “Left” under the twitter design settings.

@RobynKonichiwa

@RobynKonichiwa on 13 inch laptop

@RobynKonichiwa on 13 inch laptop

@RobynKonichiwa on 21 inch iMac

@RobynKonichiwa on 21 inch iMac

@AdamLambert

@adamlambert on 13 in laptop

@adamlambert on 13 in laptop

@adamlambert on 21 in iMac

@adamlambert on 21 in iMac

@MichaelJackson

@MichaelJackson on 13 in laptop

@MichaelJackson on 13 in laptop

@MichaelJackson on 21 in iMac

@MichaelJackson on 21 in iMac

@MariahCarey

@MariahCarey on 13 in laptop

@MariahCarey on 13 in laptop

@MariahCarey on 21 in iMac

@MariahCarey on 21 in iMac

@MBsings

@MBsings on 13 in laptop

@MBsings on 13 in laptop

@MBsings on 21 in iMac

@MBsings on 21 in iMac

@NBCTheVoice

@NBCTheVoice on 13 in laptop

@NBCTheVoice on 13 in laptop

@NBCTheVoice on 21 in iMac

@NBCTheVoice on 21 in iMac

@FLOTUS

@FLOTUS on 13 in laptop

@FLOTUS on 13 in laptop

@FLOTUS on 21 in iMac

@FLOTUS on 21 in iMac

@BarackObama

@BarackObama on 13 in laptop

@BarackObama on 13 in laptop

@BarackObama on 21 in iMac

@BarackObama on 21 in iMac

@Shakira

@Shakira on 13 in laptop

@Shakira on 13 in laptop

@Shakira on 21 in iMac

@Shakira on 21 in iMac

You get the idea. Though it looks decent, it could be better.

Who is doing Twitter right?

@iloveLoudNoises (Follow us!)

Here’s ours (@iloveLoudNoises):

@iloveloudnoises on 13 in laptop

@iloveloudnoises on 13 in laptop

@iloveloudnoises on 21 in iMac

@iloveloudnoises on 21 in iMac

This is achieved through using our template, then setting the twitter background color to match the image background color- while adjusting the alignment to be centered. Be sure to set your link color as well. Access your settings from the Twitter Design Settings page.

Here are some twitter pages LoudNoises has designed recently:

 @DrGreene

@DrGreene on 13 in laptop

@DrGreene on 13 in laptop

@DrGreene on 21 in iMac

@DrGreene on 21 in iMac

@IRMCA1

@IRMCA1 on 13 in laptop

@IRMCA1 on 13 in laptop

@IRMCA1 on 21 in iMac

@IRMCA1 on 21 in iMac

@lifentco

@lifentco on 13 in laptop

@lifentco on 13 in laptop

@lifentco on 21 in iMac

@lifentco on 21 in iMac

Please contact us for more info on designing your social media profiles.

Here are some other people who do Twitter design right:

@Visa

@visa on 13 in laptop

@visa on 13 in laptop

@visa on 21 in iMac

@visa on 21 in iMac

The image is very large, at 2259 by 1228 px it is centered on the page, and will look nice on both large and small monitors.

@God

@God in his 13 inch laptop

@God in his 13 inch laptop

@God is giving @Satan a run for his money because God has a background image that is large enough for even the largest monitors

@God on a 21 inch iMac

@God on a 21 inch iMac

@ZacEfron

Zac has a pretty perfect page. His artwork is centered, hugging the center content even when on a large monitor.

@ZacEfron on 13

@ZacEfron on 13 in laptop

@ZacEfron on 21 in iMac

@ZacEfron on 21 in iMac

@DrCarlSagan

This unofficial account for Carl Sagan is using an almost seamless star background and tiling it in twitter design settings.

@DrCarlSagan on 13 in laptop

@DrCarlSagan on 13 in laptop

@drcarlsagan on 21 in iMac

@drcarlsagan on 21 in iMac

@ATT

ATT uses an image of a pattern that is large enough to fit the largest monitors.

@ATT on 13 in laptop

@ATT on 13 in laptop

@ATT on 21 in iMac

@ATT on 21 in iMac

@SteveAoki

This is just great.

@steveaoki on 13 in laptop

@steveaoki on 13 in laptop

@steveaoki on a 21 in iMac

@steveaoki on a 21 in iMac

@TacoBell

Taco Bell uses a large collage type image that works on all size monitors.

@TacoBell on 13 in laptop

@TacoBell on 13 in laptop

@TacoBell on a 21 in iMac

@TacoBell on a 21 in iMac

@TIME

Time uses a large image with a pattern. Well done.

@TIME on 13 in laptop

@TIME on 13 in laptop

@TIME on 21 in iMac

@TIME on 21 in iMac

@TMobile

T Mobile uses a wacky image, and tiles it. It isn’t quite large enough, but the design of the image works decently when tiled.

@TMobile on 13 in laptop

@TMobile on 13 in laptop

@TMobile on 21 in iMac

@TMobile on 21 in iMac

@LLCoolJ

LL uses a collage pattern background and tiles it. That works for all sizes.

@LLCoolJ on 13 in laptop

@LLCoolJ on 13 in laptop

@LLCoolJ on 21 in iMac

@LLCoolJ on 21 in iMac

@LenaDunham

Lena is cute and quirky enough to just take a small image and tile it. This is actually really popular in music profiles such as @MileyCyrus, @LilyAllen, @yelyahwilliams, and even @OneDirection.

@lenadunham on 13 in laptop

@lenadunham on 13 in laptop

@lenadunham on 21 in iMac

@lenadunham on 21 in iMac

Lets not forget our Header Feature

To have a completely designed profile, three images need to be uploaded: your profile image, header image, and background image. We have created three templates for you to use in Photoshop. Adobe Illustrator doesn’t have a good export rendering ability, and your image is likely to turn out fuzzy or blurry. Photoshop is the best option based on our experience and research. Each template includes directions on how to export all images.

How to do it right

It is very important to make sure your image looks good on any size monitor, from 13 inch notebooks, to 27 inch iMacs. The image should be seamless, immersing the viewer in your magical brand. Sizing issues can cause unwanted distraction, and lack of design cohesiveness can create trust issues for your brand.

Background sizes- Remember Macbook Retina Display Users:

The 15 inch macbook Retina display is 2880 by 1800 px. (Amazing) This is currently a size twitter accepts (they used to shrink large images) however twitter does this weird thing where it chops off the top 5 pixels of the image. Don’t worry, our template is marked appropriately.

2880×1800 px Centered Background Images

Here is the best solution we currently have for sizing issues.

1. Design a 2880 by 1800 px background image that has a solid color on its outer most edges.

2. In twitter design settings, set your profile background color to match the hex value of the solid color in your image.

3. If you are creating patterned image, or want to have a large photograph as your background you can implement a radial vignette or gradient that makes the edges one solid color.

Alright, alright — make with the freebies!

Remember these basic rules

  1. The safest size image is 2880x1800px.
  2. Match your image background hex color with a chosen twitter background color (to make it seamless). Our template is to make sure your important design content stays within the macbook size.
  3. Use JPEG Mini or another image shrinking program to shrink the size (in MB) of your JPEG photo so it doesn’t take too long to load for users.
  4. Design around the twitter content in the center.
  5. Choose center alignment in the design settings on Twitter

With these rules in mind, we want you to take advantage of our free design templates, in both Adobe Illustrator and Photoshop:

Related Posts from LoudNoises:

  • Fix your Facebook Profile? (Free Template) Click here.
  • Does your Google Plus need a lift? (Free Template) Do that here.

Follow us on Twitter: