Weekly freebies in your inbox.
Freebies By Design Shock
Read More
Read More
Read More
Read More
Friends
Weekly freebies in your inbox
New Twitter design and PSD for standard resolutions
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock
September 28th
I absolutely love the new Twitter, thanks for this nice freebie, I will definitely use these grids when making my new background.
September 28th
Useful and detailed instructions for get the best of the new twitter interface.
Thanks guys!
September 28th
Hi Rodolfo, thanks for your comment, we really want to help people start loving the new Twitter like we do…
September 28th
Thanks for this post, very useful!
September 28th
Thank you Audrey, and happy birthday btw :)…
September 29th
Don’t forget the vertical 18-20px (2px in shadow) below the top bar.
September 29th
Oh yeah you’re right, those few pixels can make a relevant difference, thanks for your comment…
September 29th
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
September 29th
Nice things you’re pointing here, thanks for your comment Harold…
September 29th
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!
September 29th
Hi Ginger, we were so happy after reading your message, thanks for your support and feel free to come back anytime…
September 29th
Thanks for sharing this! Now I have a few more tricks up my bag!
September 29th
Awesome Amy, we hope you take advantage of them…
September 29th
thanks for sharing…
September 29th
Thanks for your comment Christian V…
September 29th
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.
September 29th
Hello Linda, we’re glad that you found our article useful, you can comeback anytime ;)…
September 30th
Appreciate you doing the research and measuring and, of course, providing the PSDs.
Thanks.
September 30th
Thanks for your comment Kristof, we were happy to make the PSD’s so they can be useful to all of our community :)…
September 30th
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?
September 30th
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…
September 30th
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
September 30th
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 :)…
September 30th
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
September 30th
@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.
September 30th
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 ;)…
September 30th
Point taken… and it is a great article explaining all the new features :-)
October 3rd
well as twitter user this is very useful…thanks a lot for sharing :D
October 3rd
You’re welcome, enjoy it…
October 3rd
So helpful. Thank you kindly!
October 3rd
Glad you liked it Patricia, enjoy it…
October 7th
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.
October 7th
Yes Roshan you’re right, it’s time for us the designers to get really creative!!!…
October 9th
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
October 9th
I’m sure that it will look great on several resolutions, thanks for your comment Marla :)…
October 28th
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!!
October 28th
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…
November 4th
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.
December 2nd
This new design of twitter is not good for customization on small monitors … However this tutorial and free psd is totally awesome :) thanks
December 13th
nice design…more power to those web developer..keep it up…thanks for sharing..
December 13th
You’re welcome buddy, we hope you enjoy it :)…
January 4th
nice psd, thanks for sharing!
January 6th
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 !
January 8th
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!
January 8th
No problem Kale, hope you can handle it well, send us your Twitter link once you’re done :)…
January 29th
Thnak you so much for he great article. I love twitter and was pretty frustrated with the new background changes. The templates are great!
January 31st
You’re welcome buddy, leave us a link to your Twitter profile once you have set your new background :D…
February 14th
Thanks alot for sharing! very helpful
April 4th
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
April 5th
Thank you Lauren!!!, we were super thrilled after reading your message, you’re always welcome back…
April 13th
You’re welcome Lauren, thanks for such a nice message…
May 7th
awesome post, helped me a lot in designning.
May 7th
Awesome, don’t miss our future posts :)
June 8th
Thanks for this very informative tutorial. Just Downloaded the layout, will customize it to my needs.
Regards
June 8th
Oh that’s great, let us know once you have on your Twitter account :)…
July 17th
WoW! nice technique.. I am gonna try something like this. Thanks for sharing
August 12th
Twitter is one of the most popular social networking sites today and it can be a help now…
August 23rd
You’re a social media geek. No, you’re a twitter geek to be exact. Nice presentation you have there.
August 23rd
Hahaha, thanks for the compliment Holly…
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.
August 30th
thank you Beverly, we’re glad you learned something. Feel free to share your progress with all of us!
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
September 7th
WoW! nice technique.. I am gonna try something like this. Thanks for sharing…
September 7th
That’s great, please let us know as you as you have your new Twitter background…
September 8th
That could be nice to all twitter users..
September 11th
I was checking my twitter from time to time and I just love the new twitter design. Really like it.
September 18th
Easy to understand and implement. Thank you!
September 19th
Great you find it useful!
September 20th
This is so beneficial.. Thanks for the post!
September 20th
You’re welcome mate, remember to check daily for more amazing content!
October 15th
Thanks for this information especially for templates. I was looking for something like this to change my twitter background.
October 17th
This is really useful, thanks for sharing. Hope we can hear more from you.
October 27th
Hey Fara, glad you like it and find it useful!
November 3rd
I was checking my twitter from time to time and I just love the new twitter design. Really like it. | :P
November 28th
argh i really need to update my twitter now. i want to see the new layouts.
January 9th
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
January 10th
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.
January 15th
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!!!
January 16th
Always glad to see that our pieces are of great use to visitors’ projects. Best regards
March 6th
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.
March 7th
best regards! we also invite you to check out our resources for designers weekly editions such as Really Fresh Resources For Web Ninjas !, and the daily ones like Pure CSS3 Social Icons, Nice Tool To Clean Your Source Code and Free Log-In Form Using HTML5 And CSS3.
March 8th
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.
March 12th
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
March 8th
Thanks for publishing this resource on your website.
March 12th
We’re always looking to bring our followers with the latest in fresh resources for designers, why don’t you check our weekly editions Really Fresh Resources For Web Ninjas ! and Latest Resources For Designers!. have a good one!
November 12th
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
January 21st
You’re welcome :)
[...] Nеw Twitter design guidelines аnd free PSD layouts fοr standard resolutions « We… [...]
[...] 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 [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard … [...]
[...] Nеw Twitter design guidelines аnd free PSD layouts fοr standard resolutions « We… [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] A free PSD template to enable you to create a new custom background can be downloaded from webdesignshock.com [...]
[...] 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 [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog – W…webdesignshock.com [...]
[...] 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 [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog – W… [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard … [...]
[...] New Twitter design guidelines and free PSD layouts for standard … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] 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 [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions « Web Design Blog … [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] 1 | 2 | 3 Related Posts :The New Droid Pro – AKA, "Droid Berry" [...]
[...] New Twitter design guidelines and free PSD layouts for standard … Share and Enjoy: [...]
[...] Nеw Twitter design guidelines аnԁ free PSD layouts fοr standard resolutions &laqu… [...]
[...] New Twitter design guidelines and free PSD layouts [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard … [...]
[...] 新しいTwitterデザインとYouTubeチャネルのための背景をカスタマイズする方法についての、次の投稿に目を通してください。 [...]
**YOUTUBE VIDEO REVIEWS ON THE HOTTEST ELECTRONICS OUT**…
GET THE EXCLUSIVE REVIEW’S ON THE HOTTEST ELECTRONICS OUT IN THE MARKET RIGHT NOW!…
[...] 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) [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] New Twitter design guidelines and free PSD layouts for standard resolutions [...]
[...] 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 [...]
[...] 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) [...]
[...] more: New twitter design and free PSD layout This entry was posted in Free PSD, Twitter and tagged around-the-new, background-layouts, [...]
[...] 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 [...]
[...] http://www.webdesignshock.com/new-twitter-design-guidelines-and-free-psd-layouts/ [...]
New Twitter design and PSD for standard resolutions http://t.co/YFeh32L6 #design #socialmedia
New Twitter design and PSD for standard resolutions http://t.co/CJL39Zmo #design #useful
New Twitter design and PSD for standard resolutions http://t.co/7N6nKre5 via @webdesignshock
New Twitter design and PSD for standard resolutions http://t.co/o0CwgB7O via @webdesignshock
[...] Shared New twitter design and free PSD layout. [...]