Comparing Digital Prototyping Tools

With digital prototyping becoming more vital in web and software development, knowing what the right tool to use can depend on the objective of your prototype. Here’s an overview of some applications used by today’s UI/UX designers to create digital prototypes. 

1. Adobe Fireworks

Fireworks is a popular tool among UX designers, possibly due to the fact that it’s part of the Adobe Suite, which nearly every designer uses. It has the basic tools of Photoshop and Illustrator in one program, and it codes in JavaScript (e.g. Rollovers, Pop-ups, etc.). For Adobe users the UI is familiar, allowing for a low learning curve in understanding how the application works.

Although Fireworks does create simple interactive elements, the software is more commonly used to create design comps and individual elements that are then sent over to Flash Catalyst to configure with a higher-level of interactivity.

Projects built with Fireworks allows for easy export into Flash or Dreamweaver software, as well as HTML and CSS.

 

2. Adobe Flash Catalyst

Another tool part of the Adobe Creative Suite, Flash Catalyst allows designers to create user applications through a WYSIWYG editor, applying interactive behaviors and transitions to objects without having to write any code. Those who use Adobe apps already will feel at ease with the familiar UI and keyboard shortcuts.

As is usual for Adobe, there are plenty of resources available on their website, including video tutorials and an active online community. As far as collaboration goes, those working with this application to prototype the UI can hand it off to development to code in Adobe Flash Builder.

Flash Catalyst can import Photoshop, Illustrator, and Fireworks files, and those files can be edited in its originating program.  When a project is ready for review, it can be exported as a SWF file which is viewable on the web using Adobe Flash Player, or as an Adobe AIR project, which can run outside a browser.

What’s the best part about this program? Being able to leverage your work and send it directly into development.

 

3. Axure

A heavy hitter in developing high-fidelity prototypes, Axure has an extensive list of abilities such as providing high-level page interactions, conditional logic, dynamic content, and storing variables to pass onto other pages. Axure does not require coding, and contains a widget library, which is a collection of reusable graphics and icons that can be used for multiple projects.

Prototypes are rendered in HTML and Javascript which can be viewed on all major browsers. Viewers can interact with the prototype without having to install any additional software. For sensitive material, files can be uploaded to Axure’s server which generates a password-protected link.

Projects can have multiple collaborators, as well as collect feedback from stakeholders directly within the prototype.

I’d say Axure is an app that is definitely on the top of the food chain when it comes to building high-fidelity prototypes, with its closest competitor being iRise, discussed later in this article.

 

4. Balsamiq Mockups

Balsamiq is a desktop application used to create low-fidelity prototypes. The objects generally have a ‘sketchy’ look to them, having stakeholders focus on the functionality and interaction, and worrying about the design later.

Potential Balsamiq customers can try out the fully functional web-demo, which is intuitive to use, but left me wondering why the application is only available as a desktop application when a web-app seems completely possible (and more useful).

Final prototypes that are ready to be reviewed are exported as a PNG, PDF, or XML format.

Although not a rich prototyping tool, this application is helpful in generating ideas and brainstorming initial mockups.

 

5. HTML/CSS

The main benefit of using HTML/CSS is that it is obviously the closest step to development, if not the actual development. The biggest downside, however, is that this requires knowledge of coding. One application that can provide an output format of HTML/CSS and has a WYSIWYG editor is Adobe Dreamweaver, but from my experience, it is a bit difficult to get completely around not having to code various elements.

This can essentially be the cheapest option, since at the very basic level all that is needed is a plain-text editor to start coding the pages. Overall, this method is not the easiest option to learn if you’re a user with no prior coding experience (compared to other applications listed in this article), but it is definitely a tool that is available.

 

6. Invision

This is a new prototyping web app that has already been generating some buzz, partly because the UI looks so great and no coding is required. This was an intuitive application to demo, and definitely one of the best-looking interfaces in the market.

Invision has an extensive design library, with some great templates and toolkits that allow for quicker mockup development. The main issue I found with this app, though, is that it doesn’t simulate prototypes in a realistic manner; there are no buttons or drop-downs to make, because this application is primarily about linking wireframes together and making hotspots on a page. Clicking on a ‘pop-up’ refreshes to an entirely new page, instead of just being an overlay to the current screen.  This app works as a general ‘page-linking’ tool, but lacks the ability to do more dynamic, higher-level tasks.

 

7. iPlotz

iPlotz is an application that comes in both web and desktop format. You create clickable, navigable wireframes to create the experience of a real website or software application. Stakeholders can be invited to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

iPlotz has a Snippet library, allowing you to collect clips of graphics/code that can be used on various projects; examples include calendar widgets, login boxes, error messages, and more.

This application requires some coding knowledge, however the online tutorials that are available on the iPlotz website can walk you through some of the basics you’ll need to use the program. Although there is an online community, it is rather small with not many active participants, so if there are any major questions, you may be left to either contact support or start your own search elsewhere.

 

8. iRise

iRise creates high-fidelity prototypes for web applications, desktop systems, and mobile devices. iRise gives stakeholders the ability to fully experience the look, feel and behavior of all kinds of software before coding. The prototypes support rich behaviors, are data aware and contain business logic, creating solutions they are nearly indistinguishable from the final product.

With the use of a Definition Center (a repository for your iRise projects), multiple users can collaborate on the same document, at the same time. For projects to be viewed by stakeholders, reviewers can access the prototypes through a web browser or through iRise Reader (a free download), a desktop app that is similar to Flash Player.

Tutorials and resources can be found on the iRise website, but finding any outside sources on the web is pretty scarce. The tutorials do provide a basic understanding of how to use the software, and what the tutorials can’t answer, somebody in the community forum can.

What will keep this software out of reach for some designers is the price point, but for companies who have higher stakes in their development process and are looking to invest in software that will provide realistic prototypes for the long term, iRise should be strongly considered.

 

9. justinmind

justinmind allows you to create rich interactive prototypes that can simulate real behavior of forms, searches and validations, without having to write any code.

This desktop application has an online collaborative platform that is currently a beta release (Justinmind UserNote), which lets users review and annotate prototypes online. One feature this application offers that the other tools listed did not was the ability to perform user testing by integrating with user testing tools such as UserZoom, ClicTale, UserFly, Google Analytics and more.

Prototypes from this app are exported as HTML with all the interactions, conditions and validations defined and functional.

This application is reasonably priced, and offers a great student and non-profit discount. With a sufficient resource area to learn the basics on the software, this tool is definitely worth a test-drive, particularly for higher-level interactive prototypes.

 

10. Protoshare

Protoshare is an online web application that delivers hi-fi interactive wireframes through a drag-and-drop interface. Images, Flash movies, and other elements can be imported to projects, and custom components and functionality can be created.

The application features available in Protoshare mimic some of the key features listed in the apps above, particularly: creating interactive elements, having dynamic data, using asset libraries, being code-free, easy exporting to HTML and CSS, and lastly, collaborating with stakeholders.

————–

Hopefully you found this article to be helpful. Although I didn’t cover all prototyping tools that are available, if you think there are apps that are worth discussing, please feel free to share your thoughts in the comments.

 

Stay tuned for in-depth reviews of each of the tools mentioned above in the weeks to come…