Hello. You've spent most of this course building your mockups, and now it's time to turn them into a high- fidelity prototype. As you learned earlier in the certificate program, a prototype is an early model of a product that demonstrates functionality. What's the difference between low-fidelity and high- fidelity prototypes? Low-fidelity prototypes are interactive versions of designs that use content placeholders. On the other hand, high-fidelity prototypes are detailed, interactive versions of designs that closely match the look and feel of the final product. Essentially, a high-fidelity prototype takes the design work you've already done in the mockups and makes it interactive. Remember that mockups focus on visual design, but prototypes focus on functionality. A high-fidelity prototype must have these three pieces: visual elements like color, images, icons, and typography; navigation to help users move between screens; and interaction, like gestures and motion, which make the prototype function. First, you'll need to finalize all of the visual elements within the prototype. Basically, this means confirming any written content, illustrations, graphics, and external links that will be part of the final product. In an ideal world, you'll coordinate with other members of your team to make sure you have realistic pieces of content to include in your high- fidelity prototype. But in the real world, you might need to design with placeholders if something isn't ready. Think about this screen of the dog walker app. On the left, the low-fidelity prototype used lines as placeholders for names. You might also use placeholder text like, "First name, Last name" or "Dog Walker A," in a low-fidelity prototype. On the right, the high- fidelity prototype includes actual names and descriptions instead of placeholders. The goal is to have realistic names and profile photos to simulate the real app experience. The second part of high-fidelity prototypes that you'll need to finalize is the navigation for the user flow you want to test. Your low-fidelity prototypes should have already taken into account the critical user journey, also known as the main user flow. Navigation is important because it helps users explore and enjoy your product. Without a good navigation system in place, users will struggle or even stop using your product. Check that you have the right buttons or icons on each screen, like back arrows and Xs to allow navigation to happen. When checking the navigation in a high-fidelity prototype, ask yourself these questions: How does a user get from one screen to the next? How easy is it to locate navigation-related icons, like back arrows? At what point does the user journey end? Finally, a high-fidelity prototype needs interactivity. Remember how you connected each screen of the low-fidelity prototype? Now, you need to add interaction between each screen again, using your new high-fidelity designs. As a reminder, interactivity makes the prototype function. Let's revisit how to make something interactive in Figma, also known as making a connection. To create a connection, first select the item you want to be the hotspot. This is where the user's interaction will take place. You can create a hotspot on anything, like a button, icon, or heading. Second, make the connection. This is the arrow or noodle that connects the hotspot to the destination. You can make a connection by clicking the little blue plus sign inside the circle. Finally, indicate the destination. This is where a connection ends. Remember, the destination has to be a frame or screen. It cannot be an item within the frame. Once you have these connections, you can add the interaction and animation. Interaction and animation includes things like gestures and motion. We'll focus on gestures and motion in this part of the course, so stay tuned for more. You're starting to understand everything that goes into a high-fidelity prototype, so it's time to learn how to create one yourself. Coming up, we'll start working on a high-fidelity prototype in Figma. Let's get going.
