share
Stack OverflowGUI Design Tools to mock up iPhone & Android applications
[+168] [21] Peter Delaney
[2009-05-30 15:00:27]
[ iphone android gui mockups ]
[ http://stackoverflow.com/questions/929875/gui-design-tools-to-mock-up-iphone-android-applications ] [DELETED]

I am starting development on a mobile application for both iPhone and Android, and I already have most of the GUI mock-ups white-boarded (with some still in my head). As a next step, I need to put them all down on paper so that I can start socializing the designs among my team - and I'm wondering what the best online GUI mock-up tool is that's currently available?

I have a lot of experience using Visio - and I like the way it works. Ideally, though, I'd want a tool which is web-based for easier collaboration.

Any suggestions?

(1) moqups.com is the most frequent way to create design the screens. - Nico
invisionapp.com is a great tool many enterprise companies and single UX designers are using. It allows rapid prototype mockups that can be interactive and "clickable." Also has built-in live share ability and people can add comments to places in the visual mockups. balsamiq.com is another great tool for sketch-style rough drafts. not interactive. could work well in conjunction with InVision - zonabi
[+50] [2010-01-18 11:24:50] Chris S

For the iPhone this site [1] has a list of 21 tools - installable, web based and plugins/psds. Here's a selection of them:

Notepod [2]

(Apple forced them to stop offering these pads)

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.

(You could just print off this template [3] onto A4 card and save $10)

Speckyboy article [4]

This has a lot of resources for Android mockups.

iPhone Mockup [5]

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

(It's missing navcontroller and tableviews)

iPlotz [6]

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application Screenshot of iPlotz application

This is the best of the bunch in my view, and has a decent free package and demo. It is missing having the entire iPhone/Cocoa Touch set of controls though.

[1] http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/
[2] http://notepod.net/
[3] http://www.flickr.com/photos/owaters/3846053408/sizes/l/
[4] http://speckyboy.com/2010/05/10/android-app-developers-gui-kits-icons-fonts-and-tools/
[5] http://iphonemockup.lkmc.ch/
[6] http://iplotz.com/whatisiPlotz.php

(3) +1 for the paper iPhones. I find you can't beat a notepad for mocking up design or code. - Finglas
(1) No more Notepod. msg from thier site "We have complied with a request from Apple to cease and desist sales of our product". - Jimmy
(23) Good old Apple, sueing people who are trying to help their customers develop applications that give Apple themselves a 20% profit share. Maybe one day they'll understand the ecosystem concept - Chris S
(1) @Chris it boggles my mind too. The real kicker is, it seems to be working for them. - Cheezmeister
@Chris Agree with you! - Nam G VU
Why would Apple sue them? That makes no sense. - jini
1
[+36] [2009-05-30 15:13:53] Shane Powell

Everyone at my work uses Balsamiq [1], quick and easy to use.

[1] http://www.balsamiq.com/products/mockups

"sweet".PadRight(15) - Dave O.
2
[+31] [2010-04-16 05:59:29] Peter Severin

WireframeSketcher [1] lets you mockup iPhone and Android applications. iPhone and Android stencils are available in Mockups Gallery:

updated iphone stencil [2]

android stencil for nexus one phone [3]

iPhone Mockups

[1] http://wireframesketcher.com
[2] http://mockupsgallery.com/iphone-stencil-17
[3] http://mockupsgallery.com/android-stencil-for-nexus-one-phone

(1) You add stencils by going Help->Add assets from Mockups Gallery, choose the one you want and click to download (that will install it) - Bojan Kogoj
This is useful but I am getting trial version on screen while exporting data Pls let me know how to remove this or any other good tool. - Anand
it is good but unfortunately not free - Ilker Baltaci
3
[+30] [2011-01-18 06:05:50] mikek3332002 [ACCEPTED]

MIT(was google) has an experimental development environment for android that contains GUI designer called App Inventor [1].

Screen shot for App Inventor for Android

[1] http://appinventor.mit.edu/

(1) App Inventor is being dropped by Google in December 2011. Plan is to hand it off to a third party but no clues about if that will be seamless or even a successful transition. - Charleston Software Associates
@CyberSprocketLabs That's why I updated the website address from the lab one. The most recent annoucement on the issue appinventorbeta.com/forum/index.html#!msg/… - mikek3332002
Updated link to the MIT site on the tool - mikek3332002
Finally, i found out that the best way to make a good prototype is to learn android UI/UX design and design patterns, implement it using XML and Java and take snapshots for the emulator.That give more control over the UI and a clearer UX and workflow. - Brahim Boulkriat
4
[+18] [2011-01-24 12:21:00] likebobby

For Android I think Pencil [1] is great. It's free and open source and there are some templates for Android open for the community.

GUI Design/Mockup Design Tool for Android Application [2]

[1] http://code.google.com/p/android-ui-utils/
[2] http://stackoverflow.com/questions/4253197/gui-design-mockup-design-tool-for-android-application

5
[+13] [2009-11-22 11:37:38] Jox

For Android based apps, Droid Draw [1] is best tool I tried.

[1] http://www.droiddraw.org/

(4) It's really lacking in the number of available ui elements, isn't it? - nlucaroni
(12) I don't get why everyone suggests DroidDraw its just absolutely worthless! - emalamisura
WireframeSketcher mentioned below in one of the answers looks like a good option which is free - strider
(1) @strider WireframeSketcher is not free. - M.Sameer
@M.Sameer Not sure if something changed, but I'm pretty sure at one point I had downloaded and installed it as an Eclipse plugin. - strider
6
[+10] [2010-12-30 02:17:06] Sparky

For iPhone or iPad mockup, check "Blueprint" - an iPad app. It is getting almost 5 stars rating on AppStore. It is really awesome.

[1] http://itunes.apple.com/us/app/blueprint/id405203705?mt=8
[2] http://www.groosoft.com/2010/12/blueprint-video-tutorial.html

not bought the full version yet, but so far this is excellent. so quick to get a prototype up and looking great. - Nik Burns
This looks really cool. Gonna give it a try today. - jeremcc
Its Awesome!!!! - ngoa
7
[+10] [2011-09-25 12:48:12] Badr Hari

androidmockup [1]

For basic, simple mock ups.

[1] http://yeblon.com/androidmockup/

8
[+8] [2010-01-28 10:32:46] OblongZebra

Take a look at mockflow [1].

[1] http://www.mockflow.com

9
[+7] [2009-06-19 15:14:17] Grouchal

For iPhone I tend to use xib files and Interface Builder - to just sketch out the ideas - it even has an option to try it out on the phone simulator and interact with the layout. The best thing is that it is easy to then take these screens and build stuff behind them. The biggest negative is that you cannot sketch TableView screens using it as you can't mimick a TableViewDataSource etc.

I looked at Balsamiq and it seems great for early stage sketches too and may be a good solution for both platforms - not many Android controls in there though!


From my short experience, there're lots of things that can't be done in IB without some code, like back button for navbar or scrolling (requires contentSize). But it would be very useful otherwise. - Nikita Rybak
10
[+7] [2009-06-19 17:04:01] Ron Srebro

I've used OmniGraffle for iPhone apps mockup. There are community generated stencils for iPhone and there might be also for android.

I found OmniGraffle to be helpful in creating mockup although not my ideal mockup creator.

OmniGraffle website [1] - iPhone stencils [2]

There's also a PSD file for photoshop available and one for fireworks if you use adobe products for design, which you might helpful.

[1] http://www.omnigroup.com/applications/omnigraffle/
[2] http://graffletopia.com/stencils/413

I've used Balsamiq and Pencil before. Nowadays I would recommend Omnigraffle. It is more advanced and harder to learn, but the impressive functionality really saves time once you know it. Working with layers and re-using components is much easier and the compatibility with Illustrator vector graphics is also great. Clearly worth its money if making lots of mockups/wireframes/diagrams/schemas etc. - likebobby
11
[+6] [2010-10-28 17:52:54] Amanda

I used Mockingbird [1], which I found to be very helpful! And best-- it was free to use!

[1] http://gomockingbird.com

12
[+5] [2009-11-08 16:00:02] slatvick

I use these design templates for hand drawing [1]

[1] http://iphone-dev-tips.alterplay.com/2009/11/iphone-app-desgin-templates.html

13
[+5] [2010-07-01 21:51:24] guacamoly

If you like the NotePod idea of having a notepad shaped like an iphone to do you mockups .... I've made a template with which you can make your own notepod. Just print one in good quality on standard A4 legal paper and go to the copier and make a bunch of copies. Each page prints 6 pages for the notepad. There are guides that will help you use the roller-cutter to slice up your pages. Download the file here : http://cl.ly/083e64184bfd69db2640 Its a PNG. I used photoshop to print it


14
[+5] [2010-12-01 23:51:50] Haider Ali

My wire-frame journey started from using excel and now I have am experimenting on n number of wireframe and prototype tools and my recommendation would be the following:

Axure (tired and tested) Balsamiq

http://mockapp.com

Pidoco.com lucidchart [1] iphonemockup iplotz protoshare cogtool.hcii.cs.cmu.edu justinmind

Hope this helps.

Thanks, Haider

[1] https://www.lucidchart.com/pages/examples/android_mockup_tool

15
[+3] [2010-02-28 23:41:16] Cristian Pascu

You can also build interactive iPhone mockups with FlairBuilder. Check it out at flairbuilder [1]

[1] http://www.flairbuilder.com

16
[+3] [2010-03-10 08:54:58] Sponge

you could use this tool:

GUI-designer [1]

its based on the eclipse emf project and you can design your gui by easily write text like:

Window "Demo"

SeperatorLine 1
One-Column-List +color=orange
Label "Login Screen" +color=white +centered
SeperatorLine 1

Two-Column-List
Label "E-Mail" EditText ""
Label "Password" EditText ""
Label "Stay logged in?" CheckBox [+] ""
Button "Cancel" Button "Login"

SeperatorLine 1
One-Column-List +color=orange Label ""
SeperatorLine 1

with the xpand language you can generate any text (code) from this input, so it would be no problem to get the gui code for the iphone parallel to the gui code for the android version

i know that it will need a little time to understand the emf structure but its worth it :)

[1] http://andrdev.blogspot.com/2010/01/gui-designer.html

17
[+3] [2011-03-02 17:31:15] jgilrincon

My favourite is Keynotopia. You can design iPad, iPhone, Android, Windows Phone 7, Facebook and web apps.

http://keynotopia.com/


(1) It looks great, but unfortunately it's not free - anticafe
18
[+2] [2009-06-19 12:35:17] Chris

I once found this tool here unfortunately it is still alpha and has not all gui widgets there.

iphone mockup [1]

[1] http://iphonemockup.lkmc.ch/

19
[+2] [2010-02-20 11:26:46] user277612

StencilsApp [1] is an iPhone app for creating mockups. You can even create transitions and triggers between screens using gestures and actions in a multi screen mockup. Its got the complete iPhone UI library, a large icon library and great 2D drawing tools. Its free to download.

[1] http://www.stencilsapp.com

20
[+2] [2011-01-25 09:00:11] Flavien Volken

Not for android but useful to quickly build a mockup on the iPhone kerofrog [1]

[1] http://dapp.kerofrog.com.au/

21