Converting Printed Brochures to Web Pages

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 and 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.

THE USE OF FORM:

A cool web design tip using backgrounds...

Converting printed brochures to web site designs...

Develop classic web site designs...

Flash animation and search engines...

High performance web sites...

Need more graphics? Here is a trick...

The new romantics in website design. What is it? Why you need it...

Who do you design for?

Web site makeover of the month...

For a Free No Obligation Consultation on your best web design ever... Click here...

Contact Information:

Telephone:
(585) 586-9661
(585) 3887290  
ask for Scott Gallmeyer
Fax:  
(585) 586-1407
Mailing Address:
Scott Gallmeyer

ESG Associates Corp.   18 Bramblewood Lane   Penfield, NY  14526
Email:
esg@esgn.com
sales@esgn.com  info@esgn.com
careers@esgn.com
scott@esgn.com

 



Copyright © 2003 ESG Associates. All rights reserved.
The materials contained in this web site are protected under the copyright and trademark laws of the United States and other countries. All trademarks used in this site are the property of their respectful owners. Unauthorized distribution, duplications, alteration or other use (whether for commercial or non-commercial purposes) of material contained in this site, including without limitation any trademark, image, drawing, text, likeness or photograph may constitute a violation of such laws and may be prosecuted under criminal and/or civil law.