Freebie: New Twitter Profile Page GUI PSD

Advertisement

Today we are glad to release a yet another freebie: a Twitter GUI PSD for the recently released Twitter UI update, designed by Jon Darke of Every Interaction1 and released exclusively for Smashing Magazine and its readers. The PSD provides the full mockup with all layers in vectors, allowing you to scale up the design elements without loss of quality. The set includes two versions: one for personal accounts and also the new Twitter Enhanced profile page with 835×90 header image for brands and advertisers. The set is compatible with Adobe Photoshop CS4+.

Twitter GUI Preview2

Download the Set for free!

You can use the freebie for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the file as you wish.

Features

  • 100% pixel-accurate
  • 2 versions: personal and enhanced profile pages
  • All assets redrawn in vector, hence scalable
  • All layers labeled and grouped
  • Adobe Photoshop CS4+ compatible

Behind the Design

“As designers, we often produce various assets for our clients, be it their online presence on their Web pages or in social media. Hence, often we need to skin pages such as the Twitter profile pages for brands that we are working on. When those sites update their UI, we also need to update our resources in order to be able to display an accurate representation of what a client’s Twitter page would look like. So we thought that we could share the PSD file we created with the rest of the design community. Hopefully, it will help you save some time to focus on the creative work!”

Thanks Jon, we sincerely appreciate your time and your intentions!

(vf) (il)

Footnotes

  1. 1 http://www.everyinteraction.com
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2011/12/Twitter-new-GUI.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/12/Twitter-new-GUI.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2011/12/Twitter-new-brand-GUI.png
  5. 5 http://provide.smashingmagazine.com/twitter-GUI-PSD.zip
  6. 6 http://www.everyinteraction.com/resources/twitter-GUI-PSD.zip
  7. 7 http://www.everyinteraction.com/blog

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    Wow! What an excellent resource, thank you very much for this! – And only a few weeks after Twitter announced this new GUI. – Very impressed.

    8
  2. 2

    Thanks for sharing. Like you said, when these things change, all of us have to grab screenshots and create layered files. This may save several hundred people from having to start from scratch. Thanks again for saving me time.

    1
  3. 3

    The personal profile and brand profile preview appear to be mixed up.

    3
    • 4

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      December 22, 2011 5:27 pm

      Thank you for the heads up, the links were indeed mixed up! Everything is correct now.

      3
  4. 5

    This is a nice starting point! Thanks! Happy holidays!

    0
  5. 6

    Are these available for other social networks like Facebook timeline and Google+?

    0
  6. 7

    Nicely done resource, though what is the purpose of these kind of things? Is it simply for mocking up backgrounds in order to see how they play out with the new design?

    1
    • 8

      We make these primarily to show as mock ups to clients so that they may see what their twitter page will look like before going live with the changes. Once we would get sign-off, we would save out the required assets and upload them to their twitter profile.

      3
    • 9

      In short, they say they’re going to “increase conversions on the client’s corner of twitterverse by improving transient likeability of the page through engaging visual stimuli aimed at synergizing the UX factor with the branding identity within a social media context.” Translation: they make a freaking background image, use this to show the client, and then upload it through Settings after the client pays them WAY too much.

      4
  7. 10

    And now we wait for Twitter to show me their latest version.

    1
  8. 11

    I’d love to see a tutorial somewhere about designing Twitter profiles using something like this as an example…

    5
  9. 12

    so… backgrounds with subtle noise patterns are in fashion now? Youtube new look, now Twitter?

    1
  10. 13

    I think that change is good, but some times radical changes can be a
    “shot on the foot”. I love the way that twitter interface works, it’s simple to use, and you can’t need to be a rocket cientist to use it.

    The change proposed on this interface looks a desperate measure to maintain the concurrency with facebook and google+.

    I think that twitter needs to change this gradually, avoiding force the user to re-learn how to use the interface.

    It’s just my personal opinion.

    0
  11. 14

    That is very impressive. Talk about a trend setter.

    0
  12. 15

    Hey Guys,

    thanx loads for the mockup, great work. But is it only to me, that twitter Profiles don’t (yet) look like that at all? Or hasn’t it maybe been rolled out to every country so far? My Profile and all the others still look the same here, like they did weeks ago.

    0
  13. 16

    It would be nice if this were released in Fireworks as well. :)

    0
  14. 17

    Always a handy resource for a quick win and it is all just a branding exercise, my concern is that with a service like twitter the frequency in which an actual page is hit is minimal.

    0
  15. 18

    Cheers for the mock-up file Jon. It will certainly save time with some client work in near future.

    0
  16. 19

    Thanks Jon, you just saved me hours making up a mock-up template! Brilliant

    0
  17. 20

    Perfect, Thank you!
    This is an optimum mock-up resource a project that could’ve taken me hours to tweak and modify.

    0

↑ Back to top