A Simple Concept

At my day job as a web developer, I was given the task of building a law firm’s recruiting web site: A simple, no-frills brochure site whose content and navigation menu would be database-driven. My law firm client outsourced the design work to a third party design firm who was still heavily rooted in print.

When I received the approved design concepts as Quark files (rather than Photoshop files, an ominous sign of problems to come), I noticed some very big problems. Each concept, created on an 800 X 400 pixel template, included a search box at the bottom left corner, the law firm logo at the bottom right corner, and an intricate, non-repeating background image. The right-justified navigation menu was roughly 120 pixels wide, enough for perhaps 15 characters in 10-point verdana font.

I quickly addressed a series of questions to my project manager. How did the designers envision the look of the background when the page scrolls farther than what the concept provides visually? Would the client be willing to accept a menu item that was 3-lines long because of the small fixed width of the menu bar? How would the site look on a 1024 or 1160 pixel width screen? Should the logo and search box remain at the very bottom of each page when the content expands past the screen height?

These were questions that had yet to be answered, mainly because the design firm did not care to address them and the law firm did not know to ask them.

Unlike an architect’s blueprint, or a print designer’s final proofs, a web designer’s concept rarely addresses all potential design issues that may occur in final production. With most clients insisting on tools to self-manage their site content, it is the job of the web designer to create concepts that easily depict how pages can adapt to varying amounts of content.

Designing screenshot concepts for the web should never be the culmination of the design phase of a web site. It should be the beginning, and it should provoke questions of the final design that must be addressed before the tag is even typed.

For print designers, or any designers from a traditional field, looking to move to the web, keep these ideas in mind when developing and presenting concepts. They’ll help eliminate any major development headaches and keep your clients happy and satisfied with your work.

Make your design intentions obvious.
Your final concept should reveal as much as possible about how the site behaves under different screen settings and amounts of content. For example, the designer’s of the law firm recruiting site should have showed enough of the page to reveal how their elaborate background image would seamlessly repeat.

A common concept faux pas is not showing how a site “stretches” for screen widths greater than the width of your design. If your site will not be fixed-width, make it clear whether, for instance, a horizontal navigation bar should align to the right of the screen or stay fixed from the left.

When putting in “greeked” or dummy text to show how your design flows with content, use a realistic amount of text. Don’t put in less content than what is realistic to make your concept look nicer. It may be worthwhile to include a concept that has an excessive amount of content or very long menu links to prove that your design can be flexible (or prove that your design still needs work).

Optimize concepts for the intermediate user.
Design experts Alan Cooper and Robert Reimann stress “optimizing for intermediates.” That is to say, all technology should be built to work the best for the most people in your target audience. Similarly, when starting your concept, choose dimensions and graphics that will be most suitable for the average screen and computer settings your audience will be using.

If your target audience is senior citizens, you may want to optimize for 800-pixel width screens and lower. Your font size should be larger and, to minimize scrolling, should consume the vast majority of horizontal space. If your target audience is geared toward a younger, more technically-savvy audience, you can and should set a different set of standards. K10K.net, for example, doesn’t support anything under a 1024-pixel screen width and the font and image links are at about 9-point size.

Still, the key word is “optimization.” You should never neglect your periphery audience. Make sure your concept can adapt for low-end and high-end users. While a site’s design should be optimized for the most people, it should account for the entire audience.

Verbally explain issues that can’t be explained within the concepts.
The law firm client I was developing for did not realize what questions to ask until I addressed them. In fact, most clients that choose to outsource their web presence are oblivious to many of the limitations and possibilities of the web.

As a web designer, honesty is the key. If there could be problems with a concept that aren’t obvious from the design, explain each of these thoroughly. Offer clients alternative solutions and together decide what most thoroughly accomplishes the overall design objective. Clients will appreciate the honesty early on and will more readily trust your instincts in the future. It will also lead to a much more smooth progression as the project moves from the design to the development stage and will keep your budgets on target.

With these ideas in mind, you can avoid many of the pitfalls facing firms who aren’t fully experienced in designing for the web. Design and explain your concepts well, and you should have a happy client and a solid final product.