Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

New Twitter design and PSD for standard resolutions

Comments and suggestions in here

Just a few moments ago, we were lucky to get the New Twitter interface in our Tutorialshock account and we have to say that we’re pleased with it, the design is now more organized than before, the information is well distributed and bottom-line, we think it’s a step forward for Twitter.

As soon as we got the new Twitter interface, we started making tests, from checking the new features to taking a look at other profiles and soon we find out that the Iconshock’s background was having problems to fit inside the new layout, and that’s when we decided to make this article, a quick review around the new Twitter features and also offer you a great pack of background layouts to help you adjust your own background into Twitter’s new design.

newtwitter00

What are the main changes on this new Twitter?

After studying this new interface for a few minutes, we noticed some major changes that every user will need to understand in order to handle this new Twitter quickly. The changes have occurred both in functionality and interface design, making this a complete revamping process, let’s check the main features of this new Twitter:

Top bar

With the new top bar, you will have easy access to the search bar all the time, as well as accessing to your profile, messages and settings. The nicest thing about this revamped top bar is definitely the ability that people have now of using the search bar at anytime.

newtwitter01

Left panel

The left panel focuses on tweets and messages. You can easily switch between the timeline, favorites, following, followers and lists; you can also find on top of the panel a complete description of the profile you’re visiting at the moment.

newtwitter02

Right panel

The right panel maintains some of the aspects of the old interface, but now there are showed in a more organized way. You can find your basic account information (tweets, following, followers and lists), your latest tweet, the current trends, users to follow (suggestions) and additional options.

newtwitter03

Keyboard shortcuts

This is one of the most helpful features of the New Twitter, from automatically retweet something with (t) to navigate between tweets (j) (k), this will definitely improve the users navigation times.

newtwitter04

Non-stop scrolling

We can’t show you this feature with a screenshot, you need to actually prove it. Now you won’t be seeing the “show more” button when scrolling down, the tweets will be automatically loaded as you scroll, helping you to reach the oldest tweets from your friends.

Easily check Hashtags

Now you can click over any tweet that has a hashtag on it and you will see it on the right panel with tweets containing the same hasthag below the tweet that you clicked over.

newtwitter05

Embed pictures on your tweets

Twitter is now partner with some major picture companies, including Flickr, TwitPic and YFrog and thanks to that, you can now see the pictures that other persons include on their tweets directly on your right panel.

newtwitter06

And you can also embed videos

As with pictures, Twitter decided to also allow their users to now include videos within their tweets from different sources, including the famous YouTube and Vimeo.

newtwitter07

Find deeper insights of tweets

We really like the fact that you can now click over a tweet to see its embedded media or if it does not have any, a nice review regarding this tweet, including information about the link and persons mentioned on it.

newtwitter08

Evaluate your followers

With this new feature you can take a look at your followers and see if they should be followed back, you will see the follower’s basic information and latest 3 tweets, a nice way to see who is behind you.

newtwitter09

Auto complete

From now on, when you need to make a retweet or just tweet someone, you just need to enter the @ followed by the initial letter of the user and a dropdown list will instantly appear for you to choose the recipient.

newtwitter10

Setting up your background

OK, these are basically the most relevant changes that the new Twitter has brought to us, we personally think that they’re all great and will facilitate the tweeting process, perhaps people will be using again the main interface instead of external assistants.

But there’s still an issue that we need to figure out, and it’s the background thing. With the new Twitter interface, many backgrounds have become obsolete as they don’t fit inside the new empty areas of the layout, which has became more proportional and also gives more relevance to the information. Just to see an example, let’s check the Iconshock’s profile at different resolutions.

1024 x 768

On this resolution you had a minimal area left to place your information. It’s very important to try to place the primary information in a way that appears at this resolution, you have around 40 free pixels at the left side and 30 at the right side, also you have a subtle opacity (around 75 %) across the right panel to experiment with.

newtwitter11

1152 x 864

This resolution is not often used but we think that’s important to mention it because it appears on the display adjustments of your computer when you’re going from the previous resolution to the next one. At this size you will have a free area of 41 px at the left side, about 40 pixels at the right side and 500 px on the right panel.

newtwitter15

1280 x 1024

This is the next resolution in terms of size that people usually implement on their computers. At this size, you get a total of 105 pixels to work with at the left side, around 103 px on the right side and 500 on the right panel. As you can see the interface gets more proportioned at this resolution.

newtwitter12

1440 x 900 (Widescreen)

These days is very common to find widescreen monitors that can show more information on the X range (horizontal) to the person, because many times there’s information at both sides of a website that cannot be noticed on small monitors. The new Twitter interface looks good at this resolution, you have 185 pixels at the left side, around 183 on the right side and 500 on the right panel, so the space gain is happening at both extremes.

newtwitter13

1600 x 1200

This is the larger resolution that we will study on this review, because higher resolutions are still not used by many people around. If you use this resolution you probably own a large monitor. The space that you will have to work on your Twitter background is 265 px at the left side, 263 px on the right side and 500 px on the right panel.

newtwitter14

We hope that this brief article have served you to understand the major differences between the old and the new Twitter, including the new background proportions. As a special gift from us we like to give you 5 custom PSD templates to help make your new Twitter background, hope you enjoy them and share it with your friends.

Download the new Twitter layouts.


144 Responses to “New Twitter design and PSD for standard resolutions”

  1. I absolutely love the new Twitter, thanks for this nice freebie, I will definitely use these grids when making my new background.

  2. Useful and detailed instructions for get the best of the new twitter interface.

    Thanks guys!

    • Hi Rodolfo, thanks for your comment, we really want to help people start loving the new Twitter like we do…

  3. Thanks for this post, very useful!

  4. Don’t forget the vertical 18-20px (2px in shadow) below the top bar.

  5. Thank You for the research and resources. I’m finding an increasing number of creative browsers using 1024×768 on widescreen TV’s which isn’t easy to make sexy on the New Twitter

  6. Thanks so much for sharing this, I got a request for a Twitter background the day before Twitter started rolling out the new layout lol! I was hoping that someone would kindly share this information before I got down to that project on my to-do list :) You’ve gained a follower and friend!

    • Hi Ginger, we were so happy after reading your message, thanks for your support and feel free to come back anytime…

  7. Thanks for sharing this! Now I have a few more tricks up my bag!

  8. thanks for sharing…

  9. Thanks for such a comprehensive resource, I’m saving it to study the backgrounds, I’ll need to work on mine again.

    I really appreciate all your hard work, they’ve made Twitter much easier to navigate, especially having search to hand.

  10. Appreciate you doing the research and measuring and, of course, providing the PSDs.

    Thanks.

    • Thanks for your comment Kristof, we were happy to make the PSD’s so they can be useful to all of our community :)…

  11. Thanks. Great article. Very helpful. So if we are going to pick a size for the background as our new default size so most people would see it, which size do you suggest?

    • Hi Mike, nice that you enjoyed the post, the proper size to work with is 1024 x 768 so most people will see the entire artwork…

  12. Great article thanks,

    Hoping you can help, I followed your instructions to use the 1024×768 sized template but if viewing my Twitter page at higher resolution say  1280×1024 and up, the background is only showing on portion of the screen. Is there anyway to get the image to scale on Twitter so it displays properly no matter what resolution the visitor is viewing at? 

    If not could you please create a 1600 x 1200 template that also shows the ruler for each the lower resolutions so we can pick a sweet spot where any text in the margins will show up on the highest percentage of resolutions. This way the background will at least cover all size monitors

    • Hi Al, thanks for your comment, it’s true that a 1024×768 background will have a lot of blank area if you see it on larger resolutions. We provided the different PSD layouts to help you guys check the exactly measures to work on each resolution. What you can do is simply take the 1024×768 layout and extend the canvas to 1600×1200 and keep the same guides, all you need to do is create the artwork for the new area that will appear after that, hope this works for you, let us know if you have any doubts :)…

    • Thanks Mike I thought that was the case. All I did was use the 1600 x 1200 layout, add my background to that and then run the text I wanted down the left hand side area. So far it has displayed properly at all resolutions up to 1280 x 1024

      From my limited testing Twitter seems to always render the background from the left corner so it will show up the info in the left column properly at any resolution as long as you keep any text or images to the max template size for the lowest res you want to support, in this case being a 1024 x 768 layout.

      It seems to get tricky when trying to get the right column and area under the right panel to work with all resolutions.

      FWIW I’m personally running at 1280 x 1024 until my new Dell 30″ shows up but it has always bugged me how Twitter doesn’t automatically scale a background to display properly at any resolution especially for those corporate layouts or teams like mine trying to get exposure for our sponsors.

      Anyway I’d be interested to see how our new (basic) layout looks at 1600 x 1200 if anyone wants to test it for me feel free at twitter.com/WalkerMSport

      Cheers

  13. @WDS Editorial I have to disagree with assuming 1024×768 should be the best size for everyone. One suggestion would be to look at your analytics and find out what most of the visitors to your main site are using. Different sites with different topics can have a wide variety users. If your tweets have a topic related to tech, you’ll find a good portion of those users have higher resolution settings. If your tweets are directed, read and visited by elderly, you’ll find a much lower resolution setting.
    While 1024 is a good middle ground, it’s a good idea to study your visitors before designing your new background.

    • Thanks for your comment Steve, things like making a complete analysis to your tweets and followers are part of many articles around, the main goal of this article is to make a short introduction to the new Twitter features and provide a background layout to every Twitter fanatic that does not know how to customize it, the 1024×768 is a resolution that will work in most cases and well, if you have more tech-related followers, there you have the larger layouts ;)…

    • Point taken… and it is a great article explaining all the new features :-)

  14. well as twitter user this is very useful…thanks a lot for sharing :D

  15. So helpful. Thank you kindly!

  16. more challenging for the twitter background designers to fit twitter business background since the number of users using 1600 x 1200 or higher browser resolution is less than 5% whereas the typical 1024 resolution gives only about 40px space to design.

  17. Thanks so much for these awesome design guidelines. I was stressing the new changes & I could not find the dimensions anywhere on twitter. I went with the 1280 X 1024. Looks great on my screen-hope not too wacked out on others.
    http://twitter.com/#!/familyfoodchat
    http://twitter.com/#!/marlameridith

  18. Thanks for doing the legwork on this issue. Like many others, I was not happy with the launch of the new Twitter when I saw that it obliterated our company’s background. But with your outstanding help the new design just got a whole lot easier. Thank you!!

    • Hello Addy, we knew that this whole New Twitter thing will generate a lot of controversy and that’s why we decided to work things out and provide our visitors a thoughtful article that can help them to understand all the features that are coming with this new era of Twitter. Anyway, thanks a lot for your comment, we really appreciate it…

  19. great article. Twitter really hit it out of the ballpark with the new design layout. love the new look , so user friendly in my opinion.

  20. This new design of twitter is not good for customization on small monitors … However this tutorial and free psd is totally awesome :) thanks

  21. nice design…more power to those web developer..keep it up…thanks for sharing..

  22. nice psd, thanks for sharing!

  23. I am so glad that I found you this year !! I love your new design that you did here. Love the bule and browns !! :) Happy New Year !

  24. Thanks for the psd layouts! I was trying to do it myself by hand, but it was driving me nutters! Now I can do something creative. Thanks again!

    • No problem Kale, hope you can handle it well, send us your Twitter link once you’re done :)…

  25. Thnak you so much for he great article. I love twitter and was pretty frustrated with the new background changes. The templates are great!

    • You’re welcome buddy, leave us a link to your Twitter profile once you have set your new background :D…

  26. Thanks alot for sharing! very helpful

  27. A new Twitter background that matches the #NewTwitter specs is now on my agenda. This post is so dang thorough that I have no questions, and thus no excuses, left. Gracias!

    Peace,
    Lauren Lionheart

    • Thank you Lauren!!!, we were super thrilled after reading your message, you’re always welcome back…

    • WebDesignShock
      April 13th

      You’re welcome Lauren, thanks for such a nice message…

  28. awesome post, helped me a lot in designning.

    • Anonymous
      May 7th

      Awesome, don’t miss our future posts :)

  29. Thanks for this very informative tutorial. Just Downloaded the layout, will customize it to my needs.

    Regards

    • WebDesignShock
      June 8th

      Oh that’s great, let us know once you have on your Twitter account :)…

  30. WoW! nice technique.. I am gonna try something like this. Thanks for sharing

  31. Helen Chris
    August 12th

    Twitter is one of the most popular social networking sites today and it can be a help now…

  32. Holly
    August 23rd

    You’re a social media geek. No, you’re a twitter geek to be exact. Nice presentation you have there.

  33. Beverly
    August 30th

    Thanks for the layouts on PSD. It is very helpful in so many ways. I’m not good at it, really. But with these guidelines, I think I am very well guided.

    • thank you Beverly, we’re glad you learned something. Feel free to share your progress with all of us!

  34. jasmine
    August 31st

    i have heard about the greatness of twitter, however i really haven’t tried making an account on it.. am i lame for not having a tweeter? :P i think that a lot of people really enjoy tweeter and i might consider having my own tweeter when i have my free time

  35. saoxu5
    September 7th

    WoW! nice technique.. I am gonna try something like this. Thanks for sharing…

  36. high56
    September 8th

    That could be nice to all twitter users..

  37. jetteryH
    September 11th

    I was checking my twitter from time to time and I just love the new twitter design. Really like it.

  38. Easy to understand and implement. Thank you!

  39. Nayumigrante
    September 20th

    This is so beneficial.. Thanks for the post!

  40. Thanks for this information especially for templates. I was looking for something like this to change my twitter background.

  41. This is really useful, thanks for sharing. Hope we can hear more from you.

  42. hunterX0506
    November 3rd

    I was checking my twitter from time to time and I just love the new twitter design. Really like it. | :P

  43. Marcella
    November 28th

    argh i really need to update my twitter now.  i want to see the new layouts.

  44. Thanks a bunch for sharing this with all of us you actually recognise what you are talking about! Bookmarked. Kindly also talk over with my website =). We could have a link alternate arrangement between us

  45. Now this kind of particulars are very well worth looking for, straight answers for site visitors together with something to suit your needs as will definitely show the conventional in the author.

  46. I wished to understand much about particular subjects, yet not many web pages will assist me in updating me the way that I estimated. This left me with many question, however , right after reviewing your short article, I really bought a great answer to all my inquiries. You are too cool dude!!!

  47. Brilliant idea! Glad that someone will share such a educational article like this. These will be a great help to have a better skill to develop my job well.

  48. Great way of thinking,good stuff, Currently there are many folks looking about the same topic.,at this point they will choose enough resources by your post.We are anticipating for additional facts concerning this.

    • Sure thing, be on the lookout we’ll surely come up with some fresh and exiting information on this topic. Best regards! Don’t forget to follow us on Facebook and Twitter

  49. Thanks for publishing this resource on your website.

  50. The only thing I know was to change my wall on my twitter account. I got the tan background with birds. I’ve got to try other features too. Thanks for this detaile4d information

  51. Ed.
    May 8th

    I’d just wish that design companies would get their butts on Twitter. Not just any graphics design company, but offshoot ones.

    • Most of them are :) in this era, its not affordable to go out there without a twitter account. Thank you for the input

  52. [...] N&#1077w Twitter design guidelines &#1072nd free PSD layouts f&#959r standard resolutions « We… [...]

  53. [...] the past few weeks, Twitter has been rolling out what they’re calling New Twitter. This major design change has brought a new layout and new features, all while maintaining that same old-fashioned narcissism [...]

  54. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  55. [...] N&#1077w Twitter design guidelines &#1072nd free PSD layouts f&#959r standard resolutions « We… [...]

  56. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  57. [...] A free PSD template to enable you to create a new custom background can be downloaded from webdesignshock.com [...]

  58. [...] was the first to release the exact information I was looking for in their blog post titled, “New Twitter design guidelines and free PSD layouts for standard resolutions“. Not only did they include detailed information about what changes had been made to the [...]

  59. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  60. [...] de nieuwe Twitter website heeft en zijn zelfgemaakte achtergrond de mist in zag gaan; hier is een pagina met (wederom) uitleg van wat de Nieuwe Twitter inhoud, maar tevens uitleg hoe je een nieuwe [...]

  61. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog – W… [...]

  62. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  63. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  64. [...] New Twitter design guidelines and free PSD layouts for standard … [...]

  65. [...] New Twitter design guidelines and free PSD layouts for standard … [...]

  66. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  67. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  68. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  69. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  70. [...] Twitter Posted at 2:05 pm / tagged: design, new twitter, twitter / add comment »Designers are doing their best to adapt to New Twitter, but I still think trying to pin down a background image that would be hidden on many small-screen [...]

  71. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  72. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  73. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  74. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  75. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  76. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  77. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  78. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  79. [...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]

  80. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  81. [...] 1 | 2 | 3 Related Posts :The New Droid Pro – AKA, "Droid Berry" [...]

  82. [...] New Twitter design guidelines and free PSD layouts for standard … Share and Enjoy: [...]

  83. [...] N&#1077w Twitter design guidelines &#1072n&#1281 free PSD layouts f&#959r standard resolutions &laqu… [...]

  84. [...] New Twitter design guidelines and free PSD layouts [...]

  85. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  86. [...] New Twitter design guidelines and free PSD layouts for standard … [...]

  87. [...] 新しいTwitterデザインとYouTubeチャネルのための背景をカスタマイズする方法についての、次の投稿に目を通してください。 [...]

  88. http://www.inspectagadgets.com says:

    **YOUTUBE VIDEO REVIEWS ON THE HOTTEST ELECTRONICS OUT**…

    GET THE EXCLUSIVE REVIEW’S ON THE HOTTEST ELECTRONICS OUT IN THE MARKET RIGHT NOW!…

  89. [...] Hopefully that means less crashed whales for us. (You can find more information on the new Twitter, on our past article New Twitter design guidelines) [...]

  90. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  91. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  92. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  93. [...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]

  94. [...] can be found elsewhere.Take a look at the following posts on how to customize backgrounds for the new Twitter design and YouTube channels.Element #8: Your Privacy SettingsSo after you have all of your profile filled [...]

  95. [...] Hopefully that means less crashed whales for us. (You can find more information on the new Twitter, on our past article New Twitter design guidelines) [...]

  96. [...] more: New twitter design and free PSD layout This entry was posted in Free PSD, Twitter and tagged around-the-new, background-layouts, [...]

  97. [...] you could jump right into Photoshop and start designing your background, but I recommend visiting WebDesignShock and downloading the background templates they have available. The download button is halfway down [...]

  98. New Twitter design and PSD for standard resolutions http://t.co/YFeh32L6 #design #socialmedia

  99. New Twitter design and PSD for standard resolutions http://t.co/CJL39Zmo #design #useful

  100. New Twitter design and PSD for standard resolutions http://t.co/7N6nKre5 via @webdesignshock

  101. New Twitter design and PSD for standard resolutions http://t.co/o0CwgB7O via @webdesignshock

  102. [...] Shared New twitter design and free PSD layout. [...]

Leave a Reply

Comments

*