Add some bang, get some bucks

February 9, 2001 —

THERE ARE NO TWO ways about it: Underestimating the importance of good graphic design for your Web site will cost you credibility, traffic, and sales. If content is king, graphics are the royal court, creating the aura of importance and authority that will indelibly impress your visitors. In addition, good design will guide visitors easily and efficiently to the information they need.

Web graphics

BUSINESS CASE

To attract visitors, a Web site must not only provide useful content but present and organize it in an interesting and meaningful fashion. Graphics, when done properly, increase the effectiveness of your site. This, in turn, will translate into longer visits, more purchases, and a better perception of your organization.

TECHNOLOGY CASE

Updated graphics applications take the mystery and drudgery out of optimizing image size and quality. And for higher-bandwidth applications, revised multimedia packages can add interactivity to sites, further improving the chance of sales and retaining visitors.

PROS

+ Good tools reduce file sizes in one step for faster page downloads

+ New applications turn graphic layouts into Web pages without HTML coding

+ Adding animation and other special effects to your site entices visitors

+ Web-optimized multimedia is great for online, sales-driving demos

CONS

- Good graphic applications do not negate the need for professional designers

Aside from being aesthetically attractive, graphics have to be technically superior, with dense color resolution and compact file size. All the beauty in the world won't spare your visitors frustration from a slow-loading site. And frustration is not something you want to be part of your branding.

Surprisingly, many companies expend relatively little effort when building sites; presumably, they think that because Web pages are malleable, they can skip the extensive due diligence normally associated with building a "real" storefront.

Wrong.

The building materials for a Web site are expertise and time, and they are every bit as expensive as cinder blocks and plywood.

Simply, there is no substitute for hiring the best you can afford to build your site. But once the site is up, you can still do a lot to maintain and modify throughout the course of business, so it is important to use good design and technology.

In fact, your enterprise's in-house staff can employ many of the same techniques and applications that the pros use to help you project a memorable image without sacrificing your site's usability or brreaking your budgets.

Adding visual impact

Naturally, designing a Web site is a subjective exercise. But from the start, many companies overlook some common-sense, accepted principles.

Keep it simple: Take a hard look at your design and delete elements that aren't important to the page's content. For example, consider purging all of those icons in favor of clear text links.

Maintain white space between text and graphics.

Limit branding, such as company logos and slogans, to the very top of the page.

Keep images small, in proportion to other page elements. If you must show large photos or charts, link to them from quick-loading thumbnails.

Use a limited number of colors and apply them consistently to headings, dividing lines, and other objects.

Building for visits

With a balanced page design in hand, you can build and format your graphics in multiple ways. Don't dismiss relatively new formats such as PNG (Portable Network Graphics). But for the widest browser compatibility, you're still constrained to using GIF, best for text and flat artwork, and JPEG, for photos.

Up until recently, designers spent undue time optimizing the size of either file type by hand or through specialized utilities. Make sure you are using an application that creates Web-ready graphic files. With these latest graphics applications, going from design to Web is fast and effortless. Most graphics applications, including Jasc Software's Paint Shop Pro 7, Corel's CorelDraw 10, Macromedia's Fireworks 4, and Adobe Systems' Adobe Photoshop 6.0 have "save to Web" functions that automatically convert artwork to various Web formats.

Photoshop 6.0 offers the most flexibility and produces the best results. Like the other packages, the designer can pick the compression rate for JPEG files or the number of colors in GIF images and then preview the quality and file size of the settings. But Photoshop's new Weighted Optimization lets the designer mask part of an image. As a result, critical parts of an image (a product) are very sharp whereas other areas (the background) can go soft. In tests, this technique allowed us to reduce a JPEG image from 100KB to 17KB in size without compromising overall quality.

Consider CorelDraw 10. Its new Image Optimizer for GIF, JPEG, and PNG files -- while not as powerful as Photoshop -- requires little time or skill to master.

Low-bandwidth multimedia

Experts favor judicious use of animation and other multimedia. For creating GIF images that move or button rollovers, we prefer Adobe's ImageReady 3.0 (which ships with Photoshop 6.0) because of its simple operation coupled with high-end features such as the ability to employ Photoshop's special effects.

But the GIF format isn't a good choice for designing product demos or interactive Web content because file sizes are still large. For that job, Macromedia's Flash 5 is the acknowledged leader. Beyond animating vector shapes, which are far smaller compared to bitmap images, Flash offers abundant programmability to build page navigation and interfaces to applications. Furthermore, Macromedia's companion Generator software produces customized Flash movies on-the-fly. But Generator's cost and complexity limit its value.

If you don't need Flash's high-end features and associated long learning curve try Adobe LiveMotion 1.0 or CorelDraw 10's new Real Animated Vector Effects utility. Both products offer an understandable time line for controlling animations and both save files as Flash movies.

By taking our advice, you will make great strides toward having your Web sites peerform faster, helping visitors quickly find what they're seeking, and improving their positive memories of your organization.

InfoWorld