What is UX prototyping? - Figma Tutorial

- A prototype can be defined broadly, so I want to define the term "prototype" for the scope of this course before we get started. A prototype is an early working model of a design used to gain feedback to rapidly experiment with ideas. Several factors influence what type of prototype you'll create: project timeline, where you are in the design process, and how robust the prototype needs to be. Prototypes can be created with sketches, wireframes, or mockups. A sketch is a drawing of the user interface where designs start to take shape. Wireframes are representation of the layout and content and where everything will reside on the user interface. Wireframes can be grayscale or black-and-white. A mockup is usually a fully rendered user interface with color details, typography, and general layout defined. A mockup looks like the final product. Just a quick note on wireframes and mockups. Sometimes the terms wireframes and mockups are used interchangeably because people refer to design work as wireframes, even if they aren't grayscale. When working with a robust design system, it's sometimes easier to use design components so your wireframes will appear fully rendered even if the work is still in progress. Sketches, wireframes, and mockups are a static representation of the design, but they don't represent the interaction design by themselves. You need to add interactivity or annotations to these static screens to understand how the design will interact when someone takes an action on the user interface. I'm defining interactivity as any behavior that changes the state of the design or the flow based on a user interaction. Simple examples of this includes selecting an icon that might change the view on the page, or clicking on an icon to open a contextual menu. How user interfaces interact are a key aspect of the overall design. Prototyping enables us to test out flows, validate design concepts, iterate through different ideas, and deliver cohesive experiences. One of the key concepts behind prototyping is to validate your designs early and often and without a lot of overhead. There are a lot of different ways to approach a design problem, and prototyping ideas and concepts helps you get through the bad ideas quickly and brings new ideas to the forefront. Your prototype doesn't have to be made with code. You can prototype with anything, from sketches to using fully rendered mockups, and we'll look at some tools in this course that will help you accomplish this.