Web Design with Clip Art

Including graphics on your website design is a balancing act. Some web designs fall from the balance beam with a resounding thud, yet others soar. What's the difference? The subtle goal for website design is to decide where the viewer's eye should go, then lead the viewer there.

Strategically placed clip art can help you do this right. Clip art can describe, add spice, deliver humor and guide your viewers right where you want them to go. Take advantage of these design tips to build a site with plenty of image appeal.

White Space

There are two ways to make something stand out on a webpage. One is to make the goal object bigger, brighter and flashier—you see this often in web ads—but the other method is to increase the blank space around the goal object. This blank space is referred to as "white space" (even when it isn't white).

Imagine a blank white webpage with a small red button in the middle. "Click here," the little button urges, and who could resist? All the white space literally points to the goal—pushing the button.

If your webpage is filled with blocks of text and occasional graphics but you want viewers to click a specific button, surround that goal button with white space to make it stand out. This is a simple—but often overlooked—strategy in graphic design.

Clip Art Variety

Webpages with a dozen different ads look awful, but why? Each ad was created by a different designer, so the styles, fonts and backgrounds clash and compete when viewed together. But viewers have come to expect this of the ad section on webpages. Doing the same thing on your portion of the webpage is unforgivable.

Pick a style and stay with it. If your website features stick figures and you throw in a photo-like drawing and a few colorful illustrations, the hodge-podge combination will distract from your message and throw viewers off. Keep the same color theme throughout, stick to styles that complement, not compete. And remember to give the goal—the purchase button or the signup button—top billing.

Clip Art Density

A text-heavy site is just that, heavy. Unless your viewer is reading an ebook on your website, your webpages—particularly your homepage—need variety. Even a full page of text (like this one) can get a boost with a contrasting color background and white space. Use graphic images online as you use spices in the kitchen; sprinkle them here and there.

On the other hand, once you learn how to upload clip art to your website it's tempting to place clever images at every opportunity. Such busy websites resemble children's picture books and don't leave a professional impression with your viewers. Also, websites scattered with graphics have no clear goal—the eye goes everywhere at once and tires, then your viewer leaves.

Use graphics like a trail of breadcrumbs to lead your viewer to a goal. For example, if the goal of your website is to get people to sign up for your newsletter, accompany snippets from past newsletters with relevant images—but just a few. And make your subscribe button big and hard to miss. The biggest tragedy online occurs when your viewer wants to sign up but can't figure out how to do so. Don't make your viewer work to reach your goal. Make it simple.

Clip Art Intensity

Some websites feature tiled backgrounds—a clip art image repeated across the screen. When subtle, such backgrounds can make an intriguing border. But more often, tiled backgrounds take over the show, stealing attention away from your content. Anything that draws your viewer's eye way from the content is poor design.

The same goes for animated clip art. While clever, use this sparingly if at all. Constant movement will attract the eye's full attention successfully, but if the viewer doesn't want or need whatever the animation advertises, the distraction will annoy and the viewer will probably leave. If you must get attention, aim for a subtle animation, such as a slight change in color.

If your image also includes text, don't make the image so loud that viewers can't read the words easily.

Clip Art Quality

It's best to use quality images on your website, but remember that the larger the image files are, the longer the webpage will take to load into viewers' computers. Conserving memory becomes a major issue when you have a dozen images loading on a webpage simultaneously.

When talking about image quality, the terms compression and resolution often crop up. Many people confuse image resolution with image quality. Generally, image resolution is simply the number of dots per inch (dpi) or pixels per inch (ppi).

For example, if you take a 649 X 480 pixel image with 72 dpi and enlarge it to 800 pixels wide, you won't receive extra pixels—you'll just end up with fewer dots per inch. Those dots expand—or stretch out—to a wide 32 dpi.

Another way to lose image quality is compression. When you compress an image—or store that image in a smaller memory space—you lose image quality. File formats (like .jpg) compress and store image files. High quality images are those with little or no compression, little or no change from a quality original. All clip art file storage formats have advantages and disadvantages. To learn more about these, read Understanding Image Formats.

Clip Art Resizing

Never enlarge an image unless you have a complete understanding of resolution. Often, when people enlarge images from the Internet, they increase the number of pixels without decreasing the resolution; the result is a blurry image.

It's also not a good practice to manipulate image dimensions using html code. With html, you can define the height and width of an image and the program will force it to shrink or stretch to those dimensions (even if the original is different). When displayed, and html-sized image will often look distorted. So, retain the actual image dimensions.

But don't fret, experiment. You can manipulate quality vector images correctly using photo editing software.

Although relatively simple, these tips can increase the effectiveness, visual appeal and impact of clip art on your website. And when your website looks good, you look good.