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, Tools & Software, Documentation, Interaction Design at 19:00 | Comments (9) | 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)

These wireframes are great. Thanks Nam-ho.

How about Pixel based rulers and Proportionate fonts? Any thoughts?

I'll try.

#6 Harsh (Homepage) on 2008-12-12 13:42 (Reply)

Hi,

Thanks for the stencil. I use Visio for a lot of my work and am currently writing a comparision of different stencils. I'll include yours in it.

cheers
Tony

#7 Tony Murphy Web Architect (Homepage) on 2009-03-19 15:14 (Reply)

Great template, I've been looking for this for a long time!!

For those who would like it to scale, try this:

File > Page Setup

Page Properties tab
Change Measurement units to Picas

Drawing Scale tab
Change Drawing Scale to Custom Scale
Specify 1p = 25 p

Click OK.

Now drag in one of the stencils. Looking at the Page 1024x768 (980x690 actual) stencil has a width of 975p. Close enough!!

Thanks!

#8 David Lozzi (Homepage) on 2009-04-02 13:14 (Reply)

This is really helpful! Thank You.

Frank.

#9 Frank on 2009-04-03 14:11 (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

eschber about Social bookmarking trends behind the firewall
Thu, 04.06.2009 11:30
The above thought is smart and doesn’t require any further addition. It’s perfect thought from my side. social [...]

brian about What We Learned at RedUX - DC '09
Fri, 29.05.2009 15:57
Thanks Dilini! I also enjoyed it.

Dilini A. about What We Learned at RedUX - DC '09
Fri, 29.05.2009 15:43
Great event! Learned a lot, had a wonderful time and met many great people in the field. Thank you and the others for [...]

Linda about ProjectSpaces Competition, Part II
Thu, 21.05.2009 15:55
Hi. Do something every day that you don't want to do; this is the golden rule for acquiring the habit of doing your duty [...]

baschwar about Trapped Above the Fold
Mon, 20.04.2009 13:09
I think 'the fold' depends on the content of the site. If I have a site dealing with products (not an article, blog [...]

jason about Hierarchy - Design's pecking order
Fri, 17.04.2009 13:35
Very good article

Frank about Scaled Visio Wireframe Templates & Stencils
Fri, 03.04.2009 14:11
This is really helpful! Thank You. Frank.

David Lozzi about Scaled Visio Wireframe Templates & Stencils
Thu, 02.04.2009 13:14
Great template, I've been looking for this for a long time!! For those who would like it to scale, try this: File [...]