Updated: Get the Retina version here

Now in its fourth iteration, this version of the template has been completely redesigned from the ground up. Based on iOS4, it includes all the elements you need to design proof-of-concepts or production ready assets. Previous versions of this file we’re riddled with issues like blurry edged buttons and incorrect “bevels”. These issues have been addressed as best they can using Photoshop’s shape layers and layer styles. If you’re modifying any of the vector elements be sure the shapes are sitting on full pixels or your assets will begin to look blurry.

It should be noted that this file is still formatted for 480×320 resolution. The Retina Display version of this file will be posted once we’re able to get our hands on a production unit. We’ll also be updating the iPad version of this file, since it too needs some TLC.

If you like it or use it, help us out by retweeting it.

Download The iPhone GUI PSD Here (7.9MB)

(Thanks to Finn O’Hara for the photo)

The updated platform uses a higher resolution screen (960×640 as compared to 480×320). This additional resolution also means that any graphic elements need to be designed twice. One set of images for the lower resolution and optional high resolution set for iPhone 4. iOS4 still considers itself 320×480, but introduces a scale factor you can check or provide upscaled graphic assets for it to automatically use. In other words, the iOS4 requires low resolution artwork and can scale it up, but you can’t expect to simply build out a high resolution version and have the OS scale it down.

We’re currently working on updating our iPhone GUI PSD to reflect the forthcoming iOS4 update. We’ll likely release 2 new PSDs. One for 480×320 and another for 960×640. We’re going to try and make everything as pixel perfect as we can while maintaining assets as shape elements for easy scaling. We’ll be sure to post an update when it’s done.

Now that we’ve had a few weeks to put the iPad through its paces, it’s moved from being a novel new gadget to something that I use every day. The number one question I get when people find out I have an iPad is – what do you actually use it for?

It’s difficult to describe to people why I’d choose an iPad over my MacBook Pro while around the house. The MacBook is easier to type on, it’s more powerful, and it comes with all the latest plug-ins/extensions to make for a pretty good experience, but it also weighs almost 10 pounds and the battery now lasts a measly couple hours on a good day.

After a few days, I found myself bringing the iPad all over the house. It’s so trivial just to pick it up and throw it on the couch, have it in front of you while you’re eating a meal, or watching a TV show or movie in bed.

So what am I actually using it for?

Reading

It’s been a few months since I started using Marco Arment’s Instapaper for iPhone. Since then, I’ve moved all my medium to long-form reading from my desktop to a mobile device. Simply put, reading while sitting at your desk sucks. I can never get comfortable, and it doesn’t lend itself well enough to a comfortable reading position.

Instapaper works by providing you with a simple ‘Read Later’ link you place in your browser’s bookmark bar. Whenever you come across something you’d rather not read, or a site so riddled with ads the content is hard to process, just click the link and off it goes to Instapaper. The next time you launch the app on your phone, you’re greeted with a highly readable, stripped back version of the articles you’ve saved.

It’s a glorious reading experience, not having to be distracted by navigation, advertisements, or other distractions, and the iPad makes it even better. The latest version received a spectacular visual refresh and now includes three of the new system fonts that are included on the iPhone: Hoefler, Baskerville and Palatino. I don’t have to say much more to those of you who are typography nerds, but to the rest of you: it looks damn good and I don’t think I’ll read any blog posts on my Mac again.

Gaming

Gaming on the iPad is still an evolving landscape. While Apple likes to heavily feature the driving games where you have to tilt the device to steer, what you’ll quickly realize is that this is a lousy way to control a game, and you’ll probably just end up with sore arms. Too many iPhone OS games seem to needlessly employ the accelerometer hoping that it will elevate the level of immersion a gamer experiences while playing, but more often than not it just acts as a frustrating barrier to being able to properly play the game.

The types of games that shine on the iPad are generally pretty casual, making use of clever gestural input with little-to-no instructions required. So far, the best of the bunch seem to be those that take advantage of the larger screen on the iPad to give the player a larger area to interact with, like Scrabble or Pinball.

Godfinger is one such game that really shines on the iPad. The mechanics of the game are nearly identical to Farmville, the Facebook-based farming game with a massive user-base. In Godfinger, you’re the All Powerful One, and you’re given a world to preside over with several followers. You can build up cash by having your followers farm for gold, but need to maintain their levels of happiness in doing so.

The graphics are beautiful, and it takes advantage of a few very simple gestures to interact with the world. The game will continue to run even after you’ve quit, and will send you push notifications if anything needs your attention. You can add other friends that are playing in-game and visit each others’ worlds to help out. You can also run it on the iPhone, playing with the same world you created on your iPad.

If it wasn’t already clear, I’ll warn you outright: this game is addictive. I’ve got countless friends and a some folks at T+L hooked on it, but it’s a great example of a simple game done right on this device.

Utilities

The iPad’s screen size gives designers the opportunity to develop some pretty information-dense applications. At over four times the pixel count as an iPhone, there’s a temptation to cram a lot more on the screen at a given time. However, just like the Web, the best experiences on the iPad seem to be from the apps that show restraint and care in their information design.

I get a lot of flack around the office for my purchase of the $0.99 Weather HD, the highly (and perhaps overly) visualized weather app, but it has become one of my most frequently used apps. Why? I could easily one of the many weather apps that provide the time for sunset, sundown, the atmospheric pressure, precipitation pattern and weather radar, but who really needs any of those things?

When I’m walking out the door in the morning, all I really care about is the day’s forecast, the temperature and maybe how windy it is. The designers of this app recognized that, and deliver this information in a beautiful, visually compelling way. It’s not for everyone, but I’d sooner buy an app that does something simple really well than one that tries to do everything and ends up delivering a mediocre experience.

What’s Next?

There’s still a lot of gaps in the iPad experience and a lack of high-quality, functional apps, but developers are surely working away as we speak on many of them. Most notably, Facebook is way late to the game in delivering an iPad-friendly application (usually being first to the plate on new devices). It’s going to be an exciting year for the iPad owners as many of these apps come to fruition, and just like the iPhone’s app ecosystem, it’s surely going to take some time to flourish.

Apple has just announced iAd, their new mobile advertising platform and needless to say, everyone here at Teehan+Lax is very very excited. Details are sparse at the moment, but Apple has described iAd as an intersection between Emotion + Interactivity… Which happens to be a fairly suitable description of Teehan+Lax as well.

Advertising on the iPhone was been atrocious at best, and it’s even worse on the iPad. Uninteresting, static and unemotional ads have littered the mobile experience, and Apple aims to change that with iAd. Ads served up will be HTML5 only (sorry, no Flash), but the platform appears to be incredibly flexible. Animation, video & rich interactions are all possible — this really gives new meaning to “microsite”.

The big selling feature for advertisers is having their experiences stay inside of the applications — consumers can dip into the ad to find out more, without leaving the application at all. My assumption is that iAds will take advantage of the newly announced multitasking features, which will essentially pause the app while you explore the ad.

They only demonstrated ads running on an iPhone, so I’m curious to see how they’ll be handled on an iPad… my assumption is that advertisers will need to develop platform-specific ads for trafficking. Regardless, judging from the ads that are currently being displayed within iPad apps, I think iAd’s will really shine here.

We’ll be discussing more as additional details become available. In the meantime, here’s what Apple has to say about it:

“Apple’s new mobile advertising platform, combines the emotion of TV ads with the interactivity of web ads. When users click on mobile ads they are almost always taken out of their app to a web browser, which loads the advertiser’s webpage. Users must then navigate back to their app, and it is often difficult or impossible to return to exactly where they left. iAd solves this problem by displaying full-screen video and interactive ad content without ever leaving the app, and letting users return to their app anytime they choose. iPhone OS 4 lets developers easily embed iAd opportunities within their apps, and the ads are dynamically and wirelessly delivered to the device. Apple will sell and serve the ads, and developers will receive 60 percent of iAd revenue.”

While Apple won’t be blessing Canada with the iPad until later this month, that hasn’t stopped some of us from crossing the border and heading directly to the nearest Apple Store. I didn’t take the road trip myself, however I was the beneficiary of one and over the past 2 days, I’ve been using my iPad quite frequently (in fact, most of this post was written using the Wordpress App).

Since its announcement and subsequent release, the general consensus appears to be a) the battery life / speed & industrial design is unparalleled, and b) the software is somewhat limiting. I’ll definitely echo these observations, however I’ve noticed much of the criticism has been focused on issues which will undoubtable be addressed in future OS updates. Everyone is busy looking at their feet, complaining about the immediate and obvious shortcomings, when they should be focused on where Apple is going with the iPad. Make no mistake about it, the iPad really is Apple’s reconception of personal computing, however they’ve only taken the first of many steps in that direction.

“It’s just a big iPod Touch”

When Apple first announced the iPad, an audible groan echoed across the Internet. It’s just a big iPod Touch appears to be the most common reaction upon seeing the iPad for the first time, and while there is definitely some validity to that observation, it’s not exactly true. Yes, the iPad looks and feels very similar to an iPod Touch, and yes they share the same operating system (which really makes them fraternal twins). However, the iPad currently sits uncomfortably between the iPod Touch and the MacBook; Born from a smartphone and wanting to be laptop replacement, but unable to reach its full stride. It wants to run—and starts to pickup pace— but then trips over it’s own feet.

Coming from an iPod Touch or iPhone, you’ll feel right at home. Sure, the screen is roughly 4x the size, but it looks and functions more or less the same. You’ve got the singular home button on the face, the same dock along the bottom, and the same lock screen (now with 4x the unused space!) . However, once you start using iPad-optimized Apps, it becomes clear that this is a different ballgame. The larger screen affords a completely unique experience, and the developer community is taking full advantage of this. It’s actually quite amazing how quickly the operating system disappears once you launch an App. The App fills the entire screen and you immediately feel like you’re holding an entirely different device. But then you try to delete something and a tiny blue dialog window appears, drowning in a sea of pixels. It feels odd and out of place, like a relic from a different era. There are all sorts of little details like this that reflect the iPads smaller-screen lineage.

You get the same feeling when you turn the iPad on for the first time, and you’re forced to tether with your computer and authorize via iTunes. Arguably, you shouldn’t have to do this with an iPhone/iPod either, but it feels even worse with the iPad. This isn’t a device that should require a separate computer. You should be able to give it your Apple ID and have everything automatically sync. Apps, email contacts, calendars… files. And this is where the iPad begins to move towards the MacBook and then stumbles. I want to save & edit files on the go, but there’s no meaningful way of managing them. While I believe Dropbox is vastly superior, Apple’s iDisk should really be the “exposed” filesystem on the iPad. It shouldn’t be an App like it is on the iPod, but a home directory that’s accessible by all Apps and sync’d across all your devices. But what happens if you’re sharing the iPad with other family members?

“The First Real Family Computer”

I’ve seen a number of people describe the iPad as the first real family computer, and I would agree that this is an apt description. My iPad will live in the kitchen and will be shared by my wife and I. However, when I started setting up my email and calendars and contacts, I realized that this wasn’t really going to work. We may want to share the device itself, however we don’t want to share applications. The iPad really needs unique user accounts, complete with independent setups. Of course, this adds a magnitude of complexity and I’m unsure if the platform can really support it. Fundamentally, the iPhone and iPod Touch were designed as single-user devices, but the iPad clearly has multi-user intentions. Being that the share the same OS underpinnings, I can see how the iPad could be weighed down by it’s resolution-deprived siblings.

I’m incredibly excited about how much potential the iPad has. I’m sure Apple will address the multitasking issues that plague it and the iPhone. I’m sure they’ll correct the odd interface holdovers its smaller siblings. And I’m hopeful they’ll introduce some sort of cloud-based solution for the file management issues. The only question is if Apple will allow for multiple users per iPad, or if they’re expecting 1 iPad per person. I have a feeling it’s the latter.

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×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.

Download The iPad GUI PSD Here (24MB)

(Thanks to Finn O’Hara for the photo)

Some background. We never had any intention of actually building it until Saurik, the creator of Cydia, gave us a call and told us he wanted to build it for us on a new platform he’d created called Cydget. Needless to say we got pretty excited about the fact the lock screen would soon be a reality. He figured it would only take a week or two to actually build. It wasn’t long after that we began to see some pretty serious set-backs. The first of which being that he got very ill and had to put the project aside until he recovered. Thankfully he’s okay but that set us back well over a month.

We eventually got word that he was still developing it but had to tweak the framework to which it was being built on. A few more weeks passed. It was on December 9 when we last officially heard on its status. He had everything working but SMS and weather but wasn’t quite ready to show us a package yet. Since then the only thing we’ve been able to find out is from his twitter account on December 24. It stated that he now had everything functioning except weather and that he was working on optimizing it. That takes us to today.

We aren’t holding back info or trying to mislead people. The simple fact is that everything is in Saurik’s hands and he is working on his own timetable. Saurik will let everyone, including us, know when it’s ready but at this point we have no idea when, or if, that will be.

How is it that in a time where everything is so connected and information is passed at such lightning speeds, people continue to steal, rip and defraud other members of the design community? As if somehow they’ll be able to get away with it. Yes, the internet is a big place, but its communities are still very small and well connected.

It’s obvious we didn’t design the original iPhone interface, therefore, we own no rights in respect to the recreation of its elements. But we did put in a lot of time and effort to produce the original iPhone GUI PSD, and we did it for the betterment of the community, for aspiring iPhone designers and developers everywhere, including ourselves.

Like any royalty free photography or stock vector artwork, they are designed to be used, shared and reused, all with the ethos of helping one another out. All we ask is for a little accreditation to compensate our donation of time.

The fact that the design community responded by celebrating our efforts with a ton of praise, actually motivated us to continue building more helpful tools like the Palm Pre GUI PSD.

But others looked upon our efforts with evil and greed, and took what we produced, switched up a couple small details and republished our efforts for their audience without a single bit of accreditation. A bold move from a website that’s been trusted by their readers for the originality and usefulness of their content.

There are a number of things that made it evident they didn’t create their own. The folder structures, layer names all remain the same. The dead giveaway was when they used our custom iconography.

Update: They’ve since removed the file and replaced it with separate flattened elements. Still no response from them though clearly they’ve seen this post and the related tweets.

It seems the screens we shared of an alternative home screen for the iPhone created some buzz. We had no intention of taking it any further than a blog post but we figured this was something worth seeing through.

We got in touch with Jay Freeman a.k.a saurik. He’s the guy behind Cydia, an application for jailbroken iPhones that allows you to browse and download apps outside of actual app store. He’s crazy smart, passionate and geeky – three things we love here at T+L. Jay is going to be instrumental in making this happen.

If you haven’t already figured it out, getting this on your phone will require you to jailbreak it. That may not be an appealing option for many, but for the 2 million plus out there who have already done it and for those that are comfortable with doing it, this can be a reality.

The app and the underlying technology to make it happen are still in development so what comes out the other side will differ from what we originally proposed. The biggest change will initially be that it will render only on the lock screen. We went down this road for a number of reasons, primarily because of its relative ease of implementation, though there’s nothing easy about it. Jay is creating a framework to write custom lock screens called Cydget. Our concept will act as the guinea pig.

No word on an actual release date yet due to a last minute crash bug, but from what we hear it’s not far off. We’ll make an official announcement once it’s available. You can follow @teehanlax,
@gteehan and @saurik if you’re looking for more detail since we tend to tweet about this stuff more frequently than we blog about it.

I’d have loved for this post to be the introduction of our latest iPhone application. An application that introduces a new default optional home screen. A screen that doesn’t require you to scan for red dots with numbers inside of them. Instead it would display information and notifications of things that are new and relevant to you. We’ll all have to keep dreaming for the time being. Unless you’re willing to jailbreak your phone it simply isn’t possible to develop and implement this type of hostile UI takeover using the iPhone SDK.

Until then (we’re doubtful that sort of freedom will ever be available) Here’s how we might design a new home screen.

You can see from the screens it’s essentially just a scrollable list of applications and notifications. We envision it behaving in much the same way that the list view does in the Calendar application. By default it may track things like missed calls, unread emails and calendar events. But what if users could allow other apps to feed into this screen as well? If I’m a Facebook junkie I’d be able to tell the Facebook app to include certain feeds on my home screen. If I was a frequent traveler I may include the Tripit app to show me my upcoming trips. The options would only be limited by what apps you have installed.

Update: The demand for this has been too great to ignore. We’re building a working version of this. More details and screens to follow. You can follow us at twitter.com/teehanlax

A scrollable screen of the stuff that matters to me.

Application preferences would allow users to include certain feeds on their home screens.

Jon had mentioned (as did Drew in the comments) he’d like this info without having to unlock the phone. I agree. If only development were this easy.