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

Hell Pizza

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
  • Call to action button, to view menu or make 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)

Student Work

Restaurant Site Project student work Restaurant Site Project student work  Restaurant Site Project student work  Restaurant Site Project student work  Restaurant Site Project student work

Articles