Week 13 Page 2: The importance of graphics

How graphics/photos can aid your design and layout

Graphics can make or break your design. Here are a few ideas about how to use graphics in your web pages:

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

Graphics support the content

Appropriate graphics can enhance the message and mood of your design. Think carefully about what kinds of images best communicate the content of your site. You shouldn't just go to the nearest clipart site and download a bunch of images!

Do you think the graphics in the following web design screen shot enhance the message and mood?

• http://addys.aaffrederick.org/ Links to an external site.
  This site has since changed but here's a link to the archived version.
   

This site also creates a nice "mood" with the structural graphics (lines, shapes and backgrounds):

• http://poppiesflowers.com.au/ Links to an external site.

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

Graphics add visual appeal

A web page without graphics is very dull. In fact, it might even deter visitors! Well-handled graphics can bring your web pages to life and encourage visitors to stay around. When selecting images, think about your audience and what kinds of graphics might appeal to them. Here are screen shots from two cupcake companies. Which company would you be more likely to order from?

  
Cupcake Site #1:

  
Cupcake Site #2:

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

Graphics aid visual organization

There are numerous ways in which you can use graphics for organization. Icons, dingbats, rules, arrows, bullets etc. are excellent for separating, grouping and pointing to content items. You can also explore the use of images to categorize and group content areas (for example, a museum might use a representative image to show different exhibit themes). In the following example, notice how colored photos are used to organize the design.

• http://dragone.com/en Links to an external site.
  
  

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

Graphics aid eyeflow

Most images or photos have a clear visual direction. You can take advantage of this movement to help the eyeflow on your page. Try to use images that will point or guide the viewer to the next content area on the page. Beware of images that point or look directly away from the content or off the page! If they go off the page, so will your readers!!

Pay close attention to the photos on the following site — they create very strong directions. They have deliberate angles or content positions that move the viewer's eyes down into the content. The cropping is very interesting too.

The site below also uses graphics and images to create a strong sense of direction and eyeflow:
http://www.riiotlabs.com/en/home Links to an external site.