UX Prototying with Adobe XD

How to create a prototype

Prototyping is the fourth stage of the design thinking process, and happens after you’ve already:

• Conducted user research
• Defined what design problems you’re going to solve
• Ideated solutions
• Tested the waters on some of those solutions
• Developed a wireframe to give an overview of the user flow with the new design solution(s) incorporated

Because the design thinking process is so iterative and recursive, you might even end up prototyping initial ideas earlier in the process through rapid prototyping. But right now, let’s simply look at the different kinds of prototypes and an overview of how to create one. 

There are three kinds of prototypes: low-fidelity, mid-fidelity, and high-fidelity. Let’s learn more about them and how to create a prototype for each. 

Low-fidelity prototypes are what a rapid prototype is likely to be—they’re quick, simple, and they don’t attempt to look a whole lot like the final product. Without any fancy UI elements, images, or copy in place, these are the simplest and easiest way to get a rough idea of what a design solution might look like when it’s implemented. 

Mid-fidelity prototypes step things up a notch and attempt to incorporate some elements that are closer to the final product—whether it’s a color scheme, placeholder copy (beyond the “lorem ipsum” filler), or other key elements or low-level interactivity. 

High-fidelity prototypes are, as you might guess, a more polished version. These envision your design solutions in a way that more closely resembles what the product will look like when it’s developed and live for users. In fact, with tools like Adobe XD allowing you to create interactive prototypes, it can be difficult to tell the difference between a prototype and the real deal!

Here are some basic steps to follow as you create a prototype:

1. Keep your user research within reach—your users are the whole point of this work. Keep their needs and goals at the forefront!
2. Understand the goals of the prototype and choose the fidelity level that will best accomplish your goal. 
3. Pick the right prototyping tool for the job.
4. Build your prototype. It’s best to focus on the section of the user flow that’s actively being developed or changed.
5. Get feedback from other designers on your team before the prototype goes to stakeholders for signoff (if needed) or to your development team.

That’s a rapid introduction to prototypes. Learn more here: A Complete Introduction to Prototyping