Follow our user experience design tutorial to learn how to create a clickable web design prototype using Balsamiq software.
There are a ton of prototyping tools out there, but Balsamiq is one of our current favorites. Prototyping is a user experience design technique that can help you determine how your product or website will function before a visual design has been applied to it. The best way to test the flow from one page in a web design to the next is to link static pages together using a prototyping tool. Here’s a quick tutorial on how to link pages together using Balsamiq. If you don’t have Balsamiq, you can download a free trial.
Step 1: Create a MockUp of a Homepage
Create a mockup of a homepage using elements like rectangles, images and text boxes. Once you’re done, add a navigation bar to the page using button bar element in Balsamiq. Add page names to your button bar by double-clicking on it and typing. Separate page names with commas. Example: “Page 1, Page 2, Page 3.”
Step 2: Create a Subpage
Create a subpage mockup by going to “File → New Clone of Current Mockup.” Then edit the cloned page to create a subpage. Save the subpage with a file name that corresponds to the page name in the button bar. In this example, our file name is “page2”.
Step 3: Click on the Button Bar to Edit it
Click on the button bar navigation to bring up the dark grey Balsamiq “Button Bar / Tab Bar” editing window.
Step 4: Add Links to Page Names in the Button Bar
In the “Links” area of the Balsamiq “Button Bar / Tab Bar” editing window, link each page name in the button bar to the files that you have created and saved. Set the “Selection” option in the “Button Bar / Tab Bar” to the page that you’re currently on.
Step 5: Repeat the Process
Repeat the same process of linking pages in the button bar on the homepage mockup that you have created.
Step 6: Save and View Your Prototype
Save everything and click on the “Full Screen Presentation” icon in the upper right corner of Balsamiq to activate the working low-fidelity prototype.
Step 7: Click Your Prototype
Your web design prototype now has real clickable links!