MM1111 Design Layout :: Art Institute

Week 8: Sourcing Imagery

Sourcing Imagery

Finding just the right images for your website projects takes time, skill, and a discerning eye. Here are some guidelines to help you along.

Selection Criteria

Is it relevant?

Images should resonate with the personality and visual metaphor you are striving to portray with your design. Don't select an image that's simply really cool but completely irrelevant to your message. For example, you might like manga drawings, but are they really going to work for a business doing financial assets managment? Only if that spirit of manga is part of the branding message somehow.

Is it interesting?

On the other hand, tying an image too closely to the content may result in using tired clichés or being too literal. Sometimes relevance can take a back seat if you're trying to really capture the attention of your target audience. Here are a couple of sites who use interesting illustrations which are not immediately relevant to what they sell:

ThinkGeek

Tijuana Flats

Is it appealing?

Beauty is in the eye of the beholder, they say. You must understand your target audience so that you can select or create imagery that is aesthetically and emotionally appealing to them. Appealing images are especially important for sites dealing with restaurants, recipes, and catering. If the food seen on the website fails to make your mouth water, customers will avoid eating, cooking, or ordering it. The following site generally includes excellent food photography:

101 Cookbooks

Finally, make sure the image you've chosen looks high-quality, avoids undesirable symbology, and adds to the visual heirarchy and balance of your layout.

Image Sources

Make Your Own

If you have the skill and inclination, creating photography and/or illustrations for your client can be very appealing. It's the best way to be sure that the imagery on your site is completely original and won't be found elsewhere. Often, a website requires a great deal of illustration in the form of icons, buttons, backgrounds, drawings, and logos. If the designer creates these, they can all conform to a specific design motif and color palette. The following site uses many illustrations all drawn by the same person:

Sew-It-All

Stock Photography

If you lack the time or ability to generate your own images, your next stop will probably be a stock photo archive. Image archives consist of photos and illustration which are created for multiple, multi-client use, rather than for a specific project.

When using stock imagery, it is very important that you track down and understand the licensing and image usage guidelines associated with the image(s) you select. Also note that high-quality photos of people can run more money because the person photographed must sign a model release and may want to be paid for posing.

Free Images

The biggest free archive of images is at stock.xchng. The larger the database, the better your chances of finding a good image for your work. Be aware, however, that the average quality of images at free sites can't compare to the overall quality of the images you pay for.

stock.xchng

Public Photo

Flickr Creative Commons

Royalty-Free Images

Royalty-free means that you buy a license for an image and then you can use it multiple times without paying for each additional usage. When an artist is paid for each use, it's referred to as a royalty. These are free of royalties. Royalty-free collections are often a mix of work by professionals and skilfull amatuers. iStockPhoto is one of the best-known resources for royalty-free imagery.

iStockphoto

ShutterStock

Rights-managed Images

When an image is rights-managed, it can be quite a bit pricier than royalty-free. You are charged according to a number of factors: the size of your business, the number of people who will be exposed to the image, and the amount of time for which the image will be in use. This level of management means it will be very unlikely that your competitor will be using the same image as you. Photos in a rights-managed collection are usally done by professionals.

Getty Images

MasterFile

Corbis Images

Outsourcing

Photography

Be sure to find a photographer who has experience with commercial photography and the type of shots you're after. A great wedding photography may be unfamiliar with the best methods for capturing product photos.

The best way to find the right photographer is by word of mouth, but you can also start here:

American Photographic Artists

Get everything in writing before a shoot: the details of each shot needed, where and when you'd like the photos taken, and the pricing.

Illustration

If you need to hire a professional illustrator, here's one resource:

Hire an Illustrator

Professional illustration can truly enhance the personality of a website. Think about all the Google Doodles we see on a regular basis. Also check out:

40 Excellent Illustrations in Web Designs

Bad Habits to Avoid

Google Ganking

If you find an image at Google, it's best to assume it is copyright-protected. You are not allowed to simply download it and maybe crop and and edit it a bit, then use it on your own design. This practice is known as Google Ganking. Avoid a cease-and-desist letter, or worse—a lawsuit. Even on Flickr, be sure to understand the licensing for a given image before using it. All Flickr images at the very least require attribution.

Hotlinking

Even worse than Google Ganking is hotlinking directly to the image on its original server. This steals bandwidth from the designer's own servers, adding insult to injury. Usually, images placed in an HTML page are sources from somewhere within the same site, such as this:

<img src="images/chipmunk.jpg" alt="photo of a chipmunk" />

Hotlinking looks like this:

<img src="http://somebodyelsessite.com/images/chipmunk.jpg" alt="photo of a chipmunk" />

Clip Art

Many websites offer free or cheap clipart and illustration packages. They are generally too goofy and unprofessional for a serious design project. Leave them for the internal company newsletters. Using them on a website is like serving instant mashed potatoes at a five-star restaurant. Your imagery should be original and astonishing.

Project 4: Restaurant Site

Click the image to read the PDF article.

NET magazine article web buildoff restaurant website

View the Layouts

Click an image to see it full-size.

example 1 restaurant site

example 2 restaurant site

example restaurant site 3

Required Home Page Elements

  • Restaurant name and logo
  • Text which indicates the type of food and the mood of the restaurant
  • Navigation which includes links to home, directions/map, menus, and other relevant site pages
  • Menu link, or call-to-action button, for online reservations
  • One or more images of food
  • Phone number and address

Optional Home Page Elements

  • Social media icons
  • Featured special
  • Coupons/promotions
  • Miniature menu
  • Link to a restaurant locator
  • Hours
  • Quote(s) from food critic(s)

Articles

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
8 Image Sourcing image-
sourcing.doc
Project 4: Restaurant Site v.1 restaurant-site-v1.pdf

Assignment Details

Image Sourcing

Invent a website design scenario and source images for a specific use. Select one image from each type of image bank for your specific use. Then describe the pros and cons of using each image. Collect your findings and analysis in a MS Word document.

Report Structure in Word
  • Describe your web design scenario (some ideas listed below)
  • Describe the specific use for the image needed
  • Report on each of your five images:
    • URL of image source (one for each type of image bank listed below)
    • Insert the image
    • Pros and cons of using this image for this specific use
Five Image Bank Types
  • free stock images
  • royalty-free stock images*
  • rights-managed images*
  • clip art
  • Google images

*dowload the lo-res, watermarked version

Ideas for Web Design Scenarios
  • nonprofit site raising funds for a children's possible
  • social networking site for runners/joggers
  • sales site for jeans, catering to urban youth
  • site for an animal rescue, such as for large cats or wolf/dog hybrids
  • summer camp site
  • seasonal theme park site
  • business site for a car wash
  • subsite for an academic department at a college

Restaurant Site Mockup: Project 4, Version 1

Create Version 1 of your home page layout for a Restaurant Site in Photoshop. Save your mockup as a [Smallest File Size] PDF.

See Restaurant Site: Project 4, Version 1 to the left.

Student Work