Using Art and Color to Enhance a Web Site

Wednesday August 01 by Robert Jamason
Few people realize that Web site design is actually an art form. By using color, graphics and the principles of design I am able to artistically control the effectiveness of a website.

There is a lot to look at before beginning to create images and selecting a color scheme for a web site. The approach I take is to consider what the client is selling and to whom they are selling. The main question is what emotion are they trying to evoke or stimulate in the viewer.

The elements of art help set a mood much like music. On the Web, artwork sets the mood, creating an immediate, subconscious emotional state is in the Web page viewer. Colors are great "mood setters." Many times I have browsed the Web and found pages that offer great products, but with poorly created graphical layout. I have seen bright red backgrounds with blue text. This might be a good idea if you were selling aspirin, but not if you are trying to sell relaxation tapes.

When I approach the design of a website, I like to influence the viewer with a good, solid mood that will make them want to click to see more. I do this with powerful graphics right up front using large, appropriately colored graphics that draw the viewer into the site. As the viewer works their way through the site I back off on the graphics a little, so the clients' eyes will stay more focused on the text and the message it presents. Nothing is worse then an annoying animated graphic flickering non-stop in the eyes of a viewer who is simply trying to read the web page and its information. In a case like this the art has done more damage than good.

The impact of graphics and colors on emotions can play a big part in something even as minor as filling out the forms to order or to ask for more information on a product. If the pages are done in dull grays, you have set a mood that implies boring or dull to the viewer. The viewer will be less likely to want to concentrate on filling out the form right now. There is no excitement, no stimulation for their senses.

Foremost, in choosing color schemes and graphical layouts, is to select a base image or idea that meets the client's needs and their theme. If your client sells perfume over the web, your base image might be of a woman placed in a field of flowers or a woman walking down a busy street and in the back ground everyone is taking a second look at her. You have to really think about whom the product is for and will the graphics please them. One image should set the stage for the rest of the site. You then try and stay within that theme throughout the site. I would use soft colors on a product like perfume. Why soft colors, you might ask. Soft colors and muted tones touch the sensitive side of a woman, or the prospective customer in this case. Using strong colors on a site like this, for example black backgrounds, would steal away any refreshing emotion. All the text in the world couldn't convince the viewer that this is a high quality perfume, even at $500 a bottle. It would appear to be a $10 bottle product.

The main software I use in every aspect of my art is Adobe PhotoShop. This program gives me amazing control over ever bit of my art. I can take a simple dull image that a client gives me and, by working with levels, bring the image to life. I love to work with bright crisp graphics, but sometimes, good images aren't available. So I often have to shape an image by playing with color and tone levels. I even use PhotoShop in my 3D work, which allows me to create awesome textures to wrap around 3D models. This allows the creation of very real and believable graphics, in terms of getting across the desired message.

There is a downside to using 3D graphics, since sometimes they look too perfect. The trait of perfection reduces a graphic's believability. So I take my final renders and clean up the perfect corners that 3D rendering inserts. For example, if I was rendering an old fence, I have the wood textures made to look very old, but there are no dings or dents or splinters in the image at all. So I go in with custom paintbrushes I have made in Photoshop and start painting in splinters and dents and dings. I then use the smudge tool to rough up the perfectly straight edges. Now this will look like a fence from the real world.

I then save all my images in JPEG format for the web. JPEG is best for me because I have control over the whole file size to assure a faster load time
I wouldn't save an image in the GIF format because GIF restricts color to within 256 colors. An example of the limitations of GIF can be seen in image gradients. In the GIF format they will not look as smoothly blended as in the JPEG format.

The only time I really use the GIF format is in animation. Let's say I have a full image of a lonely empty street with a traffic light. I might want to chop up the image and save every bit in the JPEG format, however, the traffic light I would make a GIF animation just to allow the light to change from time to time. Now this lonely empty street says there is life somewhere.

Once I have created a site's draft, I get some colleagues to test the site and I listen closely to the comments that they make. Even subconscious facial expressions by the viewer can give you clues into what is good and bad, and what they like and dislike about your graphics. Things as simple as a slight smile from the tester may give you a clue that you are on the right track with a particular image design. Most importantly, the viewer should stay focused on the text and its message more then the artwork.

Once I have several people's input on the site and I have made any changes that I think need to be done, I present the finished page to the client.

I would love to say my artwork is going to bring people from all over the Internet to see client's Web sites. But we know that isn't true. I can say that once visitors do get to a site, my graphical layout will hold their interest as they are exposed to the message.

I hope these tips have given you some things to think about regarding the use of graphics and color on a Web site and what really goes into creating that art.

Robert Jamason is a graphic artist and Web developer in the Phoenix area. His site can be viewed at . He can be emailed at .

>>discuss this in the forums

<< PatchLink Update 3.0 Protects Beta Customer From Code Red Worm | Bond gadgets: Never say they will never work Movie Camera >>


© copyright 2001-2006, created by Omniseek.