Prototyping Tools

Prototyping Tools

Depending on the stage and situation you want to use physical or digital tools or a combination of both.

Starting from scratch


Physical prototyping tools

If you don’t have any existing screens, proof of concepts (or sometimes even a functioning product), you want to start with pen and paper because you can create a testable prototype within a few minutes, just to communicate the idea. Personally, I am a huge fan of paper sketching at the beginning of any new idea. It’s not just blazing fast, but it also helps you clarify the thoughts in your head.

This is how it typically works out for me. I start sketching in my notebook (or any piece of paper if I don’t have my moleskin nearby). First, take sucks. Flip the page. The second take is better, but alignment or sizing doesn’t fit. Flip the page. The third take is good enough to think about it a bit more. Make corrections right in the sketches without redrawing them. It does look messy and that’s fine =) Then, I take several sheets of letter-size (A4 for Europe) paper with a dotted grid on them, and transfer the latest iteration from the notebook. That’s it. Your first rough prototype is ready to be tested. The best thing about paper prototyping is that you don’t get attached to the results at all, so it’s easy to throw them away and start over. It literally, takes 5 minutes to sketch a few screens. Super agile =)

Another popular option – whiteboards, which is great for a team session thanks to its size. However, what I noticed is that if I am doing it alone, paper works much better for me.


Digital prototyping tools

There are a plethora of modern prototyping tools out there, and most of them are amazing. In the recent years, UX design and prototyping has been trending, and following the best capitalism traditions, where there is a need, there will be an entrepreneur to fulfill this need. In case of software prototyping tools, there are dozens of companies solving this problem in various “sizes and shapes”. Everyone tries to be different. Some focus on specific unique value propositions (UVP), some are adding more bells and whistles. It feels like there is a new “best prototyping tool” released every single month, and becoming an expert in all of them seems like a full-time job on its own. That’s why lots of entrepreneurs stick to the tools they learned about first. The choice of spending time learning a new prototyping tool versus launching your new venture is obvious.

This played a great favour for Invision. They were one of the first (or maybe the first) services that figured out how to empower people without design background and create a very decent simulation of a functional prototype. In fact, they are “faking” it, but who cares, right? It’s a close enough experience to communicate to users or stakeholders without a single line of code. Basically, Invision (and most other prototyping tools) sells time. It can save a ton of time especially for startuppers who are searching for the right product. (I am not affiliated with Invision, but it’s one of my favourite tools, and it helps a lot of people prototype faster). Back to the main topic =)

These digital prototyping tools require different levels of coding and design skills. Some of them are easy-to-learn for anyone, no coding necessary. Plus, you can easily share your prototype with your users or investors. What else do you need? The cons of this type of simulation, is that you cannot replicate full native experience, e.g. not all animations and transitions are available within these tools, but they are getting better and better, and they are definitely good enough to start testing your prototype, which is what you need to do as fast as possible (at least in the beginning).

Some tools allow you to create design right there, and others require you to use a separate app (e.g. Sketch or Photoshop) to craft the mockups and then upload them to this prototyping tool to define interactions and screen transitions.

To summarize, there are lots of tools, and they vary in what you can do with them, how fast you can create a prototype, and what skills you will need to acquire (or get some help with). I will be reviewing the main tools in further articles, covering their pros and cons (and potentially, video lessons. You can let me know which tools you want me to make some training videos for, first via email.)


Hybrid prototyping tools

The third category is a mix of physical and digital elements, and a good example is iOS mobile app “Pop”, which allows you to sketch your screens on paper, take photos, and link them together using the mobile app. As a result, you will have an interactive prototype that you can test using a mobile device. I tried this app once when they just launched, and it was OK, but I didn’t include it in my toolkit.


Starting with an existing application.

Sometimes, you may start with something that’s already created or live. In that case, the most time-efficient option is to use what exists and start testing it. As an example, there may be a proof of concept or live web app that you either inherited or somebody else created for you. Start building off it (unless it was tested and you believe it needs to be thrown away completely =) and just go test what you have asap. Then, iterate based on the results. This may save you some time or may send you down the wrong path =) so be careful how you use it. What I always try to find out before testing somebody else created is how they did it, what was the reasoning behind the design decisions, and what user insights they used to create it. If possible, sit down with the person who made it and just ask them to fill you in on their thinking process and who they ended up with that design. In most cases, there will be some valuable information they can share, but always be mindful of other person’s (and yours for that matter) biases that influenced the decisions they made.


My favourite prototyping tools

After years of designing and testing prototypes, and trying out different apps, this is my main toolkit (with increasing fidelity):

  1. Pen & Paper
  2. Balsamiq
  3. Sketch + Invision

I will show how I use this tools in future lessons.