Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. We decided to take a page from our iPhone GUI PSD and create one for the iPad.
The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768 x 1024 so anything you design in the Photoshop file can easily be brought over to the SDK.
It’s 1.0 so I’m sure we’ll notice missing elements as we begin to use it. We’ll perodically update it to include new elements as we notice them or as they become available through any SDK updates.
If you like it or use it, help us out by retweeting it.
UPDATED: A new version of this file available here
License: This file may ONLY be used for mocking up iPhone apps. No, it can’t be used in a theme to sell or go in ads for your new app or use it to build your Web site. It is a tool for designers, that is it.
You can follow Geoff and Teehan+Lax on Twitter
(Thanks to Finn O’Hara for the photo)
written by Geoff Teehan
Thanks gents.
Cool!
If you did it in vectors does that mean there is an Illustrator version?
Thanks!! Would love to see this as a Fireworks PNG, too. ;-)
AWESOME!!
Oh thanks a bunch for this. Will come in handy for sure!
Thank you!
Thank you so much for releasing this. Very useful and much needed for iPad/iPhone App Designers.
Cheers!
Well done, thanks for this great resource!
Wow, you guys are quick! This is exactly what I’ve been waiting for. Thanks!
Why is the active state on the tab bar plain white?
Thanks for releasing this but why is the active state on the tab bar just white?
Great stuff. Thanks.
Fantastic !!! Thanks
The first thing I did was pretend to use the keyboard. I for one am tired of thumb typing! Thanks for the file.
This looks awesome, thanks! I’ve used the iPhone one extensively, and it has been amazingly useful, so I look forward to this doing the same!
Thanks guys! You rock!
It’s great thanks!
Fantastic! Thank you
awesome, thanks!
Heed this advice when using this: http://mrgan.tumblr.com/post/365509182/teehan-laxs-ipad-gui-psd
It’s utter trash.
good job, keep with the updates.. ! thanks.
Amazing, thanks!
Though, the “Slide to unlock” bar miss a little button on the right (I guess a “start-slide-show” button or something like that). You can see it at the beginning of the video on Apple website.
Cheers!
@ Richard Earney: Sorry, the vector elements were created in illustrator and imported in as smart objects in Photoshop. There is no Illustrator version.
@ Sebastiaan: Our mistake, it shouldn’t be white. We’ll change it to blue in the next version along with a few other clean ups.
@Mustafa: Thanks for pointing that post out, we had no idea the iphone one had similar deficiencies as this one. We’d happily clean it up but need a little more detail as to what needs fixing.
@Bruno: Good catch, it’s on the list for the next update.
Thank you very much! Very nice job ;-)
you’ve becomed a classic. thanks for sharing.
Funny, the clock STILL says 4:20!
This is great guys! I have a question: do you know where can I find a similar PSD for the BlackBerry Bold? You would save my day!
Awesome, thank you.
link just downloads:
ipad-gui-psd.html
thnx
what time is it?
You guys rock!!
I like that there is a notorious blue lego included.
Thank you very much! Very nice job ;-)
Whowww.., your up to date. Thanks a bunch!
nice work … well done! thx
great!! thanks!
Can’t wait for the day where I can edit by the touch of a hand and not the mouse pointer
Very cool set!
May use it on some mobile projects that we are having…
thanks a lot.
Does anyone else have the urge to toke up after seeing the screenshot?
Thank you soooooooo much!!!! You are awesome!!!!
Wow that was quick good stuff!
Thank you very much! Great!
Thanks!
Yes, it’s time to get started with the design and coding. ;)
Perfect and highly appreciated! I’m always using your iPhone PSD as well…
Keep it up! ;)
/Anders
The download Link doesn’t work… :(
After opening tons of Error mennages to be clicked away… hmmm everything with your file allright?
Neat, are landscape views gonna be available in a future release?
Thanks a lot !! :) Awesome !!
It’s like you read my mind! This will see immediate use in my porting of my latest app, TapnScrap – http://tapnscrap.com
Amazing work.
That will be very useful.
Merci!
Nice, thanks for sharing…
It will be interesting to see how these UI design elements will pop up in unexpected places, outside of the iPad.
The UI of the ipad is not that revolutionary.
You’re fast!!!
Does anyone know if it’s possible to get this to open properly in GIMP? I can open it, but the buttons don’t display correctly?
10X. You’re Gods
This is awesome!
If they make a stylus for the ipad im SO getting one!! Ive always wanted a cintiq but they are hella expensive!
Thank you! Great work, as always.
Cheers!
Thanks for your new amazing contribution for the designers community. Great job!
Merci! Amazing work.
Awesome!!!
Thank you so much!
Thats good. .so awesome
Just wanted to express my thanks too. keep these GUIs coming guys :)
Andy
Great. Thank you.
Jeff Spicoli quote made my morning… OH, and thanks for the building these GUI psd’s, they make my job much easier. THANK YOU!!!!
Awesome work! thanks!
I’m ready to use :)
Thanks for this! Well I still don’t know where I am going to use it but I retweet it :)
Link to download does not work. it redirects back to this page
Teşekkürler…
Thanks! Cool
Hopefully these will mostly be used to make fun of this iTurd. ‘Shop on!
wow! very nice :)
Thanxx so much from the guys who are about to bring your genome data onto the iPad this summer. Cheers.
coolio! thanx
would it be possible to get the shadowing for a landscape view?
Wow, thanks. Can’t wait to start designing for iPad…
Thank you for sharing. You just read our mind since we are planning to develop some apps in iPad. This is very handy! Keep up the fabulous work, guys!
Hi, this stuff is cool but I can not download at all. When I click the link or save the linked file it downloads only a couple of KBytes. iPhone’s GUI PSD file also the same. How can I download it? Is link is broken?
Such awesome work, you guys are amazing!
Thanks for sharing ; )
wow awesome!
thx… great work
Thank you! This is great :D
Thanks a lot! This is awesome. I’m quite new to Ps and I learned so much just by taking a look at how you’ve done this GUI.
You guys! Thanks.
Incredible detail. Thank you for this.
You are great Men !! :)
Fantastic.. good for those planing to create their own apps. :-)
Thank you so much! Awsome~
This is really fine stuff. I hope the iPad will be availible in Germany soon!
This is good. Your efforts and generous attitude are an embodiment of the true spirit of the Web. An abundance mentality, rather than scarcity.
Thank you. I’m writing a book and your images help a lot. If it goes to publication, I will certainly record an attribution to you and your Website.
that’s really a fantastic post ! added to my favourite blogs list.. I have been reading your blog last couple of weeks and enjoy every bit. Thanks.
Great work, thank you very much!
Let me just say, I think you are the dopeness. Thank you so very much!
I used your iPhone GUI, so I’m ecstatic that you took the time to do the iPad.
Rock on my Creative gods. Rock on. ;*
you are awesome….
goodworks
thanks a lot.
GREAT!
You even thought of the ‘unsupported flash Lego-block’!!
Seriously. You guys have saved me hours with these GUI psd’s. Can’t thank you enough.
Gracias! Very helpful. Would have paid 20-40 dollars for this.
Great!
And you can use it in combination with this.
Awesome! Thanks!!!
Amazing, this completes my ipad prototyping tools, thanks you soo much!
My blog has some tutorials and a drawings pdf to make a model ipad for paper-prototyping. (you tube: ipad model)
With the GUI template I can finally make a few screens look good, and pre-load the model to get some realistic feedback
cheers!
Any chance someone has the iPad’s video play icon as a png file?
Thanks much! Great work here.
Thanks !!! Awesome!
Thanks !! Very very thanks
Awesome work! Used it on my wallpapers page.
http://bennihahn.com/wallpapers.html
Used on this Article : http://collegeparenting.com/all-about-the-ipad.html
… ohh man, cannot wait to get an iPad of my own! :) But seriously, thank you guys at teehanlax for this download!
You guys are awesome.
I’m just a kid so don’t lose it on me.
I down load file an open it is photoshop but it is just a flat image. How do I release the layers?
Thanks Dude !! Great Work and Awesome Sharing !!
Thanks as always. Your team really puts out some great template tools.
Do you also have customers asking for work to be done on a BlackBerry? I see iPhone, iPad and Palm Pre templates … it would be great if there was a template for BlackBerry devices as people (myself included) do get requests for BB design work and it would be great if there was such a template.
again. thanks for the template.
This is an excellent template to use and I will be posting some ideas on how to use this on my website this weekend. The gameboy advanced or PSP would be something great to find because I could think of some ways to use this PSD. This is what inspires people to look for new creative ideas on sites like these. Keep up the great work!
This is awesome! Just what I was looking for. Thanks!
Download The iPad GUI PSD Here (24MB) Link is not working
Hi, i work as a UI design this has helped me show clients the finished product. THANKS.
Neat! Thanks.
Thanks so much. Mad respect.
James
Elemental Interactive
Download The iPad GUI PSD Link is not working
The iPad UI PSD download link is no longer working. Do you have a working link or perhaps a 3rd party file sharing service that has the file for download?
Thanks so much for this guys! Huge help is design work for iPad! ;)
Works for me… just tried it.
Those who are having problems, can you open the following link in a new window and attempt the download again?
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
As Jon said… it should be working (and is when we test it). Let us know if you’re still having problems
Nice Job guys!! Found one thing it is missing. On the iPad, if you open up the music app, you’ll see the bottom button bar “Songs Artists Albums Genres Composers” It is a light gray gradient bar, with a dark gray button for whichever view is selected.
the time in the status bar should be 9:41am:
http://www.tuaw.com/2010/04/12/9-41-9-42-the-secret-of-apples-reoccurring-numbers/#continued
;)
J
I guess they call it the Segmented Control per the iPad Human Interface guidlines, i.e. pg. 21, 48
where are the pressed states for the buttons
Nice template!. Am just confused about the resolution. The file is set to 72 ppi, but shouldn’t it be 132 ppi? That would change all parameters.
great work, thanks!
EXCELLENT! Thanks!
I opened this in Fireworks and saved it as a PNG. All elements remained editable. This is very cool.
I think http://finnohara.com stole the favicon from http://feltron.com ?
Here is a collection of 6 Photoshop Actions for product designers and UI/UX developers. You feed these Actions your iPad screenshot and it will spit out a glossy hi-res product shot of your app on the iPad. Six angles to choose from, over 36 combinations. Perfect for printing or posting to your website.
http://www.36pix.com/jesuspad-actions-for-photoshop/
Thanks! will be a great time saver!
Thanks this rocks!
good people make good things.
A great, GREAT time saver! thanks!
I second IA’s comment above …
Shouldn’t this file be at 132 ppi instead of 72 ppi?
Changing the ppi is a 5 second change in Photoshop but it’s a meaningless exercise since you still have a fixed number of pixels to work with.
It’s a brilliant file but I seem to be having importing compatability issues in Adobe 7?
yeah would love a true vector file (.ai or .eps)
hard to use this for print since i’m limited to about 5″ at 300ppi
Nevermind, found one here: http://kaishinlab.com/free-vector-ipad/
This is amazing! You guys rock.
Amazing!! It will save a lot of time.
What a template! Great job and thanks!
what’s the license on this?
many thanks!!!!
Amazing……………
Thanks…..
great template
Score! Thanks!!
this is amazin
thank you
I Love you both of you!!!!
Thanks for Nice Stuff!
Grüße
wow, coooooooolllllllllllllllllllll
thank you :)
This post is featured on 40 iPad tools, tips for designer
Thanks again
Thank you very much for your work!
Good work! Useful file! :D
This will be very helpful in both my website and of course apple development, thanks very much :) top notch
Fantastic thanks
I need a font- helveticanue black. Pls send me :)
Wow, astonishing. Under which license do you offer the file?
Thank you so much! This is great! :)
Ohhhh Yes!!
Are there any costs associated with using this file?
Or license fee?
I saw this statement but want to make sure it’s OK.
“If you like it or use it, help us out by retweeting it.”
Great resource !
@Marcel Thanks for the link !
You are a life saver, We just received this project where we needed to create an application for ipad, and you posted the much necessary source file. Thank you for the effort.
Greenolivz Team (www.greenolivz.com)
awesome, thanks!
GREAT WORK–Thanks for posting!
–Kevin
why are you so good to us? thanks! :D
Could we use this as a template to make an App for our Magazine? Is there such a thing as a template app for a magazine? Designing our own from scratch sounds like a very difficult thing to do? Cheers Alex
so good!!!!!!!!
thanks a LOT for this, you just saved me SO much time!
I would love to see the vector version released.
Also high five for 4:20. Heh.
Thanks this is very useful. Great job !
Brilliant, thanks for posting this – a great help. :)
This is great guys. Could you join our Facebook Group for designers and developers creating content for the iPad? We’d love your input! http://ow.ly/28Y9w
Cheers again dudes, nice work.
I am getting errors (eg: Unknown data has been encountered reading layer “wifi icon” and will be discarded) opening the PSD in Photoshop CS2 9.0 on a WIN-XP machine. Do I need a newer version of PhotoShop?
Thanks for your help.
This was more than useful and I’ve had no problems with the latest version, CS4.
Perfect! Just what I was looking for.
Many thanks
Lewis
These are awesome, Thanks =]
Awesome! So much better than the Apple design interface. Can’t wait to try this out. Thanks again guys!
Nice that we will be able to customize the PSD. What a great looking GUI. Sweet!!!
Thanks a lot for this guys, its brilliant!
Great Stuff!
Thanks a lot………
This is great . Your GUI gave me the inspiration.
http://graphicriver.net/collections/509469-tablet-phone-user-interface-professional-collection?ref=diegomonzon
thanks
Diego
I’ve been looking for this! While we are still doing a lot of iPhone apps, I’m starting to have more and more clients who are asking about iPad app creation. We’ve been using Apple’s interface, but that may change now… thanks!
Great Addition you an already awesome collection. Any clue as to the new version? I’ve already started to add to this version.
Thanks for the great GUI. It really helps to work with the iPad. Nice to get it as a .psd-File, too!
good information, Thanks for the blog,.
Thanks so much!! I ‘m designing my very first ipad app an this wil be a fantastic resource.
was wondering what is more efficient AND Flexible to design with..
a PSD Template or Ilustrator Template?
and what are the advantages of 1 over the other.
personally i find myself more agile in illustrator when it comes to the objects..
anyone have a clear solution?
thanks
Thanks man, this is awesome just what I was looking for! ;)
Thanks Man!! Its Great!!, Brilliant Info!
freebiejeebies
This was more than useful and I’ve had no problems with the latest version, CS4.
Thanks much! I am actually in the process of designing my first app, would usually hire it out but now I want to learn…
Awesome! Thanks!
This is awesome – can’t wait to get it going right now! Will also comment if i decide to add anything that i think is worth sharing!
Danny – www.iPad Case Review.org
You guys are great for sharing! Thanks!
Any particular significance of the time 4:20?
That’s amazing stuff, thanks for the good work!
Wow, still getting comments after several months! It’s agreat design. I just got PS3 so i’m definitely going to make good use of it, thanks so much for the PSD.
Looking good, that’s excellent work thank you.
thanks for the download link!
that’s amazing stuff, tanks
thanks for the download link
thank you :)
Would you please make it in Horizontal instead of Vertical? Thanks so much for your wonderful work.
I like what time it is ;)
Love the Fast Times at Ridgemont High reference. :)
You guys do fantastic work and I would definitely welcome a collaborative effort someday.
thank you, its really cool. Keep good work up
Thank you!!!
I
L
O
V
E
Y
O
U
thanks look forward to using it
Amazing stuff for iPad Design…
Thanks :)
What a great guide, will be using this in the future.
just wanted to appreciate the time on the screen.
Hi. I wanted to thank you for the wonderful details you have posted on your web page. I will definitelycome back to check it out once again and have subscribedto your RSS feed. Have an excellent day.
I love it! thank you fellas.
U guys Rock … Thnx So MUCH =)
Great thanks!!! – you folks are my fav.. love your works
Thank you so much! I am trying to lay out an app with your elements and it looks fantastic :)
What an awesome resource! Thank you so much, and keep up the great work!
Thanks man. Great resource, I use illustrator to layout stuff but this is cool
Web Design Springfield MO
Thanks much! I am actually in the process of designing my first app :)
Thanks for your share ! It ‘s very usefull for me :)
Thank you!! Would luv to attend this as a Fireworks PNG, as well.
Thanks. This is a great resource. Not a huge deal but just so you know your screen height is off by a pixel again not a big deal and i apologize for being technical just thought you would like to know.
thanks for this!! I have used this several times now for a few projects… just wondered if you were also thinking of including the latest safari browser (with icons etc) as I haven’t come across one yet.
cheers : )
Thanks! Appreciate you sharing!
Very useful and much needed for iPad/iPhone App Designers. Many Thanks!
The link doesn’t work anymore….
Can’t have anything more useful! thanks so much for the effort! ;)
Sweet! Thanks for the PSD source file!
Looking Nice! Am just confused about the resolution. The file is set to 72 ppi, but shouldn’t it be 132 ppi? That would change all parameters.
Excellent work. I love the design and layers. Keep up the good design work.
Thank you very much, guys!
I really appreciate your work. Thanks for the download link. Hope it helps for designers.
This will help me tremendously with the projects I’m starting. Thanks for sharing!
Cool, thank you for the source files with the layers :)
This is very useful, thank you for sharing.
You have saved us tonnes of work!… BIG THANKS!!!
This is beautiful. Can it be used commercially?
Thanks you very much guyss
I think you should specify that this template is NOT HD size.. if your app needs to look crisp when zoomed in you in fact need a larger size template. you need to bump the image resolution in photoshop image size window to 132 ppi
This is very useful, thank you for sharing.
Wahouu ! Impossible to download it with Firefox ! :O
Great Job ! thank you for sharing.
hah, 4:20 ;D
thanks for sharing, photoshop does help this i agree with lelo. regards
Absolutely beautiful, This will be a great addition to the resources i use when prototyping thanks a bunch
lovely, i prefer hd size, great pics thnaks for sharing
Great… thanks for the tips.
Nice one for writing this post. Really helpfull.
Thanks much! I am actually in the process of designing my first app, would usually hire it out but now I want to learn…
I am actually in the process of designing a new banner for my website and your ressource is perfect. Thanx
Thanks for the design of the template. I am actually processing a new banner for website, and i hope this will help.
Thanks a lot for sharing.
Why is the resolution at 72 DPI? As stated and not addressed it screws up everything. Bump it up to say 132dpi and the main content area is no longer 768×1024? I love what you guys have done but could you please put the files out in the correct resolution for the device?
Tony,
This comes up an awful lot.
The PPI can be anything you want. PPI is device dependant. All that matters is that the pixel dimensions are correct (which it is in its current state). Changing the PPI does nothing to the resolution unless you link it to the resolution. Doing so changes the pixel dimensions and makes the file useless.
Again, dimensions are what matters. The density of those pixels doesn’t effect the total number of pixels. Leave it as is or change it – it doesn’t really matter so long as the physical dimensions (768×1024 in this case) stays the same. For example: You can make it 1,000,000 PPI and the dimensions will still be 768×1024. What ever device you display it on will dictate the PPI (not the PSD file).
Hope that helps.
Thanks for this great resource! the ipad version of our site is developing!!
thanks so much for the incredible work on iPad1.
did you or will you work on iPad2 please?
thx!
Thanks for sharing this. Great guidelines for people looking to create their own apps. Keep up the work!
Is it also available in a blackberry design? Anywayz, keep up the good work!
Hey Guys,
Your GUI template has become extremely handy for sketching ideas. In your earlier PSD you seemed to have a different home screen with a picture of you dudes plus the time and date and the unlock slider at the bottom. I can’t find this old psd anywhere to make use of the slider and the time thing. Can you please please please send me or repost that somewhere on your site, or better reintegrate it in your updated version?
Many thanks,
Denis
really good.. Thanks
Thanks for sharing this tool!
Thank you so much, it´s very useful!
My brother is a app designer, he will love this ;) I dont know so much about it but it looks cool..!
This is great but will there be other versions as well?
Nice Stuff. Many Thanks from Germany.
Thanks to folks like you – I save so much time. I owe you one. This is perfect.
Thank you very very much!!!
It looks great
Thank you, Thank you and Thank you =)
You guys are a life saver…
I’m amazed that you jumped on the Apple Ipad Apps so quickly, people are still struggling to create Apps specifically for the IPad, i hate having to use IPhone Apps and zoom in, its not what i want from an App and i usually delete it instantly, with what your doing, its not going to be the case!
Thanks
Can’t thank you enough for this file. Coming across great quality PSD sources like this is a real life-saver.
Thanks for the design and I`m really looking out for a new creative concept where it helped me a lot in achieving. it´s very useful!
The screenshot for your original app shows buttons, and a bunch of other elements that aren’t in the new version.
Where is the first version available? This page comes up in basically every result for “ipad ui PSD” in google, so it seems no one else has bothered to make one.
Any chance of getting the original version up too?
thank you very much for this awesome staff. it’s so helpfull and i needed this so much.
Thank you so much for making this available! The work is excellent!
thanks!
this is great, how can I download version 1 not version 2 (as it seems to have some icons not on version 2)??
thanks
Thanks, this is Fantastic !!!
Ça a l’air sympa. Mais la résolution m’étonne. Est ce une erreur ou un simple oubli ? Si quelqu’un peut m’éclairer.
This is fantastic!
Where do I get the fonts Neue Helvetica? The set I have from LinoType does not seem to match.
still in awe!!! what an amazing product
SO Cool!!!!!!!!!!!!!!!!!!!!!
Thanks for the helpful post.
Thanks for sharing! This is really handy stuff!
Thank you very much for all
Thanks a lot for sharing this with all ..!
:)
Thumbs up all the way
Thanks for saving me time when developing my apps. My clients love seeing their projects before we move into the development project.
You guys are simply awesome! Thanks for making my life easier. I’ve used your templates for tons of mockups…I keep picturing your karate suit picture! Hilarious!
4:20. lol. nice xD
Wow so amazing nice design it looks so impressive ….
great!