Wireframing

A New Wireframe Design -Page Description Diagrams

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:

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.