Vision trumps all other senses.
We learn and remember best through pictures, not through written or spoken words. 

– John Medina, Brain Rules

Today’s Agenda:

A Three-fold Journey into Visualizing Graphics

Creating Infographics

Making Dynamic Maps

Creating Interactive Visuals

Practice: Start with C.R.A.P.

“Design matters. But design is not about decoration or about ornamentation.
Design is about making communication as easy and clear for the viewer as possible.”

–Garr Reynolds, Presentation Zen


As a frame of reference for visual design, you can refer to the acronym CRAP.

C: Contrast

R: Repetition

A: Alignment

P: Proximity

Let’s practice!



Mobile Apps for Publishing Information:

Adobe Slate

Adobe Post



Alternative web-based resources for Publishing Information:

Adobe Slate



Starter Videos:

Infographics as a Creative Assessment

The Value of Visualization

Activity 1: Creating an Infographic

Making an Infographic

TOPIC: What’s the big deal about coffee?

Objective: You will create an infographic using provided data and resources.


–Steps to Follow–

1. Review the data. Take some time to develop an understanding of the content with which you are working.

2. Choose an angle or perspective from which you are reporting. What is the message you would like to give your audience?

Possible angles (you may choose one of these, but we are encouraging you to make up one on your own!):

Coffee is healthy.

Coffee keeps the world economy alive and thriving.

Coffee is the perfect drink.

Coffee is an art form.

What am I drinking exactly? Origins of coffee consumption.

How much am I really paying for a cup of coffee?

3. Pick five data points to illustrate. You won’t be able to incorporate every piece of data available, so pick five that support the message you are trying to illustrate.

Here are the data resources.

 4. Sketch out a plan. What information is the *most important*? Create a hierarchy of the five data pieces. Which one will be number 1, number 2, etc.? Then decided how you will make a visual for those informational pieces.

5. Build your infographic. Get in there and get your hands dirty working with graphics and color.

Here’s a good resource if you need a little guidance with Google Draw.

Start your infographic here.

Here are a few sample coffee vector graphics for you to use if you’d like.

Another infographic resource.

Infographic templates.



Modeled Tool:

Google Drawing
Other possible tools: Click Here

Activity 2: Animating Information

Taking Infographics and Animating the Content:

Motion graphics are digested faster than still imagery, and even faster than plain text. Presentations, illustrations, and concepts can come to life with a few edits. Take information and graphics on your Google Slides and animate them!   Step-by-Step Instructions of how to Animate Google Slides

Activity 3: Creating A Dynamic Map

Creating a dynamic map

Topic: Farmer’s Market Fun

Objective: Using Google My Maps (formely maps engine lite), we will create a dynamic map, using a public data set.

  • import data
  • manipulate data views
  • add data
  • filter viewable data
  • publish map

 –Steps to Follow–

1. Open Google’s My Maps. Use your Google credentials to sign in.

2. Download the sample file.

Working file for us today: Chicago Farmer’s Markets

3. Import the data into My Maps. Manipulate the data.

4. Customize the view. Add images.

5. Publish and share the link.


Example Map:

@hiddencash locations:





Activity 4: Making Information Interactive

Making Information Interactive

Possible Topic: What’s the Big Deal About Coffee? 

Objective: You will take existing information, and graphics, to create an interactive visual.

 –Steps to Follow–

1. If you closed your Google Draw infographic, please open that again now *in a new tab.*

2. Open a new tab and go to ThinkLink.

3. Add a base image from which you will build your interactive project.

If you are staying with the coffee theme, you can use one of the images HERE.

4. Go back to your Google Drawing and make a copy of the drawing a few times.

*Your goal in doing the copying, is that you will begin to make small segments of your original infographic to put into your ThingLink.

5. Share each separate Google Draw image. (Publish the drawings.)

6. Go back to Thinglink and begin to add tags to your base image.

*You will be using the public URLs from your Google Draw images as the tag image source.

7. Publish and Share your Thinglink project!



Another possible resource: