Page view of masters as simple layout illustrating page composition and component names


#1

Hi there,

I have been playing with Azure for my company for a few days and trying to see it it will fit our processes.

We are a full service digital agency, taking on projects that need concepting through to building and then maintaining.

The general rule of thumb is nothing should be developed or designed until the feature:
1 - Has all requirements gathered
2 - Has a wireframe of:

  • a - The placement of the feature within the existing product
  • b - The detailed wireframe of the feature with all its states
  • c - The wireframe is clearly label the different components for efficient communication

With axure we are able to create great wireframes of web applications with re-usable components by way of the “masters”.

We are struggling however with 1 aspect: Providing a page composition layout complete with component naming.

Here is a simple layout of masters:

If you have the program, it is easy to click around and learn which section of the page is which component. For example the top box with the blue button is the “CCommentBox”.

What we need to to be able to simplify this to only outlines and names of the components used, the result would look something like:

What I want is to be able to output from Axure a PNG/PDF of this simplified layout with the master names used as illustrated in the sketch.

When we supply wireframes without this view, money is wasted due to terrible communication, nobody uses the same naming for the components as nobody has a simple view with the name of the component to use. As a result, connsultants use the name in they created, but designers don’t see this name and invent a new one, and then the developers don’t know the names so go ahead and invent another name. The client on the other hand has no idea what is going on and the whole thing is a complete mess.

We don’t want to rely on the axure cloud sharing as this requires everyone has access, we want static images pulled from the axure program so we can safely store hard copy versions without any confusion.

Could anyone from the community or Axure help?

Thanks,
John


#2

Probably many ways you could do this. Here is a quick mockup of a few:

Component Name Specs.rp (1.1 MB)

In general, there is a feature to export all pages as PNG (or other format): File > Export All Pages to Image… You can also make use of the “Word spec” feature in Axure to save your pages as a Word file (or print to PDF).

So basically, you need to devise a way to show the component names by default in the Axure editor, depending on what you find the easiest or most efficient. You can choose to show these in the clickable prototype or not. These can be built into Master widgets or saved as a Widget Library so that designers can simply drag them onto pages just like the standard widgets.

  • You can just drop in your hand sketch of the component names (or create them with Axure widgets) and show them side-by-side. If you don’t want the component names to show by default in the clickable prototype, add a “Hide This” action to the OnLoad event.
  • You can use the Notes pane so that users can see the names in the clickable prototype. These won’t save to PNG but you can include them in the Word doc and/or print to PDF which would give you a separate, static spec for component types.
  • Or, create a child page with the component names shown. Or, you could create a folder of pages with just the component names. In the HTML generator configuration you can choose to include these component pages or not in the clickable prototype.
  • Or, create a dynamic panel with two states: one for wireframes, one for component names. This could be done as one panel for the whole page or wireframe, or individually for each component. You can set the default state to the component names so that they will be saved to PNG. In addition you can automatically change the state to wireframes when the HTML page loads in the browser.