Creating a prototype is a relatively quick and easy way to test out your digital product idea. As an initial phase of the software development life cycle, prototyping is something we do a lot at Boldare! But what are the best tools when it comes to designing and creating prototype products? We asked our designers to choose their favorites and while Figma was the most popular choice, Adobe XD, and Balsamiq also got a strong mention. Read on to find out why these are Boldare’s top three prototyping tools.
Table of contents
What is prototyping?
Before we dive in to talking about the tools, let’s just quickly clarify what we mean by digital prototyping.
A prototype is your first chance to put your idea for a digital product in front of users (and investors and other stakeholders). To quote ourselves,
A digital prototype has no engineering behind it with few or no working functionalities or real data.
Maybe the best way to think of a prototype is as a mockup or trailer for the real thing – a way to excite interest and get reactions. For example, a wireframe is a classic prototype: a schematic representation of a webpage; no functionality but a clear idea of what the final version could look like.
The goal of prototyping is to get feedback that you can then use when developing the full product. The goal is not to produce a usable or releasable version of the product.
The advantage of a prototype is that your final product will be better received by users, minimizing the risk of failure when you launch on the market. Having established what prototypes are, let’s look at our favorite tools for building them…
Figma
Figma is a web app for UI/UX design, first publically released in 2016. It’s a great tool for prototyping the UX/UI of your potential product. It’s easy and quick to use and can turn static designs into a showable prototype in minutes. The benefits and advantages of Figma are:
- Any platform – Any operating system that can run a web browser can run Figma – iOS, Windows, Linux, ChromeOS are all good. Working in a team that uses multiple operating systems? No problem, you can all share, open and edit Figma files. This gives Figma a flexibility and ease of use that’s hard to beat.
- Easy collaboration – If you’ve used Google Docs, you’ll be at home with the Figma UI. Multiple users can collaborate on a Figma file at the same time and you can access other users’ views whenever you want. With everyone working on the same file, able to see changes and edits in real time, there’s no problem with version control. And no possibility of someone working on an out of date iteration. Different file versions can be saved manually to create ‘branches’, which can then be worked on separately to explore different design options. That said, each branch file can be shared and worked on as widely as you like.
- Integration with third-party tools – Figma’s developer APIs are what permit integration with any browser-based app. This can be used to share ‘live’ displays of design files with the whole team, and involve product owners and other stakeholders.
- Perfect for design systems – Many development teams and companies use design systems, sets of reusable, scalable components. The advantage of this cross between a template and a toolkit is that you save time (no need to reinvent the wheel/component) and can ensure a set standard of design quality. Figma’s team library feature can be used to create design systems, giving wide access to the latest version of each component.
- Better teamwork – The above features benefit your teamwork. When everybody can access and use everything that is going on in a project, that kind of radical transparency keeps the whole team on the same path, heading toward the same goal.
At Boldare, we’ve found that Figma is perfect for wireframing with it’s readymade wireframe library, and really meets the needs of modern digital product design. It gives full control over the essential design elements: spacing, alignment, typography, and colors, and can dovetail with any relevant design system. It really is one of the best prototyping tools around right now.
Adobe XD
According to the Adobe website, “Adobe XD helps user experience designers to rapidly create and iterate the design for mobile apps and websites.” It’s true. With Adobe XD you can create even quite complex prototypes and as part of the Adobe Creative Cloud set of applications and services, you can seamlessly access other Adobe apps as needed. The benefits and advantages of Adobe XD are:
- One-stop shop – Adobe XD has a wide range of features, enabling creation of anything from simple low-fidelity wireframes to usable app prototypes. Designers can also use Adobe XD to collect live feedback.
- Two modes - Adobe XD comes with a choice of Design or Prototype mode. Design mode is for the creation of elements and artboards. In prototype mode, the pieces can be joined using interactive links, giving movement and flow to your prototype.
- Creative Cloud libraries – We’ve already mentioned design systems and Adobe XD’s integration with the Creative Cloud set of libraries performs the same function, giving wide access to reusable standard components, colors, styles and images. The libraries also integrate with applications such as Photoshop and Illustrator, permitting the easy insertion of elaborate graphics created externally.
Finally, Adobe XD is fast. The ease of use and flexibility mean that professional prototyping can be achieved more rapidly. According to Adobe, based on 264 individual benchmarks, Adobe XD can be up to three times faster than conventional prototyping methods.
Balsamiq
Balsamiq allows designers to sketch out wireframe mockups of user interfaces for websites and apps. It’s the most straightforward to use of our three UI prototyping tools with a graphical user interface and drag-and-drop WYSIWYG editor. It’s the GUI equivalent of sketching your design with pencil and paper.
The benefits and advantages of Balsamiq are:
- Accessible and easy wireframes – The prototypes created using Balsamiq actually look like sketches on screen, which makes them easy to grasp and understand by team members, product owners and stakeholders.
- Fast – Balsamiq’s simple approach and drag-and-drop methodology mean that an experienced designer can produce a basic, sketched wireframe in minutes only.
- Easy to learn – Not only is Balsamiq cheaper than many other prototyping tools, the learning curve is one of the easiest. Anybody can use Balsamiq to rough out an idea and ask, what do you think?
Admittedly, Balsamiq has the most limited functionality of our favorite prototyping tools but it’s also the easiest and quickest to use, making it perfect for ideation. For product ideas that can be conveyed simply, Balsamiq is often the right tool for the job.
Even when a more realistic prototype is needed, designers can use Balsamiq to get a rough visual draft of a product’s UI. If that rough effort gets some approval, a more sophisticated tool can then be used to create a version to show users and stakeholders.
Our best prototyping tools
Different designers favor different tools when it comes to prototyping. And yet, despite the variety of designers here at Boldare, we’ve found that these three are more than enough for the great majority of projects. Between them, Figma, Adobe XD and Balsamiq are our day to day toolkit for creating prototypes and wireframes that are detailed enough to get useful feedback which, for example, can be then used to create more functional product iterations, such as a minimum viable product – the next step in our full cycle product development approach.
Share this article:
