Design For Twitter's New UI + Header Template

Twitter is updating their UI (user interface) slowly and surely. The next update that is coming soon is a completely revamped profile page. (Currently you can get it, but it is opt-in, and you can opt-out if you don't like it... for now.) Eventually this will become the default, required profile page design of all of Twitter. (An example of this at 1024px wide is below.) Kinda reminds you of Facebook doesn't it?



For any of you who are designers for yourself or a group with a social media presence, you know what this means: redesign time. This entails making sure your former design works for the new layout, and, if not, redoing all or part of it to make it work. Here are some helpful bits to make your life a little easier:

Profile Pictures & Icons:

(all measurements are squares)

"Recommended dimensions for profile photos are 400x400 pixels."

• Profile Pictures: 200px or 400px from 400px file, Border Radius: 8 px
• Notifications Page & Timeline: 48px or 73px from 73px file, Border Radius 5px
• Followers You Know & Who To Follow: 48px from 48px file, Border Radius: 4px
• Post Avatar: 24px or 48px from 48px file, Border Radius: 3px
• Make sure your icon looks good at all resolutions. Border radii provided to help you know where the cutoffs are.
  

Header:

"Recommended dimensions for header photos are 1500x500 pixels."

Honestly, this is a very bad recommendation. Why? Twitter's responsive design. Twitter's current design scales the header image between 1024 and 1800. For those who didn't know, they scaled an image to greater than its native resolution. Scaling a big image smaller usually keeps quality, but scaling a smaller image bigger causes quality to drop like a rock. Unfortunately, twitter's system doesn't give you much choice, larger images are automatically scaled down.

My recommendation? Use 1900 x 500 for header size design. At this resolution, Twitter will just chop off 200px from each left/right end cap, but if and when it ever wises up to this crappy design fact, you'll have a resolution-ready image to use for design without having to create 200px of space on both ends. And honestly, most graphic programs allows you to export a part of project anyway to image, not just the whole thing.

Second main thing you need to take into account is the responsiveness of Twitter's design. Something viewable at higher resolution might very well disappear behind the profile image at lower resolution. Compare the two examples below, the one on the left is 1024px width, the one on the right is 1920px width.


As such, design accordingly. Any text, logos, or other must-see content listed in the header must be visible for both resolutions.

Link Images:

If you're a person who runs a blog or website that has integration with a plugin or open graph, it's important you also make sure the images you tell twitter to use for article links are the correct size. Don't know what I'm talking about? Most major websites and blog frameworks have parts which tell them to use a specific image for either the whole website or a specific article if someone links them on twitter. (See example image below.)



Those images are always displayed at 120px squares with no border radius.

Image Tweets:

Images are another large part of Twitter, and while you can pop them open to view full size, it is also important to take into account that unopened, photos on profiles appear at 588px x 294px. Images are centered and then cut off for the image preview view.

---

So, I hope all of this helps all your designers who have to cope with the changes in social media sites!

gwennie-chan

P.s. You might notice I don't have anything for Who To Follow or Trends. I use a user stylesheet using Stylish on Firefox to remove that for myself. You can find that particular style here.