Revisiting the wireframe project

It is time to put your newly acquired knowledge of symbols to good use. We will do this by adding a header symbol to the remaining pages of your wireframe project and adding a brand new symbol to the footer as well. Perform the following steps for doing so:

  1. Open the balsamiq_project_files folder, which houses all of your project files.
  2. Select all the .bmml files sitting outside of the assets folder, as shown in the screenshot just after the following information box.

    Tip

    Check the page ordering in your folder before opening your files, as they will open in that exact order in Balsamiq.

    The correct order is as follows:

    Revisiting the wireframe project

If you are using Macintosh, you can open multiple files by selecting them and then right-clicking on the selected area. In the menu that appears, choose Open. Another option is to select the files and double-click anywhere on the selected group.

Adding symbols to multiple pages

With all of your pages opened, let's place the header onto every page. There are three ways to do this. We will look at them in a moment.

Copying and pasting the symbol

As we have placed the header symbol onto two pages already, let's start there. Perform the following steps:

  1. Select project_mockup_2.bmml.
  2. Click on the header.
  3. Press Command + C/Ctrl + C to copy it to the clipboard.
  4. Select project_mockup_3.bmml from the file browser.
  5. Paste the header symbol onto the page by pressing Command + V/Ctrl + V.
  6. Position it as Pos: 79,12.
  7. Repeat steps 2 to 6 on every other page.

    Tip

    Balsamiq is generally pretty good about pasting elements into their correct location on a new page. Nevertheless, remember to double-check the positioning each time you paste something, just to be sure.

  8. Finally, save your work!

After completing this exercise, it is a good opportunity to use the Save All functionality in the File menu, as you need to save the changes made to everypage. Save yourself some time. Try it!

Copying and pasting the symbol

Dragging the symbol

The second way to add a symbol to a page is to drag it onto each page from Project Assets in the UI Library.

Double-clicking on the symbol

Lastly, double-click on a symbol in the Project Assets bar in the UI Library to place it on your canvas. Be sure to check its positioning.

Creating a new symbol

Now let's create a brand new symbol. This will become the copyright line at the bottom of every page. Perform the following steps:

  1. Select project_mockup_1.bmml.
  2. Click on the Layout button in the UI Library.
  3. Find the widget called Horizontal Rule and drag it two times to the bottom of the canvas.
  4. Make both horizontal lines of equal width: Size: 1063x5.
  5. Align them by clicking on the Align Left icon in the Property Inspector's Align tools (If you recall, it is the first tool in the row).
  6. Group them.
  7. Position the group as Pos: 79,576.
    Creating a new symbol

Adding some text

Let's add some footer text by performing the following steps:

  1. Click on the Text button in the UI Library.
  2. Select Label/String of Text and drag it to the bottom of the canvas, in between the horizontal lines.
  3. Size it as Size: 1063x21.
  4. Position it as Pos: 79,588.
  5. Type Copyright 2012, Balsamiq Prototyping Wireframe Project, All Rights Reserved.
  6. Center the text using the AlignCenter text tool in the Property Inspector, as shown in the following screenshot:
    Adding some text
  7. Group the text and the two lines.
  8. In the Property Inspector, name the group as copyright_footer.
  9. Click on the Convert to Symbol.
  10. Save your work!
    Adding some text

Although you are naming each of your symbols differently, Balsamiq puts all of them into one symbols.bmml page. This can come in handy when you start building symbol libraries, which we will talk about next.

Adding the footer to all pages

Place your new copyright symbol at the bottom of every page. Remember to position them correctly, Pos: 79,576, and to select Save All when you are done.

Great work! Your wireframe is really starting to take shape.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.82.154