Week 13 Page 3: Graphics and Design Principles

How graphics can enhance design principles and techniques

When you decide to incorporate photos and other graphics into your designs, make sure that they follow and enhance the design principles (contrast, alignment, repetition and proximity) and techniques (focal point etc.) we discussed in the first weeks of class.

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

Graphics aid the design principle: Alignment

A well-placed graphic/photo can be useful for establishing a strong alignment. It can be used to define a strong edge that other page elements can share. A poorly-placed graphic, by contrast, can disrupt visual alignment. Think carefully about where you place your graphics and how they contribute to the alignment on the page.

Alignment Graphics Example #1:

The following example uses photos to establish alignment edges with the text. Notice how clean the edges are (both vertical and horizontal) and how organized the design looks:

• http://clementinedaily.com/category/food-drink/entertaining/ Links to an external site. (Archived version.)

Alignment Graphics Example #2:

Now look at this example. Do the photos help to create an alignment edge in this design? Do the photos have a visual relationship to the text? Compare it to the previous example... which one is easier to follow and has a cleaner design?

• http://www.aesmichigan.com/ Links to an external site. (Archived version.)

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

Graphics can be used to create the design principle: Contrast

You can create a striking contrast with graphics. Think of black/white vs. color, blurred duotone vs. crisp full color, large vs. small, closeup vs. distant etc. A well-chosen image that contrasts with the other elements will add visual interest and dynamism to your pages.

Contrasting Graphics Example #1:

Look at how this design has a large blurred image in the background contrasted with small crisp thumbnails in the foreground. (Unfortunately this web design is no longer available.)

Contrasting Graphics Example #2:

The following design uses contrasting images to create a visual rhythm. Some images in the grid are blurred, others crisp. Some are closely cropped, others are taken at a distance. Also check out the responsive layout of this design... what happens if you enlarge and/or reduce the browser window?

• http://www.dynamit.us/company Links to an external site. 

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

Graphics help apply the design principle: Repetition

The key to a unified site is repetition. This includes repetition of layout, color, formatting and also image treatment. Here are some tips for applying the principle of repetition to your site graphics:

• Pay close attention to over all consistency.
• Use the same size and color frame round each photo, and/or the same edge treatment.
• Select the same style of illustrations... don't go to a free clipart site and choose a variety of mismatched graphics.
• Use the same rule style, width and color on every page!

Repetition Graphics Example #1:

Look for signs of consistent repetition in the site below! Are the line widths the same? Do the large photos have the same border? What about the use of dingbats? Can you see repetition of triangles and check marks? Do the graphics look the same from page to page?

• http://www.statair.com/statair_about.html
  Links to an external site.

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

Graphics can be used to reinforce the design principle: Proximity

Graphics are the perfect tool to help apply the rule of proximity to your site pages. Use boxes, shapes, rules, arrows and even photos to group or separate the elements in a layout. Also consider using overlapping to create an even stronger proximity relationship between graphics and other page elements (e.g. text).

Proximity Graphics Example #1:

The following site combines photos and colored rectangles to organize its content into visual groups. This reinforces the organization of content on the page and helps the viewer to quickly interpret it.

• http://www.theverge.com/
  Links to an external site.

Proximity Graphics Example #2:

As mentioned above, you can use overlapping to create proximity relationships between graphics and text. Look at how overlapping creates a relationship between an image and text in this example!

• http://thislandishovland.com/ Links to an external site.

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

Graphics can make powerful Focal Points!

Images are often the first element to catch the viewer's eye. A striking image is probably one of the best choices for a focal point on a page. Out-of-scale or cropped images can often create a strong impression.

Focal Point Graphics Example #1:

The following site uses a striking, colored image that is cropped to attract more attention. Notice how it is used to direct the eyes after drawing the viewer to the page.

• http://www.emotionslive.co.uk/about.html Links to an external site.

Focal Point Graphics Example #2:

Look at the oversized, cropped focal point used in the following site! It is certainly the first element to attract the viewer's attention. It is even more successful because the rest of the page is so simple.