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.

The iPhone GUI PSD has been very helpful for designers / developers in mocking up their apps, although in some cases it’s proved a little too high-fidelity. For rapid prototyping we found we needed a more malleable approach. This is when we turn to the iPhone Sketch Elements AI. This collection of common iPhone elements in a sketch – like style allows us to easily and quickly mock up flows of custom wireframe screens.

Below is a quick example using YouTube of how we are using this quick sketch style to present flows to clients.

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

Download The iPhone Sketch Elements AI Here (6MB)

(Font Requirement: To fully achieve the sketch style, you’ll need Tekton Bold — Freely available here)

A few weeks ago I participated in a panel discussion at the IAB Canada MIXX event held in Toronto. The theme for the conference was emerging platforms and the opportunity we have to create truly innovative marketing in Canada. It was a call to action and speakers illustrated three key points:

• How Canadian media usage patterns have dramatically changed
• Why advertising within VideoGame, Mobile and Digital Out-Of-Home channels are poised to reach critical mass, and
• Where Social Media is being harnessed to drive sales.

Prior to the conference I got a chance to discuss these topics with Eyal Zilnik from One Stop Media. He delivered the presentation for the panel I was on, Do It Digital: How The Latest Advances In Digital Out-Of-Home Bring Internet, Mobile and Social Media To Life. Eyal did an excellent job of illustrating how DOOH has changed. And it was exciting to throw ideas around with someone else who gets as excited about Digital Out-Of-Home as I do. We came to several conclusions, namely

1. Marketers still regard DOOH as an animated billboard or a placement to run video loops (often running adapted TV spots without audio)
2. Few people understand that DOOH boards are more like desktop computer screens than they are Out-Of-Home billboards – they are integrated into a network with a unique IP and facilitate the full range of dynamic targeting we now take for granted in traditional online advertising, and
3. Few Canadian marketers have experimented with DOOH despite the low cost of participation, and fewer still have embraced the opportunity to link DOOH with mobile and social media.

These points were reinforced by the comments and questions we heard during our session. Several attendees came up to me after the conference and said they had no idea that the things we discussed were even possible. Maybe it’s because I’m interested in this topic but that came as a surprise.

To me, DOOH is much more than just another media tactic. DOOH will play a key role in the future of marketing. With the rise in smartphone usage and the recent introduction of the iPad (and the announcement of Apples’ iAd platform) consumers are moving away from the desktop. One only need look at consumer adoption of Facebook and the platform changes announced at F8 to understand that for many, social media is the backbone of current communication habits. Could a retail marketer integrate their social presence with DOOH (or their in-store signage network) and enable consumers to engage over mobile? Most definitely. The technology and systems are already in place.

My hope is that marketers will seize the opportunity to innovate and begin to create communication that does more than shout messages, but instead engage with consumers in new and profound ways.

Dave Stubbs is a member of the Emerging Platforms Council, IAB Canada

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

We wanted to take this opportunity to give everyone an update on Element. What started out as a simple Photoshop mockup has become somewhat of a thorn in our side and an obvious point of frustration for those waiting on it. Before we give the update we’d like to simply apologize for its continued delay. We weren’t trying to overhype it, we just made the mistake of sharing delivery dates given to us by someone outside of our company. We really should have just sat tight until we had an actual release to share.

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. Read the rest of this entry »

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.

Two steps forward, one step back. That’s how I feel about the crappy media scrubbing interface built into the iPhone, iPod touch, and I guess pretty much all touch screen-based media devices. Ever since I “upgraded,” I’ve missed my scroll-wheel.

The playhead/timeline widget is frustrating to use and doesn’t facilitate navigation of media with any real precision.

What’s worse, the level of navigational precision decreases in proportion to the length of the audio or video file. That’s because more time gets mashed into the same 1.8’’ of scrubbable timeline space. This is really apparent for things like podcasts, audiobooks, movies, etc.

There are 2 problems here:

1. the UI requires me to use a course-grain input method (my finger on a small display) to control a fine-grain input mechanism (timeline/playhead).
2. There’s a fixed, linear mapping between input and output. In fact, they’re one and the same: input = output.

The scrollwheel doesn’t have these problems because a) the input method and interface mechanism are both course-grain, and b) input and output are only loosely coupled.

Let me explain b) a little better. The scroll-wheel is an example of an indirect, or mediated interface. I manipulate the wheel, which in turn affects the playhead’s position along the timeline. At the end of the day, this means that revolutions on the scrollwheel can translate into an increment of time that’s absolute vs. proportional to the duration of the media file.

Apple designers even inserted some really smart code into this mediation layer that let me use other cues on the scrollwheel—like velocity and acceleration—to control how fast or slow playhead moved along (like shifting gears). It works really well, and in my opinion was key to the success of the iPod early on. (Do you remember the first time you used the scollwheel on an iPod? I do.)

It’s worth pointing out that Apple could essentially make a touch-screen version of the scroll-wheel interface for iPod Touch and iPhone.

I’m not holding my breath…