Expand your prototyping knowledge

Tutorial 05: adding a master to a template

This is an old entry, please check this tutorials section in our website

After the last post with tips & tricks, some folks asked us what’s the difference between a master and a template in a fully functional wireframe, so I created a quick tutorial to explain that.

The templates are sample pages, with custom objects that appear on all them. Masters are custom objects, so they don’t work as pages. You can put any object inside a template, including masters. For example, you are creating a huge portal, with a menu bar in some of them. So you can create the template for the pages, and create a master with the menubar, inserting actions and events to the master.

  1. The first step is creating a master. Let’s call it navbar.
  2. I started editing it, creating all the elements: labels, colors, events.
  3. We create a navbar quickly by dragging the pages on your right to the labels, thus creating links. For example, the page aaPlayer, dragged and dropped over the label My Profile creates a link. Since the navbar will be on all pages, you’ll have this link on everypage of your site, quickly.
  4. The navigation is created like that: my profile leads to a page, my team leads to another, and so on.
  5. Then we’ll use another widget to add some efect: we want the label Other teams to have a dropdown menu, with several other teams, just to simulate better how the site’s gonna be.
  6. We drag it to our canvas and start editing the properties, to match the label (colors, size, font, etc).
  7. Note that the text inside the menu is edited on the properties, not on the text. We change another characteristics as well.
  8. When created, the widget only has one submenu. But we want more.
  9. We drag the widget Menu Item. This will do. We change their content to fit what we want, and creating a dropdown effect.
  10. When the mouse comes over, it opens the options.

IMPORTANT: widgets are positioned according to the canvas. Since we want a kind of banner, we’ll put it on the top left corner. This will do. Let’s go back to the template.

On our wireframe, we had a gray box for the menu, just below the logo. We simply replace it with the master. Drag and drop works at best!

We have then a fully functional master, with several links to several pages, working inside a template. Then, we can have all our site’s pages linked between them easily. Ain’t it great?


Victor Conesa

About the Author

Victor is the Product Manager at Justinmind. His specialties include business analysis, usability, requirements management and prototyping. When not busy doing that he is known to eat or sleep.

Comments are closed.