Scaled Visio Wireframe Templates & Stencils

Wednesday, March 28. 2007

Wireframes have been an indispensable tool for information architects to present and communicate the web page layouts and content placement to clients and developers. In revisiting our wireframes templates, I wanted to tackle a couple of issues that have been brought up across the years since I last wrote anything on the matter:

A common question from clients is, "Where is the fold?"
A common critique from developers is, "You can't fit 4 columns on a page - you don't have the page width". What this is saying is that the wireframe falsifies scale, with IA's often manipulating font sizes to fit their layout.
"Is the page showing 800x600 screen resolution or 1024x768?"
IA's have commented, "The homepage often ends up being longer than other pages, and it's hard to show that in a wireframe template that is not long enough." IA's often end up continuing the page on a second page or worse, compressing the page vertically that may compromise the integrity of the design.
Unlike "traditional" architects who print blueprints on large format plotters, IA's are limited to the paper sizes in the office or clients can print to - 8 1/2 x 11 page

Taking all these thoughts and comments into consideration, we set out to design a Visio wireframe template and stencil that was more reflective of the true scale on webpages, shows the fold, is long enough for longer pages, and fits on an 8 1/2 x 11 paper. The result was a template whose fonts are small but legible (who really reads "Lorem Ipsums" anyway), with space for notes on the side. You be the judge.

Visio Wireframe Template / Stencil (Zip | 160k)

Posted by Nam-ho Park in Information Architecture at 19:00 | Comments (5) | Trackbacks (0)

Trackbacks

Trackback specific URI for this entry

No Trackbacks

Comments

Display comments as (Linear | Threaded)

http://iainstitute.org/tools/

ia institute has some great downloads

#1 Jesse Thomas (Homepage) on 2007-03-31 21:01 (Reply)

I like the idea of showing the whole homepage on one visio page with the gray showing all information below the fold.

#2 greg (Homepage) on 2007-04-03 14:22 (Reply)

Forgive me for this very simple question but how do you "transpose" the font size in your stencil to that of a true font in 1024 x 768? Does that question make sense?

#3 Todd Andress on 2007-04-24 12:36 (Reply)

Good stuff guys, I was breaking my head trying to determine 800px, 1024px in visio. You guys saved me some valuable time.
Now I just have to update the wireframe template to fit into an A4 paper.

#4 Juan Ruiz (Homepage) on 2007-11-21 01:46 (Reply)

Thanks for the great stencil. Could I talk you into applying a license to the stencil like from Creative Commons or GPL? I would like to work with the stencil and make some wireframes that I could distribute, but I'm nervous doing this being that there's no license.

BTW, two quick notes of feedback.

It would be great if there was some way of applying a pixel ruler so that sizing of columns, images, etc.. was somewhat accurate. Perhaps there's a way of doing this in visio, but I haven't seen anything other than metric/standard measurements.

Second, I looked for a way of contacting you about this and couldn't find an email form or anything. It would be great if your website had a method of sending a private note.

Again, thanks for the great stencil.

#5 Michael Julson (Homepage) on 2008-03-27 13:18 (Reply)

Add Comment

Name
Email
Homepage
In reply to
Comment	Enclosing asterisks marks text as bold (word), underscore are made via _word_. Standard emoticons like :-) and ;-) are converted to images. E-Mail addresses will not be displayed and will only be used for E-Mail notifications To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly. Enter the string from the spam-prevention image above:
	Remember Information? Subscribe to this entry
Submitted comments will be subject to moderation before being displayed.

Quicksearch

About This Blog

The User Experience & Design Blog covers issues that affect the web user's experience, which include information architecture, usability, accessibility, web development and latest trends. It is authored by the User Experience & Design Team at Forum One Communications, a web strategy/technology firm in the Washington DC area.

Comments

Jared about Primary Navigation Image Replacement
Tue, 29.04.2008 17:45
Thank you for the assistance. It worked perfectly.

Dave Yuknat about It's Called Usability Testing, not User Testing
Mon, 31.03.2008 09:38
Ditto what Anna said. Each time a Project Mgr or a biz owner asks me, "when are we doing user testing"? They are [...]

Anna Marshall about It's Called Usability Testing, not User Testing
Thu, 27.03.2008 16:35
Your points on the idea that you're testing a site, not the user, are well taken. But I think "user testing" can be [...]

Michael Julson about Scaled Visio Wireframe Templates & Stencils
Thu, 27.03.2008 13:18
Thanks for the great stencil. Could I talk you into applying a license to the stencil like from Creative Commons or [...]

Matt Humphrey about Fly-out Menus are Evil
Tue, 25.03.2008 22:08
Dave, you actually raise a good point that I think gets overlooked very often. Laptop/touch pad users tend to get [...]

Matt Humphrey about It's Called Usability Testing, not User Testing
Tue, 25.03.2008 14:58
To add to the semantic mix-ups, there's also User Acceptance Testing (UAT) which usually consists of testing the site or [...]

Dave Wittzel about Fly-out Menus are Evil
Fri, 21.03.2008 12:51
Hear! Hear! Speaking as a user, I have particular problems when using a touchpad.

George about Fly-out Menus are Evil
Fri, 21.03.2008 08:58
And still the latest Amazon.com uses fly-out menus. Amazing.