UX Prototying with Adobe XD

30 September 2020 6:00 pm LT Online UI Design , UX Design

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

Regular video tutorials from the community
Subscribe to our Youtube channel
Adobe XD Prototyping UI design UX design Wireframing

Featured presenters

1603695685774

Elizé Todd

UX Designer

Elizé is a User Experience Designer, Educator and Content Creator. She spent the past five years leading UX teams at agencies before moving towards an education-focused path. She is an enterprise instructor for Adobe XD, teaches UX design on various platforms, as well as runs her own consultancy. She has a passion for motivating and empowering designers through her speaking engagements and content on Youtube and Instagram. She’s designed winning UX strategies for clients such as Papyrus, Keller Williams, and USA Today Network.