sketch style wireframes

11 Sep 2008 - 8:21am
6 years ago
10 replies
3458 reads
Chris Wright
2008

Been experimenting with 'sketch' style wire frames this morning, having seen
lots of similar things around/online. Not entirely sure of their benefits
though. I came up with:

- They are quicker to create (I knocked mine up with the freehand tool in
Xara Xtreme)
- They make people feel more comfortable scribbling on them
- They (can) look cool.

Any thoughts?

Cheers,

Chris

Comments

12 Sep 2008 - 7:22am
.pauric
2006

One benefit of having sketch fidelity UI elements in your 'toolkit'
is that you can print out semi completed paper prototypes... i.e.
page framework/fixed-containers and also print out individual
elements i.e. buttons, selectors etc. Then when you're
collaborating with your end-user or developer you can start mocking
up the design, throw down element as needed and include hand-drawn
additions, all using same level fidelity. The _big_ problem this
overcomes is that it avoids the cognitive dissonance caused by mixing
hand-drawn additions to printouts that contain high fidelity elements,
or visa versa.

In other words, you will throw a huge spanner in the works if you're
trying to get a user to walk though a prototype that has visually
finished designs and then that extra element you drew in at the last
minute. The addition of different level fidelity elements will
attract their attention, rendering any testing useless.

Niklas Wolkert created a sketchy stencil for visio.
http://www.guuui.com/issues/02_07.php
I've started work on something for Omni that aims to be as close to
what I could draw by hand (but with all the computery modifying
goodness) and welcome suggestions/additions
http://graffletopia.com/stencils/414

regards /pauric

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=32905

12 Sep 2008 - 8:18am
Nick Quagliara
2007

I have a feeling, just from my gut, that using an emulated 'sketch'
style stencil will elicit different reactions from users than a truly
hand-sketched prototype. I think I may just have an aversion stemming
from my hatred of faux hand written fonts.

I guess I'm not answering your question rather offering an
alternative to the 'sketch' templates you can use in the digital
realm. Pick up a pen and draw. You can easily edit your sketches
with tape, scissors, bits of paper, and white out (you can even do
without this).

To your question, sketches will liberate the people you put them in
front of to get active on that piece of paper. I contend, though,
that there will be a difference in engagement between an digitally
emulated sketch and a real one. Does anyone have any evidence of
this?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=32905

12 Sep 2008 - 12:58pm
Robert Hoekman, Jr.
2005

>
> - They are quicker to create (I knocked mine up with the freehand tool in
> Xara Xtreme)
> - They make people feel more comfortable scribbling on them
> - They (can) look cool.
>

I used Balsamiq Mockups on a tiny project earlier this week to put together
and communicate initial ideas without having to scan hand-drawn sketches.
The whole time, I wondered if I was doing more work than I needed to, as
opposed to just going straight into OmniGraffle (which I use to create
final, higher-res wireframes regardless of how I start the process). I kept
thinking that I was going to recreate the screens in Graffle anyway (and
flesh out far more detail), so maybe I was just adding an unnecessary step.

In the end, though, the final designs went a whole lot faster than they
would have otherwise. Because I already knew what needed to be created, I
was able to produce a set of screens in OmniGraffle in a very short time.
And since the Mockups took so little time to create, I honestly think I
spent less time as a whole by using the two products in tandem than Graffle
by itself.

On another note, it's been my experience that lower-res designs (sketches,
etc) tend to elicit better feedback. The more "finished" something looks,
the more likely it is that people will hold back. They think, usually
subconsciously, it appears, that a huge amount of work must have been done
to produce a hi-res design, and they're less prone to offer feedback as a
result. Lower quality designs give the impression that very little time has
been spent on the design so far, so people tend to be more free with their
feedback.

So, using hand-drawn sketches and/or Balsamiq Mockups, I can get ideas out
more quickly, get better feedback, and spend half as much time in
OmniGraffle.

It's too soon to tell how well Mockups will work for me, but it's off to a
good start.

-r-

12 Sep 2008 - 2:21am
Rajesh Jha
2008

Sketch style wireframe sounds good for concept development and putting
up initial design ideas into paper for further consolidation. But, at
the end of the day, a wireframe showing screen controls, groupings,
layout etc would need tools like ppt & Visio. The advantage is that
these wireframes could be iterated easily. In our projects, we have
been adding another dimension to wireframe by including task flows as
well using PPT. It is easy to understand and gives much better idea of
how an application/website would look and behave before creating a
high fidelity prototype.

Cheers,
Rajesh Jha

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=32905

14 Sep 2008 - 3:37pm
Todd Barlow
2008

A couple of years ago, at CHI, there were a couple of papers relevant
to this topic.

This discusses levels of fidelity
http://portal.acm.org/citation.cfm?id=1124959

while this one suggests that visual fidelity, the original topic of
this thread, is less important than presenting alternative design
solutions when soliciting feedback.
http://portal.acm.org/citation.cfm?id=1124960

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=32905

15 Sep 2008 - 7:08am
Anonymous

While you can always do sketch style wireframes on the computer, it
can be even more freeing to do them with pencil and paper. Even when
sketching, the computer can still create the mindset that you need to
make everything "perfect", so that you end up focussing your
attention on the presentation, rather than what really matters about
the idea you're exploring.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=32905

16 Sep 2008 - 8:49am
Brett Christenson
2008

Having recently moved to an Agile environment I have been looking for
ways to quickly present UI Design solutions. I do not have the time
to create pixel perfect mockups up front and during the short
iterations it is important for me to see the behavior then polish UI.

I started collaborating using white boards (In my opinion one of the
best Agile design tools) then creating wireframes in Visio as
reference for engineers. I liked using Visio as it was easier for me
to make revisions and keep digital versions available for remote
co-workers.

While this process seemed to be speed up the process I identified two
issues. I still was not seeing things fast enough to iterate over on
them and dev and documentation team were looking at wireframes as
finished design. Both dev and doc were becoming frustrated as UI
would continually change. After talking to various engineers we found
that they were taking a lot of time to try and create UI as it
appeared in the wireframe. Rather than getting UI stubbed out so that
we could see behavior early they were trying to align elements, refine
colors, basic pixel tweaking...

I wanted to clearly identify wireframes as "conceptual" so started
using the sketchy Visio stencil for my wireframes. I also explained
that these conceptual versions were subject to change as part of the
iterative process. Once we were ready for UI polish/refinement I use
Visio with standard controls or even Photoshop mock ups. Moving to
sketch style has been helpful in our process. I suspect that this
could vary depending on the consumer of design artifacts.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=32905

16 Sep 2008 - 8:58am
Anonymous

Agreeing with Brian on this one.
I can't for the life of me find a video that I've seen about 3 years ago
that focuses on this very topic.
I have converted a whole company into following the Sketchpad religion.
Often times JAD and WAR sessions are captured on a whiteboard with pics
taken after. I've seen 3 companies do this (because whiteboard printers are
so expensive). In several occasions, the flash got in the way of the pic
(because of the whiteboard reflection) and information was lost.
Enter the Sketchpad.
After making the decision to use a sketchpad, one of the first thoughts that
came to mind was "Why didn't I think of this in the first place?"
In one meeting, while trying to explain a concept on paper, the pen was
snatched out of my hand from the marketing coordinator with the statement
"Here let me show you something". Pretty soon, everyone around the table was
hunched over while drawing or pointing to the pad.
Within the same week, 4 of the 6 people who were in that meeting now had the
exact same pad I had.
I don't see any problems with converting information from a sketchpad to the
screen. As IAs, GUIs and Designers, that's our job- to capture information
as effectively as possible and produce it in the best way possible.
Photoshop, Illustrator, Axure, Visio, PPT, Word, Omni, Mindmanager,
whatever, none of these softwares will capture information as speedily and
effectively as the good ol pen and paper.
Try dragging in your laptop and visualizing everything on the screen in a
WAR room session- doesn't happen.
Also notice how many times a URL is shot across the table. Someone may say
something like "Well soandso.com has a good example of this"- And people
begin to scramble for a pen and paper to write it down.
A sketchpad:
1. Can be photocopied and passed around.
2. Is light and readily available to use.
3. Allows others to jump in on the process speedily
4. Makes you look 'Old School'.
5. Allows you to capture 'wild' thoughts immediately ('Buy flowers for the
wife and pick up milk")
6. Captures real-time thought processes whle allowing others to follow along
7. Adds an additional 99 years to your lifespan and stops heart burn.

All in all, there are pros and cons to both (A page in the sketchpad can be
misplace whereas caputered info on a computer is permanent...well almost
permanent.)
When the dust settles, you can NEVER go wrong with using a sketchpad as a
habitual practice in gathering information and producing low fidelity
visuals for the purposes of translation.

Brett Lutchman
Web Slinger.

On Mon, Sep 15, 2008 at 8:08 AM, Brian Pirie <brianpirieixda at gmail.com>wrote:

> While you can always do sketch style wireframes on the computer, it
> can be even more freeing to do them with pencil and paper. Even when
> sketching, the computer can still create the mindset that you need to
> make everything "perfect", so that you end up focussing your
> attention on the presentation, rather than what really matters about
> the idea you're exploring.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=32905
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
Brett Lutchman
Web Slinger.

16 Sep 2008 - 10:58am
Chris Wright
2008

quite please my first post provoked a good set of replys!

having searched the web for a free 'sketch' style font to match my 'sketch'
style wireframes i decided to pick up a pencil.

brett: i think taking by pencil into meetings could be the natural extension
to this.. and your argument is a very good one.

Cheers,

Chris

On Tue, Sep 16, 2008 at 2:58 PM, Brett Lutchman <brettlutchman at gmail.com>wrote:

> Agreeing with Brian on this one.
> I can't for the life of me find a video that I've seen about 3 years ago
> that focuses on this very topic.
> I have converted a whole company into following the Sketchpad religion.
> Often times JAD and WAR sessions are captured on a whiteboard with pics
> taken after. I've seen 3 companies do this (because whiteboard printers are
> so expensive). In several occasions, the flash got in the way of the pic
> (because of the whiteboard reflection) and information was lost.
> Enter the Sketchpad.
> After making the decision to use a sketchpad, one of the first thoughts
> that
> came to mind was "Why didn't I think of this in the first place?"
> In one meeting, while trying to explain a concept on paper, the pen was
> snatched out of my hand from the marketing coordinator with the statement
> "Here let me show you something". Pretty soon, everyone around the table
> was
> hunched over while drawing or pointing to the pad.
> Within the same week, 4 of the 6 people who were in that meeting now had
> the
> exact same pad I had.
> I don't see any problems with converting information from a sketchpad to
> the
> screen. As IAs, GUIs and Designers, that's our job- to capture information
> as effectively as possible and produce it in the best way possible.
> Photoshop, Illustrator, Axure, Visio, PPT, Word, Omni, Mindmanager,
> whatever, none of these softwares will capture information as speedily and
> effectively as the good ol pen and paper.
> Try dragging in your laptop and visualizing everything on the screen in a
> WAR room session- doesn't happen.
> Also notice how many times a URL is shot across the table. Someone may say
> something like "Well soandso.com has a good example of this"- And people
> begin to scramble for a pen and paper to write it down.
> A sketchpad:
> 1. Can be photocopied and passed around.
> 2. Is light and readily available to use.
> 3. Allows others to jump in on the process speedily
> 4. Makes you look 'Old School'.
> 5. Allows you to capture 'wild' thoughts immediately ('Buy flowers for the
> wife and pick up milk")
> 6. Captures real-time thought processes whle allowing others to follow
> along
> 7. Adds an additional 99 years to your lifespan and stops heart burn.
>
> All in all, there are pros and cons to both (A page in the sketchpad can be
> misplace whereas caputered info on a computer is permanent...well almost
> permanent.)
> When the dust settles, you can NEVER go wrong with using a sketchpad as a
> habitual practice in gathering information and producing low fidelity
> visuals for the purposes of translation.
>
> Brett Lutchman
> Web Slinger.
>
>
>
>
>
>
> On Mon, Sep 15, 2008 at 8:08 AM, Brian Pirie <brianpirieixda at gmail.com
> >wrote:
>
> > While you can always do sketch style wireframes on the computer, it
> > can be even more freeing to do them with pencil and paper. Even when
> > sketching, the computer can still create the mindset that you need to
> > make everything "perfect", so that you end up focussing your
> > attention on the presentation, rather than what really matters about
> > the idea you're exploring.
> >
> >
> > . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> > Posted from the new ixda.org
> > http://www.ixda.org/discuss?post=32905
> >
> >
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > Unsubscribe ................ http://www.ixda.org/unsubscribe
> > List Guidelines ............ http://www.ixda.org/guidelines
> > List Help .................. http://www.ixda.org/help
> >
>
>
>
> --
> Brett Lutchman
> Web Slinger.
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

18 Sep 2008 - 3:08am
Chris Wright
2008

I had a quick look... but its not free is it? $79 for the desktop version?

Cheers,

Chris

On Wed, Sep 17, 2008 at 6:34 PM, Diana Wynne <diana at chestnutdrive.com>wrote:

> It really depends on how well you draw though. My handwriting has
> deteriorated terribly over time, and I've never been good at anticipating
> proportion.
>
> This is acceptable on a white board, but not for docs I circulate to remote
> team members or want to show to users.
>
> Do play with Balsamiq if you haven't already. It's free, and Peldi's a very
> talented developer, trying to solve exactly this problem.
>
> On Tue, Sep 16, 2008 at 8:58 AM, Chris Wright <
> chris.mathew.wright at gmail.com> wrote:
>
>> quite please my first post provoked a good set of replys!
>>
>> having searched the web for a free 'sketch' style font to match my
>> 'sketch'
>> style wireframes i decided to pick up a pencil.
>>
>> brett: i think taking by pencil into meetings could be the natural
>> extension
>> to this.. and your argument is a very good one.
>>
>> Cheers,
>>
>> Chris
>>
>>
>> On Tue, Sep 16, 2008 at 2:58 PM, Brett Lutchman <brettlutchman at gmail.com
>> >wrote:
>>
>> > Agreeing with Brian on this one.
>> > I can't for the life of me find a video that I've seen about 3 years ago
>> > that focuses on this very topic.
>> > I have converted a whole company into following the Sketchpad religion.
>> > Often times JAD and WAR sessions are captured on a whiteboard with pics
>> > taken after. I've seen 3 companies do this (because whiteboard printers
>> are
>> > so expensive). In several occasions, the flash got in the way of the pic
>> > (because of the whiteboard reflection) and information was lost.
>> > Enter the Sketchpad.
>> > After making the decision to use a sketchpad, one of the first thoughts
>> > that
>> > came to mind was "Why didn't I think of this in the first place?"
>> > In one meeting, while trying to explain a concept on paper, the pen was
>> > snatched out of my hand from the marketing coordinator with the
>> statement
>> > "Here let me show you something". Pretty soon, everyone around the table
>> > was
>> > hunched over while drawing or pointing to the pad.
>> > Within the same week, 4 of the 6 people who were in that meeting now had
>> > the
>> > exact same pad I had.
>> > I don't see any problems with converting information from a sketchpad to
>> > the
>> > screen. As IAs, GUIs and Designers, that's our job- to capture
>> information
>> > as effectively as possible and produce it in the best way possible.
>> > Photoshop, Illustrator, Axure, Visio, PPT, Word, Omni, Mindmanager,
>> > whatever, none of these softwares will capture information as speedily
>> and
>> > effectively as the good ol pen and paper.
>> > Try dragging in your laptop and visualizing everything on the screen in
>> a
>> > WAR room session- doesn't happen.
>> > Also notice how many times a URL is shot across the table. Someone may
>> say
>> > something like "Well soandso.com has a good example of this"- And
>> people
>> > begin to scramble for a pen and paper to write it down.
>> > A sketchpad:
>> > 1. Can be photocopied and passed around.
>> > 2. Is light and readily available to use.
>> > 3. Allows others to jump in on the process speedily
>> > 4. Makes you look 'Old School'.
>> > 5. Allows you to capture 'wild' thoughts immediately ('Buy flowers for
>> the
>> > wife and pick up milk")
>> > 6. Captures real-time thought processes whle allowing others to follow
>> > along
>> > 7. Adds an additional 99 years to your lifespan and stops heart burn.
>> >
>> > All in all, there are pros and cons to both (A page in the sketchpad can
>> be
>> > misplace whereas caputered info on a computer is permanent...well almost
>> > permanent.)
>> > When the dust settles, you can NEVER go wrong with using a sketchpad as
>> a
>> > habitual practice in gathering information and producing low fidelity
>> > visuals for the purposes of translation.
>> >
>> > Brett Lutchman
>> > Web Slinger.
>> >
>> >
>> >
>> >
>> >
>> >
>> > On Mon, Sep 15, 2008 at 8:08 AM, Brian Pirie <brianpirieixda at gmail.com
>> > >wrote:
>> >
>> > > While you can always do sketch style wireframes on the computer, it
>> > > can be even more freeing to do them with pencil and paper. Even when
>> > > sketching, the computer can still create the mindset that you need to
>> > > make everything "perfect", so that you end up focussing your
>> > > attention on the presentation, rather than what really matters about
>> > > the idea you're exploring.
>> > >
>> > >
>> > > . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
>> > > Posted from the new ixda.org
>> > > http://www.ixda.org/discuss?post=32905
>> > >
>> > >
>> > > ________________________________________________________________
>> > > Welcome to the Interaction Design Association (IxDA)!
>> > > To post to this list ....... discuss at ixda.org
>> > > Unsubscribe ................ http://www.ixda.org/unsubscribe
>> > > List Guidelines ............ http://www.ixda.org/guidelines
>> > > List Help .................. http://www.ixda.org/help
>> > >
>> >
>> >
>> >
>> > --
>> > Brett Lutchman
>> > Web Slinger.
>> > ________________________________________________________________
>> > Welcome to the Interaction Design Association (IxDA)!
>> > To post to this list ....... discuss at ixda.org
>> > Unsubscribe ................ http://www.ixda.org/unsubscribe
>> > List Guidelines ............ http://www.ixda.org/guidelines
>> > List Help .................. http://www.ixda.org/help
>> >
>> ________________________________________________________________
>> Welcome to the Interaction Design Association (IxDA)!
>> To post to this list ....... discuss at ixda.org
>> Unsubscribe ................ http://www.ixda.org/unsubscribe
>> List Guidelines ............ http://www.ixda.org/guidelines
>> List Help .................. http://www.ixda.org/help
>>
>
>

Syndicate content Get the feed