Week 13 Page 4: Graphics Guidelines -- Resonance

Design Guidelines for Using Graphics in Web Pages

Having explored the key ways in which graphics can aid and enhance your design, let's discuss some guidelines for using them in web pages. Hopefully, these guidelines will help you avoid the "plunked-on-the-page" look!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Guideline #1: Resonance

When you bring a variety of different design elements together on a page your goal is to have them resonate or, in other words, work together. The graphics on a page should look like they "belong" with the rest of the design, the content and with each other.

So how do you make this happen? One method is to look at the color scheme and atmosphere you intend to create for the site. Then, try to establish the same colors and mood in the graphics.

Tips for Creating Color Resonance:
  • If your colors are bright and intense, then use strong bright graphics.
  • For a calm palette use softer, more blurred image treatments.
  • Select photos with similar color palettes to your site's color scheme
  • Use Photoshop to sample colors from the photos first and then develop the site's color scheme. 
Tips for Creating Mood/Theme Resonance:

Look for specific themes at work in the design...

  • A design with an amorphous feel based on curves rather than hard edges, should have graphics (and typography) that reflect that.

  • A design that wants to communicate a "grunge" mood, would resonate more with torn and textured graphics.

Resonance web site examples:

The following two sites demonstrate how images can be created to resonate with other design elements or... NOT!! Which of the following sites does the better job of making the graphics "meld" with the rest of the design elements (consider color and mood resonance)?

graphics resonance
 

resonance bad example

What is it about the different image treatments that makes one site's graphics resonate and not the other?

Notice how the first site uses images that (mostly) resonate with the other design elements -- they tie in with the colors and saturation of the type and background. A surface pattern is also repeated on the top images and in the content area (this is also repeated on other pages).

The second site's photos seem to bear little design or style relation to the color scheme or mood at the site. The site's banner has curves and a background pattern but neither of these are used with the other images at the site.

Resonance Site Example:

Here is a site that has created resonance by using photos with colors that reflect the color palette (used for boxes, text color, background etc.) used in the design. Perhaps they developed the color palette by sampling the colors in the photos.

 Go to next page >>