Design Tools: Part 2 - Prototyping


The next post in our Design series focuses on Prototyping. This method is used to streamline and perfect product user experience and interface. This is the next phase in our UX/UI Design projects after Wireframing and helps us resolve usability issues early on in the process.

So what is prototyping?

Prototyping is a sample version of a final design product, which is created to allow for testing prior to launch. This UX product design deliverable fits in with our rapid agile work method where iterative testing and evaluation allows for quick and easy tweaks and amendments. A prototype is not the final product and it is important to communicate this with the client to avoid any confusion with regards to client expectations.

When it comes to creating a prototype, we are lucky to be able to choose from a number of different ways to do this. Some of these include using materials such as pen, paper and tape, to begin with basic designs. If we are more clear on the clients goals and expectations then we could jump straight into using an online prototyping platform such as Invision or, we might even take the plunge straight into HTML. These methods are all very effective in their own ways, and we’ll normally choose which to begin with based on a number of factors such as locality of the client ie: can they pop in for a meeting or would Invision work better for this first this stage?

Paper prototypes

Paper prototypes are mostly used during the early stages of product development, to test ideas freehand. This is a rapid, cost-effective way to draw up some initial low-fidelity ideas to then evaluate and get first round feedback on. However, if we are required to present an idea to a number of stakeholders at the same time, we would use a more robust and detailed process such as digital prototyping, allowing the users to get a truer feel for the product from the offset.


Digital Prototypes

Digital prototypes are created on a computer using either a design software or an online prototyping tool. They are almost simultaneously developed when creating wireframes or at least, wireframes are designed with prototyping in mind. Digital prototypes for web based products are a bit closer to the real thing as you can imitate clicking and browsing pages on screen. A different level of complexity can be achieved through this method based on project and client requirements. We can include basic, click through, page-view prototypes as well as demonstrate more advanced functionalities and interactions based on project specifications. There’s a great selection of online prototyping tools which allow for live sharing and collaboration such as Invision - which we love due to the fact we can gather immediate feedback from stakeholders and users.


HTML prototypes

HTML prototyping creates the most realistic viewable test product in terms of interaction and experience. The depth of detail does however mean that they take a longer amount of time to build, therefore can be more costly than basic prototyping methods. When using HTML prototypes, we onboard the help of one of our developers to code the designs into html markup language, which is the language that allows us to create and websites online. One of the advantages in creating this type of prototype is that we and the users can conduct testing on any viewing device and operating system. These designs can also normally be a great HTML foundation for the final product.



Prototyping is an essential part of product and UX design. The type of prototyping your team decides to go with depends on a variety of factors such as budget, time and complexity - to mention a few. A design team must however make sure that ideas are tested and well grounded on previous research, to avoid having to go backwards and make amendments at later stages!