To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  

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.


Henrik Olsen - 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.

Zephyr | April 11, 2007


Hi Zephyr!

Niklas Wolkert has made this stencil (ZIP download) for older versions of Visio.

Henrik Olsen | 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

Christopher Khalil | April 11, 2007


Hi Henrik,

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...

Zephyr | April 11, 2007


Hi Henrik,

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?


P | April 24, 2007


Hi All,

Thnx very much for the great template, i can realy use it alot in my interaction 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?

Jorman | 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?


Richard | June 14, 2007


Hi Richard

As far as I can see, links to objects on a page doesn't work in HTML exports.

Henrik Olsen | 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. :)

Elizabeth | July 20, 2007


Hi Henrik,

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?


Jaz | July 21, 2007


Hi Jaz

You need the 2007 version to use the prototyping tool. The standard version is just fine.

Henrik Olsen | 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?



Ron Kok | August 01, 2007


Hi Ron

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.

Henrik Olsen | 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...


Jan | 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?


Peter Malling | 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?

Peter Malling | September 17, 2007


Hi Peter

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.

Henrik Olsen | 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

Manuel Schaffner

manuel | 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

Prasad Viswanathan | November 06, 2007


I have managed to coerce Visio into displaying pixel-equivalent rulers and measurements. Here is the simple fix:

Cheers, Noah

Martin Polley | 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.

jimmy adans | 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.

Missy | 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:


jperrier | 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.

Karl | 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.

anthony | 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?

Phil Parry | 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.


stephanie | April 21, 2010


Excellent template, many thanks.

Rik Hemsley | 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:


David Millard | July 14, 2010


background template not playing very well with visio 2010, anybody knows a fix for it?

Bo | 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?

Spence Hackney | 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.

shawn | November 11, 2010


I really like the sketchy style. How was it done?

Peter Newhook | March 02, 2011


Great tool - thanks!

Christophe Fieschi | March 13, 2011



Ad for TechSmith Morae

Browse GUUUI postings

Methods and the design process

Prototyping and wireframing (120)  Usability testing (71)  Cost-justification and ROI (28)  User research (24)  Personas (19)  The design process (24)  Eye-tracking (14)  Card sorting (13)  Web traffic analysis (12)  Expert reviews (11)  Implementing user-centred design (9)  Site and flow diagramming (6)  Envisionments (4)  Use Cases (3) 

Design elements

Navigation (63)  Web page design (41)  Search (27)  Text (24)  Forms (30)  Links (19)  Guidelines and Standards (15)  Site design (14)  Ads (9)  Design patterns (8)  Sections (8)  Shopping Carts (9)  Error handling (7)  Home pages (9)  Help (3)  E-mails (3)  Sitemaps (2)  Personalization (1)  Print-friendly (1)  Landing pages (5) 

General aspects

E-commerce (28)  Persuasive design (23)  Visual design (20)  Information architecture (15)  Accessibility (13)  Search engines (7)  Credibility, Trust and Privacy (6)  Emotional design (10)  Simplicity vs. capability (7)  Web applications (6)  Intranets (3) 


Flash (6)  Download time (5)  Javascript (3)  URLs (3)  Browsers (3)  Web standards (2) 


Bad designs (20)  Cartoons (14)  Fun music and videos (13)  Funny tools and games (12)  Misc humor (8)  Fun with Jakob Nielsen (9)  Designs with humor (3)  Fun posters (5)  Funny 404 pages (2) 

Resource types

Research (130)  Tips and guidelines (95)  Tools (106)  Books (47)  Audio and video (48)  Interviews (30)  Cases and Examples (28)  Talks and presentations (18)  GUUUI articles (11)  Primers (14)  Online books (5)  Posters (5)  Glossaries (3)  People and organisations (3) 

Information sources

Blogs (12)  Websites (11)  Discussion lists (4)  News (3)  Newsletters (3)  Online magazines (3)  Wikis (1) 

  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI