(close intro)
bypeople
    A growing repository with 646 lists & 8526 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
close ✖
bypeople

New Twitter design and PSD for standard resolutions

144
Created by BusinessDev on Oct 28 2014

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.

visible Our Curators Become curator

Top

This a test message in global notification
Your download will start shortly.
bypeople
bypeople

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

bypeople