Speed Wireframing a Click-Through Prototype using Symbols

May 27, 2011 · Posted by Mike in in vivo, mockups, tips and tutorials and tagged , , , · 4 Comments

There's so many ways to use Mockups. I rarely do click-through prototypes, but if I have to, then I count on Symbols and links to make it painless.

This speed-wireframing video shows you how to:

  1. set up a menu (linkbar in this example) and create a symbol from it
  2. place instances of the symbol in all of a project's wireframes
  3. override the symbol instances to show selected link
  4. edit the original symbol to set the links and update all the instances
  5. and then demonstrate it

It's quick and easy. Want to know more about how to do it? Ask us!

Comments (4)

  1. Great vid and groovy soundtrack!

    Alex Grechanowski
    Jun 03, 2011

  2. Pingback: Prototyping User Interaction with Balsamiq « Dev 4 Soup

  3. For those who’re looking at this and thinking.. well I’m sure Balsamiq can export to HTML (DOPE.. no it can’t :( ) … You need to take a look at http://www.napkee.com

    Omair-Inam Abdul-Matin
    Jul 28, 2011

  4. You can find all the third party tools that will convert Mockups into code including HTML/JS/CSS, MXML/AS, WebORB, and to Mobile applications here:

    http://balsamiq.com/support/community#exporting

    Hope this helps.

    Mike
    Jul 29, 2011

Leave a Comment

Your email is never published nor shared.