Now let's add some additional interactivity to your wireframes.
Perform the following steps:
A new page is created called New Mockup and is identical to project_mockup_2.bmml
. Press Command +
S/Ctrl +
S
to save it. Name it project_mockup_2b.bmml
.
Make sure to save this new file in the same folder as the rest of your project files. If you have been using the files provided with this book, then you would place it in the balsamiq_project_files folder, as shown in the following screenshot:
Now let's take it up a notch and create some additional interactivity.
Perform the following steps:
project_mockup_2b.bmml
the active page.If the component is grouped, please ungroup it.
x
into the empty brackets, as shown in the following screenshot:project_mockup_2.bmml
and place a Rectangle/Canvas/Panel widget on the canvas.15x17
.223,80
.The widget should now look like the following screenshot:
With this new widget selected, perform the following steps:
You should now have a totally transparent widget over the checkbox.
We will now create some more Balsamiq prototype magic.
Perform the following steps:
A red arrow should now appear within the transparent box. This is to let you know that it has been linked to this new page. With project_mockup_2 selected, go into the presentation mode and click your newly linked checkbox.
If you did this correctly, it will appear as if you clicked on the page and a check was automatically inserted into the checkbox. You and I know that you went to a new page, but the person viewing it will just see an interactive prototype. Nice work!
In this exercise, we are going to add a brand new row of text to George's ToDos, via an interactive form.
In the scheme of our design, we are going to use the Add + text in George's ToDos to launch a form popup dialogue box that allows users to add a new row of text to the component. Of course, to do this, we need to create a new page with the form, and another to show the added row of text. Let's do this now.
Perform the following steps:
project_mockup_2.bmml
.Repeat this step to create a total of two new pages.
project_mockup_2c.bmml
and project_mockup_2d.bmml
. popup_form.bmml
, which resides in your project's assets
folder. project_mockup_2c.bmml
.304,142
.Be sure it sits at the very top layer on the page.
project_mockup_2d.bmml
.project_mockup_2d.bmml
. Email boss vacation schedule, [ ]
. Be sure to include the empty brackets.
Your list should now look like the following screenshot, with the new row added at the bottom:
If you notice, back in project_mockup_2c.bmml
, the form has been pre-filled with this same text in the form text field. The idea is to show that whatever the user types into the form will be added to George's ToDos.
project_mockup_2.bmml
and select Add + in George's ToDos, as shown in the following screenshot:project_mockup_2c.bmml
.When you click on Save, the last row of George's ToDos adds a new row containing the text from the form. Sure, you used two separate pages to make this work, but again, to the viewer you added a line of text directly from the form. Remember, with prototyping, how you get to the desired result behind the scenes is secondary to the results themselves.
Now that you know how to create some interactivity, have some fun with it. See where else you can add interactivity and creativity. For example, return to project_mockup_2.bmml
and add some interactivity to the Edit link in the body copy, next to George's Accomplishments, as shown in the following screenshot:
Perhaps clicking on this link changes the page to display an interactive form for editing the text. Maybe it looks something like the following screenshot:
The best part is that with Balsamiq it is totally up to you and your creativity. Explore! See what you can dream up.
If you want to take a closer look at the wireframe above or the completed versions of any wireframe used in this book, you can do so by going to http://www.packtpub.com and downloading the project files from the Downloads section of the book.
18.189.188.238