SIGIA-L Mail Archives: SIGIA-L: Wireframes? Summary
SIGIA-L: Wireframes? Summary
From: Susan Zeyher (susan_z40_at_yahoo.com)
Date: Mon Mar 04 2002 - 21:13:27 EST
Thank you all for helping me figure out what
wireframes are. Here is a summary of the answers.
~Susan~
Question:
What is a wireframe? I'm afraid this question will
sound stupid, but I really want to know. My
background is library science and I've read the polar
bear book. I can guess that you don't start by going
to the hardware store to buy a spool of copper wire.
:) Please, kindly, help me out.
*****
Example:
http://petervandijck.net/images/layout500.gif
Usually they are less detailed. A wireframe shows what
goes on a page, but doesn't show visual design.
http://www.iawiki.net/WireFrames
Wiki for answers to this and so many other questions.
*****
No problem:
The term wireframe is taken from 3-d development where
when you are creating objects, you first create a
wireframe (like making a pinata). Think of it as a
skeleton, but w/ more shape. (Go rent Toy Story on DVD
and look at the making of sequence.)
The idea translates to interaction design when you
acknowledge that under every screen of an interactive
digital experience there is structure that the look &
feel (or visual design) has to attach itself to.
Wireframes for an IA is this structure. It is also
where an IA can detail out interactive behavior, and
create a script of story board of the experience.
*****
below are some links but are not exhaustive. I have
others,
just can't find them right now...
A brief overview at webmonkey contains a decent
example and
explanation. The full article is here:
http://hotwired.lycos.com/webmonkey/design/site_building/tutorials/tutorial1
.html
...while the specific page I'm referring to is:
http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=design
Another, slightly more elaborate example can be found
here:
http://www.bobulate.com/case_studies.html (in the
left-hand column,
you'll find a link called "Wireframe Schematics" - I
send you to the case
studies page because you may find the rest of it
useful as well).
An expansive enough list of resources on all things IA
can be found
here
(http://www.jjg.net/ia/) and here
(http://argus-acia.com/ia_guide/subject/index.html) as
well. Enough
links to keep your spare time loaded for a few months.
:)
******
I'd love to answer the question in a much more
professional manner, but I have no time! A wireframe
is a visual representation of behaviorial requirements
and required content in a quasi-approximate layout of
what an eventual design will look like. A guideline
for discussion purposes as teams move through site
development. Leads to more precise site according to
what original intentions were. Reduces re-development
by getting right the first time.
On mid to large sized websites, and absolute must
have! Even though a guideline, *NOT* one to be
ignored, it is as much the site bible as is a
technical or functional spec.
Ah yes -- one more point -- *this is page-by-page_,
painstaking detail at times . . .
******
here is an article that should help you!
(http://www.webtechniques.com/archives/2001/10/chak/)
and a link to a good example!
(http://www.webtechniques.com/archives/2001/10/chak/figures/1.shtml)
[snip]
Wireframes. The first step in the design process is to
create a sketch
of what your screens look like through a wireframe.
Wireframes provide a rough
page layout and can elaborate on the page content. A
series of wireframes
also illustrates the screen flow of a particular
scenario.
To see what the webtechniques.com home page would look
like as a
wireframe, see Figure 1. Now, you might be asking,
"Why bother? Why can't I do
mock-ups in Photoshop or go straight to HTML?" But
creating a wireframe helps you focus on how your site
works and reads, not on how it looks. Once you start
using Photoshop or HTML, it's easy to become
distracted by the visual design
and lose sight of the content and functionality that
will drive your site's user
experience.
There are different techniques for creating
wireframes, such as pen and
paper, or any number of drawing or presentation
packages (Visio, Adobe
Illustrator, PowerPoint). It doesn't matter what you
use to create wireframes,
provided you remember two things.
First, wireframes should be quick and easy to change.
They're meant to
provide you with a simple way to move through multiple
design iterations. The
more you iterate, the better your designs will be. If
it takes too long to
create your wireframes, then you're probably
over-designing them, which brings me to the second
point.
Wireframes shouldn't look like designs. They aren't
art?they should be
plain, simple, and functional. If you've given them
beveled edges and are
using the latest Photoshop filter, you've gone too
far. I also make my wireframes
in grayscale only, so that visual design doesn't
become a distraction.
Consider using PowerPoint as a tool for creating
wireframes. The limited drawing
tools help assure that your wireframes aren't
over-designed, and it lets you
present screens in a linear format to describe
scenarios. It's also convenient
for electronic distribution and for sharing notes
among team members.
******
Don't know if I'm repeating a reply you might already
have received,
but the term wireframe was a stumper to me too the
first time I heard it.
Basically, it's a skeleton of a page. You would
include in it all the
elements you know the page will contain, but without
any real content
or graphic design. It's kind of a page blueprint or
template, a guideline
eventually used for building the real page with the
actual art and content.
******
wireframe is another term for a prototype...
when you think of wireframe imagine chickenwire or the
outline in a 3D
rendering.
it's where your prototype is grey and the contents of
the information are
simply placeholders.
wireframe is different than a mockup as a mock usually
contains graphics
that will be used.
******
Wireframes describe the elements on a web page; form
elements,
navigation elements, headers, images, etc. As you may
have gathered from earlier threads, they can come in
all different formats and degrees of
refinement.
The idea is to communicate the elements and their
hierarchy without describing layout, color choice,
etc. It's a shifting blurry gray line, making for fun
conversations for all involved.
I believe the term comes from the 3D Graphics world.
******
I can send you a pdf if you want a visual instead of a
lot of people saying "it comes from the 3-d world."
<grin>
******
Story Board is the key word(s)
wireframes: ( also know as functional page mock-ups
or paper mock-ups)
It is a design document containing bare-bones
storyboard [blow by blow
virtual "screen shots" in generic gray 'boxes'
format] of clearly
organized content & navigation schemas for software
applications, web
sites, etc
Illustrating the first 3-4 level of drill down for
the website/application
page by page (as a blueprint for the actual HTML
Prototype, with check
list of every link, button, functionality widget,
etc. for every web page
in question.
******
A wireframe is like a mockup--a minimalistic way to
look at a page (or series of pages) without aesthetics
and usually without functionality. Wireframes can be
paper based (considered "low fidelity") or html based
("high fidelity"). When HTML based sometimes they have
some limited functionality built in.
Wireframes are useful for communicating ideas and for
user testing.
******
'Wireframe' was a mystery to me also, so don't feel
alone. The concept comes from moving making and
animation - think 'storyboards' (and see this
explanation of flowcharting and storyboards for movies
- the link to the storyboards for 'Twister' are fun
and illustrative of the concept.)
http://www.cortland.edu/flteach/mm-course/flowchart.html
There is also a link to storyboards that relates a bit
more to what wireframes are:
http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/storyboard_example.html
To me, this is what information architects appear to
do - plan the structure, movement, image, narrative,
and 'look' of the website (or other information.)
But rather than use 'storyboard', information
architecture adapted a different word, 'wireframe',
from the animation and 3D illustration word:
'wireframes' - such as this page with some wireframes
heads:
http://www.research.att.com/projects/AnimatedHead/p_ath.html
or this page with a wireframe map:
http://meru.cecs.missouri.edu/mvl/flyby/simplification/
But what I wonder is why this double-talk of words /
meaning?
*****
I should point out that the term "schematics" is also
used for these page-by-page representations of a site
or application. Taken, one supposes, from
architectural drawings, both from construction and
networks.
******
END
__________________________________________________
Do You Yahoo!?
Yahoo! Sports - sign up for Fantasy Baseball
http://sports.yahoo.com
This archive was generated by hypermail 2.1.2
: Sun Nov 23 2003 - 22:55:05 EST
|
