Web Graphics

Resonance
Graphics, content and design should work together

http://voiceofvictory.com/
Graphics and content resonate at this site. What kinds of techniques did the designer employ to create resonance between the design elements?

http://www.eightytwodesign.com/new/
Do the graphics resonate with the content of this site?

Consistency
Treatment and style of graphics should be consistent throughout the site

http://www.rhinebeckinn.com/index.jsp
Tilting and dropshadowing of graphics. How consistent is it?

http://www.mariecatribs.com/
Is the style of the graphics on this site consistent? Look at the use of grey dot frames and diagonal rules.

http://www.americanmeadows.com/
Ill-matched, ugly graphics and more... There doesn't seem to be a consistent style of graphics here.

Integration
Integrate graphics into the site rather than just lining them up or sticking them here, there and everywhere!

http://nanyate.com/about
Find a way to integrate a photo into the content of the design. This site adds a frame to the photo which matches the shaded boxes used elsewhere.

http://www.csszengarden.com/
Images are very much a part of the content area.

http://www.attitude-events.com/
Images are integrated into the framework of the site and contained by the use of frames.

http://kbrhorse.net/
The images on this page are scattered, have different styles, and don't seem to integrate with the content.

Visual Interest
Experiment with creative techniques: edge effects, oversized graphics, dramatic backgrounds and sidebars

http://artfeeds.org/welcome/home/
Visually interesting textures, layers and image treatments.

http://www.hmstn.com/
Photos and graphics with matching edge treatments create resonance and can enhance visual interest.

http://stopdesign.com/
Borders, lines, icons and arrows... use these to separate information and add visual interest.

http://www.rekkiabilly.com/
Rough edges theme for graphics. Softens the generally hard-edged computer environment.

http://nitrousa.com/
Interesting contrast in photos: color and cropping

http://www.midlandsworkforce.org/
Use an oversize graphic. Make one element the biggest!

Originality
Look for ways to be original: recolor or stylize graphics, try unusual cropping, combine graphics into a collage.

http://www.vilsone.com/#/works
Interesting shapes, cropping and contrast!

http://www.xxico.com/index.htm
Interesting textured graphics!

http://www.fancyflowersco.com/
Contrasting treatment, cropping and focus effects for photos.

http://lundstromarch.com/
Check out this site's creative approach to promoting architectural design by clicking on one of the architectural design areas: higher education, corporate, etc. Interesting cropping and use of thumbnails.

http://www.clarysageorganics.com/
This site has very tasteful images with visually-interesting cropping techniques.

http://www.wakesomebodyup.com/
Intriguing collage makes the viewer look more closely.

Interactivity and Movement
Look for ways to involve your viewer or use movement to attract their attention. Consider rollovers or Flash animation.

http://starwars.mos.org/
Well this site has a lot of interaction!

http://www.nike.com/jumpman23/agentd3/index.html#start
Interactive images and videos. Check out the image cutouts in the History of Flight:
http://www.nike.com/jumpman23/historyofflight/

http://www.heelside.com/
This site has moving images in the center of the main graphic.

http://www.4utesting.com/
Photo swapping. A simple slide show.

Type as graphic
Type is content and can be a graphic. Find creative ways to make it into both!

http://www.calligraphycentre.com/
Type can be used to create an eye-catching graphic using the font of your choice.

http://www.denisechandler.com/
Combine type as a graphic with an image for a striking effect.

http://www.kevinhenkes.com/
Much of the type used in this design is saved as a graphic rather than HTML text. This technique allows you to use many more fonts and creative formats.

Speed
Make sure your graphics download quickly: optimize and slice, create thumbnails that can be enlarged.

http://www.getty.edu/art/exhibitions/past/
This art museum has provided quick-loading thumbnails that can be enlarged to view in more detail.

Web Graphics — Uninspiring

http://www.mythicalrealm.com/
Oh dear... this site is very chaotic and distracting.

http://www.haydenvideoweddings.com/
Are the graphics on this site overdone or do they integrate and resonate well? How crisp do they look?

http://helen-keller.freeservers.com/
There's something very wrong with these images. Did they over compress the jpegs perhaps?!

http://www.porta-bote.com/
Ugghhh!

Sites with info pertaining to class topics

Photoshop Web Tutorials
http://www.photoshopcafe.com/tut_web.htm
Here's a list of tutorials for using Photoshop in web design.

More Photoshop Tutorials
http://tv.adobe.com/product/photoshop/

Scanning Tips
http://scantips.com/

Yale Web Style Guide on Graphics
http://www.webstyleguide.com/wsg3/11-graphics/index.html
Always check this site for info pertaining to your current design problem.

Graphics Tutorials and Information
Web Design @ about.com
Wide variety of information on graphics and tutorials on specific software.

Morgue File Public Image Archive
http://www.morguefile.com
Images that have been rejected or left over from photo shoots free for the taking.

Free stock photo site:
http://www.sxc.hu/

Jupiter Images/Art Today
http://www.jupiterimages.com/
Join for an annual membership and reap the benefits!