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
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.
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
Here's an example. A recent client liked the simple yet effective
navigation system on the following site. Click a few of the links.
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:
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.
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:
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.
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.
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
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?
Now for a terrific example of what not to do, check out this page:
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
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.
|About the contributor