Wire Frames for iPhone Web Application Design

April 30, 2008 — 16 Comments

I just posted a new stencil on Graffletopia. It is the stencil I have been using to make wire frames for iPhone web applications.
iPhone Wire Frame Web App Stencil

This makes it pretty easy to open OmniGraffle and put together some designs for discussion and testing.

And although I included tabs as a component, make sure to refer to Apple’s iPhone Human Interface Guidelines which encourage the use of lists for navigation:

Example from the Human Interface Guidelines

16 responses to Wire Frames for iPhone Web Application Design


    Hey, I just downloaded these off graffletopia, they’re pretty sweet!


    This is perfect. I really needed something for iPhone UI design. Thanks.
    I’m using it for native applications and not all elements match, do you know of a stencil for native apps in particular ?



    Gorgeous! Do you happen to have a stencil for the “Page Turning Up From the Bottome-Right Corner of the Screen” effect, a-la Google Maps?

    Keep up the great work!

    (WHOOPS! I misspelled my email the first time 😦

    Philip Foeckler August 8, 2008 at 3:25 pm

    Thanks for sharing. This is great!

    Sam Griffith Jr August 9, 2008 at 7:01 pm


    I love this. Would you mind if I use it some to create drawings for a book I’m writing on iPhone programming?

    William Eldar III October 22, 2008 at 9:01 pm

    Fabulous resource. Thank you!

    Any possibility of creating a iPod touch face also? 😉

    Thank you so much.



    Great tool! I’m an iPhone developer myself, and I’ve developed several apps ($$$) that are now on the app store. Any questions about iPhone development, just drop me an email: sam.shaw123 [at] gmail [dot] com or call me: +1-847-380-4181.

    Sam Shaw


    Cool work, hope to hear more from you.Are you working in a Group that you can make such a good Blog?


      I have some great folks working with me on a dozen or so projects. We like to keep it diverse and share what we learn.


    I recently had to work on some iPhone and iPad mockups, and spent some time looking for a good wireframing tool. Given I was a spoiled Axure brat from the Web-Apps world, I struggled a little bit to find something equally powerful for mobile platform! However, after a little mental readjustment, I ended up short listing two tools.

    1. OmniGraffle
    2. Balsamiq Mockups

    From these two, I started off with Balsamiq Mockups, and so far, it is coming along pretty well. I have not yet made a purchasing decision (Balsamiq folks were kind enough to extend my eval period!) and I want to evaluate at least OmniGraffle before I commit to one. I wonder if you have used both these tools? And if you have, how would you compare the two?

    And just in case someone reads this and ends up evaluating Balsamiq mockups, you can find community shared resources at http://mockupstogo.net/.


      That’s funny- we use both Balsamiq and OmniGraffle. Sometimes we use Balsamiq for the whole wireframing lifecycle, other times we use it just in the strategy phase, then switch the Omni for higher fidelity designs. I love both products.

Trackbacks and Pingbacks:

  1. iPhone Developer Tips, Tricks and Tutorials » OmniGraffle iPhone Stencil - October 16, 2008

    […] design. One of the first hits was a stencil created by Theresaneil , the stencil is located here . This is a nice, no thrills stencil for quick mock up of an […]

  2. Dip Studio UK blog » Wire Frames for iPhone Web Application Design - November 12, 2008

    […] one is quite old (by modern means) but really good. Theresa Neil published a nice set of wire frames for iPhone web application design (Graffletopia stencil link) […]

  3. Designing Web Interfaces - January 24, 2009

    […] 著者は、Netflix のエンジニア Bill Scot 氏とデザイナーの Theresa Neil 氏です。Bill Scot 氏といえば、CS193H で紹介した High Performacne Web Pages – Real World Examples: Netflix Case Study の講演者でした。Bill Scot 氏のブログは、Looks Good Workds Well です。Theresa Neil 氏のブログは、Theresaneil’s Weblog です。Theresa Neil 氏のブログには、iPhone のインターフェースのエントリもあって、とても興味深いです。 […]

  4. Osomer » Blog Archive - February 11, 2009

    […] https://theresaneil.wordpress.com/2008/04/30/wire-frames-for-iphone-web-application-design/ Posted by admin Filed in […]

  5. Designing and Specifying iPhone Apps « Chris Book - September 4, 2009

    […] )  If you already use OmniGraffle then aparently these stencils are good https://theresaneil.wordpress.com/2008/04/30/wire-frames-for-iphone-web-application-design/or here http://graffletopia.com/stencils/437 If you are using Photoshop then there are some PSD […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s