During the early stages of a project’s development it’s traditional to build a prototype. Typically it’s smart to create a prototype to ensure that your perception of the project matches the clients. In this guide I’m going to walk through the top developer prototyping tools on the market.
There are literally hundreds of applications to help you build prototype apps. This post would take a few days to give each of them a review. Therefore I’m instead going to discuss the tools that I use for the projects I work on.
Also, I’m not going to only list services that are defined as prototyping tools. By definition a prototype is anything that visually illustrates to stakeholders how an app will look and/or behave. With this in mind I’m going to walk through the tools that I use to serve this purpose. And that I’ve had the best experience working with.
Top Developer Prototyping Tools
Starting off the list of the top developer prototyping tools is InVision. If you’re familiar with the design space you may have already used InVision. The service has been a market leader for quite a while and for very good reason.
At its core InVision lets you build fully functional prototypes. For example, you can:
- Upload Photoshop files to show a design.
- Add in the sections where users can interact with the designs. This may include features such as clicking on a button or sliding your finger across a portion of the screen.
- Share the prototype with project stakeholders so they can test it on their own computers and phones.
When I started as a developer years ago, these types of tools didn’t exist. In order to build a prototype I would build an application with minimal backend functionality. This process would takes days or even weeks depending on the complexity of the project.
However, thanks to tools like InVision I’m now able to create a working prototype in a few hours. And clients are then able to review the entire system and give feedback.
InVision is great with web based designs, but where I find it the most helpful is with mobile projects. Giving clients the ability to play with a prototype on their phone that acts like a real app is truly helpful.
Next on the list is a service called Lay Out It. This service is a code based website that generates full Bootstrap themed code. Therefore Lay Out It is only useful if your web application utilizes the Twitter Bootstrap design framework.
Many of the apps that I build utilize Bootstrap, especially during the early stages of development. With that being the case I’ve found myself using this tool on a regular basis.
Lay Out It lets you drag and drop web app elements and when you’re done it will generate the HTML code that you can paste into your application.
Technically, this type of service wouldn’t be considered a prototyping tool. However I’ve come to use it so often that I wanted to include it so that you can take advantage of it on your projects.
Next on the list of the top developer prototyping tools is the Explain Everything iPad App. Many of the applications that I build are microservice based API applications. These types of apps are difficult to show to clients without walking them through the code itself.
Therefore I like to use the Explain Everything app so that I can literally draw out the software functionality. Explain Everything allows me to:
- Record my voice.
- Draw on the screen.
- Record the full session as a video screencast.
- Share the screencast with stakeholders.
This type of prototyping tool is great when you need to be able to describe a piece of functionality that is 100% on the backend. With that being said this may not be the best selection if your project has a user interface, so keep that in mind.
Fourth on the list is using a slide based tool such as PowerPoint or Keynote. In the book Sprint, the authors explain how the Google Ventures team utilizes slide based prototypes extensively.
In the book they explain that building a functional prototype in a few days is not always practical. However it is possible to mimic an application’s functionality if you’re creative with slides.
In a slide based prototype you can perform tasks such as:
- Showcasing a design.
- Include animations, such as the ones you’d see in iPad applications.
- Walk through a logical progression for how the project will function.
Another bonus to using a slide based prototyping system is that there are a number of free options available. If you’re on a tight budget and can’t afford a professional prototyping service, this may be a great option. The top three slide services I’ve used are: PowerPoint, Keynote, and Google Slides.
Last on this list of top developer prototyping tools is the Marvel app. Don’t get this confused with the comic book company. Marvel is a great tool that lets you build fully functional prototypes with a strong focus on smartphone apps.
If you are a mobile developer and need to showcase an iOS or Android app prototype to clients I’d recommend that you check Marvel out. You’ll discover that it’s very similar to InVision, however it’s always nice to have alternative options to look at.
A Word of Warning for Prototypes
Before this post ends I want to offer a word of warning. Building great prototypes is an important stage in a project’s lifecycle. However please make sure that clients are completely aware that a prototype is simply a design.
When I was new to freelancing I’d be excited whenever I had created a great looking prototype and I’d send it off to the client. The clients would love to see and play with the system, but there was a negative side effect. Non technical clients will many times confuse a well constructed prototype with the finished app.
I had a number of times where clients got frustrated after seeing the prototype when I would tell them that the actual app was still a few months off from being completed.
So please take care to always inform your clients that the prototype is simply a non-functional mock up. And that the majority of the development still needs to be completed.
I hope that this has been a helpful guide to the top developer prototyping tools on the market. Please let me know in the comment section of any tools that you’ve had a good experience using. And good luck with the coding!