An Idea about Drawing Wireframes

13 Mar 2008 - 4:41am
6 years ago
12 replies
865 reads
Oleg Krupnov
2008

All drawing and diagramming tools that we use to create wireframes are based
on shapes or widgets. You drag a widget from a palette and drop it onto the
page, then set its position and size with mouse. The operation is easier if
the editor supports snapping to the grid and guides.

I wonder however if this is the optimal way of drawing wireframes, because
it doesn't account for their peculiarities, namely:

* Content rectangles never overlap each other but cover the entire page
"real estate"
* Content rectangles are mostly aligned in columns and rows, i.e. often have
one or more of their boundaries aligned to each other
* During design, content areas frequently need to be rearranged – columns
and rows are resized, content areas are swapped etc.

So, I've got the idea that instead of presenting each content rectangle as a
separate widget, we could present the entire page layout as a table, where
content assets go into the cells. Much like you draw tables in Microsoft
Word or in Macromedia Dreamweaver, you split the whole page area into
arbitrary cells with horizontal and vertical lines. Then you drag-and-drop
content assets into the cells, and they automatically take up the entire
cell space.

Afterwards, when you need to resize a column or a row, you just drag a table
line. This is unlike widget-based editors, where you would need to resize
and reposition each affected widget along the table line. Also, moving
content assets between cells and swapping assets is much easier with the
table-based editor.

I want to test this idea. I have created a prototype application which you
can download and play with:

http://authorjet.com/news.php?item.2.1

I'd like to hear your comments. Is it going to speed up wireframing? What
are the other pro and cons of this approach?
--
View this message in context: http://www.nabble.com/An-Idea-about-Drawing-Wireframes-tp16024126p16024126.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

Comments

13 Mar 2008 - 10:11am
John Gibbard
2008

> I'd like to hear your comments. Is it going to speed
> up wireframing? What are the other pro and cons of
> this approach?

Oleg, I liked the idea. Many of the sites I've worked on have been
template driven and this can feel a bit like Tetris at times*, trying
to get new ideas to fit into defined modular sections. I normally
acheive this in Visio by setting up a grid of blue 'ruler' lines
(not sure what their technical name is) and then snap elements into
them. Of course this isn't quite as slick as your demo but it's a
reasonable workaround.

Best wishes,
John

* - or 'rearranging deckchairs on the Titanic' which was how it
felt when we were perpetually moving modules around on the failing
homepage in one of my previous roles...

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

13 Mar 2008 - 11:05am
Richard Howard
2008

This is an interesting approach and holds some promise, I think. It is similar to how I use gridded paper to establish initial layout. To be useful for my apps it would need to have more formatting options for the content, like transparency in order to create invisible "alignment" regions, and then the more obvious color, weight, font, and possibly gradient if we intend to try a little higher fidelity. The ability to save and reuse "content groups" with their respective layout and formatting would raise productivity by allowing me to create common widget sets.

Thanks for letting us try your prototype - I'll be curious to see where you take it.

Cheers-

rdh.

Richard Howard
Product Design Manager, Autodesk

-----Original Message-----
Subject: [IxDA Discuss] An Idea about Drawing Wireframes

...

So, I've got the idea that instead of presenting each content rectangle as a
separate widget, we could present the entire page layout as a table, where
content assets go into the cells. Much like you draw tables in Microsoft
Word or in Macromedia Dreamweaver, you split the whole page area into
arbitrary cells with horizontal and vertical lines. Then you drag-and-drop
content assets into the cells, and they automatically take up the entire
cell space.

...

13 Mar 2008 - 11:45am
Todd Moy
2007

Oleg,
this is intriguing and I have a few questions:

1. Do you see content being just labeled boxes or would they contain more
rich UI controls? For example, in your movie service example on AuthorJet,
would "Global Navigation" exist as just "Global Navigation"--or would
someone be able to drop a tab control into it?

2. Do you see this as a replacement for wireframing or, perhaps, a tool used
earlier in the design process. It seems to me that it would work better for
the latter, where priority and rough placement is being established. That,
however, might require that the result be more fully defined later as a
traditional wireframe.

One nice thing about your approach is that it seems to be pretty easy to
implement in Dreamweaver or any html authoring tool. You could even leverage
the Yahoo User Interface Library to provide some components.

-Todd

On Thu, 13 Mar 2008 08:11:42, John Gibbard <john at smorgasbord-design.co.uk>
wrote:

>
> > I'd like to hear your comments. Is it going to speed
> > up wireframing? What are the other pro and cons of
> > this approach?
>
> Oleg, I liked the idea. Many of the sites I've worked on have been
> template driven and this can feel a bit like Tetris at times*, trying
> to get new ideas to fit into defined modular sections. I normally
> acheive this in Visio by setting up a grid of blue 'ruler' lines
> (not sure what their technical name is) and then snap elements into
> them. Of course this isn't quite as slick as your demo but it's a
> reasonable workaround.
>
> Best wishes,
> John
>
> * - or 'rearranging deckchairs on the Titanic' which was how it
> felt when we were perpetually moving modules around on the failing
> homepage in one of my previous roles...
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=27037
>
>
> ________________________________________________________________
> 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
>

--
____________________________
http://www.oombrella.com
oombrella /a/ gmail.com

13 Mar 2008 - 2:53pm
Chad Hutchinson
2007

You can do this with MS Expression Blend. You can lay out the widgets
(rectangles) inside a grid and resize them at will. From there, you
can actually build out the design for use by developers (XAML).

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

13 Mar 2008 - 11:59am
Lee
2008

Sounds great, I tried to open it but just got an error, is it just of
the mac? I am running xp.

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

14 Mar 2008 - 4:33am
Nico Druif
2008

I like the program!

Just wanted to let you know the 'example' button doesnt seem to
work yet?

And I can't change names yet of the content boxes, right?

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

14 Mar 2008 - 4:44am
Oleg Krupnov
2008

Chad,

You are right, and there is hardly anything to return. You can do this and
much more than this. However I find their editor overly complicated when you
need to do something simple, like drawing a wireframe. I admit that if I
spent more time to learn to use it, I would do better with Expression Blend.

What I tried to show in my prototype is that wireframing can be very easy
when the tool is aware of what is a wireframe.

Oleg
--
View this message in context: http://www.nabble.com/An-Idea-about-Drawing-Wireframes-tp16024126p16047319.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

14 Mar 2008 - 4:48am
Oleg Krupnov
2008

Thanks, Todd

Your questions are the kind I am asking myself! :)

I have read Dan Brown's "Communicating Design" book and I like his idea
about layers of fidelity. On the layer 1 of wireframe, there are only things
that make it a wireframe – layout and labeled boxes. On layer 2 there are
optional things that make it mid-fidelity, such as un-styled un-typed and
un-colored dummy text, links and controls. The high-fidelity visuals go on
layer 3, but I believe this layer is most often dropped, especially in an
agile process.

What I think is a "must" is to keep all these layers strictly separate and
let the user himself decide how detailed the wireframe should be, and at any
moment show/hide different layers of fidelity at will. Moreover, the user
should decide himself, which "interesting" areas to provide further detail
with, and which just leave out as a plain box.

The question is - how to introduce richer UI widgets into the content areas
without over-complicating the app?

If I just let the user enter widgets inside the content boxes, it would be
much like in a widget-based app, and thereby defeat the initial idea. Also,
I'd like to keep the user free from too fine control when entering UI
widgets.

My next idea is to allow HTML code snippets to be entered inside the content
areas.
1) It will give great freedom to the user to enter arbitrary content and lay
it out arbitrarily inside the content box area. Also it will be displayed
exactly the same way as it will be in browser.
2) All content can be styled via external CSS.
3) It allows building huge libraries of reusable components by me and by
other users, and exchange them.
4) These components can be design patterns rather than single widgets. For
example, it can be "Breadcrumb" or "Doormat Navigation" instead of a bunch
of links, or it can be "Search box" instead of a label, text box and button.
There are great libraries of interaction design patterns over there that I
could look at, including the Yahoo UI Library.
5) The output to HTML is a snap and can be even production quality. Doesn't
it make the process more agile?

One question that is still bothering me is what to do in case if once in a
while the user wants to enter a separate widget and position/size it
arbitrarily? And how practical is this case to be taken into account?

In regard to the future of the prototype, I think it should be of course a
replacement of the "traditional wireframes". There are though still a bit of
things to be done before it happens :).

Oleg.
--
View this message in context: http://www.nabble.com/An-Idea-about-Drawing-Wireframes-tp16024126p16047431.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

14 Mar 2008 - 4:51am
Oleg Krupnov
2008

Hi lee,

This prototype will only run on Windows with .NET Framework 2.0 installed.

I don't know how to run it on Mac. If there's a kind of Virtual PC running
Windows under Mac, you can try it, but install .NET Framework 2.0 first.
Here's the link:
http://www.microsoft.com/downloads/details.aspx?FamilyID=0856EACB-4362-4B0D-8EDD-AAB15C5E04F5&displaylang=en

Oleg.
--
View this message in context: http://www.nabble.com/An-Idea-about-Drawing-Wireframes-tp16024126p16047600.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

14 Mar 2008 - 4:43am
Oleg Krupnov
2008

Thanks John,

Yes, there are guides in Visio and not only you can align objects to them
but also "glue" to them, i.e. the objects will move in case if the guide is
moved. I wasn't however able to glue both left and right (or top and bottom)
sides of an object to two guides, so that the object would also change its
width when a guide is moved. Were you? If that was possible, then it would
be more like my prototype, though perhaps still not as "slick", I agree :)

Oleg.
--
View this message in context: http://www.nabble.com/An-Idea-about-Drawing-Wireframes-tp16024126p16047317.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

14 Mar 2008 - 6:50pm
Todd Moy
2007

Oleg wrote:
>>One question that is still bothering me is what to do in case if once in a while the user wants to enter a separate widget and position/size it arbitrarily? And how practical is this case to be taken into account?

At risk of being self-referential, I'd say very. There are bound to be a lot
of "edge cases" where an IXD desires an arrangement that doesn't fit what
canned widgets dictate. I know I would, and that's why I punt and use Visio
rather than html prototyping.

At work, I'm taking a slightly different approach and backing off on
prescribing the layout--at least, in early stages. I'm testing a concept
that I derived from UML that focuses on the functionality that should appear
in a view, and deemphasizing how it should be arranged. That part comes
later, and is a byproduct of working collaboratively with design and dev
talent. If anyone is interested, I'd love some feedback on it <
http://blog.capstrat.com/articles/where-the-wireframes-are-or-arent/>

-Todd

14 Mar 2008 - 2:58pm
Oleg Krupnov
2008

Thanks, Todd

Your questions are the kind I am asking myself! :)

I have read Dan Brown's "Communicating Design" book and I like his idea
about layers of fidelity. On the layer 1 of wireframe, there are only things
that make it a wireframe – layout and labeled boxes. On layer 2 there are
optional things that make it mid-fidelity, such as un-styled un-typed and
un-colored dummy text, links and controls. The high-fidelity visuals go on
layer 3, but I believe this layer is most often dropped, especially in an
agile process.

What I think is a "must" is to keep all these layers strictly separate and
let the user himself decide how detailed the wireframe should be, and at any
moment show/hide different layers of fidelity at will. Moreover, the user
should decide himself, which "interesting" areas to provide further detail
with, and which just leave out as a plain box.

The question is - how to introduce richer UI widgets into the content areas
without over-complicating the app?

If I just let the user enter widgets inside the content boxes, it would be
much like in a widget-based app, and thereby defeat the initial idea. Also,
I'd like to keep the user free from too fine control when entering UI
widgets.

My next idea is to allow HTML code snippets to be entered inside the content
areas.
1) It will give great freedom to the user to enter arbitrary content and lay
it out arbitrarily inside the content box area. Also it will be displayed
exactly the same way as it will be in browser.
2) All content can be styled via external CSS.
3) It allows building huge libraries of reusable components by me and by
other users, and exchange them.
4) These components can be design patterns rather than single widgets. For
example, it can be "Breadcrumb" or "Doormat Navigation" instead of a bunch
of links, or it can be "Search box" instead of a label, text box and button.
There are great libraries of interaction design patterns over there that I
could look at, including the Yahoo UI Library.
5) The output to HTML is a snap and can be even production quality. Doesn't
it make the process more agile?

One question that is still bothering me is what to do in case if once in a
while the user wants to enter a separate widget and position/size it
arbitrarily? And how practical is this case to be taken into account?

In regard to the future of the prototype, I think it should be of course a
replacement of the "traditional wireframes". There are though still a bit of
things to be done before it happens :).

Oleg.
--
View this message in context: http://www.nabble.com/An-Idea-about-Drawing-Wireframes-tp16024126p16047431.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

Syndicate content Get the feed