Visio - the interaction designer's nail gun (3rd edition)
The Q2 2007 issue of GUUUI is a third edition of an article on using Visio for rapid prototyping for the web. The new edition includes a minor update of the GUUUI Web Prototyping Tool that eliminates a major shortcoming: the inability to create scrolling pages. The update also includes brand new sketchy interface widgets.
- April 08, 2007
See also: Prototyping and wireframing (120) Tools (106)
Is there any chance the sketchy interface shapes could be made available for older Visio versions? I'd love to use them.
| April 11, 2007
Absolutely wonderful stuff, you've created a really fantastic tool. I love the new scrolling capability, and the sketch widgets will be incredibly useful.
Keep up all the good work.
Chris Khalil - Melbourne, Australia
| April 11, 2007
Thanks, but I still get a "file created with a newer or unrecognized version" error :-(
I've tried it both on Visio 2002 and Visio for Enterprise Architects, but no luck...
| April 11, 2007
Working on large projects I miss the ability in Visio to connect and assemble various Visio files (VSD) into a joint HTML prototype. It should be possible to create links between VSD files and not only between tabs in the same file.
Has anyone found a good way for a team of several interaction designers to work on various project defined products (e.g. Global navigation, Latest news widget) and then creating a common prototype?
| April 24, 2007
Thnx very much for the great template, i can realy use it alot in my interaction designs...one cuestion remains, how do you deal with adjusting your navigation throughout all the pages in a vsd file.. i know you kan make it a model in the stencil, but then when i use "active" or "inactive" the model loses it's link to the master.... any suggestions here?
| May 02, 2007
Great template Henrik
I'm having difficulty in linking to particular shapes on a page. I want to be able to click a link at the top of the page to display content below the fold.
Even when I use the shape name field in the sub address dialog box for the appropriate page it doesn't make any difference to the way the page is loaded.
What am I doing wrong?
| June 14, 2007
As far as I can see, links to objects on a page doesn't work in HTML exports.
| June 18, 2007
Henrik - you rock. I have been using Visio for years and everything I've read from MS on how to do things like this always seemed so complicated that I put off learning how to use the application better. With your toolkit and simple instructions it's like I have Visio superpowers now. :)
| July 20, 2007
What a great prototyping and desing tool... a friend raves about it! I've been looking for an option like this for a while.
I'm sort of new to Visio and all, and was wondering if I need Visio 2003 or 2007? Also, is Visio standard fine or will I need the professional version?
| July 21, 2007
You need the 2007 version to use the prototyping tool. The standard version is just fine.
| July 29, 2007
I've been using your templates in combination with other widgets i found on the web in projects during my graduation project. The prototypes i made with your widgets were so much more consistent, and they really looked lovely!
I think i won't use Niklas' widgets in work for my employer, but they're great for private use! Both a big thank you!
Visio is a great tool for jobs like prototyping, the only problem i'm experiencing is that when i make normal (foreground) pages and background pages, i can't order them in the way i want. It looks like that the background pages can't be reordered and need to be next to each other. Is there a magic trick i don't know about to do this?
| August 01, 2007
Pleased to hear that you like the prototyping tool.
To answer you your question regarding the order of background pages: No, they place themselves as the last ones of the page tabs. To my knowledge there is no magic trick to change this. In my opinion it makes perfectly sense, as the backgrounds are subordinate to pages.
| August 02, 2007
I especially like the sketchy widgets because then the customer understands better that it's just a prototype.
Is there a way to make sketches of a table? It would be neat to have a table widget where you can add/drop columns and rows, edit some basic properties in each cell, etc...
| August 28, 2007
Henrik, I have just gone through your tutorial, and your tool indeed seems really useful. I am considering purchasing Axure, for which I also read the review on GUUUI, but it seems that Visio with your tool will cover my need for the moment, at least. In some regards, Visio superceeds Axure, in terms of the more advanced options to manipulate pictures (cropping etc.)
Q: Is there any way to make the rulers in Visio show pixels?
Q: When you fill in Greek text in links, do you just copy it from the "Dummy Text" widget, or is there some smart way of doing this?
| September 17, 2007
It's me, peter, again.
I've noticed that the widgets don't stick to the same places, according to the zoom-level I am using. Hence, if I move an object when viewing in full page mode, it is like the grid is different from, when moving something when viewing in zoom in, say 50% mode. This makes it difficult to align the objects across zoom levels. Is there any good advice on how to keep the objects aligned? Also, the grid doesn't seem to show up when using the prototyping stencil. Is there anything to do about this?
| September 17, 2007
Here are some quick answers to your two comments.
- No, there is no way to make Visio work with pixels
- Yes, when I need Greek text in a link, I copy it from the text widget.
- I haven't experienced the problem with alignment in different zoom levels. Maybe I just don't pay attention to such details ;)
- The grid is hidden behind a layer placed on the background tab. You can it visible by making the background fill of this layer transparent. But as Visio works with standard paper formats, it won't extend the grid on pages that goes beyond the chosen page format. I recommend you leave it as it is.
| September 27, 2007
these stencils are great for prototyping. They show the right level of detail to discuss about content and functionality, not details.
It would be great if there were some widgets for menus, tables and trees, which are often used in modern applications.
There is a set of such things on looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.html
| October 10, 2007
I have been using Visio 2003, and I found that all of a sudden, the background pages do NOT appear at the end but keep adding somewhere in the middle. I do have several foreground and background pages in my process flow (its long and complex...several modules..)
Is there some kind of limit? How do I fix this short of copying and pasting to previous pages and changing all the damn links
| November 06, 2007
I have managed to coerce Visio into displaying pixel-equivalent rulers and measurements. Here is the simple fix:
| June 01, 2008
Hi, what a wonderful piece of work. Extremely useful. I\'ve encountered a problem though. Initially, when I was using the widgets from the template, the scrolling function would work just fine. However, after adding some widgets from another stencil (Windows GUI), or inserting PNG pictures, the scrolling does not work anymore. Instead, my browser (both IE and Firefox) scales the pages to fit my monitor. Is this normal?
Carlos A. Lastrilla
| July 25, 2008
Nice post.I have used the visio 2003 version.It is good tool.I use the visio to make the software engineering assignment.QuranReading educational site.But i think visio is little bit heavy tool.
| January 12, 2009
I don\'t agree with the statement about browser windows being \'deprecated\'. Every web design needs to fit a certain proportion of it\'s design - or some call to action - above the fold. Any web designer worth his or her salt will always consider the impact of browser size on the design, be it small or large. And wireframing for mobile devices is near on impossible without knowing exactly what the screen limits are.
Even if you don\'t use the classic background of a real browser window, there will always be a need to define the boundary of the design\'s width if not height.
| July 10, 2009
Great post! It helped me a lot when I started my wireframing career. :)
Here\'s a plug-in for Visio that I made - it makes wireframing waaaay faster & more fun, and it allows you to generate clickable prototypes of your work:
| October 18, 2009
I\'d first like to say thanks for this template it\'s great.
Secondly I\'d like t ask your advice on increasing the resolution / screen size.
I\'d like to use the template to design for 1440 * 900 resolution, and like your advice on how best to do this:
Should change the page setup to A3 and increase the page outline?
Or should I select a different target monitor size when publishing as a web page?
Thanks for your help again.
| November 17, 2009
I like the template, it is great and it helps to increase productivity a lot. However, just wondering do you plan to include more UI controls into the template such as datagrid (table) , list, calendar, datetime picker, time picker and etc. Currently, i am drawing those control manually with rectangles, text and lines. Thinking if there would have some reusable component so just drag and drop with little customization, like this template got to offer.
| January 12, 2010
Thanks for this, it looks very useful.
I\'m new to using Visio, so forgive me if this is a dumb question: once these pages have been saved and Visio is exited, how can I reopen them for re-editing in Visio?
| February 17, 2010
Thank You very much for the template it\'s great.
I\'ve a problem when I save my drawing as website the picture is shown much greater then the actual size i\'ve draw it.
Does someone know how I can publish it by the actual pixel size.
| April 21, 2010
Excellent template, many thanks.
| June 30, 2010
Many thanks for the template. Although it is not my area of expertise I know a number of studentss who will find this helpful.
Anyone interested in other aspects of Visio may find my website a useful resource for free tutorials and articles on Visio:
| July 14, 2010
background template not playing very well with visio 2010, anybody knows a fix for it?
| August 29, 2010
I am using Visio 2007 and can\'t edit the text on the Sketchy stencils like I can the normal ones. Has anyone else experienced this?
| August 31, 2010
I found myself in the role of the Business Analyst or BA for one of our important clients. Finally, a chance to extract requirements. After a kickoff meeting and a few work sessions, I had enough information to document the scenarios (use cases) and begin mocking up the interface. Searching around for a nice Visio stencil, I found a site that rang true and discovered the term \"interaction designer.
Certified mcse Expert from Microsoft.
| November 11, 2010
I really like the sketchy style. How was it done?
| March 02, 2011