How To Create A Custom Twitter Profile Design That Works
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.
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.
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.
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.
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.
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.
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.
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”
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.
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.
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.
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.