What is a Prototype? Popular Tools in 2021

The views expressed in this post are the writer's and do not necessarily reflect the views of Aloa or AloaLabs, LLC.

If you're starting a new project, you need something to demonstrate your end vision for the product before it's fully built. Some users may need a fully functional product to be convinced of its usefulness, but many users will be sold on a prototype alone. With a prototype, you can get your initial user validation before you've sunk precious development hours into the project.

Prototypes drawn by hand

When lookin specifically at software, a prototype is a fundamental building block of the design process. A software developer will first look to a prototype to test users and gather feedback before investing too much effort. In most cases, your prototype will fail, but that isn't a bad thing! Since prototypes are low effort, they are low risk environments. It is a time for you to test ideas, processes, designs, etc. without sacrificing a large investment. In other words: "fail fast, fail often."

The more we can fail, the quicker we can figure out what doesn't work. Now, with each failure, we have to be strategic. If you are investing a ton of time and effort into building a full functioning app for each failure, that is a bad. However, if you are strategic and only build a prototype for each round of iteration, then failures can very much be used in your best interest.

Low, Medium, & High Fidelity Prototypes

Let's dive into the difference between a low, medium, and high fidelity prototype. The most former, a low fidelity, is low in effort. You can think of this as just lines and notes. Some may look to sticky notes or whiteboards, while others may look to actually drawing with hand or using an online tool. The important take away here is that you are focusing on collaboration and brainstorming — there is low effort put into the prototype itself and if you are to fail, you will be failing very quickly with minimal effort.

A medium fidelity prototype is like a wireframe. For more about wireframes, check out our other blog!

Last, but definitely not least (in effort), is a high fidelity prototype. A high fidelity prototype is going to look a lot like your final product. In most cases, with software, a high fidelity prototype essentially serves as a final product that just isn't functional. So, if we were referring to a high fidelity prototype of Facebook, a user of the prototype could go through all of the features and see what everything would look like, but you can't personally interact with the prototype, nor interact with others. You are limited by the "clickable" boundaries, otherwise referred to as clickable prototypes. When you interact with the prototype, you can click through different screens, but you can only do so because those screens have been fixed and prepared, it isn't truly dynamic.

Aloa's Top 3 Prototyping Tools of 2021

InVision

Image comparing Low, Mid, and High Fidelity prototypes

InVision is probably the most popular prototyping tool out there. With the ability to support tons of file types (PDF, JPG, PSD, GIF) as well as integrations with common tools (DropBox, Trello, Slack, JIRA, etc.), InVision is fit for scalability and ease of use. Used by big name brands all around, you can't go wrong with InVision.

How Much Does InVision Cost?

Free Tier

  • Free...forever!
  • Up to 3 active users
  • Up to 3 prototypes

Pro Tier

  • $7.95 per user/month
  • Up to 15 active users
  • Unlimited prototypes

Enterprise Tier

  • You have to contact InVision to get a quote!

Their Free plan is quite generous, and the Pro plan is affordable at just under $8 per user/month with unlimited prototypes. For most startups and small businesses, this should be sufficient. We're not sure what their enterprise version costs, but it looks like they're willing to be flexible based on the level of support and features you need.

Marvel

Marvel App screenshot

Marvel is a startups dream app when it comes to whipping up prototypes super quickly, but also inexpensively. With interactivity, dynamic transitions, and tons of unique gestures, a prototype with Marvel really makes you feel like you're in the actual application. Iterate as much as you need, with whoever you need!

How Much Does Marvel Cost?

Free Plan

  • Free...forever!
  • 1 user
  • 1 project

Pro Plan

  • $12/month
  • 1 user
  • Unlimited projects

Team Plan

  • $42/month
  • 3 users
  • 5 prototypes per user

Enterprise Plan

  • You have to contact Marvel to get a quote!

Marvel's Free plan is a little more limited compared to InVision's, but the beautiful transitions makes up for it. We think their Pro and Team plans are totally worth it.

Figma

Figma demo screenshot

Figma is not only powerful, but also super collaborative. Think Google Docs, but for designing beautiful mockups, prototypes, and even clickable wireframes. You can design some nice screens as well as build a prototype flow. I would say that Figma takes a little bit more of a skillset to use, but once you figure it out, there is no turning back. We at Aloa use Figma for all of our prototyping!

How Much Does Figma Cost?

Starter Plan

  • Free...forever!
  • Unlimited drafts
  • Up to 3 files with other editors
  • 1 project
  • Up to 3 pages per file
  • 30-day version history

Professional Plan

  • $12 per editor/month
  • Unlimited projects
  • Unlimited version history

Organization Plan

  • $45 per editor/month
  • Everything in Professional, plus...
  • Private plugins
  • Org-wide design system
  • Shared fonts
  • SSO + advanced security

Figma recently changed their Starter plan details to be a little bit more restrictive, and our chart is up to date. We still think Figma's free Starter plan is more than enough to show you just how powerful it can be. We will likely make the choice soon to upgrade to their Professional plan, and it will be worth every cent.

There you have it. Prototyping is a critical part of any development experience. Make sure you are taking the right steps and using the right tools! If you have any questions, you know where to find us: resources@aloa.co.

Aloa is your trusted software development partner.

Hire your team
Tag:
Innovate freely ✌️
See why 300+ startups & enterprises trust Aloa with their software outsourcing.
Let's chatLet's chat

Ready to learn more? 
Hire software developers today.

Running a business is hard,
Software development shouldn't be ✌️