Last month, we talked about the first step in the UX Design process: Creating Wireframes. But how do you go from outlines to full design? That’s where prototyping comes in. Today you’ll learn what a prototype is, how to build one, what you need to know before jumping in, and why they’re important.
What is Prototyping?
Chey: So a prototype is when you take a design and you make it “seem like it works.” So by that, I mean, you’re not having a developer put it into code and make it like a real physical thing. You’re kind of “mocking up” what it should do. We use a couple different tools to do that: I know InVision, you’re literally just taking images of your screens and making it so they link to each other.
Rachel: Prototyping, really, is just a clickable version of the system before anything is built to ensure that all of our assumptions or research are correct.
How do you build a Prototype?
Rachel: It depends on whether the prototype is low fidelity or high fidelity, but generally we build them in Figma. At that point we’re utilizing the UI design, and then we’re creating the clickable systems that we would then utilize for user testing.
Chey: For example, a purchase path versus like a research path. If someone just wants to read about something,
What should someone know about Prototypes?
Chey: I think the most important thing for people to know about prototypes is they are just that: they’re prototypes. At the point that a user or client typically sees a prototype, coding hasn’t started, or maybe it’s just started. But what they’re seeing is not the final product
Rachel: Prototyping, I think, is also great for sharing with stakeholders or sharing within the company so that it gives it some indication where it’s going. I find that wireframes are hard to conceptualize in terms of visuals. So prototyping is that next step that gets people excited to really understanding the system and also helps with the internal teams, the development teams.
Why is Prototyping important in the design process?
Rachel: Prototyping is generally a communication tool between developers and designers.