DesignerVista Tutorials

How to use wireframing links

This tutorial will guide you to create Click-through prototyping using Wireframing feature in DesignerVista Software.

  1. Design Page 1
  2. Design Page 2
  3. Add Links from First Page to Second Page
  4. Add Links from Second Page to First Page
  5. Run Wireframe/Simulation
  6. More Information

Design Page 1

Design first Page as shown below using Label, Button, Panel controls.


Design Page 2

Design second Page as shown below using Label, Rectangle, Panel controls.


Add Links from First Page to Second Page

  1. Select Page 1.
  2. Select Click Here Button control.
  3. Press F6 to change the links.
  4. Edit Links dialog will be shown.
  5. Select Page 2 as target page.
  6. Set Link Enabled checked.
  7. Add a tooltip text.
  8. Click OK.

To add a link to the Label control, select the Label control and follow the above steps.


Add Links from Second Page to First Page

  1. Select Page 2.
  2. Select Go Back Label control.
  3. Press F6 to change the links.
  4. Edit Links dialog will be shown.
  5. Select Page 1 as target page.
  6. Set Link Enabled checked.
  7. Add a tooltip text.
  8. Click OK.


Run Wireframe/Simulation

  1. Press F10 or Select Wireframe | Run... menu item from Main menu.
  2. Wireframe Window will be shown.
  3. In Page 1, Hover mouse on Click Here Button control.
  4. A tooltip text will be shown.
  5. Click on the button.
  6. Page 2 will be shown.


  1. In Page 2, Hover mouse on Go Back label control.
  2. A tooltip text will be shown.
  3. Click on the label.
  4. Page 1 will be shown.


More Information

To learn about HTML prototype, please read Generating HTML Files with links.

The End

This concludes our tutorial. To learn more, please read the next tutorial.