Flexible, Reusable Wireframe Content with Masters

When you spend as much time in ProtoShare as I do, you quickly notice the benefits of reusing your work. Reusing a piece of content that you’ve already created, instead of rebuilding content from scratch, saves time and, of course, increases productivity.

Revising and making changes to your wireframes is easier and faster if you only need to make the change in one place as opposed to many. I find that using reusable content helps ensure continuity between wireframe designs as well. In ProtoShare, Masters, like Templates, are collections of Components that you save to your Library as reusable resources.

Templates and Masters have a lot in common:

  • They’re both constructed from Components
  • They both allow you to reuse your work within a Project or across Projects
  • They’re both automatically updated whenever a change is a made to the original file

The key difference is that Templates are fixed in position, which means they’re a good choice for headers, navigation or other content that won’t need to be repositioned depending on the page.

Masters, on the other hand, are manually positioned. This means they’re very useful as footers, sub-navigation or other content or functionality that does need to be repositioned between pages. Masters can be considered as more flexible than Templates. Below, I’ll describe a few different workflows or ways you can implement Masters in your wireframe designs.

Create a “Master” Component

While ProtoShare includes an extensive component Palette for you to work with, many of the Components can be considered a blank canvas on their own. Using the Inspector, you can configure many color and appearance settings to adjust the look of the default components.

Wireframe Design - Create a Master Component

How to create a single Master Component in ProtoShare

If you frequently use the same appearance settings on a particular component, you may want to save that component and its settings as a Master. Saving the component as a Master means you can just drag it from your Library in the future, instead of dragging a new component to the Palette and changing its settings each time you use it.

To create a Master from just one component, right click the component in the Editor and select Convert to Master.

Voilà!

Now choose a name for it and a new Master is created and stored in your Library.

Create “Master” Content

Masters are very handy and huge time savers when used for repositionable content, like footers and sub-navigation. Since Masters across a project automatically update whenever a change is made to the master file, they’re particularly useful for making changes later on in the lifecycle of the design.

Wireframe Design - Create a Master

How to create a Master from a group of Components

If you notice that you’re using two or more of the same components in similar positions in relation to each other on multiple designs, you’ll want to create a Master. This way you can ensure that each page has the same content, and if needed, you can adjust the content across the project just by editing the Master.

To create a Master from a collection of components, select the components needed (from the Listing or from the canvas) and either select File and Convert to Master in the menu bar or right-click on the components in the Editor and choose Convert to Master there.

Once you enter in a name for the Master, the new Master will be saved to your Library and ready for use!

 

This entry was posted in Blog, ProtoShare Tips & Tricks. Bookmark the permalink.

Previous post:
Next post:

2 Comments

  1. Ben Shoemate says:

    I noticed that advanced structured (like accordions and tab panels) are not working with the masters. Is this a bug?

    • Jamie R. says:

      Hi Ben! I’m not having any difficulty using these components with Masters. Can you maybe send us a quick email outlining what you’re seeing?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>