This article will go through the process on how to create the low-fidelity prototype in Adobe XD as well as in Figma. A low-fidelity prototype is a simple, interactive model that provides a basic idea of what the website for your portfolio project would look like. To do this, you’ll be connecting the pages of your digital wireframes in Adobe XD to simulate the user flow. Connecting the pages will add elements of navigation and functionality to the design.

Step 1: Create a user flow

Start by thinking about the task you would like your users to complete. How will they navigate through the neccessary pages on your website? How will they go from one page to the next? Place your wireframes in an order that follows the user flow.

It’s important to build a user flow that also allows users to:

1. Move forwards and backwards
2. Enter the flow from different starting points
3. Clearly understand when the desired user flow has ended
4. Return to the entry point after completing the simulated interaction

Step 2: Open your project and open prototype mode

To get started, open your digital wireframes project in Adobe XD, which is the design tool that you’ll be working with to complete your project. Then go to the top left and click the prototype mode tab. Now you can start to create the user interaction flow between the pages!

If you’re unable to download or use Adobe XD on your device, you can create your lo-fi prototypes in Figma. The design tool is free and can be used on any browser, which means it doesn’t require downloading to install.

Step 3: Decide where the user entry point will be

Study the wireframes for a few minutes to decide on the main user flow. This will help you decide where the user entry point will be. An entry point is the starting point for user interaction in the prototype. Think about what you want your user to be able to do, then think about your website structure and how they migh navigate through it. What is the place you want them to start their journey? That will be your entry point.

For example, you may choose the search button on the navigation bar of the homepage as the entry point for your prototype.

For the demonstration, we want the user to able to go login to their account from the homepage. We call it a “login flow”.

Step 4: Connect artboards using connection nodes

Connect the items in the artboards to allow users to click through the pages of the website. To do this:

1. Select the first element you want to connect. After you select the element, a blue arrow will appear.
2. Click and drag the arrow to the destination element on the other artboard.
3. Release the mouse. You’ll notice a blue arrow has been drawn connecting the two items.

Congratulations! you’ve just created the first step in your user flow.

Step 5: Repeat step 4 to complete the user flow

Working carefully and using your user flow as a guide, create the other interactions by following the same instructions from Step 4. You can check to make sure each connection worked by previewing your prototype.

After you’ve created a user flow that matches your plan, be sure to preview the interaction for the low-fidelity prototype to make sure it’s working correctly. To do this, click the “play” icon at the top right of the screen. After the preview window appears, you can test out the user flow by clicking on all the buttons that you connected earlier. If the user flow isn’t correct, you can go back and fix the interactions. If something feels off, now is the time to adjust your user flow and update your prototype.

After you’re satisfied with your prototype, you can save your work.

For your portfolio, you should connect all the wireframes necessary to complete the main user flow. This will allow you to test the prototype with users later on.

Step 6: Create a checklist for the interactions

Prototypes are designed to test how well users can complete specific tasks in a simulated activity, so it’s important to be specific about which types of interactions you’d like to build into the prototype. In this activity, there are six targets to focus on for the interactions in your low-fidelity prototype:

• At least four wireframes are connected in a simulated navigational flow.
• Users can proceed forward and backward within the flow.
• Users can enter the flow from different starting points.
• Cues for navigation are clearly indicated.
• Successful completion of the simulated activity is clear indicated.
• Users are returned to an origin point after successfully completing the simulated activity.

Refer back to your user flow as you complete this step.

To learn more about prototypes check out the following links:

• Adobe XD prototype tutorials
• The fundamentals of wireframes and prototypes from Adobe XD

Good luck!