What is Prototyping?
A prototype is a draft version of a product that you want to show your users and validate your design ideas before investing money into the development process.
There are different levels of detail that you can add in your prototype which is known as its fidelity. A low-fidelity prototype contains high level ideas that more focuses on the overall layout of the product instead of its appearance. A high-fidelity prototype contains deeper level details about product design and is much closer to the real product.
Importance of Prototyping in Design Process
The purpose of prototypes is to get early user feedback in your design process. Prototypes help you to test your ideas with real users and make your design decisions based on their input. This is an important step in the design process as it saves effort, time and money when you finalize your design with real users before initiating the development of the product.
At times, you use the prototypes to attract your potential customers by showing them the features that you can provide them to resolve their problems. This way, prototypes help you to earn new projects and find new clients. At D-Sprint we use it in different kind of UX projects, and in the third day o fourth (depend of sprint format) for design sprint.
Prototyping Tools
As we know prototyping is an essential part of the design process, it is important to choose a prototyping tool that makes this step easier for you to develop prototypes quickly and efficiently.
During my career, I have worked on Invision, Sketch, Balsamiq, Adobe XD, Figma, Marvel, Axure and few others. Let’s have a look at how some of these tools work and how they help you to build prototypes with ease of use.
Invision
Invision is a famous platform to design and test your ideas in the form of prototypes. This tool makes it simple to build interactive prototypes and collaborate to get feedback in a shared workspace.
Since Invision is a web-based tool, you can access your design projects on the cloud anywhere anytime. Invision allows you to import multiple file types, including JPG, PNG, GIF, PSD files and add hotspot elements to link them into a prototype. Also, InVision allows you to sync your projects created in Photoshop or Sketch and update your prototype within the Invision workspace.
You can share your prototypes with your shareholders using simple URLs and get their feedback.
Compatibility: Mac, Windows
Pricing: Free, $7.95/month
Sketch
Sketch is an amazing desktop application that you can install on your Mac system and start prototyping with much ease of use.
In Sketch, you can share your prototypes using its cloud version with your team and exchange feedback and ideas. It provides you the functionality of creating the re-usable assets called Symbols that you can use in any of your images and thus save your effort and time required for prototyping.
Another good thing about Sketch is that you can export the prototype and get the code and thus make your development process faster.
Compatibility: Mac OS
Pricing: Trial, $99/year
Balsamiq
Balsamiq is an easy to use tool with zero learning curve. It focuses on low-fidelity wireframing and prototyping that allows designers to finalize the design structure and layout with less effort and little time.
Balsamiq has a simple drag and drop interface and it allows you to create the libraries of templates and components. Balsamiq is a good alternative of paper prototypes where designers can create sketch as easily as drawing sketches on paper or whiteboard. This makes the entire process very speedy and convenient.
You can share your design with stakeholders on the web in the form of images or interactive PDFs.
Pricing: Trial, $9/month.
Adobe XD
Adobe XD is a powerful tool that you can use to design UI images and interactive prototypes. It provides good collaboration features to share your prototypes with stakeholders and get their feedback.
Adobe XD provides integration with other Creative Cloud applications. You can easily import your files from Photshop or After Effects and link them to create a prototype. Adobe XD enables you to create design systems within the tool that can be easily re-used in other prototypes.
Pricing: Free, $9.99/month
Axure RP
Used by lots of companies for designing UI features Axure RP offer dynamic content, conditional interaction and flow, and adaptive views.
The tool makes collaboration simple with a cloud option. Project stakeholders can access to the prototype from large choice of browser and device. You can also use it for creating flowcharts, defining reference page, wireframes and user journeys.
In the Axure Teams you can also work collaboratively but not in an asynchronous way.
Pricing: $29/month/user
Figma
Figma is a web-based collaborative UI designing tool that provides an easy to use drag and drop editor to design images and prototypes. It allows you to create and use design systems to make the process of prototyping easier and faster.
Figma works on any browser, thus making it independent of the need for a particular OS. It has a feature enriched free version and you can quickly sign-up for a free account and start using it.
The best feature that its users like the most is the collaboration. Figma allows you to collaborate with your teams by working simultaneously on a prototype. Using the commenting feature, all stakeholders can collaborate while working on the same prototype. This real-time feedback mechanism fulfils the actual purpose of prototyping in the design process.
Pricing: Free, $12/month
Conclusion
There also many other tools like Fluid UI, Marvel … but choosing a tool to build prototypes mainly depends on design requirements and your preferences. The factors that help you to choose the right tool for you include your platform, the target device, budget, and the level of detail you want to go.
If you are looking for a web-based and easy to use solution with rich feature support in free version, Figma is the best choice and we use it at D-Sprint. Its free version includes almost everything that is required to build an amazing prototype for your client, particularly fast and collaboratively with several UX/UI designers like in a design sprint.
