Working with text in Balsamiq can take some time getting used to. While Balsamiq does offer a fair amount of text control and some familiar formatting tools, it is not a word processor. As a result, there are some formatting tips specific to Balsamiq that you should become familiar with.
Let's get started by performing the following steps:
- Open
project_mockup_2.bmml. - Click on the name, George E. Smith, next to the profile image.
- Press Enter/Return on your keyboard or double-click on the text widget to activate it.
This will turn the textbox into an editable area, as shown in the following screenshot:
- Type a name into the text field or leave it as is.
- Click anywhere outside the textbox to deactivate it.
You can also press the Esc key to perform the same action.
- Using the Property Inspector's Text formatting tools, apply the following to George's name:
- Bold
- Align Left
- Font size:
16
Feel free to change the color of the text too, using the color selector in the Property Inspector.
Formatting with the Property Inspector is obviously useful. But what if you wanted even greater control over the text in your wireframe? What if you wanted to not only format sentences and paragraphs, but also format specific words within them? With Balsamiq, that is easy to do.
Double-click on the paragraph of text in project_mockups_2.bmml and notice the formatting elements surrounding the following highlighted text:
Let's take a closer look at what's going on:
- Italicized: Place an underscore before and after a word or sentence
- Hyperlink: Place brackets before and after a word or sentence
- Bold: Place an asterisk before and after a word or sentence
- Disabled text: Place a dash before and after a word or sentence
- Underline: Place an ampersand before and after a word or sentence
- Color: Add color to the text, as shown in the previous screenshot
Once you have all the formatting tricks, as mentioned previously, under your belt, you can combine them to make hybrid styles. For example, maybe you want to make a word bold and underline it as well.
Let's try this by performing the following steps:
- Place a Label/String of Text widget on the canvas and type the following:
*Bold* an &Underlined& word by *&doing this&*.Be sure to copy all the formatting symbols and text as shown.
- Once typed, deselect the widget and watch it turn into the following:
Try formatting more of the text throughout your wireframe and see what you can come up with by using these formatting tricks.
When adding text to a wireframe, you have choices. Whether you are writing a single sentence or a full paragraph, in Balsamiq you have the option to do both using the Label/String of Text widget or the Paragraph of Text widget.
Label/String of Text allows you to type a single line of text, as displayed in the following screenshot:
Paragraph of Text is an aptly named widget as it allows you to type multiple lines of text, as displayed in the following screenshot:
Let's take a moment now to add some additional text to your wireframe.
When we are done, your canvas should look like the following screenshot:
Once again, I am going to leave it to you to do most of the work. The following are some tips to think about as you complete this exercise:
- Don't retype.
Copy and paste the paragraph already on the page and create the two additional paragraphs, as shown in the previous screenshot.
- Using the Label/String of Text widget, re-create the title George's Accomplishments and the headlines beneath it, as shown in the following screenshot:
- Change the font size of George's Accomplishments to
14and make the text Bold. - Choose a color for the text. Any color will do.
After doing so, perform the following steps:
- Add another Label/String of Text widget and type
Edit. - Set Text Size to
10and Underline it. - Set Pos:
332,314. - Select it all, as shown in the following screenshot:
- Set Pos:
125,310.
How did you do? Does your wireframe look like the example? If it does, great work!