memonic

Prowl - iOS Push Notifications

Save

Prowl is the Growl client for iOS. Push to your iPhone, iPod touch, or iPad your notifications from a Mac or Windows computer, or from a multitude of apps and services. Easily integrate the Prowl API into your applications.

Good GUI Design Tool to mock up iPhone & Android applications

Save

I am about to embark on developing a mobile application for both the iPhone and the Android based phone. I have most of my gui mock ups written down on a white board and some in my head. I need to put them down on paper so I can relay my designs to others in my team. I was wondering what the best on-line gui mockup tool I could use?

I have a lot of experience with Visio and I truly like it. I want a tool that would be web based so I could collaborate with others on the team.

Does anyone have a suggestion for an easy gui mockup tool that I could use?

link|edit|flag

18% accept rate
add comment
start a bounty

offer of my own reputation for an answer to this question

What is bounty?

protected by BoltClock Apr 11 at 5:06

This question is protected to prevent "thanks!", "me too!", or spam answers by new users. To answer it, you must have more than 10 reputation.

23 Answers

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

Notepod

(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.

Image of several filled out pads

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

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

(It's missing navcontroller and tableviews)

iPlotz

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.

link|edit|flag
3 upvote
  flag
+1 for the paper iPhones. I find you can't beat a notepad for mocking up design or code. – Finglas Jan 28 '10 at 10:35
1 upvote
  flag
No more Notepod. msg from thier site "We have complied with a request from Apple to cease and desist sales of our product". – Jimmy Jan 4 at 16:41
5 upvote
  flag
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 Jan 5 at 10:03
  upvote
  flag
@Chris it boggles my mind too. The real kicker is, it seems to be working for them. – Cheezmeister Feb 15 at 23:27
  upvote
  flag
@Chris Agree with you! – Nam Gi VU Apr 17 at 9:11
add / show 1 more comment

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

link|edit|flag
  upvote
  flag
"sweet".PadRight(15) – Dave O. Jul 1 '10 at 22:24
add comment

I've found LucidChart to be a nice GUI tool to mock up iPhone applications. There is a good-size shape library that you can simply drag and drop onto the canvas and the application allows you to upload your own images to customize the mockup.

You can also make it clickable and interactive so you can simulate (and improve) the user experience. There is a free demo you can test out without signing up.

alt text alt text

link|edit|flag
add comment

For Android based apps, DroidDraw is best tool I tried.

http://www.droiddraw.org/

link|edit|flag
4 upvote
  flag
It's really lacking in the number of available ui elements, isn't it? – nlucaroni Nov 23 '10 at 22:43
1 upvote
  flag
I don't get why everyone suggests DroidDraw its just absolutely worthless! – emalamisura May 17 at 23:46
  upvote
  flag
WireframeSketcher mentioned below in one of the answers looks like a good option which is free – strider May 27 at 19:43
add comment

Google has an experimental development environment for andriod that contains GUI designer called App Inventor for Andriod

Screen shot for App Inventor for Andriod

link|edit|flag
add comment

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

http://mockupsgallery.com/updated-iphone-stencil

http://mockupsgallery.com/android-stencil

iPhone Mockups

link|edit|flag
add comment

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!

link|edit|flag
add comment

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

AppStore

Homepage

link|edit|flag
  upvote
  flag
not bought the full version yet, but so far this is excellent. so quick to get a prototype up and looking great. – Nik Burns Mar 18 at 21:48
  upvote
  flag
This looks really cool. Gonna give it a try today. – jeremcc Apr 7 at 16:41
add comment

The Photoshop set of GUI elements from 320480.com is definitely worth checking out.

link|edit|flag
add comment

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 - http://www.omnigroup.com/applications/omnigraffle/ iPhone stencil - http://graffletopia.com/stencils/413

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

link|edit|flag
add comment

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

link|edit|flag
add comment

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 iphonemockup iplotz protoshare cogtool.hcii.cs.cmu.edu justinmind

Hope this helps.

Thanks, Haider

link|edit|flag
add comment

Take a look at mockflow.

link|edit|flag
add comment

I use these design templates for hand drawing

link|edit|flag
add comment

Not for android but useful to quickly build a mockup on the iPhone http://dapp.kerofrog.com.au/

link|edit|flag
add comment

Basic4android includes a GUI designer made of two components. The control panel is part of the IDE and the visual component is displayed on the Android emulator / device: Basic4android

alt text

link|edit|flag
  upvote
  flag
uhmmm, it's not free. The lowest version costs $39. – anticafe Jan 6 at 2:14
add comment

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

http://keynotopia.com/

link|edit|flag
  upvote
  flag
It looks great, but unfortunately it's not free – anticafe Mar 3 at 3:17
add comment

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

http://iphonemockup.lkmc.ch/

link|edit|flag
add comment

You can also build interactive iPhone mockups with FlairBuilder. Check it out at http://www.flairbuilder.com

link|edit|flag
add comment

you could use this tool:

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

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 :)

link|edit|flag
add comment

StencilsApp 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.

link|edit|flag
add comment

For Android I think Pencil 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

link|edit|flag
add comment

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

link|edit|flag
add comment

Your Answer

 
draft saved

Not the answer you're looking for? Browse other questions tagged or ask your own question.