Wireframes in UI - Page 2

Wireframes typically show the main parts of the screen sectioned off into modules that reflect certain functions (sometimes known as modular design). If you look at the layout of any product you will notice that different areas of the screen have been designated for certain functions. It is important to understand this before the developers start to program as they rely on the grouping of certain elements to code efficiently.

If you provide logical groups of items before the pages get set into code it will speed up the development process and aid in your communication with developers. This modular design approach can also aid in translating the product onto different platforms, such as PDAs or TV, as it allows for related components to be clustered together into autonomous groupings. It will also make the design much easier to understand and therefore automatically improve usability.

The screen above is a Wireframe designed by combining features from the Paper Prototypes in Chapter 2, and discussing the design with team members and external testers. As you can see, it has been sectioned off into several areas. Typically, as you can see from the Wireframe above, a screen on the web is separated into areas such as navigation, sub navigation, branding, content, related content and copyright. These groups will change from product to product, so make sure to define the groupings for your product appropriately. You can just scribble these groupings onto a piece of paper or the whiteboard for now, as we will be looking at the proper creation of Wireframes a little later on.

It is important to note that the location and size of the groupings should maintain a certain degree of consistency across the different screens of the product. If some screens need to have different groupings there should, if possible, be a secondary template that applies to all of these additional screens – we really don't want to have more than 2 or 3 different screen layouts. Consistency will make your product much more intuitive and this technique of grouping elements is a very simple but effective way to ensure consistency.

When you have your groupings drawn out you should begin to look at labelling the individual elements themselves, as seen below. There are a variety of ways to label elements: some people prefer to put text labels where the actual page elements will be, and other people prefer to associate the labels with numbers or letters. Whichever way you choose, the important thing is to label every single element that has a function, including buttons, form fields, branding, the titles for content, and even the location of the content itself.

These diagrams that are usually presented with notes describing the interaction involved with each of the elements. These can be set up on a separate page, in a reference key, or as a series of explanations on the sides of the paper that have lines pointing to the elements. The level of detail that is needed in these annotations depends on your audience, and on how complicated the interactions are. For an example we've included an image below that shows a simple set of annotations that are associated with the Wireframe above. Please feel free to make your Wireframe references more detailed than this:

After you have determined how to group the elements, the labelling method you should use and how you would like to document the annotations, you can move onto creating the actual Wireframes. But before we begin to explain what programs are available, let's go into a small aside about an additional Wireframing method to think about in the future – we want to make sure you are aware of all the possibilities before you start.

Usable Shopping Carts
Usable Shopping Carts
A New Wireframe Design –Page Description Diagrams - Page 3