In this article, we will tackle the prototyping. Once you have elaborated User Flow diagrams and set up your Sitemap at the “Ideate” stage, there is a necessity to create a prototype. The prototyping is one of UX Research steps, where the designer can test the functionality of the solutions elaborated and selected on the previous phases. Depending on the budget and the time spent by the team on the project, a different level of specification of the prototype can be required. In this article, we will try to sort out services that can help you create both quick lo-fi prototypes and multi-level highly detailed hi-fi prototypes with micro-interactions in the animated interface.
Wireframe.cc – it’s a minimalistic web application enabling the creation of low-level prototypes for the quick visualization of your idea. The usability is the main functional feature of wireframe.cс. Drag-to-draw jointly with the following pick of elements is a very convenient way to create new objects in the form of the similar lo-fi prototypes. Moreover, wireframe.cc supports the teamwork, commenting on the prototypes, hotkeys, and sharing.
Pidoco – the tool was elaborated specifically for the convenient collaboration of the team at the prototype developing stage. The easy and convenient teamwork and customization of templates allow creating of highly detailed interactive prototypes for less time. Thanks to its usability Pidoco allows you to shorten the design and development phase and spare the team extra costs.
Mockplus – it’s a tool that can create and analyze the work of a lo-fi prototype. The Mockplus functionality is minimalistic, however, you can easily create interactive prototypes of any difficulty with the vast library of UI components. Just like Pidoco, Mockplus allows you to test your idea at the first stages of UX Research, sparing you extra costs in the future.
Justinmind – the service enables the creation of highly detailed hi-fi prototypes of multifunctional mobile apps for iOS and Android. You can browse the prototype on your mobile device. Justinmind also allows exporting a full-featured wireframe prototype in HTML, providing a convenient browsing in any browser. The service grants access to a vast library of UI-kits, that you can use to create your own prototypes.
Proto.io – this functional service allows you to create a highly detailed prototype, granting you the possibility to work on micro-interactions with the user, using the interface animation and to test the developed prototype using the convenient system for sharing and teamwork, with the feature of commenting your projects.
Flinto – this is a web service and a fully-functional app for Mac, which enables creating of hi-fi prototypes. This design app can be integrated into Sketch through a plugin – this will grant you a quick and convenient way to create an animated prototype. With Flinto you can create a high-level prototype and share it with your team or the client to get the needed feedback quickly.
UXPin – it’s a multi-functional web service, which allows you to create both lo-fi and hi-fi prototypes. The convenient commenting system provides an easy collaboration within the team. The possibility to open projects from Sketch as well as the library with dozens of UI kits (Bootstrap, Foundation, Android, iOS, etc.) allows the team to develop and test the prototypes easily.
InVision Studio – the advantage of InVision Studio is that the tool covers all stages of the prototype development. With InVision Studio you can create an interactive prototype with an animated interface. It’s important to notice, that the animation is not a separate process. You can animate your prototype in InVision Studio.
Framer X – this prototyping tool fundamentally differs from the alternatives. The prototype developing process in Framer X is mostly the work with the code. In its first iterations, Framer is a graphic shell for Framer.js, where you can not only write code, but also design.
Framer X – is also a prototyping tool, which supports React and allows to create a design system.
In order to develop a functional prototype that grants the possibility to test some interface solutions, you need to specify your ideas, The base for your future prototype is laid at this stage. User Flow and Sitemap allow you to exclude the majority of UX mistakes and elaborate your idea prior to the prototype development. You can find more about User Flow in UX Research in this article. To alleviate the communication mod within the team you can bind your prototypes with Sitemap, so your team will have an opportunity to get all the topical information in one place, which can spare you time and miscommunication problems in the team.