Week 13 Page 5: Graphics Guidelines -- Integration

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

Guideline #2: Integration

Integration concerns how well images/graphics are melded into the design. This guideline is similar to resonance in that it focuses on how well the design elements work together.

The big difference is that integration specifically addresses ways of incorporating graphics into the design while resonance attempts to make visual connections between graphics and other content. The goal of integration is to avoid arbitrarily plunking down images anywhere or just lining them up.

What methods do you think you could use to ensure that the graphics appear as an integral part of the design rather than just a thrown-together afterthought? A few techniques that might help with integration include:

  • feathering or blending images into the background

  • using lines or rules to visually "tie" them to the rest of the design

  • attaching images to other design elements such as a sidebar or top banner

  • using an image as a background for content

  • breaking images out of a container so they overlap something else

  • placing graphics within colored shapes or rectangles

  • integrating graphics with type

Look at a few good web sites and see if you can notice any other techniques...
 

Integration web site examples:

Here are a couple of site examples that demonstrate some of the integration techniques described above:

integration web example

integration web site

  • Site #3: 
    This site has gone away but notice the semi-transparent panel over the photo integrates so nicely with the background.

Other Integration Examples:

 Go to next page >>