At times web designers are asked to develop a web site that is similar in "look and feel" to the printed marketing materials of a company. Here is an example of how a web site was designed to compliment an annual report. This not-for-profit company provides ENVIRONMENTAL & BOTANICAL EDUCATION and services. The annual report is printed in three colors (brown, green and black) and makes use of line art and black & white photos for graphics. However, the client did want color photos to be used for the web site.

In developing the web site, it is unrealistic to use large graphics and the type of layouts seen in the annual report. Also, certain colors in print do not translate well on the web. So we decided to choose smaller graphics that best conveyed the theme of the web site, and, to make the colors more web friendly. Here is the solution:

The green floral line art image was chosen to be a part of the visual theme of the site. We scanned in the image and lightened it a bit (we felt the original green was a bit too harsh for the web). We also decided to use a lighter shade of brown as well (for the same reason). A template was designed for the inner pages as shown below:

As you can see, the green floral line art was used as a header on all the pages for efficiency and fast loading. The result? We have captured the spirit of the annual report with fewer graphics and an easy to update layout.

Key Points From This Article:

• When transferring the graphic style of printed material to a web site, look for one or two graphics that best represent the overall look of the printed piece. Repeat those graphics as part of the header design on all pages.
• Some colors in printed material may look to heavy or harsh when used as is on the web site. When possible, adjust color hue, saturation and lightness to make it more pleasing on the web site.

Web Designers Guide & Portfolio