A New Wireframe Design –Page Description Diagrams - Page 3
November 26, 2002
This book
focuses on two design methods for creating Wireframes. The first method, the
one that we presented above, is the standard way of designing pages like
blueprints.
This
'Blueprint Method' is the tried and trusted way of making sure everything is
ready to go into visual design and then into development. This also means that
the final page layout is pretty much determined at this stage, making visual
layout part of the user interface design. While this may be beneficial for some
projects, it can also be a hindrance for the design team.
On the
other hand, there is a second, more modern, method that is a bit radical in
that it doesn't resemble the final page at all. It contains all of the page
elements along with their detailed interactions, but they are presented in
order of importance instead of according to a page layout. The importance of
the items is determined by the priorities of the company, which can include business
goals, technical ability and user preference or comprehension. Personally, I
recommend designing with the goals and preferences of the user in mind, as this
frequently strengthens the business model and provides users with a service
they find valuable. These are called Page
Description Diagrams.
This is the
main advantage of this method, that it allows the interface to be discussed and
planned in terms of importance and not just 'what looks good'. The method was
brought forth by Dan Brown of GreenOnions.com who used this method a number of
years ago to allow for more freedom in the visual design process. An example of
this second technique is seen below – the priority of the items decreases from
right to left:
The TuneIn! product
was not wireframed as a page description diagram as this method has yet to be
standardized. Page description diagrams are a more advanced method and should
only be used on projects where the UI designer is already comfortable in
creating the 'Blueprint Method' Wireframes.
Dan Brown,
the creator of this technique, coined the page
description diagram phrase. This method gives room for visual designers
to design the layout after interaction designers have designed the elements.
Page description diagrams allow for the visual design to have more flexibility,
thus creating better communication and ensuring better product designs. There
is a disadvantage in that it is slightly more confusing, as it doesn't
represent how the actual page will look, but don't be surprised if this method
becomes more and more common in the industry. For more information on this
method, please continue reading about it online at:
http://www.boxesandarrows.com/archives/002808.php
http://www.greenonions.com/dan/portfolio/Wireframes_poster.pdf
Both of the
methods I've mentioned for creating Wireframes use the same basic design
elements. Now that you know what the structure of these important documents
looks like, I will get into the details of what tools are used to actually
create them.
Wireframing Tools
The most
commonly used Wireframing tools are Microsoft Visio, Macromedia Dreamweaver,
Adobe Illustrator, Macromedia Freehand and sometimes Macromedia Fireworks or
Adobe Photoshop. I recommend using a tool that allows for easy changes and for
quick production of the screens. Something like Visio or Dreamweaver will work
very well, depending on the results you are looking for, and your learning
curve:
-
Visio will produce very rough Wireframes that are only viewable as a
flat image, but they are easily updated, and can contain as many comments as
needed. However, Visio is more complicated to use than, say Dreamweaver.
-
Dreamweaver will produce actual HTML pages, with screen elements that
are both realistic and semi functional – which is half way along the road to
prototypes – make
sure you keep it simple at this stage! We will get to prototypes later.
Whichever
tool you choose to use, please remember what sort of output you need to create.
For instance, if you are printing to paper and it must look good, you might
want to use a page layout program such as Quark. On the other hand, if you want
to share the Wireframes across the Internet, using an HTML creation tool or web
compatible graphics program might be better. Visio has an advantage here – you can
choose to optimize
Visio diagrams for screen or print.
Wireframes in UI - Page 2
Usable Shopping Carts
|
eBook library