Presenting Website Designs

Form follows function
I believe strongly in the maxim "form follows function." Design should always revolve around a predefined function or purpose. Too often sites are visually designed prior to full project definition.

In these cases the design will never be as good as it could be because it will not have been considered with the site's final structure and function in mind. Visual design that is based on a clear and deep specification will always be more appropriate and compelling than designs created before a project is fully specified.

Graphic designers are trained to not only to decorate, but to make communication clearer. When most people think about design they think about making something look good, making it aesthetically pleasing. These aspects of design are far from being the entire concern of the designer. Emil Roder wrote "To design is to plan, to order, to relate, and to control. In short, it opposes all means of disorder and accident." This statement describes the heart of design, it is the opposite of disorder. It suggests intention and deliberation. Designers are concerned about communication, how they can make a message clearer and more direct. Designing without specification is like laying out a pamphlet without knowing what it is supposed to say. Without specification, all that is left for a designer is decoration.

When a designer works from a clear specification, not only can they do their job faster and better, but it is also easier and less frustrating. Their designs are usually better because they are based on good, clear, and thorough specification. More importantly, the feedback and approval process is less frustrating because the client reviews the layouts at the appropriate time.

I have found that one of the reasons clients react negatively to proposed layouts is fear. The fear stems from a sense that the developer has not yet fully grasped what the client has in mind for the full content and functionality of the site. It is very hard for anyone to divorce their view of a layout from their actual expectations of what a site should be and do. When we go after "look and feel" approval first (as opposed to content or functionality approval) we are trying to get the client to divorce themselves from their own expectations. We are asking them to trust us and to try and imagine how the site might work even though what they are looking at does not fully describe the final product. This is asking too much from them.

Not only are we asking the client to make a leap of imagination that they are uncomfortable making, but we are also asking them to do so without first having gained their trust. When design is one of the first deliverables in a project, we have not yet had enough time and opportunity to earn a new client's trust. Any negative reaction from a client at this point sets the stage for further mistrust and fear as the project progresses.

One way to deal with this problem is to spend more time analyzing the client's needs and planning the overall strategy for a site before entering into a design process. While this is the right thing to do, it creates another negative dynamic, that of waiting too long to "show them something." Strategy and planning can often take a long time, too long for most clients to wait before they "see something." This dynamic drives the premature creation of "look and feel" layouts.

Thus a dilemma arises, either spend an appropriate amount of time planning, and risk taking too long to show the client something, or show them premature layouts that are not based on a clear understanding of the project. It can be a real catch 22.

Grayscreen prototyping is a simple HTML-based approach to modeling, documenting, and specifying web sites during the initial stages of the development process. Working through a grayscreen prototype prior to design and development allows for effective communication with clients thereby overcoming the many barriers inherent to web development. Through grayscreen prototyping we found a way to turn these negative dynamics into positive ones. By entering into an HTML prototype phase right away we are able to "show clients something" very quickly. Because a prototype is a working document devoid of visual design, the clients feel free to change and restructure, add or take away content from the prototype. The back and forth not only gives us a very good understanding of what the client wants, but by the end, the client knows that we understand what they want. We are able to show them something (the prototype) and at the same time get the information we need to do our job of designing. Now when we present the first layouts we have a different dynamic. They are not worried that we do not understand their needs; they are certain we do. We do not ask them to approve layouts that have been divorced from content and functionality; the layouts are designed with the content and functionality already defined. When they see the look and feel, they can comment on just that, the look and feel, without the unconscious baggage of concerns about content and functionality. This whole process helps us avoid major pitfalls of web development and replaces them with very positive interactions.