Wireframes the webs best design technique

Wireframing is one of the most recent design techniques for designing web sites. The whole idea about wireframing is that it describes the skeleton of a website just like the wireframes form the skeletons of statues. The skeleton describes the basic elements of the site, i.e. those elements that define structure, page layout and the interaction flow from page to page. Wireframes are extremely low-tech and therefore very well suited to easily move elements around, the ideal site-sketching technique. As soon as the basic ideas about the sites purpose, users and content are known, it is good to start doing some sketches.Doing such sketches using wireframes literally means to draw frames of wire for page elements i.e. labeled boxes. A web page is then built up out of several boxes. This allows designers to play with the functions of page areas, layout a navigation system, determine the main context areas and even nasty aspects such as banner placing.

Figure 1 A wireframe and the final page design After some fiddling around with the labeled boxes, the boxes must be refined in terms of their content. The purpose of wireframes is to define the skeleton of the page and not the graphical design of it. It is therefore important to stay with using boxes and only the bare basics of layout. It should define scale and proportion but not in terms of pixels and exact location. So it should be both rough and accurate at the same time. Later on the graphic design will be done on the basis of the wireframe, see Figure 1. One of the nice things about wireframes is that they are very easy to change. Most designers use standard packages such as Word/PowerPoint/Illustrator to draw the wireframes. Resizing or moving boxes is done

quickly and basic alignment functions allow the wireframes to look almost like technical drawings. Another advantage of using standard packages is that clients dont need any special programs to open the wireframes on their computers. They can be easily exchanged. When designing a page it is important to follow some basic guidelines. First of all, make sure you are working on scale. Use a portrait oriented page and draw an 800x600 rectangle with marks for the browserhead first so that you know where the fold is. The portrait page will allow around 2 views to be visible, which is what should be the maximum in most cases anyway. Second, find out which font sizes you can use. Usually an 8 or 9 points font size corresponds to a normal text size in a browser. Of course, this will not make your design exactly at scale but it will be loosely on scale. This allows you to know quickly if everything will fit or will be visible above the fold. If wireframes are not on scale you may find some unpleasant surprises later on in the design process. Since wireframes are good because of their communicative value, make sure your wireframes are consistent. If something is a link underline it. If you use widgets such as comboboxes or listboxes, make sure they are recognizable and always look the same. It is handy to have an example palette at hand, for example:
Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Radiobutton
Checkbox

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Dropdown box
Link:
Lorem ipsum

Lorem ipsum

Listbox

Lorem ipsum Lorem ipsum

Edit box:

Lorem ipsum

Multiline edit box:

Lorem ipsum

Button

Next

If you explain wireframes to your client before you actually start doing your designs, wireframes can form a main design artifact with clients. It separates structure and function from graphical design. If wireframes on screen or on paper are still not clear enough, you can always build a click-able HTML wireframe. In communication with your graphical designers it is important to make clear that you have not already done their job. Already after the first rough sketches you should discuss it with the graphical designer so that the more detailed wireframes do not take away any room for great graphical design. So dont use color, stick with boxes as much as you can, even for headings etc. Make it ugly if you have to The main advantage of wireframes is that it saves a lot of time. The entire site and all of it interactionaspects can be designed and evaluation before any graphic design or HTML programming is done. You can see how the navigation and grouping works, evaluate if the chosen labels work well, or check wether the important elements are located on the right spot. Because all elements are so easy to change, many iterations can be done in a short time and some rough prototypes can even be used to test with end-users.