Apps for Creating Wireframes, Mock-ups and Prototypes

For medium fidelity prototypes one might use several tools. A medium fidelity prototype usually has some visual treatment and expresses the hierarchical structure of the content. It is usually based on the previous research done with personas, scenarios, user stories, sketching and feedback. For testing and assessment, showing interaction between various views is beneficial.

What to choose?

Developers might program simple prototypes, just to express the interaction between views. This can be done from scratch or for instance with a help of libraries like jQuery, CSS Blueprint or Bootstrap or APIs. However, all project are different so there is no standardized approach.

Graphic designers tend to use stencils and desktop design softwares such as Photoshop, Illustrator or Fireworks + UI packs. Connections between views can be done in Fireworks or images could be saved and interconnected with online applications such as InVision.

Another approach is to use desktop or online application which especially dedicated to creating mockups and prototypes, such as Just in Mind, ProtoShare and Balsamiq.

If  paper prototyping left many open questions and there is still great uncertainty in the information structure, simple wireframes might a best choice, e.g. Mockingbird, Frambox and OmniGraffle (Mac).

To consider

When selecting a suitable approach, think about following:

  • Device on which the software will be mostly used (e.g. web browser, phone, tablet etc.)
  • Optimal effort (time to develop vs time to make changes)
  • Testing situation

For instance if you are developing a software which includes a calendar as one of the many other features, putting any typical calendar in the mockup is enough. If your application provides a totally new way of thinking about time or time management, then you might want put more thought in it and design it with an appropriate level of effort.

Examples

Here is a brief list of some of the options.

Web

Mockingbird – Free, online

Mockingbird

MockingBird

MoqupsFree, online

UXpin – Trial, online

Screen shot 2013-01-22 at 3.55.32 PM

Balsamiq – Trial, desktop

Balsamiq

Balsamiq

Mobile

Codiqa – Trial, Online

TiggziFree limited, online

Screen shot 2013-01-22 at 4.14.24 PM

tiggzi.com

PopApp – Appstore, mobile app (for connecting paper prototypes)

Screen shot 2013-01-22 at 3.48.12 PM

Others

Advertisements