What good is a wireframe if you cannot simulate the basic navigation using links across different pages?

MockupTiger when released had Clickable prototyping feature using the Text widgets

The navigation is done by pressing the shift key and the mouse button on the linked text. In the presentation mode, it will behave just like a web page.

Recently, we introduced the linking of objects through Icons and a new dedicated icon named 'hotspot'.

Hotspot is just an Icon with a square frame, the first icon you see in the icon list

Image

When you drag the hotspot, it comes with a transparent background by default

Image

You can drag and expand or contract the size the way you do it with any other icon

You can overlay this hotspot icon over any other widget to simulate clickability.

Image

Above, the hotspot is stretched and overlayed on top of the comment bubble.

But where is the link?

All icons have the ability to define the link the same we define links for the text widgets.

Double click on the hotspot to bring up the text editor

Image

Now you can press shift and the mouse button on the hotspot icon to jump to the linked page.

Similary you can drag any icon and add the link.

For e.g Consider the Map icon

Image

We will add a link to this Map icon by just including the link tag (make it clickable)

 

Image

NOTE: The position of the link tag is not relevant. You can place the link tag anywhere before the text, after the text, middle of text or without text.

Before Text

Image

In between text

Image

With no text

Image

 

Remember: For external links, the link SHOULD include the full url and start with http://

For internal pages you just need the document reference as explained in the clickable prototyping with text widgets

Related posts:

  1. How to add links to mockup objects
  2. How to use Mockups Vector Icons
  3. Mockups and Wireframes
  4. MockupTiger Release 1.2.63 – 20110825
  5. Wireframe Icons : A quick Primer

Posted in Tutorials