In our UI/UX design guide we told you about UI software prototyping. In a nutshell, there are 5 types of prototyping, and each type has its own set of digital (and not only) tools that fits best the process. Some of them quite famous, some – not. Today we are ready to present you the ultimate list of UI prototyping tools. Unbiased as always, Syndicode tried to collect the most popular of them.
Prototyping tools allow designers to preview how their project will work when it will get completed. These tools are used to simulate the application flow, test its performance and create a user experience. Depending on a purpose different prototyping tools will bring a different experience. To craft prototypes, we use lots of prototyping tools, both simple and advanced depending on the situation.
Here in Syndicode, we choose prototyping tools on the base of the next five criteria:
- Learning curve
As easier learning curve to adopt the new tool, as faster we can start using it.
A tool should be easy to share for the teamwork, suitable to be in sync with other members of your team.
Consider file export, available formats, intuitive interface, integration with the other tools and basic features.
- Easiness of Use and Comfort
The ease of use in using the prototyping tool is essential for the designer to save time and help increase output. It should reduce the number of steps required for a designer to complete a task rather than increasing it.
So, after taking into account these criteria, we are ready to present you the next prototyping tools.
But before, read about the main differences between lo-fi and hi-fi prototypes.
Low-fidelity prototyping (except for pen and paper)
With Keynote you can quickly layout shapes on slides to create interface screens, add links to create interactivity between screens, and use slide transitions to animate the interface. You can then export your prototype to your iOS/Android device to interact with it, demo it to others, and get feedback as if it were a real working app. Surprised?
- Google Slides
Surprisingly, Google Slides lets you create low-fidelity prototypes as easy as any other professional tool. It works in your web browser, so you can use it on any platform. Moreover, by using Google Slides you can collaborate with your team in real time, and instantly share your work with others, get feedbacks, manage requests, resolve issues, and keep track of your revision history. Easy!
Balsamiq replicates the speed and convenience of creating mockups on paper, but on a digital medium. It produces really great rough sketches of the prototype for clients to view, which is a big plus for brainstorming sessions.
- Axure RP
Axure RP is thick and complicated, aimed at designers with plenty of patience. For using Axure you should be having some coding skills to blend in. However, once mastered, you will be able to create advanced interactive prototypes, click-through wireframes, customer journey maps, and user flows. On the other hand, it is more one of the website prototyping tools, as building applications for mobile will be too complicated and long-lasting.
MockFlow is an easy to use online tool for paper prototyping that allows working in a collaborative way with your design team.
Principle is popular with its greater control over animations. At the same time, there is no developer handoffs or collaboration is available.
Flinto allows creating both simple click-throughs and complex interactive prototypes. You can reuse transitions, control all layers, and vary complexity. The app uses a simple drag-and-drop system for prototyping. But no no collaboration or developer handoff tools. Also, it enables creating complex micro-interactions on top of the layers exported from Sketch.
Framer provides a seamless workflow, further complemented by device previewing, version control and easy sharing. Here you can also import graphics directly from Sketch, Photoshop or Figma.
This prototyping tool includes advanced interactions and animations, responsive breakpoints, CSS styling, and built-in UI libraries. The import Sketch or Photoshop files for layered prototyping or integrations with Slack, Jira, and Github are coming by default.
Proto.io is mature and feature-rich prototyping tool that is used for high-fidelity and highly-animated prototypes in the browser. With its help, you can upload your files directly from Dropbox or drag-and-drop files manually.
This tool also offers numerous useful features for interactive prototyping which include an extensive documentation library complete with forums, Sketch, and Photoshop. Using Origami, you can test interactive mobile prototypes on iOS devices.
- Marvel App
This is a browser-based prototyping tool where you can upload your image files to and add transitions. This platform supports direct uploading of particular image types such as JPG, GIF, and PSD apart from third-party uploading through Dropbox, Sketch, Google drive, etc.
Draftium is based on blocks. It has 350+ ready-made blocks and 300+ prototype templates. Just add or remove them with checkboxes.
Atomic is a web-based tool that gives you the flexibility and control you need to fine-tune your interactions: just click the play button to see your changes and animations in action. Atomic provides easy access to all developers by providing a shared prototyping system that is effortless. This toll has a ‘history option’ that allows you rewind to see previous iterations and create new versions from any point.
Basic prototyping and collaboration:
InVision is one of the most popular prototyping tools. It is recognized thanks to its smooth management of project feedback.
Sketch’s fully vector-based workflow makes it easy to create and high-fidelity artwork from start to finish. In UI design, repeating elements is something very common: buttons, bars, bubbles — all sorts of things; and these reusable elements can be automatically copied and pasted using the Sketch app.
Figma allows a team of designers to collaborate and give comments on a design in real time.
Mockplus is the most robust all-in-one product platform for prototyping, collaboration, and design systems. It helps the team design faster and easier and is the best design solutions for fast-growing startups.
- Adobe XD
Adobe XD recreates Sketch’s vector-based visuals and pixel-perfect design options, but adds the capability for prototyping, interactions, and developer handoff. With Adobe XD, you can draw, reuse, and remix vector and build artwork to create interactive prototypes, and production-ready assets all in the same app.
Justinmind allows you to create attractive simulations of your web and mobile apps. Using this tool you can include your corporate identity elements in your prototypes instantly.
This tool has a built-in high and low-fidelity component libraries, live team collaboration, device previews, and video presentations.
Here you can find most of them in a comparison mode.
By the way, there is a lot of useful info about UI on our blog!