Creating graphics that deliver

I love graphics. Graphics are what transformed the Internet from a text based information medium into the marketing, entertainment and multimedia frenzy that it is today.

Graphics are what gives your site flavor, personality and pizazz. They are far more important than content in making a good first impression. Visitors decide to stay on a site, at least on the initial visit, based on what they see, not what they read. Whether consciously or subconsciously, they have sized up your site's personality and professionalism within the first few seconds.

So how do you create graphics for a web site that delivers the right message in five seconds or less?

Creativity, Constancy and Consistency.

CREATIVITY

Everyone has at least some level of creativity that can be used in designing graphics. It's important that you create your own graphics for you site and not 'borrow' graphics from other sites on the web. Two main reasons come to mind.

1. 'Borrowing' graphics is almost always illegal and though it's done thousands of times a day with thousands of graphics and the chance of getting into any trouble is next to none, it's not right. On top of that it just isn't necessary. With a decent graphics tool and a little effort, you'll be creating your own in no time.

2. The graphics on the web that are free and aren't copyrighted are already on thousands of other sites. The last thing you want your visitors to say is "I've seen that image before". Don't let them categorize you, instead present to them a graphical message that says "We are unique, we did this ourselves and you as our visitor are important enough that we went the extra mile to create a nice web site environment just for you."

Some of you may be saying, "I just don't get good ideas for design" or "I can't seem to make graphics that look visually pleasing."

Here's the solution. Borrow ideas, just don't 'borrow' the graphics themselves. Although 'borrowing' graphics is wrong, borrowing ideas for graphics is completely acceptable.

Some of my best ideas for web designs have come from someone else. In fact, I quickly learned that my clients were most satisfied when I could give them a site design that was similar to other sites they had viewed and liked. Now it's a standard, at least as far as pleasing the clients. I require that they give me at least a couple of site URL's that they would be proud to call their own. Then I create something similar to it, albeit still unique and customized to meet my client's primary goal.

Here's an example. A recent client liked the simple yet effective navigation system on the following site. Click a few of the links.

http://www.safireaircraft.com

I had never created this style navigation, but after viewing it, agreed that it was effective and streamlined. What came out of it was this:

http://www.autobolt.com

Now I don't feel one ounce of guilt for borrowing the idea for this type navigation. I simply built on the idea and created custom graphics for my client.

The same goes for a site you design for yourself. Spend time browsing the web and find a 1/2 dozen sites that appeal to you strictly by how they look. You'll soon have more ideas for designing your graphics than you would have dreamed.

CONSTANCY

Think your graphics as the skeleton of your web site. Without a skeleton, our bodies would be just a lump of flesh and organs.

A skeleton gives the body it's structure. Sure you can change the flesh and organs, such as bulking up muscle or removing the tonsils, but the skeleton will always remain unchanged, it has constancy.

Your web site skeleton should be viewed in the same manner and the graphics are what the skeleton is made of.

I always create an entire graphical skeleton of the site prior to coding the first page of html. The proper order is to use the graphics to mold how the content will layout, not the other way around.

Here's an example from a recent client of a graphical skeleton:

http://www.wordnet.net/imc/skeletalsample.htm

There's not one piece of text, content or sales copy on this page and yet the page appears almost complete, right? It has a structure and personality all it's own.

Now view the page with some content added.

http://www.wordnet.net/imc/skeletalsample2.htm

I ask you, was your perception of the professionalism of this page changed since the first viewing? No. Not until you actually read the nonsense content would you have thought twice about the sanity of this page owner.

The graphical constancy, the skeleton gives the viewer security that you are competent, professional, understanding or whatever it is that your graphics portray.

This is not to say that your content is not also important, but it is to say that your graphical presence is important first.

CONSISTENCY

You may have heard the phrase 'content is king', well when it comes to graphics, consistency is king. Consistency in colors, in font sizes, in patterns and in shapes.

This is especially the case in your free-floating graphics. These are the graphics on the site that are not part of the graphic skeleton.

Let's say you are going to use little icons to present a visual explanation of what your links are about. Stay consistent in style and size.

If you create a cartoon like image for one, don't switch to a more realistic image or picture for the next, use cartoons all the way through.

Take a look at Iwon.com as an example: Look at the my money, my scores and my weather images. See how they are consistent in style and size?

http://www.iwon.com

Now for a terrific example of what not to do, check out this page:

http://www.potomac-airfield.com

In addition to the many obvious problems with this page, take a look at the variety of graphics used on the left hand side to give visual description to the links. Some are pictures, some animations and some cartoons. By the way, how many of you have seen at least one of these images used on another site, such as the waving flag or the cartoon of the boy holding a newspaper. I know I have.

Creating your own cartoon illustrations of course is impossible to do unless you have true drawing skills and the software to draw digitally. One solution for free-floating graphics is to slice out a portion of your skeletal graphics, add some text to it and use that as buttons, headers, descriptors, etc.

As an example, view the 'join' 'listing' and 'advertise' buttons on the following page. See how they are similar in design to the main header graphic.

http://www.polygraphplace.com

The main point is that whatever you do regarding your graphics, do it consistently throughout the site.

Graphics have the power to shape perception and that's a truly powerful tool indeed, use it to your advantage.