Why you should start prototyping

Costa Paes
Artificial Industry
4 min readJun 2, 2017

Imagine this: you are spending hours designing a complex user interface but it ended up being a complicated mess. You have to start all over again. This is not only a waste of time, but also a waste of money and energy on something you could have avoid. Read further to get to know how you can avoid this.

What is lo-fi prototyping?

Lo-fi stands for low-fidelity. Creating a lo-fi prototype means you create a quick and simple representation of a high tech concept. The purpose of a lo-fi prototype is receiving feedback to improve the user experience of the product. A lo-fi prototype can be as simple as a paper drawing, a cardboard or digital wireframes. Don’t be precise while making lo-fi prototypes, it’s not meant to discuss the esthetics of the user interface. After all, the sketches don’t even need to look like the final product. You should focus on the page-flow and usability of the product instead.

From lo-fi to hi-fi

The difference between lo-fi and hi-fi prototyping

High-fidelity prototypes looks, feels and works more, in contrast to lo-fi prototypes, like the final product. This is basically the prototype that you make before the designer hand it out to the developer. Once the testing with a hi-fi prototype has been done without any major issues, it’s time to develop the product.

The reason why you should start making lo-fi prototypes

For some designers it’s a natural habit to open your favorite design software, i.e. Adobe Photoshop, and start designing a website right away. Instead of opening your design software, grab some paper and a pencil. This is the moment to start making a lo-fi prototype. Draw your ideas and get together with your team, client, users or all of them. Ask them for feedback, discuss it and iterate! Because it’s still a drawing, you can easily edit the prototype. The reason why you should always start with creating a lo-fi prototype is because at the end you can hold on to it while working on the visual design. This way you already filtered out a lot of problems you would have encountered after you have spent much time on the visual design.

Using POP to make sketches clickable on the smartphone

The tools to make a perfect prototype

There are plenty of tools to make lo-fi prototypes. As mentioned before, you can draw wireframes on a piece of paper. But there are also alternatives for those who prefer digital drawing. Here is a list of tools to create the perfect lo-fi prototype:

· Balsamiq: A web based tool to create wireframes. There are lots of pre-made components that are used for mobile-, desktop- and tablet-design. You can easily make the wireframes clickable so you can test it on screen.

· InVision: This tool is good for both lo-fi and hi-fi protoyping. You can import your sketches that you made and select the part that are clickable. You can also work together with your team in the same project. InVision has the option to live-share so you can watch the cursors of your testers move live on screen.

· Marvel: A free mobile and web prototype software. This is basically the same as InVision. However, Marvel is more than just a tool to make your prototype clickable. Marvel has a design tool, like Photoshop, which makes it possible to design the prototype in Marvel itself.

· POP: This is a free mobile app where you can make a photo of your sketch and make it clickable, all on your smartphone! This is a very handy tool for app design since you can view your prototypes on any device. POP supports on iPhone, iPad, Apple Watch, Apple TV and Android.

These software are the tools that I use to create lo-fi prototypes. There are a lot more available online which provide the same functionalities. Choosing the right tool is just a matter of personal preferences.

Keep prototyping

So to avoid restarting a design process after you have spent hours of designing, you should start with prototyping. During lo-fi prototyping, you filter out a lot of problems you would otherwise encounter later on during the design process. It’s more convenient to make a few sketches and make a lo-fi prototype before you work on the visual design. If possible or needed, involve your team, client and/or users with the prototype phase. Prototyping is all about gathering feedback and iterating. You and your team will save time and money once you filtered out most of the user-friendly related issues.

Do you think prototyping is a necessary step during the design process? Let me know by commenting down below!

--

--