Guidelines for Cool Web Graphics
An Excerpt From CREATE Magazine
(C) Copyright 1995 by Dave Taylor
Pictures and graphics are easy to find on the Internet, thanks to the remarkable popularity of the World Wide Web and its built-in graphics display capabilities, but finding cool, interesting and fun graphics is a whole 'nother story. There are tens of thousands of different Web sites, but how many of them have cool graphics? Surprisingly few, the best of which are highlighted in the accompanying montage, all right off the Internet.

What makes a visual cool? Cool comes from an image that manages to convey a look, a feel, a certain sense of hipness or emotion, a visual that leads you to a spot, pulls you into the page or excites you. Being an online medium, the best pictures are also those that play games to make things happen quickly too; you and I are both members of the Impatient 90's and aren't going to hang around waiting long minutes to download a boring graphic from a new site.

Tricks you can use include using small color palettes (see if you can find the image here that's only using four colors and see what you think) and having a uniform background color for the entire page, with small graphics superimposed (The Internet Mall buttons and the space shuttle demonstrate this idea). Background graphics can also be quite cool and set the tone immediately.

What not to do unless you know your customers all have fast connections: huge lot-o-color graphics. The large image on the Sun Microsystems home page is almost over the top, even for people connected directly to the network with fast plugs.

Ultimately, just like with any other publishing venture, graphics should help convey the message of the material, not dominate it or miss the overall point. Cool Web graphics do just that.

Specific Graphics Design Guidelines

  1. Smaller is better: use small, attractive graphics.
    A design that looks terrific when running off your hard disk locally doesn't have quite the same impact when it takes long tedious minutes for remote users to enjoy.
  2. Minimize color palettes
    Use bold, exciting colors, but keep repeating the mantra "smaller graphic files are better" and smaller palettes produce smaller graphic files, even if the graphic itself is the same size.
  3. Use background colors, but make sure the page works without it too.
    I call this the "WIRED" syndrome: don't try beige on dark grey or some other weird combination that might not work, and don't forget that lots of Web surfers use software that doesn't understand background colors.
  4. Use background graphics with care; they can eclipse the text!
    Like #3, make sure your message always gets through with your design.
  5. Sprinkle graphics around the page for visual interest.
    Icons are very fast and if you use the same graphic element at multiple points on the page, you can create a fun and interesting document with almost no extra load penalty.
  6. Design custom horizontal rules to break up text.
    Page after page of text, even with different size heads and type sizes, can get boring. Break it up in logical blocks with horizontal bars, rules, or similar.
  7. Experiment with drop caps and ornate caps for text.
    Lots of what's on a Web page is text, so try and design pages that are visually exciting and still focus on the message of the text.
  8. Test your graphic on PCs and Macs: they display differently!
    The amount of screen space needed for a graphic will change based on the resolution of the display. On a Unix machine, a small element that takes up a 2x2 box might be twice the size on a Windows system. Know what'll happen before your visitors by testing.
  9. Use consistent color schemes and logos for multi-page sites.
    Many people move into a Web site from other than the front door, so always make sure that they can figure out where they are and what the site's all about from any point.
  10. Have fun, be creative!
... back to Intuitive Systems ...