You've followed the exercises in this book. You've put together a nice set of wireframes that demonstrate your skills in Balsamiq. Now what? How are you going to present it? How does it all come together? Will your project become a clickable prototype? PDF? PNG image? Raw XML? All of the above? No worries! In this chapter all of these questions will be answered.
The following list shows what we will cover:
- Prototyping
- Linking pages
- Additional interactivity
- Notes and documentation (also known as markup)
- Exporting for presentation
- XML in Balsamiq
Prototyping is the method for testing your ideas, user flows, navigation, design, and overall usability for the product that you have created. Prototyping also allows end users to interact with your designs and to provide valuable feedback before anything is ever coded. It is also an opportunity to present your work to stakeholders and/or clients before spending long hours skinning your design in Photoshop or finding that you may have missed a few important details along the way, requiring some extensive rework as a result.
As you can see, prototyping is a valuable communication tool. To give you a better idea of just how effective it can be, let's turn your wireframe project into one.
We will begin by opening all of your project files in Balsamiq. If you have been using the files provided with this book, they will be in your balsamiq_project_files folder, as shown in the following screenshot:
With the files open, check that all the page headers are symbols. You will recall that symbols turn green when clicked and produce a green override bar when double-clicked, as shown in the following screenshot:
Now that you have confirmed that the headers are indeed symbols, let's link the navigation in the header to their respective pages.
Wait. There's something wrong!
The navigation text doesn't match the pages we created. I realized this error as I was writing this chapter and decided to keep it in to demonstrate how easily mistakes can be missed so close to the end of a project. The good news is we planned ahead so this error can be easily fixed.
Perform the following steps:
- Open
project_mockup_1.bmml. - Double-click on the header.
- Click on Edit in the green symbol override bar to go to the header Symbol Library master page.
- Double-click on the Link Bar, Navigation widget to make it editable.
- Change the navigation to: Home, Profile, Blog, Data, as shown in the following screenshot:
- Save your work.
- Close the Symbol Library page.
Since we made the changes via the Symbol Library master page, the navigation was updated on every page in your project. Check to make sure.