Tools for creating mockups for mobile device UIs [closed]

Question

I am looking for tools that can help me to create UI mockups for different mobile phones such as iPhone, Android and Windows Phone 7 devices. Is there any application that can do this?

Answer 1

If you are going to be prototyping for iPhone, there is a very interesting iPhone Mockup tool I found recently.

You might also want to consider the listing provided by this article, it has a lot of stencils and tools on the subject.

Answer 2

Good question - Balsamiq Mockups may be your best bet. They have iPhone controls built in, and someone has contributed controls for Windows Phone 7. They also have stuff for Nokia platforms, etc. Not sure about Android options here. Keep your eye on Balsamiq's Mockups To Go blog for further contributions from the Balsamiq community.

I also created two lists on Twitter following wireframing and prototyping tools, which you might consider following to see if those companies integrate support for those platforms. Since Windows Phone 7 hasn't launched yet, though, a lot of them haven't moved into that space yet.

Answer 3

Also check out Pencil for Firefox.. and the Android stencils over at the android-ui-utils open source project (blog post here).

I also hear Adobe Fireworks is very good for UI prototyping (apaprently with support for interactive mocks and 9-slice shapes) ... I haven't tried it myself though.

Answer 4

There's a dedicated tool for the iPhone (and iPad) which actually runs on the iPhone - Interface.

As Rahul pointed out, Balsamiq is a good choice and Axure also has dedicated libraries (at least for the iPhone - I haven't checked for the rest).

Answer 5

I'd like to add the WireframeSketcher Eclipse plugin to the list. A very nice and easy to use prototyping application that can be used right out of the IDE even by non-programmers.

One nice advantage of WFS is that the screens are saved as XML files, which allows easily storing them in a version control system and diff'ing and merge'ing them to keep changes organized.

While it was initially created for mocking up "normal" applications, some users have contributed mockup components - called "stencils" - for iPad/iPhone/Android apps (see the WFS Mockupgallery).

Answer 6

I often use gdocs. Im most flexible with it and Im used to it. I love the way u can share, discuss and collaborate the sketches. See here for example: Two step selection in windows phone 7

Answer 7

You can use Fireworks also or you can try and check this app http://www.fluidui.com/ dedicated solely on iPhone and Android for creating of mockups. :)

Answer 8

Here is another tool that can help you iPhone Wireframe Kit - Google Docs

Answer 9

Also, Please add this tool in your resources.

DesignerVista 4.0 for iPhone, Windows Phone 7 and Android Mobile GUI Mockups

http://www.designervista.com

Answer 10

I've preferred Fireworks for a long time now, but recently I moved to OmniGraffle (since Fireworks started to get really buggy and slow on my Mac). I've quite happy with the choice so far. Here's some very nice stencils for iPhone and iPad which includes both real graphics and grayscale versions for OmniGraffle.

Typically you start out with grayscale wireframes and add some graphics if really necessary. Personally I work faster with grayscale and it makes the wireframes stick to describing features and navigation, not colors.

Answer 11

I tried couple of methods. Comments and links are as follows;

• Photoshop or Fireworks with this http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/ Standard way, takes a bit longer to fine tune layouts.

• Interface app for iphone Takes too much time but perfect for prototype and production too..

• Keynote Kungfu - Keynote, Powerpoint template for prototyping iOS Best one yet, quick as keynote gives alot of hand, multiple export options.

Answer 12

I love Cacoo; it's my go-to for simple wire-framing and they have great options for iPhone, Android, etc. I've used other tools, but this has been the best for me, to mock something up before building it myself or with my friends.

Answer 13

You see, there are many tools. The right choice always depends on your previous experience and skills and obviously the context of your task. What do you want to show and and to who.

Additionally to the list I can recommend: - if you want to explore all kinds of transitions, check Adobe Catalyst (or Flash) - if you need to create specifications afterwards, the benchmark currently is Axure RP6

Actually, you can use whatever you have, as long as you know what you want to do and who is the audience of your deliverable ;)

Answer 14

Cannot add a comment to Rahul's post so I will mention here that Balsamiq's custom mockups site is relocating here https://mockupstogo.mybalsamiq.com/projects and its in a much nicer format than the Posterous site.

@OneWorld you can subscribe to http://mybalsamiq.com for $12 per month. But you are better off buying the desktop version IMHO.

Answer 15

For iPhone / iPad I use the following: App Cooker and iMockups

Both are iPad apps.

Answer 16

Axure all the way! I have spent countless hours getting a prototype to work on mobile. The problem with every other program I have used is that they dont handle detailed forms. I had to prototype a workout form on the phone. Axure could handle the form 'remembering' the users choices when bouncing around from screen to screen. (ie: When the user selected 'activity' and they go to the next screen with the list of activitys, they could choose 'Run' and have that bounce them back on the previous screen with 'Run' prefilled. They could then choose the sub-activity, lets say 'treadmill run'. It would then pop me back on the original form screen with 'Run' and 'Treadmill Run' populated on the form.) Some other programs would handle this as a dropdown, but of course this is handled differently on the phone. Axure is the only program that would support this.

There is also a setting in the newer version of the software that allows you to adjust the viewpane of the prototype so that it looks like an actual app on the phone. It supports functions like 'tap' that are mobile functions.

On the site, there is a free trial. There are many widget libraries that are supported, even mobile UI elements.

I HIGHLY recommend this program!

Answer 17

You may want to try our tools:

1) Notepad for rapid paper prototyping of iPhone Apps GUI elements are on separated post-its. After prototyping you can take a picture of your design and send it to the UXPin App. It will be auto-converted for digital, fully editable, wireframe.

2) UXPin App - wireframing tool with full live collaboration (people can edit the same prototype in the same time) and ability to recognize paper prototypes from UXPin Notepads. You can wireframe iOS and Android apps. We're thinking about Phone 7.

I don't want it to be just a marketing post so - please remember that Apple itself got nice SDK with great tool XCode 4. You can quickly create UI there using traditional drag&drop method.

I also used to use Axure for both iPhone and Android wireframes.