Week 13 Page 8: Graphics Guidelines -- Originality and Interactivity

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

Guideline #5: Originality

Originality is closely tied to "visual interest" but goes one step further. For example, rather than deciding to create an effect only on the edges of a photo, you might choose to use an effect on the whole photo (again Photoshop filters are great — try some of the artistic filters).

Look for ways to be original:

• Recolor or stylize graphics

• Try unusual cropping

• Remove the backgrounds to create stand-alone images

• Combine graphics into a collage

• Use type or large letters as a graphic.

• Experiment with image opacity or adjust brightness, color, contrast and more

• Combine images into a collage by using different levels of transparency. 

• Explore using 3-D effects to create a dynamic sense of depth in your design

• Experiment with a combination of static and moving content/images

Originality site examples:

Here's a site with original graphics that might attract a visitor's attention.

Look at the original image treatments at the following sites

• http://mariecatribs.com/ Links to an external site.
• http://www.heathershaw.com/ Links to an external site.
• http://baystreetbiergarten.com/ Links to an external site.
• http://www.piropixel.com/# Links to an external site.

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

Guideline #6: Interactivity and Movement

Animation adds movement and interactivity to your site. Movement is a good method of attracting people's attention. Interactivity is a great way to engage your viewers and keep them interested. Look for creative techniques for involving your target audience in your site. You might consider text rollovers, image swaps or  animation.

One caveat about animation: sometimes you can have too much of a good thing! Use animation selectively: use it to reinforce a message not just for the sake of it. It's probably wise to avoid entire sites in Flash (because of accessibility issue and the fact that Flash is not supported on some devices). Also take care not to have a number of animations running on the same page, particularly if they loop OVER and OVER again!

Animation and Interactivity site examples:

Here is a sampling of sites that feature animation and interactivity of various types... the good AND the bad!! Hopefully it's pretty clear which sites suffer from "animation abuse"!

• http://www.mrbottles.com/ Links to an external site.
  Oh dear... this site is a visual assault of graphics and a surprise animation?!!
    
• http://www.patrikervell.com/ Links to an external site.
  Interesting use of movement to model clothes!
   
• http://www.1md.be/home Links to an external site.
  This site features background video
   
• http://www.marketryinc.com/ Links to an external site.
  You can actually flip the pages of the book in this site design! 
   
• http://www.nurturedigital.com/ Links to an external site.
  Interesting use of video within the type. Contrast of static and moving!
   
• http://www.cirq.com/ Links to an external site.
  Subtle use of video behind the typography. Definitely communicates the atmosphere!
   
• http://andershede.com/ Links to an external site.
  Use of video in background to promote the business. Note how the video is faded out and has a very short loop (for download time)
   
• http://www.hkbws.org.hk/archive/frame.html Links to an external site.
  Sometimes people just overdo the animation! What do you think about this site? (Wait a while for the animation to take its full effect!) Do you find the animation distracting?

Feel free to comment on these original and interactive sites on our Discoveries/Discussion forum. Do you think they are successful/appealing or a deterrent to site visitors? Don't forget to copy and paste the URL if you are discussing a particular site.