Images 101

Steve Spence
Updated: 31 January 2018

Respect your audience

Trust the reader's intelligence.

Each of the five recommendations on page 326 is important, but the first is the most vital.

Categories

The Web Style Guide divides images into two basic categories: "interface and branding" and "content images." In this assignment we focus on the second category, content images. As the authors note, images can present content to your readers in many ways. For clarity, I have made some changes to the authors' categorization. In this class, we catagorize cotent images as follows:

  1. Illustrations
  2. Diagrams
    • Map
    • Object
    • Process
  3. Quantitative Data
    • Tables
    • Charts, e.g. Line, Bar, and Pie charts
  4. Integration

Illustrations

ACFB hunger run

As the Web Style Guide notes, photographic illustrations can bring "pieces of the world into your document" (325).

Illustrations and Visual Rhetoric

Three children Homeless man with dog

Page 321 in the Web Style Guide summarizes rhetoric, "the art and technique of persuasion." Study the book's discussion of ethos, pathos, and logos. Then consider the two images above. Which one do you think appeared in the Atlanta Community Food Bank's web site? Why one and not the other?

Diagrams: example of a map used for analysis

Georgia's food banks and their service regions

Maps are probably the most common diagrams on the Web, but maps can fulfill many functions. This one from the ACFB isn't intended to help you get somewhere. Instead, it analyzes Georgia's food banks, which means to take something apart in order to understand how its components form a whole.

In this case, the image is literally worth a thousand words of verbal analysis. Click on the image to see it full sized.

Diagrams: Object (from Encyclopedia Brittanica)

Diagrams: Process

Amazon delivery visualization

This deceptively simple example from Amazon transforms a complex process into a single, punctuated timeline. It answers many questions while remaining clear and straightforward.

Diagrams: Process

Feed Bank function

Another process diagram, this time from the ACFB. Again, a complex series of steps is presented in a single, coherent image. Click on the image to see it full sized.

Quantitative Data: OutKast, in Charts

OutKast themes illustration

OutKast, in Charts, by hip hop fan and data artist Matthew Daniels, demonstrates some of the ways that the Web can present complex numerical data in engaging and clarifying ways.

Click the graphic to see it full size.

Charts and Visual Rhetoric 1 - Good Logos, Bad Ethos

Charts and Visual Rhetoric 2: Good Logos, Good Ethos

Click the image to see it full sized.

Integration: From Wired magazine

Girl Talk mix illustration

This integrated visual presentation illustrates the complex form of the dance song "What It's All About," by Girl Talk.

Click the image to see it full size.

Integration and Infographics

Why You Need a Social Media Calendar

Infographics are the most common form of integration images on networked media today.

They are popular because they allow designers to control the precise, pixel-level placement and detail of complex images.

Click the image to see it full size.