21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development
Categories: Design, Featured, Resources, Tools, iPhoneization
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 [...]