Visio Wireframe Toolkit for Download

In an earlier post I mentioned a wireframe toolkit I wrote for Visio to make wireframe creation go much faster. Specifically I discussed one aspect of the kit-- animating wireframes with Visio. I wrote a fuller article that is just getting around to being published on boxesandarrows.com. It should show up this weekend.

In the article, I provide a reference to the fuller wireframe toolkit and they (at boxesandarrows) have agreed to host the installation files. Since I have not really explained the wireframe toolkit nor provided a way to download it before, I felt it would be important to provide a blog article about the kit and how to get it for your own use.

Caveats
Please note. The kit was fine-tuned for our frameworks at Sabre (some of which became the openrico.org project). As such the code generation is only beneficial to those with that framework (sorry, not Rico). However, those that are industrious can open up the Visual Basic Editor in Visio and find the code that generates JSP and Java/Swing code and simply replace it with code to generate PHP, ASP or whatever suits your fancy.

Also, the style has been reduced to a mostly color-less variety suitable for wireframes. In the original we had our demo CSS style implemented in Visio. The color-less variety was a really quick hack I did to dumb it down.

I don't have any proper documentation. I have included a movie presentation on how some of the features look when someone is using them.

And finally, I have spent no time in the last 5 or 6 months refining it. Now that I understand how to create Visio shapes and manipulate them I would do some things differently. I keep thinking it would be nice to clean it up, fully document it and release it. That though was what kept me from sharing it before. So, here it is. Hopefully, some will find it helpful.

Wireframe Prototyping for Visio

Visio is widely used by interaction designers and information architects for creating wireframes. At my previous employer, Sabre, I created an extensive wireframe toolkit for Visio that included such features as:

• Complete web component stencil library (including standard components, table, menus, tabs, and tree)
• Fast, intelligent snap-to layout using pre-programmed Visio connectors
• Provide a way to visualize rich interactions (animating a wireframe)
• Intelligent components that have built-in behaviors
• Generate requirements documents from wireframe artifacts
• Generate code from wireframe artifacts
• Automated annotations and callouts

Download & Installation

The stencil library is available for download.

1. Make sure you have Microsoft Visio 2003 installed on your machine.
2. Download the zip file
3. Unzip this into your C:\My Documents\My Shapes folder. (My Shapes should have been created by Visio when you installed it.) You should have the contents of the zip directly in the My Shapes folder.

Now that it is installed, you can navigate to this directory and double-click inlineEditWireframeExample.vsd to experiment with the photo editing example. If you want to create a new Visio wireframe using the stencil library double-click the Wireframe.vst file.

Notes

• Make sure you allow macros to run (change your security setting to avoid the annoying messages... sorry I know how to fix this, just haven't gotten around to it.)
  
• The templates were originally built for enterprise web applications. Some parts may or may not be applicable to your application. I welcome feedback. At some point I would like to rework to be more generally useful.
  

Boxes And Arrows Article

Look for upcoming article (11/20/05 ?)

Presentation

• You can download a presentation of what the Visio stencil library contains. Download it as flash (4 MB) or as a quicktime movie (this contains all of the embedded videos -- 5 MB). I recommend the .mov version.
  

Enjoy!