Prototyping websites and mobile applications is a step in the design process that will pay off quickly. Depending on how complex the website is and how skilled the user is, there is a prototyping tool for anyone. The benefits of prototyping can be seen with the natural feeling of the website or app, as users will feel the intuitive flow. App designers, programmers, and web developers all benefit from the process of prototyping, which is why the practice is becoming more and more popular for creating and improving websites and mobile applications. Recently, the number of tools available for prototyping has absolutely exploded, saturating the market with prototyping programs.

1. Invision

A very simple yet quite intuitive prototype tool that lets users upload their projects in a png or psd format and will add a hotspot to transform the static image into the interactive prototype complete with clickable items, gestures, transitions, and moving animations. With this product, team collaboration is encouraged with areas for comments on the progress of work. It can be synchronized with Dropbox, Google drive, and Creative Cloud so that the prototypes will be updated all by themselves each time that the source file is edited. Users can also view the edit history and previous versions of their projects.

2. Balsamiq Mockups

This product that runs on Adobe AIR, and represents the interface elements in a way that is refreshing for users. Those that are using Balsamiq can change the wireframes to look less like a draft. For those that do not have the ability to hand-draw sketches, Balsamiq is ideal as it allows users to produce roughs that are of great quality. There is also a plethora of screen elements for users to interact with along with mockups that are exported into a style of XML. While not being exclusively a prototyping tool, Balsamiq aims to communicate the ideas of a proposed interface through wireframing.

3. Axure RP Pro

This product has quickly become the first choice for those in the information architecture and user experience communities. Axure allows its users to construct wireframe models, generate prototypes, and document functional specifications all while using the built in control system. It can help with increased productivity with its capability for quick wireframing and generating of prototypes. Users can play with custom builds, standard widgets, and open ended canvases. It can generate rich HTML prototypes that are very complex and not much for beginners. Axure is a program that is only run on Windows.

4. HTML

It is possible to develop your own prototype in HTML if you have the skills to do so. Those who are producing front-end code would find this especially useful, as it will be agreeable with the standards of the final website in any case. Choosing to develop the prototype this way will save time and money by reducing the total duration of production. Even those who are not proficient in writing their own HTML, it is possible for them to use other platforms to assist in producing a healthy visual representation.

5. Keynote or PowerPoint

These are both reasonably priced specialized software. They are conducive to producing simple but rapid prototypes. These programs are compatible with the skill set of many teams, allowing for the immediate contribution of any team member. You can export the prototype as HTML or Flash, but the downfall of Keynote and PowerPoint is that they lack a handful of the more specific interactive elements like between states, and the logic path is more linear in nature.

6. MockupScreens

This Windows only application focuses mostly on building simple prototypes from a number of wireframes that are based around similar screen elements. The prototyping function is limited and only available through the MockupScreens application. While this is a drawback, users can actually export the screen as an image file or as a simple HTML interpretation. It is at the cheaper end of the spectrum and does have limits in terms of functionality, but that may be perfect someone that does not need a lot of options in their prototyping tool.

7. Smart Draw

Not only dedicated to prototyping and wireframing, Smart Draw is used for diagramming as well. The functionality is a bit reduced as compared to higher-end applications, but it does have a standard template suite and a couple of auto-generation features. When prototyping with Smart Draw, you can add uncomplicated dynamic elements to a page with exportation as a PDF. One caveat of Smart Draw is that it is only available for use on Windows.

8. iRise Pro

As the first of its type of program on the market, iRise Pro is geared toward more experienced and higher level markets. This programs allows its users to work on projects with very large teams that will need a broad suite of products that will cater to the team throughout the entire lifecycle of the development of the prototype

9. OmniGraffle Pro

This program is best suited for use with content maps, screen flows, and wireframes as well as a prototyping tool that has the ability to link pages. OmniGraffle allows users to bring forth a finished HTML prototype in just one simple operation. When reviewing the prototype, there are tools to annotate the documentation, adding notes and other documentation as you go. There is also an extension that allows for importing and exporting content from other platforms to support team collaboration. There is support available online with a large community with many resources.

10. Visio

Visio started off as an add-on for Microsoft Word, filling in the void for a tool for technical and business diagramming and then grew to become its own separate product. It remains strong in the documenting of diagrams and has a limited ability as far as prototyping tools. It is best suited for generating content maps. With updates came the addition of plugins, including a UML import plug-in.

11. iPlotz

This new web application is aimed at the developmental and design portions of the market. This program will bundle project management functionality with wireframing, collaboration, and testing the generation of prototypes. Because this application is web-based, it can be used wherever there is access to the internet, allowing for a real collaboration remotely with design and implementation. It is a professional and attractive application, encompassing all features that are needed all the way from management to preview. This tool is perfect for anyone—designer or developer. It can generate wireframes rapidly because the only focus of the program is to design websites and nothing else.

12. ConceptDraw Pro

This program aims toward the technical diagramming and business market, and is quite comparable to its competitors in the way of the functions that it provides. One unique quality of ConceptDraw Pro is that is has its own scripting language that can be used to generate complex and customized prototypes. Though the specific scripting language is available, it is not totally necessary to use. Designers are able to use the standard for exporting to HTML or PDF if they choose to for prototyping. Web designers can also use an additional plugin designed specifically for them, as it will streamline the process of design and allow for easier alteration of the structure of site and content.

13. Lucid Spec

This is a Windows-based application that is comprised of a prototype testing mode and rapid screen drawing tools. The prototype testing mode is known as “instant application simulation” and it can be viewed either in full screen or using the application itself. Users can even opt for the Lucid Spec Player—which is a stand-alone app allowing for the testing of prototypes without having to download the full application.

14. UXPin

Many outlets report that UXPin is one of the best prototyping tools. The flawless transition from paper to web prototyping are what makes it so noteworthy. There are notepads available for both web and mobile prototyping, enabling the user to work offline. If the user chooses to work on the computer, they can take a photo of their mobile or web prototype on paper and then work with it directly from the application. Users can create their wireframes in a very simple way, using the libraries that encompass however many thousands of components that are ready to be used, like bootstrap elements. Teams can work together on their prototypes in real time, and can actually measure the precise distance between elements. Images that are used can be edited right in the application, adjusting contrast, brightness, transparency, and sharpness. Users are also able to create new interactions that will simulate the finished product. The prototype can then be exported in any number of file types.

15. Justinmind

Rather than just being used as a web-based application, Justinmind can be downloaded to the user's computer allowing work to take place offline as well as online. This application facilitates everything in the process of developing a prototype from designing to all the way to other advanced panels for administrators to use. There are items available from the user interface libraries and the ability to create templates. One positive aspect is the ability for users to download a number of add-ons that are ready-made modules like bootstrap elements. The mobile prototypes may be shared with team members and then in turn tested out on smartphones. Team members and users can comment on all the changes that have been made so that the collaboration runs smoothly. The application itself is fairly simple to use and is great for a novice.

16. POP

Mobile prototyping done with POP allows for ideas to transfer from paper to digital prototypes easily. The users can take a picture of their sketch and upload it to POP. Switching between views is easy and users can select their own interactions and gestures. POP is used seamlessly with Dropbox, making it easier than ever for users to share their work with others such as team members or collaborators. The program is free if used for two projects, but after that there is a monthly fee.

17. Marvel

With Marvel, users can not only create prototypes of websites, but mobile applications as well. All that is needed is to upload the files or take pictures of the sketches. These static images can be transformed into dynamic and interactive prototypes that have any number of animations, gestures, or transitions. The free version is available with limited usability, and then there is a monthly fee when the threshold is met.

18. Adobe Fireworks

Fireworks allows the production of both high and low quality prototypes, with the use of smart guides and nested symbols. When developing prototypes, this program will also generate the code that supports it. The code is hindered just a bit when it is generated automatically like this, so it will have to be edited a little in order to be used in the final model for production. Adobe Fireworks can be used with any number of objects the individual has in their Adobe Photoshop or Illustrator library such as brushes and similar elements.

19. Adobe Flash

This program is best used to produce screen flows, or rapid interactive prototypes but it is not suitable to be used for wireframing or specification documentation. Through the use of features like the timeline, drawing tools, and library objects, users can produce an interactive prototype in almost no time at all. Flash is especially useful when being utilized for reproducing intermediate states that are difficult to produce with other static presentation tools.

20. Pencil

Used as a free plug-in for Firefox, this application allows users to build their own wireframes and prototypes. Its prototyping tool is of better quality than you would expect for a free plug-in. It allows users to throw together a decently high quality mockup very quickly. Be aware though, that users will still need to produce the elements of the visual design for this program because it relies on pre-made graphic elements that are used by dragging and dropping.

Author: Garenne BigbyWebsite: http://garennebigby.com

Founder of DYNO Mapper and Former Advisory Committee Representative at the W3C.