How To Create A Custom Twitter Profile Design That Works

Posted on Dec 30, 2011 by in Blog, Design | 4 comments

twitter-cover

When it comes to personalising your twitter profile, what seems like a simple task actually has a number of hidden depths that many users may not be even remotely aware of. Default settings are boring, but designing a twitter profile without proper consideration of the way your profile changes to fit different screen resolutions can result in something worse than if you hadn’t touched the default settings in the first place . This tutorial will explain how to optimise your twitter profile design so that it can be viewed successfully across a wide range of different screen sizes, and will also cover the design process of how I created my own twitter profile.

Design Limitations

Probably the biggest reason why people stick to the default twitter design is because you can only customise your profile’s background, link and text colours.  I actually support this move. One only has to think back to the days of MySpace where you were annoyed to death with heinous auto-play music with no stop or mute buttons, super small impossible to read fonts and whole paragraphs written in strikethrough. 

Don’t even remind me

The biggest limitation that you have to pay attention to when designing your twitter profile’s background is the way your profile will be displayed across different screens. Your twitter stream and side bar will always float in the centre of the page regardless of the screen it is being viewed on.

Twitter viewed on a 1920×180 HD Screen

Twitter when viewed on a 1024×768 iPad 2 screen

As you can see, a HD desktop screen will give you plenty of room to play around and design a really nice background. However, on an iPad2 screen, your twitter stream and side bar almost takes up the entire viewing area, leaving your background covered up. If you are designing a twitter profile for a business, make sure that you place all important information such as URL’s, descriptions and contact info in the profile’s description and not in your twitter profile’s background. It’s common sense really, but it’s surprising how often this mistake is committed.

The red area represents the “safe” area to design in

At the end of 2011, a common and fairly safe screen resolution to base your designs off is 1440×900. Usually I would swear by the 1024×768, 960gs method, but in this case I am going to work with a larger screen so that the design can be more flexible.

Defining the design direction

If you are designing a twitter profile for a company, then it is important to follow the same design language, colour pallet and link styles as the company’s existing website or branding. Adhering to brand consistency across social media is something that few companies grasp for reasons that do not make sense to me. Social media IS media today, so it is important to maintain a brand’s image across all platforms on the web- it’s the essence to maintaining a strong brand.

Here are a few good examples:
Envato
Coca-Cola

If you are designing your twitter profile for purely personal use, then feel free to do whatever you want as long as it doesn’t end up looking like that Myspace profile from above.

 

Personally, I am obsessed with white space, minimal colour pallets, symmetry, subtle design cues and the lack of visual clutter hence the look of my twitter profile and blog. I will outline the steps involved in creating my twitter profile design below.

Creating the background

Open up Photoshop and create new 1920×1200 solid white document. Aside from you ballin’ Apple Cinema Display owners, 1920x1200px screens are the largest common displays today. As we want our twitter profiles to look good on as many different screen sizes as possible, our design’s maximum limitations will be 1920×1200, but optimised for a 1440×900 screen.

99% of the time I have “Snap to guides” checked in Photoshop. It makes dragging out marquees and creating shapes so much easier.

Before whipping out the paint bucket, brush and gradient tools, I always set up some general guides first. As the design will be optimised for a 1440x900px viewing area, we will have an approximately 250x800px column to create our design in, so I have set up two guidelines to show this. I have also added in two horizontal guides 20px and 40px from the top of the document that represents the top edge of the twitter stream and the top edge of your display picture.

It’s all about the gradient

Next, I created a new layer and dragged down three more horizontal guides at 1px, 5px and 6px from the top of the document. With the new layer selected, I then filled the top 1px line with a medium grey, the middle area with a maroon to pure red gradient and the bottom 1px line with light grey. You can barely notice these colours at 100% view, but I did say that I am obsessed with subtle design-cues :)

Next I will create another subtle design-cue, a 45 degree line pattern for the background. Open up a 12x12px Photoshop document and fill the background with black. Create a new layer above the background, and with a 1px pencil, draw in three medium grey lines. Delete the black background, then select “Edit > Define Pattern”

Subtleness is key when dealing with background patterns

Reopen the original document, create a new layer between the red line and the white background, then select “Layer > New Fill Layer > Pattern” and fill this layer with the line pattern. Zoom out to 100% and use the layer’s opacity controls to reduce the strength of the line pattern so that it is barely visible.

Designing The Monogram

About now the super-minimalist hipster designers would call it a day, but I’ve decided to go a bit further and add a touch of personal branding. The text monogram was created using my own version of the Eurostile Extended font that I customised in Fontographer.

EDIT: I was planning on only using the monogram for my twitter profile, but I ended up quite liking it so I’ve decided to use it on my blog.

Reversing the background pattern and applying it to another element on the page is a good way to make it stand out more

First, a dark-grey to almost-black gradient was applied at 135 degrees. Second, the steps to create a line pattern were repeated, however this time the lines were drawn in the opposite direction and in pure white. The reversed line pattern was then applied to the monogram by shift-clicking the type layer and selecting” Layer > New Fill Layer > Pattern”.  Drop the pattern layer’s opacity until the lines are barely visible.

Always treat drop shadows with caution. Heavy drop shadows can make a good design look shit

To finish off the monogram, a very gentle drop-shadow was applied to help lift the logo off the background. I added my blog’s URL in Eurostile Extended Bold beneath the monogram. A very light emboss effect was added to give the impression that the URL has been pressed into the background.

Never forget to optimise your images before uploading

Finally, and perhaps most importantly, the design was optimised for the web. The last thing you want is your twitter profile taking eons to load because of an non-optimised background.

Here are a few handy tips for image optimisation:

  • If there is no obvious quality reduction, save images at around 65% quality.
  • Try dropping the quality down to 35%. If there is no obvious quality loss then save it. However, most of the time I save my images at 65% quality.
  • If the image is small to medium in size – select the optimised check box. If the image is large, select the progressive check box. This will result in your image loading in layers, which is much more attractive then  watching an image load from top to bottom.
  • Set the Metadata drop-down to none. This will knock off a few kb’s
  • If you are optimising photographs that have a lot of different colours, bump up the blur count to 0.1 or 0.2. This will smooth out some of the pixilation and hazing effects that appear when you drop the image’s quality.

 

And there you have it. A twitter profile that reflects the branding and design language of my own blog while being compatible on a wide variety of screen sizes. If you enjoyed this tutorial then please follow me on twitter. I only set-up my personal account last week and so far I’ve only had cam girls follow me trying to flog their services, so some real people following me would be nice. Any further questions please feel free to leave a comment below.

4 Comments

  1. ooo.. awesome..!! I’ll try to my twitter account soon. Your blog so cool.. I like it..

    • Glad that you liked it Dhafian. However Twitter has changed its layout since I made this tutorial, so you find that some of the alignment dimensions in this tutorial will be off. I might just make a second tutorial on designing for the new Twitter layout when I have the time. Thanks for reading!

  2. Hey there! I just wanted to ask if you ever
    have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing
    a few months of hard work due to no backup. Do you have any methods to protect against hackers?

  3. Hi, I do believe your web site could possibly be having web browser compatibility issues.

    Whenever I take a look at your web site in Safari,
    it looks fine however, if opening in I.E., it has some overlapping issues.
    I merely wanted to provide you with a quick heads up!
    Aside from that, fantastic site!

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>