Blog

Use Balsamiq to Create a Clickable Web Design Prototype

Posted by in UX Design, Web Development tagged with ,

Balsamiq logo on a picnic table cover background

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.”

screenshot of wireframe being built in balsamiq

Use Balsamiq to create a working prototype of a web design

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”.

screenshot of dropdown menu in balsamiq

Use Balsamiq to create a working prototype of a web design

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.

screenshot of wireframe being made in balsamiq with dark gray button bar menu

Use Balsamiq to create a working prototype of a web design

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.

screenshot close up of Balsamiq button bar menu

Follow our tutorial to learn how to use Balsamiq prototyping software to create clickable prototypes that test the functionality of a web design.

Step 5: Repeat the Process

Repeat the same process of linking pages in the button bar on the homepage mockup that you have created.

screenshot of buttons in wireframe being created using Balsamiq

Follow our tutorial to learn how to use Balsamiq prototyping software to create clickable prototypes that test the functionality of a web design.

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.

screenshot of full presentation button close up

Follow our tutorial to learn how to use Balsamiq prototyping software to create clickable prototypes that test the functionality of a web design.

Step 7: Click Your Prototype

screenshot of wirefame in Balsamiq with big blue hand over state

Follow our tutorial to learn how to use Balsamiq prototyping software to create clickable prototypes that test the functionality of a web design.

Your web design prototype now has real clickable links!

Mightybytes is a Chicago-based digital agency and Certified B Corporation. Connect with us on Twitter or get in touch via our contact form.