Chapter 6
Presenting Effective Web Graphics
Reproduced on the following pages is a portfolio of current Web
graphics that the authors find to be particularly effective. Of
course, this is just a snapshot because the nature of the World
Wide Web is fluid, with resources changing daily.
Several themes can be identified in the images presented here.
Effective graphics tend to be unambiguous. That is, the purpose
of the image is not confusing. Effective graphics tend to be minimalist,
with just the right amount of color, line work, and contrast.
Visual elements are usually kept to a minimum, and a sense of
tension is created with asymmetrical elements. Finally, great
graphics almost always project contrast between light and dark,
thick and thin, saturated and unsaturated.
The examples aren't presented in any particular order so don't
think we saved the best for last. As you look at each example,
use what you already know about effective Web graphics to analyze
the design. Do you agree with us?
Figure 6.1 : I liked Open Text's first Web site, and
this new version doesn't disappoint. It offers nice, soft splash
graphics with an easy-to-read textual jump list. Graphics combine
table formatting and mapping.
Figure 6.2 : Color makes an impression when it is contrasted
with a monochromatic background, such as this example from Premenos
Corporation. The splash graphic is a Joint Picture Experts Group
(JPEG) image map.
Figure 6.3 : Honda of America delivers an almost publication-quality
site with the interactivity that keeps you coming back. No cute
tricks here, just solid design, graphics, and executions.
Figure 6.4 : Image Club is one of my favorite sources
for art resources, so you'd think that their Web site would have
the same concern for design, and it does! This is another example
of using a table to format linked graphic images.
Figure 6.5 : I love this page! Cable News Network's
site could be the prototype for Web information sites with easy-to-get
data, lots of white-space, engaging graphics, and good layout.
Figure 6.6 : Informative Graphics developed this site
for BIG monitors. The buttons and the text are placed in tables.
Its attributes include nice colors and a clean design.
Figure 6.7 : Nothing like plugging your own university!
This splash page shows exactly what's included in the Web site
in an attractive and rapidly loading Graphical Interchange Format
(GIF) graphic. Subsequent Level 1 sections carry the same theme.
Figure 6.8 : This site from Sophisticated Shirts is a
good example of a commerical Web site. Good use is made of reduced-resolution
thumbnails. Which shirt do you think they will sell in highest
quantity?
Figure 6.9 : How do you make a page look fun and inviting?
Use primary colors and a text font that isn't too serious. This
page from Penton Publishing is clean, well organized, and shows
good use of dominant asymmetry.
Figure 6.10: As you might expect, a page from a high-profile
graphics company like Alias/Wavefront(Silicon Graphics) would make
effective use of a color background and JPEG images sequentially
loaded into an image map.
Figure 6.11: Talk about clean!. Good use of small GIF
icons, clean design, some tension, and default background. Linked
text provides further flexibility without cluttering the page
with a lot of buttons.
Figure 6.12: The one-screen splash page from Web Professionals,
Ino includes an interlaced banner logo and simple, clean information.
Subsequent pages also carry the company logo. A great frequently
asked questions (FAQ) link for Web information!
