No matter how good a plan is, the only way to know if it works is to build a model and test it. After the first three phases of the UX design process–empathizing, defining, and generating ideas–it is time to create prototypes to test the design so far. Prototyping helps designers learn what works and what doesn’t in their product plan.
What Is a Prototype?
A prototype is a simulation of a website or app that gives an idea of how the product will look and feel to users. Wireframes are similar to prototypes in that they are also simulations, but wireframes are about the structure of the site, and prototypes are about how the product actually works. There are low-fidelity prototypes and high-fidelity prototypes.
How Are Prototypes Used in UX Design?
The UX design process has five generally recognized parts: empathize with the user, define the problem, come up with ideas and possible solutions, create prototypes of those ideas, and test them with users. UX design is a user-focused model and wireframes are a useful tool in the early stages of the process.
The UX design process is based on the questions why, how, and what. It begins with research to discover why the user experience is what it is. The goal of this phase is to understand what the user wants from the experience. The designer conducts surveys and interviews to discover the motivation and goals of users.
The definition phase involves using the data collected along with analytics to create a detailed description of the user experience. This phase involves creating user personas, flowcharts, and mapping to uncover patterns and trends.
Once the patterns emerge, design enters the third phase in which team members generate ideas about how to solve problems and improve the experience. A rough sketch of the product is developed, and from that come wireframes and prototypes.
The next phase is testing the product or website to see the user experience is what was expected. Depending upon the test results, there may be a redesign phase to improve the experience further.
Types of Prototypes
Prototypes can be a simple paper and pen sketch or an interactive digital representation. It is useful to start creating prototypes early in the design process and to use them to test and change the design where it needs to be. There are two types of prototypes: low-fidelity and high-fidelity.
Low-Fidelity
Low-fidelity prototypes can be hand-drawn sketches of what will be on the page, where it will be, and what it will do. This is a quick, easy, and inexpensive way to give a client a first view of the proposed design. The prototype demonstrates how the site will be used and is useful for early testing by the design team and users. Low-fidelity prototypes are easy to update; you simply draw a new picture when you make a change.
High-Fidelity
High-fidelity prototypes are interactive digital representations of the site or app. They can be simple early in the process or very complex as the design is finalized. Later prototypes look and operate very much like the final version of the product.
How Are Prototypes Made?
Prototypes can be made from paper and pencil or on a digital drawing app, but the most common way to make prototypes now is to use one of the software tools available for digital design. Most of this software not only allows you to create interactive wireframes and prototypes but also includes collaboration tools that make it much easier to share the prototypes with team members and clients.
Software for Prototyping
There are many digital design applications available, but these are four of the most popular.
Adobe XD
Adobe XD is a design tool based on vector graphics that allows you to create digital designs for everything from mobile apps to websites. XD is part of Adobe’s Creative Cloud and works well with other CC apps like Photoshop, Illustrator, and Animate. There are many repeating features that make your workflow move faster, and XD also includes collaboration features that make it easy to share and test prototypes. You can run XD on both macOS and Windows.
Sketch
Sketch is a Mac application that doesn’t work on Windows. You can use vector editing tools or design at the pixel level. It allows you to scale to any size of screen and speed up your workflow with mathematical shortcuts. As with XD, there are repeatable components and you can organize your design so everything is easy to find. Sketch recently added real-time collaboration, so now it is easier for a team to work together, and you can also create libraries of the elements the team is using. There are also many plugins available to customize your workspace.
InVision
InVision works to support the entire design process from brainstorming, designing, testing, collaborating, and delivering. The application includes Studio, Cloud, Freehand, Craft, and Enterprise. InVision works on both macOS and Windows.
Figma
Figma is another design application. It includes FigJam which provides an online whiteboard for collaboration to let your design team plan, define, and workshop together. You can use the pen tool for vector graphics or plugins like an instant arc design. Auto Layout moves and stretches items automatically, and Figma makes the work move along efficiently. Figma runs on a browser so it will work with macOS, Windows, or Linux systems.
Where to Learn UX Design
If you would like to learn how to use software like InVision, Sketch, Adobe XD, and Figma in order to switch to a career in UX/UI design, one of the best ways to do that is to sign up for classes. You can choose classes that meet in-person or online to learn design software and other applications. Some people prefer to attend brick-and-mortar sessions when learning new information, but that isn’t always available. Live online classes have a similar set-up with a real-time, remote instructor who can answer questions and take control of your monitor--with permission--to show you how to do things. Training is part or full-time and available weekdays, weeknights, or weekends.
The best way to prepare for a career shift to a field like UX design is to enroll in a bootcamp or certificate program. These are intensive training courses that run from a few weeks to a few months and will cover motion graphics and animation in much more depth than tutorials can. Another plus of training is that you will leave class with a professional-quality sample video portfolio that you can show to prospective employers.
It’s easy to learn UX design and start a new career. Check out Noble Desktop’s UX design classes. Choose between in-person sessions in NYC at Noble’s location or sign up for live online UX design courses and attend from anywhere. Use Noble Desktop’s Classes Near Me to find other UX design bootcamps in your area.