If you’re already a UX/UI designer or you’re just starting off, you may be familiar with the struggles of deciding on which prototyping tools to use to get the job done. For this post, we’ve listed three different tools that we’ve tried out for a short time. We also provide some screenshots that highlight certain features for each tool.

InVision

InVision
If you’re looking for a high fidelity web/mobile prototyping tool, then InVision is a good place to start. It is used by thousands of large companies and enterprises, and they also have an increasing total of two million users.

And here’s why:

  • You can create an entire prototype of your project that can perfectly reflect what the final product will look like
  • Lets you add some interactvity and flow between the webpages or app screens.
  • It also features integrations with user testing tools such as UserTesting and LookBack
  • Can also be used as a project manager because it allows multiple users to collaborate on a project in real time

This is how it looks:

  • The following page lets you view, add, edit or delete screens (for mobile apps)
  • You can upload from Box, Google Drive and Dropbox

  • The following images illustrates the project management side of InVision
  • Includes project tracking by assigning statuses to the pages/screens and keeping track of activity. This lets you see who made the change and when the change was made

  • By clicking on the ellipsis on any of the status tabs, you can move all items to a different status with a single action

  • With Liveshare you can walk through a prototype with your team and work together to make improvements:

Pidoco

Pidoco is similar to InVision but it focuses on providing a lower fidelity depiction with its wireframing tool.

Features Include:

  • Being able to create wireframes and prototypes using stencils (buttons, text boxes, etc. that have very simple designs)
  • Provides an easy way to add interactions to stencils (full interactvity)
  • Live collaboration with team members
  • Run apps on mobile devices (iOS + Android)
  • Can create reusable custom components

This is how it looks:

  • The first page after creating a new project starts you off by selecting from a wide range of predefined resolution sizes. This page also lets you set your own screen size.

  • This is what a new project looks like in design mode with some added content
  • Added some text, a button and a drop down menu

  • Here we’re creating a new interaction for an image

  • Now we’re in preview mode which lets us interact with the app we just made!

Webflow

If prototyping mobile apps isn’t your thing and you just want something that focuses on web page prototyping, then look no further because Webflow has you covered. It has all of the prototyping features that helps you do a bunch of things all at once.

Features include:

  • All of your prototypes are production-ready, meaning it will easily migrate into a real website powered by HTML, CSS and JavaScript
  • Prototype designer is purely visual — no code writing necessary
  • Your prototype will automatically adjust itself on smaller screens
  • Webflow provides project management features allowing you to include your team members into the development process
  • Although it may be a drag and drop tool, it can still cater to people who have a background in coding HTML, CSS and JavaScript through the usage of coding terminology (see images below)

This is how it looks:

  • Creating a new website will take you to this page of templates, the free templates look great!

  • You will be taken to this screen once you’ve chosen a template

  • You can just drag and drop elements onto the page

  • You can program buttons to redirect to certain pages or send data to files via POST or GET

  • You can also add interactions to elements by setting triggers

  • Exporting website code is also possible:

Get started now!

All three of these prototyping tools provide free trials to get you started, so if any of them meet your needs then it is strongly suggested that you try them out before committing to a license. Regardless of whether you’re thinking about switching to a different prototyping tool or you’re making your first decision, the three tools listed in this post will provide you with a wonderful prototyping experience.

Leave a Reply