Rapid Prototyping Design for the Web

Rapid Prototyping collage
Ewelina Sklodowska
Oct 05, 20209 min read

Prototyping is one of the most important elements of the product design process, as it allows you to ensure that the product works as planned before you invest time and money to build it. This phase of the design process takes place after you have done your user research, but before you start working on the pixel-perfect design. Using a scaled-down version of your product and testing it with real users will help you quickly detect and fix any problems before the implementation. Prototypes can uncover the areas that need improvement and reveal true user needs. Not convinced? About 57% of the apps that users download are deleted within the first 30 days. Prototyping can keep your app from ending up among those.

What can you prototype? Both a new product that is yet to be created as well as elements of an existing product to improve usability or add new functionality. In the world of digital products, the most used are a prototype of a new site, Internet application, or mobile app.

Rapid prototype of e-commerce app

There are many different types of prototyping. Sometimes it is used for ideating a few different solutions and choosing the best one; other times it aims to reproduce the finished application containing content, connected interactions, and animations. The main thing about rapid prototyping though is that it is the quickest way to get your answers. Just by sketching on a piece of paper or creating a mockup of the interface, allows you to develop the information architecture, create user experience (UX) with the product, and select the appropriate interface elements to make the product accessible to your intended users. During prototyping, you can also prepare the content: descriptions, headers, promotional slogans, and messages.

Low Fidelity Prototyping

Paper prototyping/sketches

A low fidelity prototype (e.g. sketch) does not have to be a version that resembles a ready-made application. To save time and money, a piece of paper and a pencil can be used to present ideas as rapid prototypes; highlighting the main functionalities and simulating interactions by replacing paper screens and cut-out elements as if it were to take place in a finished product. Paper prototypes are the fastest and the cheapest way to verify whether an idea is accurate and useful. There is no need to focus on the visual aspect of the product at this point, basic drawing skills are more than enough. What is more important here is to remain open to new ideas. If you want to get your creative juices flowing at this stage, try crazy 8s – an exercise practiced during design sprints. You can read more about it here. It is important to mention that sketches work best at the early stage of the design process. Paper prototyping, despite its many benefits, remains a poor substitute for a real product and it relies heavily on the user’s imagination.

Rapid prototyping with paper example

After the main functionalities of the product have been identified, the best ideas can be transferred to the low-complexity UX wireframes that will bring it closer to the final version of the user interface. Wireframes can show the ‘skeleton’ of the product, key elements in the visual hierarchy, without focusing on the appearance. This is so that people we present them to will not be distracted by the visual form but concentrate on the functionality of the product. Wireframes can be presented to users as static images or, to introduce a few basic interactions by using prototyping tools. It is worth remembering at this stage, that wireframes are still part of the rapid prototyping process, so you do not need to spend huge amounts of time polishing them. The recipe for a successful product is prototype, test, iterate.

High Fidelity Prototypes

Now that feedback and user requirements have been gathered, this knowledge can be used to create a mockup. Opposed to wireframe, a mockup can already have some elements of visual design. Its goal is to give the user a more realistic impression of the product. A mockup can also be turned into an interactive prototype that most faithfully reproduces the finished product and its final design. This is the moment when a wireframe begins to contain some UI elements like fonts, colors, and animations. Sometimes it can closely resemble the final product. Still, it is important to keep in mind that this is just a prototype, so not every element needs to be clickable. Mockups are ultimately transformed into graphic designs, or they are built from the very beginning in graphic programs that enable the preparation of both UX and UI. As a result, creating design specifications is much easier. This is what differentiates this approach from traditional methods of software development; The documentation is prepared at the end of the process, rather than at the beginning.

High fidelity app prototype

Which Prototyping Tools to Choose?

When deciding on what tool to use for the prototype, a few things should be considered. How complex and close to the final product do you want the prototype to be? Will you be working on the prototype alone or with a design team? How will it be presented to the users? Below are some useful tools for this process, but it is important to remember to always choose the best method and the right fidelity of your prototype for your specific needs.

Balsamiq appBalsamiq

This is a tool for rapid prototyping only. With Balsamiq you can create low fidelity rough sketches, resembling freehand drawings. There are over 500 icons and many basic pre-built items available in the tool’s library. Balsamiq allows you to add basic interactions and share the prototype with the team. It does not offer collaboration options, so it is not possible to work on the prototype with the design team at the same time.

Website: https://balsamiq.com
Platform: Windows, Mac
Price: starts from $9/month

Axure RP appAxure RP

This is one of the oldest prototyping tools, and sooner or later you will probably come across it. It is perhaps the most extensive prototyping tool that allows you to create complex interactions and logical conditions. Axure is extremely powerful – you can make a prototype that is very similar to the final product. There are downsides to the complexity and sophistication level, though; The learning curve can be quite steep if you want to learn all the interactions and conditions.

Website: https://www.axure.com
Platform: Windows, Mac
Price: starts from $ 29/month

Invision appInvision

Used together with another tool, e.g. Sketch, Invision is a popular solution. You can use it for free (with limitations to the number of projects) and it allows for seamless collaboration with the team. It is also a convenient tool for collecting feedback from users.
Screen views (in the form of .png, .jpg or .psd files) are uploaded then hotspots are added to them, to which interactions are attached. This quickly generates a simple interactive prototype. It is important to remember that Invision is a web application that requires internet access to use it.

Website: https://www.invisionapp.com
Platform: Web
Price: There is a free version

Adobe XD appAdobe XD

It is the youngest of the Adobe tools that came out in 2017. It works perfectly with the entire family of Adobe products. The undoubted advantage of XD is that it works on both Mac and Windows. You can use it to create interactions, transitions, and other types of dynamic functionality, gather feedback (commenting options), and test your prototypes on mobile devices. Adobe XD is vector-based, so scaling and resizing of elements is very easy.

Website: https://www.adobe.com/products/xd.html
Platform: Windows, Mac
Price: There is a free version

Figma appFigma

Although it is more of an application for creating designs, there are built-in transition functions, that can be additionally styled (e.g. with the type of animation), so it works well with simple prototypes. It is a web app, but you can work on files offline as well. Figma works on both Windows and Mac and continues to gain in popularity. What is best in Figma is its strong collaboration features; The whole product team can work on the prototype in real-time. If you have worked with Sketch before, you will find that Figma is quite similar in many ways. There are also several plugins that can make your work easier.

Website: https://www.figma.com
Platform: Windows, Mac
Price: There is a free version

Sketch appSketch

This tool is basically an industry standard and many UX designers love it. Just like Figma, it has a hotspot feature so you can easily combine screens using transitions. It is probably more popular to use a Sketch wireframe in combination with other prototyping tools such as Invision to create prototypes. What some may find to be a big drawback of this tool is that it works only on Mac.

Website: https://www.sketch.com
Platform: Mac
Price: $99

Origami Studio AppOrigami Studio

This tool was created by Facebook designers for their own use. They later shared it with the whole design community. For designers who need a more advanced tool, this might be a great choice to prototype websites and mobile apps. Unlike the other options mentioned before, Origami uses a patch editor that lets you build logic, behaviors, animations, and interactions. You do not need to create it from scratch as there are many prebuilt patches, out of which you only need about 15–20 to cover all your prototype needs. Just like Axure, this tool has a bit of a learning curve.

Website: https://origami.design
Platform: Mac
Price: Free

Try Slickplan’s Design Mockup App to share low and high fidelity designs with your team

Focus on the process

The list of tools goes on and on, you can read more about it here. It is difficult to create the ultimate list of the best prototyping tools, as it all depends on the context of the project. The truth is once you give one of them a try, you will find others to be similar. As much as knowing and choosing the right tools is important, you can usually learn how to use the more simplistic ones in just a couple of hours. That is why many designers say it is not the tool that is most important in prototyping, but the process and the set of best practices behind it; how you ideate the functionalities you want to test and how you collect feedback. The iterative approach allows you to escape the trap of being stuck on the very first idea you had. That is why it might be good to focus on learning the design techniques instead of the tools. Check out this free Udacity course on prototyping created in cooperation with Google or read this free e-book prepared by UXPin. Then arm yourself with some paper and sharpies and your good to go!

Ewelina Sklodowska
Written by Ewelina Sklodowska

Ewelina Skłodowska is a UX designer and researcher. She works on developing useful digital products that people need and love. She also helps businesses with their ux strategy by envisioning and conceptualizing products through deep-dive design workshops. She believes in the idea of lifelong learning and the importance of connecting to your creative side as often as possible. You can connect with Ewelina on Linkedin and Dribbble.