4 categories of prototypes

•

We waste too much time prototyping... There are 4 main categories of prototypes and each requires a specific level of detail. Here's how to make sure you’re designing for the right goal 👇

Type 01: Demonstrating a flow ⇨ This prototype is intended for stakeholders (probably earlier in the process) ⇨ The focus should be on communicating where key elements live + how you move between screens ⇨ We do NOT need to worry about transitions Example of type 01 👇

Notice how in this prototype I'm not using "smart animate" at all? There's no need at this point in the design process. I'm simply showing what the tab navigation and general page layout could feel like. I'll increase the fidelity once we have buy-in from stakeholders.

Type 02: Pitching a concept ⇨ We're now further in the design process and going deeper on a specific feature/concept as part of a larger project ⇨ Now we can spend a bit more time making something feel "real" to help solidify a specific direction Example of type 02 👇

In this prototype I decided to spend the extra time to wire up a background video. Why? Because I'm exploring a specific idea for what onboarding could look and feel like. And higher fidelity helps us make that decision. I'll prototype the page transition and carousel too 👍

Type 03: Facilitating a user interview ⇨ We want it to feel as real as possible (especially if they're the ones navigating the prototype) ⇨ Things like interactive component hover states, success toasts, pre-loaders, etc. can make a huge difference Example of type 03 👇

Notice how in this prototype I've included the "loading" variant as a preloader with an 'after delay' animation? It's a small detail... But this level of fidelity makes people forget they're in Figma and often produces the highest quality feedback Preloaders add a lot 👍

Type 04: Prepping for handoff ⇨ Our goal is to highlight specific transitions that developers need to account for while building ⇨ We're focusing on the finer details of implementation ⇨ Look for shared patterns and highlight them to engineeers Example of type 04 👇

Notice how this is the same prototype as type 01, only I've gone all the way into the specifics of how the core page transitions. Handoff prototypes are all about implementation details... So I only have to show this one transition and explain how it applies to all pages.

Important note on handoff prototypes... Don't make engineers watch a whole prototype flow to try and figure out what transitions to build and what to ignore. Isolate and document the transitions that matter. Often I'll create separate .gifs and link to them in my documentation

The least effective way to prototype is to spend too much time tweaking “smart animate” transitions for each one you create. Ask yourself: 1. How early are we in the design process? 2. Who is this prototype for? 👆 Those answers inform your goals and the necessary fidelity

Will every prototype fit neatly into these four buckets? Of course not :) But the principles apply. By asking yourself those two questions you'll ensure you're using your time as efficiently as possible while not getting lost in the details too early in the process 👍

If you like practical design tactics... I share the best ones each month in a no fluff email 👇 (you can also follow @ridderingand) getrevue.co/profile/ridd