Saturday, 23 August 2008

So you want to mock up an iPhone application design 

This may be a cool set of Photoshop widgets, but if you're considering using them, please consider using the Interface Builder app that comes with the iPhone SDK. All free, and it's the actual tool that real iPhone developers use to build interfaces.

Extending an element is as easy as dragging it out; adding another icon to a toolbar automatically redistributes the others. Everything auto-snaps to build a GUI that follows Apple guidelines -- it's easier than Photoshop!

Just as designing a website in Photoshop gives you very little insight into how a website is actually built, designing an iPhone app in Photoshop is not going to help you understand how that's going to work either. Interface Builder can be daunting, but for mockups it's dead easy:

1. File > New... and make a new Cocoa Touch application.
2. Window > Library and drag objects into the window.
3. Double-click on buttons to change their text.
4. Window > Inspector and use the first section (Attributes) to change colours/styles if needed.
5. When you're done, File > Simulate Interface and it'll appear in the iPhone Simulator.
6. Command-shift-4, then press space. Click on the simulator to grab a pixel-accurate screenshot of your iPhone app, with shadow.

Comments: Post a Comment

This page is powered by Blogger. Isn't yours? RSS