Drawing Your Ideas on Paper

Don't overlook the value of sketches on grid paper! Getting your ideas down on paper is a quick way to map out the basic look and feel of your app. Designing a game that requires a completely custom interface? Drawing your concept on paper may be your only rapid option, since this would be impossible to do with only the standard controls available in Interface Builder. Sketch it first by hand to work out the design kinks, and then construct the final custom artwork in Illustrator or Photoshop.

Tired of drawing the same buttons and other standard interface elements over and over again? Thanks to the generous contributions of several prominent designers and developers, predrawn iPhone sketch templates are available online (see Figure 4-7):

■ Erik Loehfelm's iPhone UX Sketch Templates (offered in multiple formats such as PDF, Photoshop, EPS, PNG, and OmiGraffle): http://erikloehfelm.blogspot.com/2009/05/iphone-ux-sketch-templates.html

■ Boulevart's iPhone Sketchpaper (PDF and Photoshop PSD): http://labs.boulevart.be/index.php/2008/06/05/sketch-paper-for-the-mobile-designer/

■ UI Stencils iPhone Stencil Kit (stainless steel stencil): http://www.uistencils.com/iphone-stencil-kit.html

■ Kapsoft's iPhone Stencil (durable IMA acrylic stencil): http://www.mobilesketchbook.com/

Iphone Sketch Paper
Figure 4-7. iPhone-related sketching templates and stencil kits are available from third-party designers.

Although all the downloadable templates are truly well done, I couldn't find a comprehensive solution that matched my personal design needs, so I opted to publish my own unique, grid-based templates in The Developer Sketchbook for iPhone Apps, which includes more than 500 pages of portrait and landscape UI templates, app navigation flowcharts, and app icon design templates. Also available is Dean Kaplan's iPhone Application Sketch Book from Apress, with 150 pages of handy templates. If you're looking for an iPhone design notebook to take with you when you're away from the office or simply a central place to keep all your app ideas organized, these two printed solutions are worthy additions to your development arsenal.

■ The Developer Sketchbook for iPhone Apps (Electric Butterfly): http://www.developersketchbook.com/

■ iPhone Application Sketch Book (Apress): http://www.apress.com/

Beautiful Mock-ups in Illustrator and Photoshop

If drawing on paper is not your thing and you're more comfortable working in Photoshop or Illustrator, other resourceful designers have graciously donated comprehensive sets of interface elements to the iPhone developer community, conveniently stored in layered files, making the creation of pixel-perfect mock-ups extremely easy (see Figure 4-8).

■ Mercury Intermedia's iPhone UI Vector Elements (for Illustrator): http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements

■ Teehan+Lax's iPhone GUI (for Photoshop): http://www.teehanlax.com/blog/

■ ThreeTwentyFourEighty's iPhone Interface PSD (for Photoshop): http://www.320480.com/

■ Smashing Magazine's iPhone PSD Vector Kit (for Photoshop): http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/

Iphone Interface Vector
Figure 4-8. Just a small sample of the many iPhone elements available in layered Photoshop files and vector-based Illustrator files from third-party designers

Other Software Tools for Designing Mock-Ups

If you don't own a license for Photoshop or Illustrator or you're looking for a more budget-conscious prototyping option, then OmniGraffle is an inexpensive solution for Mac users. Although originally developed as a diagramming tool, OmniGraffle has become a popular choice for constructing wireframes and interface design mock-ups.

■ OmniGraffle: http://www.omnigroup.com/applications/omnigraffle/

The third-party web site Graffletopia offers an extensive free library of user-contributed OmniGraffle stencils. Several iPhone-related stencils are available for download, which I've listed here for your convenience:

■ Graffletopia: http://www.graffletopia.com/

■ Ultimate iPhone Stencil by Patrick Crowley

■ Mobile iPhone by Yahoo! (part of the Yahoo! Design Stencil Kit)

■ iPhone Wire Frames by Theresa Neil

■ iPhone Sketch by Soup Industries

If you prefer using presentation software for client meetings, then you may want to check out Dotan Saguy's MockApp for Apple Keynote (Mac) and Microsoft PowerPoint (Mac/PC):

■ MockApp: http://mockapp.com/

One of my personal favorites is Balsamiq Mockups, a robust, cross-platform Adobe AIR application that features a vast toolkit of "hand-drawn" UI elements for both desktop apps and iPhone apps. This unique approach produces mock-ups that are very clean and professional while still looking as though they were drawn on paper.

■ Balsamiq Mockups: http://www.balsamiq.com/products/mockups/

Living With Android

Living With Android

Get All The Support And Guidance You Need To Finally Be A Success At Using Android. This Book Is One Of The Most Valuable Resources In The World When It Comes To Playing With the Hottest Android Tablet.

Get My Free Ebook


  • Violanda
    How to dram iphone from paper?
    6 years ago

Post a comment