Now that we've linked pages and added additional interactivity to your project, let's talk about another important aspect of presenting your work, one that centers on handing your work off to the folks who will code it.
As a wireframe architect, you will often be working closely with developers who are tasked with turning your wireframes into online interfaces, using real code. Their understanding of what you want is key, not only to ensure proper functionality, but also to ensure that your vision, your standards and the user experience matches what you get back from them.
You see, working with developers can often result in a coded interface that looks something like what you had in mind, but is more often closer to an interpretation of your wireframe. In other words, some code may not render properly on screen, alignment may be a bit off due to browser incompatibility and/or some of the details you specified may have been left out due to time and/or budgetary constraints.
The reality is, you really never know what will happen once it is out of your hands. To counter common issues like this requires that you communicate with your development team early and often. It also means preparing your wireframes with enough detail and guidance so that nothing is left to chance or left to interpretation. In other words, you must not only show your work, you must tell its story as well.
Not surprisingly, Balsamiq provides tools to do that as well.
As you already know, Balsamiq is loaded with useful widgets. Some of these fall under a category called markup. Markup is merely a fancy term for making notes on the page for others to follow. Markup widgets can be found by clicking on the Markup button, atop the UI Library, as shown in the following screenshot:
Here, you will find everything you need to document and notate your wireframe, make comments, and essentially make it easy for those viewing your work to follow along.
Once again, I have taken the liberty of adding some markup to your wireframe to give you an idea of what it might look like in the real world.
To view it, perform the following steps:
- Open
project_mockup_2.bmml. - Click on Show Markup.
That's the button in the upper-right corner of the screen, next to the Full Screen Presentation button we used earlier, as shown in the following screenshot:
Feel free to edit what I have done or add some of your own markup. The Markup widgets are easy to use as well. Just double-click on them to edit the text. You can also use the Property Inspector to modify and format the mockup widgets. Explore!
Once again, the goal of markup is to be as clear as possible when you hand your work off to other people. It is not the only solution to avoiding issues completely, but markup will at least provide some detail, inspire questions, and engage constructive feedback, which in the end will save you time in the near term and help you to avoid many unnecessary surprises later.