Top wireframing tools

I’m involved with Metro Screen’s MetroAppsLab – a mini hackathon/lab for mobile apps development. Oliver Weidlich of Mobile Experience came in and gave a great presentation on wireframing – a how-to and why.

7 reasons to use wireframes in mobile app design

  1. To create the skeleton of the application
  2. To progress sketches to higher fidelity
  3. To formally plan out the interaction between the screens in more detail and all the functionality
  4. Investigate different paths
  5. To use more accurate relative sizing
  6. To use OS elements
  7. Create assets for usability testing

While the benefits of wireframing are clear, the decision on what tool to use is a bit more complicated, depending on the systems and preferences of you and your client.  The choice of a tool also affects responses from clients and stakeholders.  At this stage of the design process it’s important to concentrate on content rather than appearance. It’s too easy to be distracted by the detail of design – size, colour, whether above the fold etc.

In an informal poll over a strong cup of coffee with several digital agencies, Balsamiq is commonly used, but there are a number of others.

Popular cross platform wireframing tools:

  • OmniGraffle (Mac exports to Visio and imports – though some issues)
  • Photoshop (Cross Platform)
  • Axure (Cross Platform) -good for concept prototyping
  • Visio (PC)
  • Balsamiq

For usability testing on device

  • Keynotopia
  • Field Test App

There are additional free tools such as Mockingbird, Mockflow and Cacoo. And then there’s this  tool which converts photos into Digital Wireframes. See the TechCrunch article here:

Which tools do you use? Have you found any cross platform tools you could recommend?

About Claudia Sagripanti

Involved in the evolution of mobile marketing and advertising from the early years, including co-founding Mobile Marketing and Advertising Awards, founding chair of AIMIA's Mobile Industry Group, development of mobile advertising guidelines for industry as well as commercialisation strategy.

  • Catherine Karena Jun 28, 2012 at 08:43

    Claudia,

    Where’s the ‘like’ button. Here’s clicking a virtual one.

    Reply
  • Marcin Treder Jul 1, 2012 at 10:34

    Hi Claudia! Thanks for mentioning UXPin (http://uxpin.com)! We actually can do more than convert paper prototypes created in our notepads into digital wireframes. UXPin is the UX Design tool that let you demonstrate your design process and communicate with your team throughout it.

    We’re UX Designers and we create tools for our tribe ;) .

    Reply
  • Ian Jul 16, 2012 at 16:21

    Great list. May I suggest you take a look at Fluid UI – here’s a direct link to our new HTML5 editor:

    https://www.fluidui.com/editor/live

    iOS and Android app prototyping evolved. Touch gestures, transitions, iPhone and iPad widgets, full support for Android ICS, image uploads and more.

    For more general info about the tool, features, plans and pricing please take a look at http://www.fluidui.com

    Best,
    Ian

    Reply