NOTE: This blog has been moved to http://www.looksgoodworkswell.com

Thursday, November 17, 2005

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
Enjoy!

25 comments:

Jason Kunesh said...

Hi Bill-

First off, thanks for the work on RICO, it's incredibly inspiring. I have worked at several large e-commerce companies, and have many of the same issues you identify here and in your earlier article with diagramming tools.

As part of a master's thesis I have been exploring concepts to make a web-based app that would address many of the same issues you mention here as having fixed with Visual Basic.

I had 2 questions:

1. Do you have any gut reactions to the viability of such a project technically as well as socially? From a diffusion of innovation perspective I think it may be hard to get users to switch, so maybe the best we can hope for is Microsoft to eventual web-ize Visio?

2. How do you get around the printing issue? Do you show each of the many states a component could be in when printed?

Bill Scott said...

Sorry for the late response.

I think that a web based tool to create rich prototyping is an awesome idea. I toyed around with such a project at the beginning of the year.

I struggled with whether it should be desktop based or web based.

In the end I got too busy with a new job, moving across the country, working on a book, etc.

Let me know if you start work on something like this.

Q.2.
I don't currently deal with the printing issue. You can hide/show layers for printing and control it that way. However, that is cumbersome.

In a tool, I would expect the print to create a storyboard printout.

Jorge said...

I'm a happy OmniGraffle user, it's possible the same Visio's toolkit but for us?

Bill Scott said...

I am sorry to say that Visio is not compatible with OmniGraffle. I am a Mac user so it disappoints me too.

The problem is Omnigraffle does not provide a rich programming model behind its shapes (or at least that is what I have been told). I depend on this in the Visio Stencil library.

Robb Beal said...

Hi Bill,

Great stuff! I plan on using it in projects at work.

Paula Thornton said...

As this fits into the general category of prototyping, I thought I'd ask this question. Use of the term low-fidelity prototyping appears to be 'equal to' paper; high-fidelity, online.

Has anyone been successful with something in-between [mid-fidelity?] (excluding use of DreamWeaver), where not only are there click-thrus but dropdown boxes can be shown with their associated values?

niLS said...

hi paula,

without further investigation apps like powerpoint come to mind. still, you'd need to prepare some kind of asset library.

recently i've been looking into adobe/mm flex 2 (alpha; free) for rapid prototyping, since it comes with all those dropdowns, lists, etc, and does not rely on a server environment anymore (as opposed to flex 1.x). the learning curve is not steep, and you get results a lot of times faster than in flash/actionscript since you don't have to deal with wiring that extensively anymore. but though there is a wysiwyg editor (eclipse plugin), you'll have to deal with API's and code some things. from my experience, flex 2 code is 1/3 the length of flash/as2 code and a lot cleaner and maintaineable, since it's mostly xml and eclipse as ide is just perfect for that.

Jaime Ruiz said...

Hi Bill,

Just wanted to say thanks for making your toolkit available. Its been a time saver.

Anonymous said...

absolutely terrific stuff. helped me a great deal on a project with a very short deadline. thank you so much

Darren said...

Nils,

Don't know if this appeals, but there is a neat Visio stencil available for wireframing and pre-visualizing Flex apps so you don't have to install Flex, learn APIs, or code anything to create mockups. It's at Digimmersion

kai said...

hi bill,

thanks for sharing the toolkit!
visio is a great tool for building wireframes fast and easy, but i don't know how to make these wireframes interactive.

i was actually looking for a way tu use visio as an interactive rapid prototyping tool.

you provided a way to control layers by double-clicking one of the 'storyboard-controls'.

isn't there a way to control the layers by (one-) clicking a shape like the 'textfield' ore 'save-button'?

thanks,

kai

Bill Scott said...

Kai,

If there is a way to single-click an element and run a script I am not aware of it.

The shape sheet (properties) allowing assigning a script to a double-click not a single-click.

I suppose the reason is that the Visio selection model traps a single click for selecting items. The double-click was unused and therefore made available for scripting.

Bill Scott said...

Darren,

Hey thanks for the link. Looks interesting I will check it out.

Also, there is a Visio toolkit I saw at the IA Summit 06 that looks nice. It is called swipr and you can check it out at http://swipr.com.

Jacco Nieuwland said...

Hi all,

Just a quick explanation on what swipr does: It allows you to export screenflows and wireframes from Visio as an integrated set of HTML files. You have the interaction in the screenflow/sitemap, by navigating between different section, zooming into finer levels of detail and such. From the screenflow it is possible to see all the wireframes (as a popup HTML window, including the annotations you might have made).

The third level of interaction is within the wireframes, where you can define links within visio that, when exported, give you an interactive prototype. This prototype is based on exported images, so only gives you navigation interaction.

Hope that clarifies things. There is (a little bit) more information on swipr.com, but more information will be added over the next weeks. You can also find an example of the output here.

Cheers,
Jacco

Marcellg said...

Although web based are really good I prefer software on my system as a designer specifically creating website design leeds I use a number of diffent tools from VB.net and studio to good old Dreamweaver.

ebonnux said...

Hi Bill!

Can the StoryBoard name and step shapes be modified? I would like to use rectangular shape instead of arrows (to look like butons) but I couldn't find how to do it.

Thanks,

Jerry

Brett Eddy said...

Hi Bill, ran across this old post and thought I would add an iPhone wireframe toolkit I created in Visio for mocking up iPhone and iPhone3G apps. It is here:

http://www.bretteddy.com/iphone

Hope it helps your readers. Cheers.
Brett

dan11 said...

Hi Bill,
Thank you sharing with us. I have one questions how did you create this VSS files which include all of graphic components? Could you please show me step by step? I'd like create my own new shapes to use future drawing.
Thank you so much!
Dan

ale said...

Hi Bill,

I asked you about a step by step process in bulding a wireframe, but today I found this article that you wrote in another site, here is link

http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio

this should be tag here :) Thanks!

PeterPumpkinHead said...

Thanks - great post!

Check out this new plug-in for Visio that makes it faster to wireframe & allows the creation of clickable prototypes:

http://www.visioworkflow.com/

Erin said...

I've been using this stencil for awhile and have loved it! Thank you!!

Are there any newer wireframe stencils that you would recommend? Specifically, I'm looking for one that has a sketchy look and feel but has the powerful controls similar to this stencil (i.e. enable/disable radio buttons vs two separate shapes).

nywebdiva said...

Does anyone know how to change the format of the rulers??

Rakesh Verma said...

Thanks for the excellent blog and providing the stencils I have been looking for around 6 months.

Anonymous said...

Hi Bill,

I'm very interested in the Visio stencil you said we could download quite awhile back. Is it still available? I'm desperately looking for a usable table. When I click on the link you've provided, nothing happens. Hoping you still can offer it for our use.

Former Sabre employee too!

Thanks,

Janice

Bill Scott said...

Hi Janice.

In the block called "Download & Install" there is a zip file. Click the "here" link (yeh it should have been more called out, sorry). You should be able to download it.