APGR72 Week 6 Lecture: Web Graphics (page 2 of 4)

How graphics 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!

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.

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).
     http://www.abovetheinfluence.com/
     This site uses images to group content areas on the page and within the site.
    http://www.theretreat-dayspa.com/
     The leaf dingbats at this site help with content organization (and theme repetition). They are used consistently throughout.
     http://www.willsolutions.net/index.php
     This site uses a variety of different bullets and dingbats to organize its content.

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!
     http://www.olivegarden.com/wines/
     http://www.doopsuikerpoppies.be/index.php
     Pay close attention to the graphics on these sites — they create very strong directions.

Graphics support other design principles and techniques.
Make sure that the graphics on your pages follow the design principles and techniques we discussed in week 2. Here are some examples:
Alignment: A well-placed graphic/photo can be useful for establishing a strong alignment. A poorly-placed graphic can destroy visual alignment.
     http://newark1.com/castlepoint/
     The images establish strong vertical and horizontal alignments on the page.
     http://www.aesmichigan.com/
     Compare this site to the one above in terms of image placement. The images at this site do not establish strong alignments with the rest of the content. There is no visual relationship or unity.

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.
     http://www.arkrestaurants.com/
     The above site has strong color contrasts in its treatment of images. Check out a few pages and see what kinds of contrasts you notice. (Enjoy the music too!!)
     http://www.seniorlivingministries.org/
     What kinds of image contrasts do you notice between the images on this site?

Repetition: Achieve better site unity by repeating graphics or the way graphics are handled throughout a site.
     http://www.statair.com/index.html
     Notice the repetition of arrow dingbats, icons and rules.

Proximity: Use graphics (boxes or lines) to group or separate content items. Use overlapping to create a visual relationship between graphics and other elements.
     http://thewalters.org/
     In the above site, notice the use of boxes and lines to visually separate items. They organize the content into logical topic areas.
     http://fall.tnvacation.com/
     For the above site, notice how the graphics extend over the background and also break into the content box. This layering helps integrate the different areas of the design and creates visual interest.

Focal Point: 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.
     http://www.emotionslive.co.uk/index.html
     The cropped image on this site makes a very striking focal point.

Next, let's move on and explore some guidelines for working with web graphics.