21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development
Categories: Design, Featured, iPhoneization, Resources, Tools
Loading ...
Loading ...
So you have a killer idea for an iPhone app, but when you describe it to people they just don’t get it. Maybe you have a client that is a visual thinker and needs you to draw it out for him. That’s when wireframes, mockups and stencils can be your saving grace.
There are many different types of tools available to developers, from low-tech stencil kits to high-tech collaborative software. So I’ve rounded up a few of the more popular ones people are using specifically for iPhone development. It’s far from being the definitive list, but it’s definitely a good place to start.
Low Tech Solutions
Notepod
Notepod is a notepad shaped like an iPhone. Each notepod is 100 pages of 60 x 110mm double sided paper. The front has 52mm x 77mm blank space (the iPhone screen), the back is a 6mm grid.
iPhone UI Stencil Kit
The iPhone ui stencil kit is a stainless steel, laser cut stencil kit for drawing quick mock-ups and wireframes for iPhone apps. It also comes with a Zebra mechanical pencil.
iPhone Sketch Pad
The iPhone Sketchpad works precisely with the iPhone Stencil Kit, with one phone silhouette on the front side and three on the back.
App Sketchbook
The App Sketchbook has 50 Double-sided, perforated pages each with 3 actual sized iPhone templates. Each page also has has 20px ruler markings and a ruled section for notes.
Vector Images
MetaSpark’s Fireworks Vectors
A collection of vector iPhone UI elements for Fireworks CS3 and CS4.
320480 Stencil PSD file
Most iPhone screen elements, sensible layer sets all contained within one PSD file.
Graffletopia Stencil Kit for Omnigraffle
Graffletopia’s stencil kit for Omnigraffle. It is for quick sketching of iPhone ideas. Use the outline for printouts so you can hand sketch as well. The symbols are meant as a check list for included features in your app development.
MockApp
MockApp is a set of iPhone ui templates and library files put together for use in Powerpoint or Keynote.
Firefox Plug-ins
iPhone Prototype
This is a plug-in to browser Mozilla FireFox for prototyping interface of iPhone applications for creating an iPhone mock-up. Currently Alpha – not compatible with FF 3.55.
Firefox Pencil
Pencil is a free and opensource tool for making diagrams and GUI prototyping. Pencil runs on the Mozilla Gecko engine, turning the Firefox browser into a sketching tool with just a 400-kilobyte installation package.
Fireworks Plug-ins
Unitid
This plug-in combines Fireworks with some jQuery and PHP to give you a prototype you can not only view, but interact with, directly on your iPhone, just as if it’s a live app.
iPhone Apps
LiveView
Liveview is an iPhone app that consists of two parts: the ScreenCaster and the Application itself. ScreenCaster launches a simple iPhone skin on your Mac. From the same network, launch the LiveView app in your iPhone. Whatever the ScreenCaster is highlighting is now seen in the LiveView App. It also interprets touches as mouse clicks, turning it into a two way interactive prototype.
Web Based Tools
Mockingbird
Mockingbird is a web based mockup/wireframe tool built using the Cappucino framework, so there’s no flash to wrestle with. While you can’t actually design your mockups from an iPhone (who’d want to?), the tool does have some very handy features. You can drag elements onto the screen, create multiple pages, link to other pages and share directly from the web.
Pidoco
Pidoco is a web-based tool that lets you create clickable wireframes via drag & drop ui and then collaborate with remote users on each project. The tool also includes iPhone stencils.
iPhone Mockup
iPhone mockup is a web based tool that is currently in Alpha release only. You can design your mockup as a hand sketch or illustration, and mockups can contain user-uploaded images and user-entered text. Your mockups will be accessible via url so they are unsecured.
The developer makes this perfectly clear and warns that he could discontinue hosting mockups at anytime, thereby deleting any work. That makes this a handy tool for quick and dirty mockups you want to print or share with someone on the fly, but not for much more.
Protoshare
Protoshare is a collaborative, web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time. It has an iPhone component that can be seen here.
iPlotz
With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.
Installed Software
CogTool
CogTool is a general purpose UI prototyping tool simply using a storyboard of your design idea with sketches, images or on a canvas. Demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks.
Balsamiq
Balsamiq mockups is desktop software that is designed to help teams or clients collaborate on wireframes and mockups. There are iPhone specific controls included.
OmniGraffle
OmniGraffle is award winning diagraming mockup or graphic design software. Combined with Graffletopia’s iPhone stencil kit, this software is a great addition to any app developers toolbox.
Justinmind Prototyper
Justinmind prototyper allows you to create fully functional wireframes for mobile applications and generate your HTML high-fidelity wireframes.
iRise
iRise for iPhones gives developers a way to quickly prototype the look, feel and behavior of Apple iPhone applications through pre-defined visualization widgets and templates that can be quickly assembled into a high definition mobile applications.
November 17th, 2009 at 3:17 am
Another general purpose wireframing tool is WireframeSketcher. It’s a plugin for popular Eclipse IDE and it works with tools like Aptana, Flex Builder, Zend Studio and other.
November 18th, 2009 at 7:18 am
Great compilation of tools! Thanks!
November 18th, 2009 at 10:12 am
Great Comprehensive list of tools
Thanks
November 18th, 2009 at 11:31 am
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development [...]
November 18th, 2009 at 12:26 pm
Thanks for the great list! And don’t forget my ‘Developer Sketchbook for iPhone Apps’ which is available online at Amazon.
November 18th, 2009 at 1:06 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development [...]
November 18th, 2009 at 6:24 pm
And Dashcode- just download (free) from Apple and you can have a working prototype in minutes that will run in Safari or on your iPhone. Great way to test out your designs and ideas.
November 18th, 2009 at 6:58 pm
Thanks for mentioning Graffletopia.
FYI… we actually have an entire category of iPhone stencils on Graffletopia (including a sweet stencil from Theresa Neil), not just the stencil you mentioned.
http://graffletopia.com/categories/iphone
November 20th, 2009 at 10:40 pm
Great collection. I’d like to throw another in as well (as of Monday when it goes live in the app store), Mockup, our new app for visual prototyping on the iPhone itself.
http://lextech.com/mockup
November 21st, 2009 at 2:03 pm
Excellent resource collection! Great work. Thank you !
November 22nd, 2009 at 4:47 am
[...] iPhoneized – 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development [...]
November 22nd, 2009 at 10:58 am
[...] Prototyping und Wireframing Tools für iPhone Development http://bit.ly/5XbXwS [...]
November 22nd, 2009 at 12:04 pm
[...] 21 prototyping mockup wireframing tools iPhone app development [...]
November 23rd, 2009 at 12:10 pm
Or you might want to consider our iPhone Stencil in plastic.
http://mobilesketchbook.com
And out iPhone Application Sketch Book that matches.
Regards
Dean
November 24th, 2009 at 8:02 am
[...] Sélection de 21 outils de prototypage et wireframing pour le développement d’applications iP… [...]
November 24th, 2009 at 10:37 am
I just wanted to add that the pidoco° wireframing tool listed above has also some usability testing features included that help designers to get their concepts right the first time.
Make a concept, get feedback from experts or users, redesign the wireframe and then start pogramming! Avoid cost for later changes just because the users do not find the checkout button.
Thanks,
Michael from pidoco°
November 25th, 2009 at 10:09 pm
Great list! Mocking up and prototyping are important tools when you take the first step to create your app.
November 28th, 2009 at 9:08 am
[...] tool untuk keperluan prototyping, mockup, dan wireframing dalam pengembangan aplikasi iPhone. Klik disini jika kalian tertarik untuk melihat daftar [...]
November 28th, 2009 at 6:02 pm
MonoTouch Tool – 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development…
Thank you for submitting this entry – Trackback from MonoTouch.Info…
November 30th, 2009 at 6:06 pm
[...] interface mockup to any issue. There are other tools that could be used to do iPhone prototyping. This blog post gives a good [...]
December 1st, 2009 at 4:34 am
[...] Kollegen von iPhoneized dem Thema angenommen und eine ebenfalls sehenswerte Liste ganzer 21 “Prototyping, Mockup, and Wireframing Tools for iPhone App Development” zusammen gestellt. Neben Photoshop-Vorlagen und Plugins für Mac-Applikationen wie [...]
December 16th, 2009 at 2:36 am
[...] tool untuk keperluan prototyping, mockup, dan wireframing dalam pengembangan aplikasi iPhone. Klik disini jika kalian tertarik untuk melihat daftar [...]
December 29th, 2009 at 4:09 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development [...]
January 20th, 2010 at 3:46 pm
Great post! Thanks for all the insight…
Personally I love using Balsamiq! Use it every week.
Before I use Balsamiq though, I like using MockUpMagnets.com.
Great for client meetings, UI brainstorming, etc.
February 11th, 2010 at 8:39 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development [...]
February 21st, 2010 at 10:33 am
StencilsApp (http://www.stencilsapp.com/) is a powerful design tool to sketch or mock up iPhone app ideas directly on the iPhone.
Anyone with an idea for an app can mock up an interactive prototype of their idea on the iPhone itself using StencilsApp, without writing any code.
Sketches can behave like a “live app” by linking multiple screens through touch actions and gestures. Check out this video of a sketch of the iPhone Calendar app : http://www.youtube.com/watch?v=ncpQ4zVy2LY.
February 25th, 2010 at 4:26 am
Hi there,
A prototyping tool that you can use to create interactive prototypes for iPhone app is FlairBuilder. Check it out!
http://www.flairbuilder.com/iphone-prototyping-custom-widgets-custom-icons-and-much-more/
Cheers,
Cristian
February 25th, 2010 at 4:11 pm
[...] iPhone mockups – http://iphoneized.com/2009/03/roundup-iphone-stencils-graphics-templates/, as well as additional insights into iPhone mockup tools (both computer and pen and paper!) – h… Possibly related posts: (automatically generated)GUI Mock Up Software ToolsAutomated Testing Tools [...]
March 4th, 2010 at 7:32 pm
[...] Shared 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development | iPhoneized. [...]
March 12th, 2010 at 4:35 am
Its really an effective thing we can do with iPhone Apps! Mocking up and prototyping are important tools when you take the first step to create your iphone apps. Great
March 26th, 2010 at 5:10 pm
I like the low tech solutions. You could use the notepod to prototype animations, by flipping the pages quickly
.
It’s like using toy blocks to prototype video games (not possible for all kinds of games, but it’s always nice to play with those blocks again if possible).
March 28th, 2010 at 8:57 pm
[...] I’ve found using an iPhone stencil in Photoshop helpful, and plan to buy an iPhone notebook. [...]
April 13th, 2010 at 4:31 pm
[...] Prototyping, Mockup, and Wireframing Tools for iPhone App Development http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/ Categories: iPhone Dev Assistance Tags: [...]
May 4th, 2010 at 6:06 pm
[...] interface mockup to any issue. There are other tools that could be used to do iPhone prototyping. This blog post gives a good [...]
May 28th, 2010 at 6:30 am
[...] Graffletopia (OmniGraffle)iPhone and iPad Development GUI Kits, Stencils and IconsHungry for more? This article has a good rundown of additional design tools.CodingWhen you start coding for Safari on the iPhone [...]
May 28th, 2010 at 7:25 am
[...] for more? This article has a good rundown of additional design [...]
May 28th, 2010 at 7:53 am
[...] for more? This article has a good rundown of additional design [...]
May 28th, 2010 at 11:21 am
[...] for more? This article has a good rundown of additional design [...]
May 28th, 2010 at 1:47 pm
[...] for more? This article has a good rundown of additional design [...]
May 29th, 2010 at 3:03 am
[...] for more? This article has a good rundown of additional design [...]
May 31st, 2010 at 8:33 am
[...] for more? This article has a good rundown of additional design [...]
May 31st, 2010 at 9:41 am
[...] for more? This article has a good rundown of additional design [...]
May 31st, 2010 at 10:42 am
[...] for more? This article has a good rundown of additional design [...]
June 7th, 2010 at 9:25 am
[...] Graffletopia (OmniGraffle)iPhone and iPad Development GUI Kits, Stencils and IconsHungry for more? This article has a good rundown of additional design tools.CodingWhen you start coding for Safari on the iPhone [...]
June 8th, 2010 at 11:04 am
[...] for more? This article has a good rundown of additional design [...]
June 25th, 2010 at 3:35 am
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development. [...]
July 2nd, 2010 at 1:37 am
Justinmind has also an amazing ipad library http://www.justinmind.com/blog/wireframe-interactive-app-for-ipad/
August 1st, 2010 at 1:01 am
[...] for more? This article has a good rundown of additional design [...]
August 3rd, 2010 at 7:33 pm
[...] recently found this very useful list of many different ways you can prototype your next iPhone app. From the budget-savvy (i.e. broke [...]
August 9th, 2010 at 6:33 am
[...] for more? This article has a good rundown of additional design [...]
August 9th, 2010 at 8:33 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development (tags: prototyping iphone app protoptye) [...]
August 10th, 2010 at 4:01 am
[...] [...]
August 18th, 2010 at 4:31 pm
Great post, what commercial tools are available?
August 22nd, 2010 at 12:32 am
[...] iPhone application mockups. iphoneized.com has published an excellent list of alternatives in 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development. This is, in fact, where I started my search for an iPhone mockup [...]
September 11th, 2010 at 2:36 am
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development – iphoneized.com [...]
September 17th, 2010 at 2:27 am
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development [...]
September 20th, 2010 at 11:36 am
[...] easy to reorder screens and also come in a 3×5 size. There are a stencils, sketchpads, and other options available as [...]
September 20th, 2010 at 1:36 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development – iphoneized.com [...]
September 25th, 2010 at 11:44 pm
http://mockupdesigner.codeplex.com/
October 11th, 2010 at 11:29 am
to complete your list, please add our app Mockabilly. This app follows a different way of creating mockups on iphones.
It reduces the time and effort needed for drafting visual mock-ups of iPhone apps. Users can create perfect mock-ups directly on their iPhone from several screen layouts – quickly and easily.
http://www.mockabilly.com
We are actual on the german appstore Editors Picks
October 21st, 2010 at 3:14 am
Create mockups on iPhone: http://www.mockabilly.com
November 22nd, 2010 at 5:50 am
[...] Макети з інтерфейсом iPhone mockups [...]
November 24th, 2010 at 3:27 pm
LucidChart has a robust wireframing and rapid prototyping tool for iPhone applications:
http://www.lucidchart.com/pages/examples/iphone_mockup_tool
Try out the free demo.
November 25th, 2010 at 4:03 am
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development (tags: mockups collaborate wireframe iphone) [...]
December 5th, 2010 at 3:11 pm
This list cannot be complete without LucidChart. They enable rapid prototyping (high fidelity interactive wireframes) of iphone apps.
Http://www.lucidchart.com. Be sure to add the iphone library.
December 6th, 2010 at 5:56 am
[...] for more? This article has a good rundown of additional design [...]
January 8th, 2011 at 11:06 am
Surprised that LucidChart – http://www.lucidchart.com – is not on this list. That’s what I’ve been using the last few months and have loved it.
January 14th, 2011 at 9:38 am
Justinmind launched a new widgets library to build prototypes for the iPhone Retina display http://www.justinmind.com/members/48/extras?locale=en . It’s awesome!
January 15th, 2011 at 7:40 am
Thanks for this list – exactly what I was looking for!
January 24th, 2011 at 1:41 pm
Great List of mobile framework development tools.
Thanks
January 31st, 2011 at 2:52 am
“Blueprint” for iPad is the best for iPhone app mockup.
http://www.groosoft.com/2010/12/blueprint-video-tutorial.html
February 7th, 2011 at 9:01 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development (tags: iphone design wireframe tools development) [...]
February 8th, 2011 at 2:59 am
http://www.justinmind.com offers widgets to prototype both iphone 3 and 4. Check them out at extras http://www.justinmind.com/extras
February 18th, 2011 at 5:07 am
I like using UXToolbox (http://www.softandgui.co.uk) you can also use it for other types of phones and tablets like Andriod and Win 7.
February 26th, 2011 at 7:07 pm
[...] er en håndfuld gode links, som jeg har gemt på delicious i løbet af ugen. 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development – My Top 10 Design Business Failures – Trevélez – Wikipedia, the free [...]
March 7th, 2011 at 11:18 pm
[...] Templates for mobile wireframes (omnigraffle, etc.) [...]
March 21st, 2011 at 12:26 am
I second the recommendation of http://www.lucidchart.com. With all the icons they’ve got, I threw together an impressive mockup for an upcoming iPhone app.
April 18th, 2011 at 11:53 pm
[...] The next step in this process is to get your idea onto paper (figuratively). I suggest making a mock up, wireframe, or storyboarding your app idea. I find that when you start storyboarding, more ideas are generated and some ideas are naturally discarded. For some useful tools for creating mockups and wireframes, check out this article. [...]
April 20th, 2011 at 1:35 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development. VN:F [1.9.4_1102]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.9.4_1102]Rating: 0 (from 0 votes) [...]
April 25th, 2011 at 1:43 pm
Wow there’s a lot of responses here — I use mockflow.com
April 29th, 2011 at 8:36 am
http://justproto.com/en/ is another app that allows you to make wireframe / prototype an iphone (ipad android) app. it’s web-based so no installation’s required. try it
simple example from their twitter http://bit.ly/fo8mNK
April 29th, 2011 at 1:26 pm
What tools do Apple employees use to mock up iOS applications?…
I do not work for Apple, but since nobody else answered yet, I’ll just try to help. There exists a number of tools to help you. There are old-school notebook paper (yes, real paper) that look like iOS screens to help mock up screens before programmer …
May 6th, 2011 at 7:02 pm
[...] the iPhone this site has a list of 21 tools – installable, web based and plugins/psds. Here’s a selection of [...]
May 10th, 2011 at 11:25 pm
Would love if you could add this resource:
http://www.raizlabs.com/news/2011/05/wireframe-toolkit-for-keynote-and-powerpoint/
May 12th, 2011 at 1:43 am
[...] stencil kit for Omnigraffle. It is for quick sketching of iPhone ideas. Use the outline for printouts so you can hand sketch [...]
June 7th, 2011 at 4:23 pm
[...] Si necesitas mas herramientas, o evaluar otras diferentes, tienes este repositorio de 21 utilidades para crear prototipos para dispositivos móviles de Apple de todo tipo. [...]
June 8th, 2011 at 2:14 am
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development – iphoneized.com [...]
June 17th, 2011 at 10:50 am
[...] http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development [...]
June 22nd, 2011 at 5:39 am
I am an interface designer myself. Putting all the screens in a PDF and hyperlinking the pages is the way to go I think. It’s quick and you can use your favourite design tool, scans, whatever.
Put hyperlinks over screens/buttons in Acrobat, or use Indesign, Keynote…
Especially for that use-case there is a little app: http://www.link-viewer.com
Maybe you want to check it out.
Cheers,
Max
July 4th, 2011 at 4:00 am
Here is another great resource for iPhone wireframes: http://ios-blog.co.uk/resources/iphone-4-gui-psd-retina-display/
Maybe add that to your list?
July 7th, 2011 at 2:38 pm
“Hi all,
Can I request you to consider MockupTiger in your review process. It is a great new web application designed using HTML5. You can use it on desktop or host it on your domain/intranet. It is the only tool allows to prototype dashboard charts with actual data (not just static images) and contains a library of charts. Choose between hand drawn look or normal, choose your own font and skin color or draw color.”
Brinda
July 17th, 2011 at 10:53 pm
[...] Big list of helpful wire-framing tools [...]
August 12th, 2011 at 6:15 am
It’s no a large list, you can add also The Mockup Builder http://mockupbuilder.com/
August 20th, 2011 at 9:47 am
[...] stencil kit for Omnigraffle. It is for quick sketching of iPhone ideas. Use the outline for printouts so you can hand sketch as [...]
August 30th, 2011 at 7:06 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development – iphoneized.com [...]
September 2nd, 2011 at 10:17 am
You might want to check out the designed for mobile only prototyping tool Proto.io http://proto.io
September 5th, 2011 at 11:41 pm
[...] more useful tools here – 21 prototyping tools for iPhone app development Like this:LikeBe the first to like this post. Categories: iPad, iPhone, Technology Tags: iPad, [...]
September 19th, 2011 at 4:31 pm
[...] 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development – iphoneized.com [...]
October 7th, 2011 at 9:09 am
Thank you for the list, there are so many great tools to choose from!
October 12th, 2011 at 7:39 pm
[...] Templates for mobile wireframes (omnigraffle, etc.) [...]
October 20th, 2011 at 1:49 am
[...] interessante sobre prototipagem para iPhones e similares (http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/). 59.438862 24.754472 Partilhar isto:EmailGostar disto:GostoBe the first to like this post. [...]
October 23rd, 2011 at 10:36 am
[...] http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/ [...]
December 14th, 2011 at 3:35 am
Get your prototype sketches or screens on a real live iPhone with App in Seconds – no technical knowledge required.
January 1st, 2012 at 8:03 pm
[...] Wireframe Resources App Cooker: Conceptualizing and Planning your App Make Perfect iPhone Mockups Prototyping, Mockup, and Wireframe Software Balsalmiq Mockup Software LucidChart iOS mockup [...]
January 24th, 2012 at 1:06 pm
I highly recommend Keynotopia (Keynotopia.com). Awesome templates for use with Keynote (mac), PowerPoint (mac + PC) or OpenOffice (PC, Mac, Linux). With the new versions you can turn wireframes into pixel perfect, ready to be developed apps! LOVE how much time I saved with my first iPhone app