Jul

8

2007

iPhone UI Layout Template

Category: Mac, iPhone

I have a few applications that I’d like to write for the iPhone, and I needed a way to prototype the UI so I put a simple template together.

All the parts are taken from screenshots I found online so none of the parts look too great, but I think it’s good enough to get a rough idea of how a web application UI will look on the iPhone (non-landscape mode).

I did the template in Fireworks, but Fireworks’ file format is a layered PNG so if your favorite editor supports layered PNGs it theoretically should work (I would imagine photoshop can import the file).

Here is a screenshot of the template in use:

Fireworks iPhone

It’s not pixel perfect, and the quality isn’t that fantastic, but it’s a lot better than just flying dark. You can download the template here.

Other Posts of Interest:

« iPhone Rate Plans | Home | iPhone post »

Comments

This entry was posted on Sunday, July 8th, 2007 at 11:20 pm and is filed under Mac, iPhone. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

1 Comment so far

  1. Rey Bango on July 9, 2007 10:22 am

    Rob, Joe Hewitt of FireBug fame has a template that you can use:

    http://joehewitt.com/files/iphone/navigation.html

    Also check out this posting today on Ajaxian which may help out as well:

    http://ajaxian.com/archives/iphonedevcamp-wrapup-including-iui

Name (required)
Email (required)
Website
Share your wisdom