Prototyping has quickly become the hottest word in design this year.
Every designer is now faced with a multitude of choices: Framer, InVision, Marvel, Atomic, Principle, Flint, Pixate, or a multitude of other tools to prototype their designs in. Every few weeks it seems as if there’s a new tool coming out for designers to use and determine if it’s the ONE that will replace all the others.
Fortunately, many of these new tools don’t have too steep a learning curve, allowing designers to quickly add prototyping in multiple programs to their skill set. Adding a few of these tools to their workflow will not only help to make them better designers, but also increase the speed and value of their projects. But before we get into that, let’s define exactly what a prototype is.
What is a prototype?
“So what is a prototype? The answer: it’s a simulation of the final product. It’s like an interactive mockup that can have any degree of fidelity. The main purpose of building prototypes is to test whether or not the flow of the product is smooth and consistent” (UXmag)
Prototypes are an essential part of designing user flows and interfaces. They allow designers to show their design through an interactive and engaging product, resulting in a better understanding of the design for everyone involved.
Instead of using static screens to gather feedback, stakeholders and potential customers are able to click through a sample of a product on the device that it is intended to be viewed on. Prototypes can be created at any stage of the design process to help demonstrate ideas that might be difficult to express with words alone.
Kinds of prototyping
UXmag states that they can be paper or click-through, but designing successful digital experiences involves creating prototypes of your interfaces. Curious about when to start prototyping? The answer is simple: As early and as often as you can. From start to finish, prototyping is essential throughout all stages of the design process.
1. Low Fidelity – Paper
Pencil and paper are the best tools for getting ideas out quickly and with minimal cost. During the initial design stages, rough user flows and wireframes can be enough to show off various screen states and get an idea across. To make them even better, designers can use a software like POP to take photos of their paper sketches and turn them directly into interactive prototypes in very little time.
2. Medium Fidelity – Clickable Prototypes
After defining user flows and creating a mockup of the initial screens, it’s time to link them together to create a clickable prototype that will look close to the intended final design. These don’t have to be incredibly detailed, just enough to let the user get a feel for the final design while testing out the flows to see if they are clear and easy to understand. InVision is a great product for this stage of prototyping, as it allows designers to set hotspots on pages that can be clicked to proceed to the next stage of the flow without worrying about detailed animations.
3. High Fidelity – Advanced Interactions & Transitions
After user flows have been tried and tested, it’s time to create and fine tune those gorgeous animations to show off to the development team. For these, designers need more control than simple transitions, so apps like Principle and Framer (if you know a bit of coding) are two good options to start with.
3 Benefits of prototyping
“Prototyping is a critical step in product design. Final products are complicated, and therefore difficult to change. Prototypes are relatively cheap to build and rearrange. And while they take effort up front, planning and testing a prototype is well worth the effort” (CreativeBloq)
1. Speed
Prototyping saves time. It allows designers to quickly test out multiple ideas before committing to having developers code them. It also reduces the need for written explanations of a design. A prototype is worth a thousand static pages with documentation on how they’re supposed to work.
2. Reexamine user flows & evaluating design decisions
User flows are the steps required to get from point A to B in an application or website. They show the order of screens that a user would take to complete a specific task. Prototypes are the perfect place to examine if the user flow of the design is smooth or needs to be refined. By watching users click through a prototype, designers can quickly identify any difficulties the user might be having with their design.
3. Gather feedback
“Prototyping is also an impactful way to present to your client. People know how to interact with products. Demonstrating interactions with a prototype helps to spark well-informed discussions with clients and can lead to better design more quickly.” (UXmag)
By placing an actual product in the hands of the users, designers can quickly see where there may be flaws in the original design flow that they might not have noticed without the use of an interactive prototype.
Selecting a prototyping tool
Prototyping is a trending topic right now, and a quick search on Medium gives you dozens of articles with a title of “Why (insert prototyping tool here) is the best” or “Why (this prototyping tool) is key to speeding up your workflow”. It can definitely be overwhelming and exhausting for a designer to think that they have to now become proficient in a dozen new programs in order to stay relevant in the industry.
Which tool is best?
When choosing a prototyping application, there really is no right or wrong answer. Many of the available applications can achieve the same results, so there’s no need to think that designers have to know them all. The best way to figure out what design tool to use is by testing them out and seeing which one allows a designer to create a prototype in the fastest way possible. Prototypes are meant to speed up the design process, not slow it down, so don’t be afraid to jump in and try them all until you get down to a few you like to use.
I recommend trying to find a combination of tools to get the job done. It’s not uncommon for designers to use a program like InVision to design interactions for lower fidelity prototypes before jumping into a tool like Principle for refining specific transitions and animations in an application’s design. Some other popular prototyping tools include Proto.io and Figma.
Find out more about prototyping
The more prototypes you’re building (and testing), the better your solution will eventually be. The most effective way is by building quick & dirty prototypes, then watch them break during usability tests to reveal bad ideas. Keep this up until you arrive at an idea that’s really good (uxpin)
Whether just starting out on a project or working on the final screens, prototyping is a key tool to add to any designer’s workflow. Not only will it speed up the creation process, but it will ultimately lead to a better product overall.
Here are a few links to check out to learn more about design prototyping:
- Prototyping: From UX to Front End blog
- How & Why Prototypes Are Mandatory for Good Design
- Designer’s Toolkit: Prototyping Tools
- What is rapid prototyping?
And if you’d like to learn more about UI design in general, check out these articles: