Wireframes

17 Nov 2004 - 8:33am
9 years ago
15 replies
740 reads
Jim Hoekema
2004

I've never liked the term "wireframes" because it comes from ancient days of
computer graphics when you had to create the "wireframe" image first, and
then fill in with local color, reflections, highlights, etc. No connotations
of interactivity.

"Wireframe" is really slang - "mockup" or "prototype" communicates the idea
without requiring the listener to be an "insider" familiar with industry
lingo.

- Jim Hoekema

Comments

17 Nov 2004 - 1:49pm
Listera
2004

Jim Hoekema:

> I've never liked the term "wireframes" because it comes from ancient days of
> computer graphics when you had to create the "wireframe" image first, and
> then fill in with local color, reflections, highlights, etc.

The reason we used wireframes was mostly because the machines just couldn't
keep up with shaded images, especially when you tried to move objects. The
creative process could have any semblance of fluidity only if you throttled
back to wireframes, otherwise it was click and wait.

Things have changed. You can now see multiple objects with millions of
polygons being moved smoothly in real-time with full shading, texture and
lighting effects on consumer level PCs.

So in this day and age, when you have much better tools to prototype, just
how much do we need to throttled back to wireframes for deliverables?

Ziya
Nullius in Verba

17 Nov 2004 - 1:54pm
Dave Malouf
2005

Reasons for wireframes:

Machine technology was mentioned by Ziya

But another one (the one that fits more into a non-3D environment and use of
term) is that I use wireframes b/c "clients" get confused by works in
progress that seem too final. Using wireframes makes it clearer to a
customer that what is being presented is a non-final copy.

-- dave

17 Nov 2004 - 2:00pm
vutpakdi
2003

--- David Heller <dave at ixdg.org> wrote:
> Reasons for wireframes:
>
> Machine technology was mentioned by Ziya
>
> But another one (the one that fits more into a non-3D environment and use
> of
> term) is that I use wireframes b/c "clients" get confused by works in
> progress that seem too final. Using wireframes makes it clearer to a
> customer that what is being presented is a non-final copy.
>
And thus, they seem more willing to offer comments/suggestions about the
design if things don't look too "real."

Clients (and others) also don't get as hung up on things like colors:
"uggh, that stinks! Geez, if you'd only used my favorite blue, I would
like it, but with that blue, it stinks!"

Ron

=====
============================================================================
Ron Vutpakdi
vutpakdi at acm.org

17 Nov 2004 - 2:02pm
Listera
2004

David Heller:

> "clients" get confused by works in progress that seem too final

Don't you have a garish set of widgets and buttons so ugly they scream
"undesigned" even to people who haven't noticed the diva is in jail? :-)

Ziya
Nullius in Verba

17 Nov 2004 - 3:07pm
Daniel Harvey
2004

That must be a nice position to be in. To often it's the level of abstraction required of wireframes that confuses clients.

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
ers.com]On Behalf Of David Heller
Sent: Wednesday, November 17, 2004 1:54 PM
To: discuss at interactiondesigners.com
Subject: RE: [ID Discuss] Wireframes

[Please voluntarily trim replies to include only relevant quoted material.]

Reasons for wireframes:

Machine technology was mentioned by Ziya

But another one (the one that fits more into a non-3D environment and use of
term) is that I use wireframes b/c "clients" get confused by works in
progress that seem too final. Using wireframes makes it clearer to a
customer that what is being presented is a non-final copy.

-- dave

_______________________________________________
Interaction Design Discussion List
discuss at ixdg.org
--
to change your options (unsubscribe or set digest): http://discuss.ixdg.org/
--
Questions: lists at ixdg.org
--
Announcement Online List (discussion list members get announcements already)
http://subscribe-announce.ixdg.org/
--
http://ixdg.org/

17 Nov 2004 - 3:11pm
Dave Malouf
2005

> That must be a nice position to be in. To often it's the
> level of abstraction required of wireframes that confuses clients.

It is about expectation setting. Expectations are different when looking at
something "obviously" a work in progress.
Confusion is the same either way. ;)
Clients are just confused.

-- dave

17 Nov 2004 - 6:09pm
drewbam
2004

Ziya:

> Don't you have a garish set of widgets and buttons so ugly they scream
> "undesigned" even to people who haven't noticed the diva is in jail? :-)

I have tried all sorts of methods of "wireframe uglification" to
prevent clients from misunderstanding wireframes as a deliverable that
contains visual design content, but have most often failed miserably.
It seems that no matter how much time and effort I expend to explain
that wireframes are only meant to convey feature groupings,
information hierarchy, navigation, etc., clients want to talk about
typeface, color, and icons. This, despite the fact that most of my
wireframes are grayscale and contain black rectangles instead of
icons.

Is the answer to simply not share wireframes with the client until
they have been transformed, by the magic of graphic design, into
screen layouts? What tools, then, do we use to discuss application
structure without wasting effort to apply graphic design to each
iteration?

If wireframes are the answer (as I suspect they are), then how do we
ensure that they are not misinterpreted? Must we resort to running our
wireframes through some sort of "pencil sketch" photoshop filter (god
help us if this is the answer)?

d|b

17 Nov 2004 - 6:21pm
Listera
2004

d|b:

> Is the answer to simply not share wireframes with the client until
> they have been transformed, by the magic of graphic design, into
> screen layouts?

And I didn't have to say it.:-)

> Must we resort to running our wireframes through some sort of "pencil sketch"
> photoshop filter (god help us if this is the answer)?

Illustrator has a very flexible filter to adjust the jitter of lines to make
them look hand drawn. It's very effective and you get to keep your lines as
editable vectors. I've been using it for a long time.

Ziya
Nullius in Verba

17 Nov 2004 - 7:35pm
bill pawlak
2004

> > Is the answer to simply not share wireframes with the client until
> > they have been transformed, by the magic of graphic design, into
> > screen layouts?
>
> And I didn't have to say it.:-)

You're kidding, right?

> > Must we resort to running our wireframes through some sort of
> "pencil sketch"
> > photoshop filter (god help us if this is the answer)?
>
> Illustrator has a very flexible filter to adjust the jitter of lines
> to make
> them look hand drawn. It's very effective and you get to keep your
> lines as
> editable vectors. I've been using it for a long time.

Ok, now I *know* you're kidding. (uh... right?) I don't think the
solution is to make wireframe drawings look like pencil renderings...
Are you addressing the business problem you think you're addressing
with the project? Are you talking to the right client reps?

Some members on every client team are always going to be worried about
graphics and colors and the visuals - that's what interfaces are all
about (on the surface). You'll likely always have to deal with (some)
client reps that can't get over the "big grey box that says "Top 10
Holdings for Name Corporation" for a financial/stock analysis screen.

But if you can't get certain client team members to think abstractly
about organization and structure, then the answer does not lie in a
graphics filter or hiring a designer to pretty-up your wireframes. Try
a different approach with the client - get some of the client team
members to explain the interface to the group; have them start
sketching on the whiteboard extensions/alternatives to the layout... be
creative and think about what it is you're trying to get them to
understand.

It's early in the process, so the focus should be on quick iterations,
free-thinking. If you're taking a well-structured illustrator file
(with just the right amount of stroke on the lines, etc.) and then
making it look like you drew it with a pencil, why not just draw it
with a pencil and save time?

bill

__________________________________
Do you Yahoo!?
The all-new My Yahoo! - Get yours free!
http://my.yahoo.com

17 Nov 2004 - 7:39pm
Listera
2004

bill pawlak:

> why not just draw it with a pencil and save time?

Dave Heller says he can't draw. :-)

Ziya
Nullius in Verba

17 Nov 2004 - 8:35pm
Lada Gorlenko
2004

db> Is the answer to simply not share wireframes with the client until
db> they have been transformed, by the magic of graphic design, into
db> screen layouts? What tools, then, do we use to discuss application
db> structure without wasting effort to apply graphic design to each
db> iteration?

In my group, we use wireframes not as a deliverable, but as a
'concession' to clients who lack abstract thinking (that's why they are
the clients and we are the designers). Often in our practice, clients
don't just sign off the final design, but do it in stages: sign off
conceptual design before proceeding with IA, before proceeding with
visual design, etc. (not that we want it, but these are bigger rules).
The client needs to understand the hard abstract conceptual
bit somehow. We use wireframes (b&w boxes and text placeholders,
typically done in PP in five mins per page) to illustrate concepts:
here is the navigational tree, here is the content area, and here is an
idea (or two or three) of how the IA will map onto them. This often
suffices, and that's all wireframes are needed for. Show them when
stuck,
and bin immediately.

Lada

17 Nov 2004 - 9:01pm
drewbam
2004

Lada Gorlenko:

> We use wireframes (b&w boxes and text placeholders,
> typically done in PP in five mins per page) to illustrate concepts:
> here is the navigational tree, here is the content area, and here is an
> idea (or two or three) of how the IA will map onto them. This often
> suffices, and that's all wireframes are needed for. Show them when
> stuck, and bin immediately.

Lada,

I am in full agreement with your use of wireframes, and it mirrors
ours. The problem that I find, however, is in getting the client to
understand that the intent of the wireframe is to illustrate
information and interaction design concepts, rather than demonstrate
visual design concepts. Clients tend to have difficulty separating
form and content, and further difficulty imagining the range of visual
design treatments that could transform a wireframe into something that
appears completely different, from a formal standpoint.

I am beginning to come to my own condlusion on this one--I think that
I will try to develop a standard illustration that demonstrates how a
single wireframe can result in 3 drastically different visual
presentations. I will preface any wireframe review with the aforesaid
explanatory illustration. Every time the client gets hung up on
wireframe button corner radii, I will simply refer back to the
illustration. Now, if only I had time for a bit of non-billable
work....

d|b

17 Nov 2004 - 11:02pm
Dave Malouf
2005

> bill pawlak:
>
> > why not just draw it with a pencil and save time?
>
> Dave Heller says he can't draw. :-)

But I'm in my drawing class now and doing really well.

I can draw a cube free hand w/ straight lines and everything. ;)

-- dave

17 Nov 2004 - 11:17pm
Listera
2004

David Heller:

> I can draw a cube free hand w/ straight lines and everything. ;)

Well, comfort yourself in the knowledge that your computer can take your
hand-drawn sketches and turn them into perfectly regularized lines or take
your synthetic lines and make them look like they were hand-drawn. Ain't
technology great!

Ziya
Nullius in Verba

18 Nov 2004 - 8:56am
bill pawlak
2004

> I am beginning to come to my own condlusion on this one--I think that
> I will try to develop a standard illustration that demonstrates how a
> single wireframe can result in 3 drastically different visual
> presentations. I will preface any wireframe review with the aforesaid
> explanatory illustration. Every time the client gets hung up on
> wireframe button corner radii, I will simply refer back to the
> illustration. Now, if only I had time for a bit of non-billable
> work....

That was going to be my next suggestion... or, use it as an opportunity
to showcase some past client work. THat way, they see the message
twice - once when you're pitching them about your process, and once
again in the middle of the scrum on their own project.

bill

__________________________________
Do you Yahoo!?
Meet the all-new My Yahoo! - Try it today!
http://my.yahoo.com

Syndicate content Get the feed