6 Productive Prototyping Tools
Prototyping is one of the most important steps in the design process. A prototype is the sample model of the application (web and mobile), which gives us the ability to test the app and determine if the solutions and decisions made for the application are efficient. Prototyping tools help in finding emerging trends and to solve the interaction problems that may arise.
Dozens of prototype tools are available in the market. An initial research that we conducted helped us narrow down on the 6 best tools. They are:
- Adobe Experience Design
Let’s analyze each of them in detail.
OmniGraffle is used for creating precise, beautiful graphics, such as website wireframes, an electrical system design, a family tree, or mapping out software classes. It can be used by artists, designers, casual data-mappers, and everyone in-between. The best part of OmniGraffle is that the stencil files are readily available online for various frameworks and platforms. With a quick Google search, you can find a wide selection of stencils for UI elements on the iOS platform, Twitter Bootstrap, and more.
- It is the market leader in diagramming software for Mac.
- It has a wide variety of diagramming shapes and templates.
- Users appreciate the attractive output that OmniGraffle produces.
- The program offers Standard and Professional options for each new version and has an affordable upgrade charge. This allows users to get the new version at a significant discount.
- OmniGraffle is a downloaded product and can be used for as long as it’s compatible with your device.
- It’s a Mac-only product.
- OmniGraffle doesn’t support collaborative editing.
- The upfront cost may be too expensive for individuals and small organizations.
Axure RP is a desktop application that gives businesses and UX professionals diagramming, documentation and interactive tools to quickly design and share interactive prototypes and specifications.
- The drag and drop interface and elements provide for quick and easy designing.
- It provides tons of online libraries of icons, widgets, templates (including smartphone templates), and other elements.
- It makes it possible to move progressively from placeholders to high-fidelity prototypes using/within the same program.
- It allows you to post your prototype on a secure website so that stakeholders can interact with it (provide users with a link and optional password choices).
- The dynamic panels can be a pain to deal with as some of the functions in them are not intuitive.
- Its standard library of shapes is primitive, often requiring extensive editing or imported libraries of shapes to fit the needs of the given project. On top of this, editing shapes and the shape of photos in Axure can prove to be more difficult than other applications.
- It does not have an extensive font selection.
- It would be beneficial for developers when coding a project if Axure included more CSS options that developers could inherit from.
Justinmind is a flexible prototyping tool that supports many devices and works well for simple click-through prototypes as well as for more complex interactions. Prototypes can be created from existing mocks or by building screens within Justinmind using the libraries of standard assets. It now supports the simultaneous execution of multiple events.
- Device-specific templates and features.
- Quick and intuitive when adding assets via drag + drop.
- Simulate feature generates a web preview of fully interactive prototype with a device frame.
- Fine-grain controls for adding interactivity to individual elements.
- Support for gesture-based interaction.
- Option to add animation to individual elements or transition effects to links.
- Moderate learning curve; takes some time to get oriented for a first-time user.
Invision is the best rapid prototyping tool. We can facilitate design discussions asynchronously, track feedback from everyone on the team, and demonstrate interactions easily and efficiently. It’s great for taking images and making clickable image prototypes that do the job effectively while saving a lot of time.
- It’s Easy to learn.
- It helps in fast execution.
- Sharing and commenting available for a collective feedback.
- Asset management feature available.
- Only good for working with existing mocks and no features present for creating or modifying elements in the tool
- Interactivity limited to hotspots or timeouts to move between screens
Adobe Experience Design CC (formerly Project Comet) is the first all-in-one tool for UX designers. We can design and prototype websites and mobile apps efficiently with it.
- Clean and intuitive interface
- Repeat Grid tool allows users to create content grids (such as post lists, inventory catalogs, and user tables) extremely quickly.
- It is fully integrated with other Adobe’s products,
- It recognizes the type of content you’re trying to drag-and-drop in it.
- It allows sharing prototypes by uploading them to Adobe servers.
- Lack of the layer panel.
- Too plain and limited tools for creating new graphics.
- The absence of styles and symbols.
- Almost no layer effects. You will barely find any layer effects except Drop Shadow.
Flinto for Mac is a comprehensive app prototyping tool that allows you to create anything from simple tap-through prototypes to comprehensive prototypes with impressive interactions. Flinto has been carefully designed for Mac to minimize complexity. There’s no programming or timelines. It’s the prototyping tool designers have been waiting for.
- 3D transformations
- Transition tags allow animations to be reused across screens
- Desktop previews with a full-screen option
- View live previews in Flinto app
- Uses artboards like Sketch
- Built-in gestures: Tap, double tap, long tap, swipe, touchdown
- Scroll groups require a lot of setup for what should be a relatively easy task
- No Photoshop import
- Have to download the free Flinto app to open Flinto documents on devices
- No animation value export, making it difficult to share specs with developers
We all have different purposes and different expectations when it comes to prototyping. Choosing the right tool is a big part of creating good prototypes on time. The following table allows you to compare the prototype tools and might help you in finding the best one.
We shall look deep into the other prototyping tools such as PowerPoint Prototyping Toolkit and Balsamiq in the subsequent posts.
The content in this post is not meant to favor or promote any of the mentioned products. This is solely my personal opinion as a tech lover.