3. Introduction
As humans, we rely on visuals to interpret information. Statistically speaking up to 80% of
the human brain is used for visual processing. Technology is available to us every where
now-a-days, so to combat that and make all the information easier to understand we use
infographics as a mechanism to deliver large amounts of context instantaneously.
Using imagery to convey information dates back to the age of the cave-man; Today
however we use imagery in a multitude of ways from infographic resumes, displaying our
abilities to potential employers, to infographs themselves making it easier and more
streamline to understand information.
4. Chapter 1 Project Planning
The Science of Infographics
People love using pictures to communicate and tell stories because it’s hardwired into the human
brain. Humans have been drawing pictures to communicate with each other for thousands of years—
from pictograms on cave walls to Egyptian hieroglyphics to ideograms on modern signs (Krum,
2014).
The word infographic is used by people to mean many different things. In many cases infographics
and data visualizations are considered synonymous, but in the world of an infographic designer they
mean different things. Data visualizations are the visual representations of numerical values. Charts
and graphs are data visualizations and create a picture from a given set of data (Krum,2014).
5. Plastics Breakdown
The infographic to
the right breaks down
how much plastic we
use every year and
how it effects the
ocean and sea life
when we don’t
properly dispose of
plastic products.
6. The Evolution of The Informavore
History of Infographics
The rise of the informavore. In 1983, George A Miller a founder of cognitive psychology coined the term
informavore to describe the behavior of humans to gather and consume information (Krum, 2014)
In 2000, technology writer Rachel Chalmers[5] wrote, “We’re all informavores now, hunting down and
consuming data as our ancestors once sought woolly mammoths and witchetty grubs.” (Krum, 2014)
The Rise of Big Data. We live in the information age, and the problem is only going to get worse. We are
exposed to the equivalent of 174 news papers worth of information in a single day. Compare that to the 40
we were exposed to in 1986, you can easily see that we have much more information at our finger tips.
7. Context
Context is key for infographics. When you see a
number in a sentence your brain doesn’t
understand how to process the information. The
example to the right (image 1) demonstrates how
a number in a sentence could be seen as large
because there are a lot of digits, but without
knowing what the number is in relation to there is
no way to tell whether the number it large or
small or increasing or decreasing. In image 2 the
original number we were given has been put into
an example we can understand. In 2011 the global
population had exceeded over 7 billion people so
in relation to that number about one third of the
population was an internet user (population).
Image 1
Image 2
8. The Art of Storytelling
Charlie finds a golden ticket
All the children and their parents get to see Willy Wonka's factory
Phase one of storytelling is the
introduction/foundation. Mr. Wonka, the owner
and creator of Wonka candy is opening his factory
doors to 5 lucky people who find his golden
tickets.
Phase two of story telling is the AH-HA/ main
event. All the children who found tickets and
their parents are shown the factory and given
many different candies and sweets to try, but
are warned of the consequences of their
actions for disregarding what Mr. Wonka says
by his oompaloopas.
9. The Art of Storytelling
Phase three is the conclusion/call to action.
After every child including Charlie is kicked out
of the factory for some mishap or offense,
Charlie returns his everlasting gobstopper to
Mr. Wonka as an apology. This simple act of
goodness is what Wonka was looking for and
then deems Charlie to be the one to take over
his beloved factory once he retires.
The single picture uses
the art of story telling
by showing you the
main characters and
based on how they all
look you can tell that
Charlie isn’t like the rest.
That itself shows a
story without and
words. Also the title is
‘Willy Wonk and the
Chocolate factory” and
Willy Wonka is the most
prevalent character in
the poster making him
easily identifiable.
10. Chapter 2 Visual Design
Principles
Gestalt is a psychology term which means "unified whole". It refers to theories of visual perception developed
by German psychologists in the 1920s. These theories attempt to describe how people tend to organize visual
elements into groups or unified wholes when certain principles are applied(graphicdesign).
These principles are:
Similarity, Similarity occurs when objects look similar to one another. People often perceive them as a group
or pattern.
Continuation, Continuation occurs when the eye is compelled to move through one object and continue to
another object.
Closure, Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is
indicated, people perceive the whole by filling in the missing information(graphicdesign).
11. Similarity
Similarity is
shown with a
pattern of like
shapes. Unity
occurs when like
shapes are used
in multiple
design elements.
Continuation
Continuation is a
visual
demonstration
of the
movement that
guides the eye.
Closure
Closure occurs
when the mind
fills in the visual
gaps in content.
Proximity
Proximity creates
meaning and
organization
when items are
gathered near
each other.
Figure &
Ground
Figure and
ground works
by
differentiating
shapes as
figures
contrasted from
background
content.
Gestalt Principles
13. Reflections on Creating Gestalt Principles
Creating Gestalt principles was harder than I thought it would be. There is a lot that goes into creating each type of
gestalt principle. Each principle has it’s own merit but personally I am a fan of similarity, with closure as a close
second.
Types of Online Infographics
Informative infographics are the dominant type of design you see online. The underlying theory is that online
audiences are more willing to read and share valuable information instead of advertisements(Krum,2014).
Persuasive infographics take a slightly different approach. These infographic designs lead the readers to a clear call
to action and they attempt to convince the audience to do something after seeing the infographic.
The visualizations and information in persuasive designs are all intended to lead the reader to a predetermined
conclusion and then provide a specific action that the reader should take(Krum,2014).
Infographic advertisements are a specific form of persuasive infographics, in that they obviously attempt to
motivate the audience to take action. In this case, the call to action is usually intended to convince readers to
purchase specific products or services.
PR infographics, Similar to advertisements, companies also use infographic designs for public relations (PR) with
press releases. The objectives of PR are different than advertisements. Instead of directly trying to sell a product, a
PR strategy may use an infographic to build awareness of products and brands, to provide information to
shareholders, or to increase the value of the brand.
14. Types of Online Infographics Cont.
Visual explanation, many infographic designs do not try to visualize a bunch of statistics, numbers, or data sets.
Instead, they try to explain an idea, a process, relationships, or a complex concept to the audience. These visual
explanation designs use illustrations, diagrams, and icons to explain their topic to the audience(Krum,2014)
Infographic posters, along with the explosion of online infographics, a subindustry has begun to emerge dedicated
to designing and selling large, wall-hanging infographic posters to the public. These niche designers have created
some amazing designs and are creating businesses selling these posters online(Krum,2014).
Online Infographics Formats
This design format is referred to in a number of different ways, such as a tall, long, or tower infographic design.
From a design and web interface perspective, the aspect ratio of the tall format has some distinct advantages. The
technology built into a computer mouse makes it easier for the computer user to scroll up and down with a simple
flick of the finger, but more difficult to scroll side to side. More important, most site layouts are designed to allow
easy vertical scrolling, but not horizontal. Websites generally fit the width of a browser window without the need for
scrolling sideways and have content that runs down past the bottom of the window. Users already expect downward
scrolling to reveal the rest of the site content. Images that are too tall to display on the screen disappear off the
bottom of the browser window, and users know they can scroll down to see the rest of the image.
15. Online Infographics Formats Cont.
The tall infographic format shown in figure 2-1 is a perfect
example of this new type of online infographic. The Mobile Youth:
Teens & Cell Phones design was published online by
PrepaidPhones.com and is laid out in a sequential order that leads
the reader through the information from top to bottom in five
sections. This creates a tall design, and most infographics online
follow this same format(Krum, 2014).
By contrast, if we consider this fun design, in The History of
Swimwear infographic from BackyardOcean.com in figure 2-3, the
story is different. The original infographic design is a wide 4,000 ×
800 pixel horizontal format design, and the viewers are required to
scroll side to side to see all the content. Side scrolling is not ideal,
but the implementation on the BackyardOcean.com site is easy for
the audience to scroll through the design. However, to fit within a
standard blog format, the 4,000 pixel width would have to be
reduced to 500 pixels wide. A reduction in width of 87.5 percent,
but the overall size reduction is 98.4 percent—too small for
viewers to read(Krum, 2014).
Figure 2-1
Figure 2-3
16. Chapter 3 Typography
The choice of typography style can contribute to the emotional impact of design work. Although
infographics are focused on visual content, supporting text can contribute valuable descriptive
information to the design. Selecting the scale, style, and attributes of the different type instances on
the page involves some exploration and planning. Before we jump into the design thoughts of the
text and the message of the work, we must first research the purpose and plan for the project.
The typography choices for a project include the font sets with their styles and attributes for the
font choices. Combining multiple font choices provides a unique look to the page design while
using variety in the aesthetic design based on the theme and objective of the content. Font styles
and attributes should be displayed visually along with technical information for the font, attributes,
and styles for review and reference.
17. Examples
Advertisement Poster Web Page
The advertisement’s target audience is for anyone looking to learn more about typography in advertisement.
The poster’s target audience is for music lovers especially people who like the music of Dead Mau5.
The web page’s target audience is aimed at people looking for information on typography.
18. Designing Infographics
Researching a topic and organizing it into a headline, subheadlines, and body copy can establish an
understanding of key message content for the infographic. The effort to use descriptive text to confirm
the message will provide focus for the content. The descriptive text will also support plans for search
engine optimization. The outline of the text information with key messaging will complement visual
design choices for the theme of the work
The visual hierarchy is established by the size of objects on the page and the way the content is organized.
Reviewing existing works can help identify strategies for scale and proportion choices for headlines,
subhead lines, and body copy in addition to visual strategies for graphics. Keeping the focus on text for
this week allows us to explore the ratio of font size and styles in creative work. The more elaborate the
font style, the more time it takes to process the information. Headlines tend to be bold and large with
simple styles. Body copy is primarily selected based on ease of readability and common style for the bulk
of text information that it will convey. Sub headlines may use complementary styles to add variety to a
design and to address an aesthetic appearance to the layout.
20. Chapter 4 Graphics
There are two different types of graphics that can be used in infographics the first is raster images. Raster images
are created using an array of pixel values. Bitmap is another term commonly used to refer to raster images. File size
increases dramatically with size and quality adjustments. Scaling has limited options due to the fixed resolution of
the image. Raster images are a best choice for texture and editing capabilities for photographs, web graphics, and
adding effects
The second type is vector images. Vector images are defined by mathematical information and geometric shapes.
File size remains constant while adapting work for larger scale projects. Scaling is flexible due to adaptable
resolution. Vector images are a best choice for logos, signage, and large format visuals.
21. Copyrights
Copyrights exist from the moment of creation of original work by the producer. The work cannot be used without
the creator’s permission. Protecting copyrighted work is taking on new dimensions in the digital environment with
such things as embedded identity information and usage tracking.
Creative commons is a new approach to protecting and allowing usage. Work may be under circumstances set by
creators. Only work that is designed by the creator as creative commons is allowed for use.
Public domain work can be used without restrictions. Work published prior to 1923, work by long-dead creators, and
work placed in public domain can be used
Developing illustration and photography skills can be very useful to avoid copyright issues. Any photos that you
personally took can be used in your work without the use of copyright issues.
22. Graphics
Vector image Raster image
The main advantage of a
vector graphics program is
that all the text, photos,
illustrations, and data
visualizations are treated
as separate objects that
can be easily moved,
resized, overlapped, and
rotated. This makes
putting together the layout
of the final infographic
design much easier
(Krum).
Raster graphics are
treated as a whole, the
text, photos, illustrations,
and data are treated as
one piece making it
harder to edit.
23. Chapter 5 Information Structure
The infographic depicts options for the information structure of an infographic, including choices for
hierarchy, sequence, or interactive presentations.
25. • Image one depicts an infographic that uses a hierarchy with one main focal point and supporting information
points in smaller detail. Movie posters will use a hierarchy approach when emphasizing a star or two as the main
focal point with the supporting information contained in smaller sections of content. A hierarchy provides a
way to focus on a theme of the content with a variety of smaller elements to support the main message. Most
web pages use a hierarchy structure for content organization with a home page serving as the introductory point
with access to progressively more detailed sections.
• Image two depicts an infographic that uses a sequence of information. A timeline can be a good option for this
type of sequential example. Sequential information can depict steps in a process, highlights from historical
accomplishments, or directions for accomplishing a task. The sequence approach organizes content in a
systematic way for the viewer to navigate through the content. A top ten list can be an option for showing a
sequence of content items in a horizontal, vertical, or circular pattern depending on the theme of the content.
• Image three depicts an infographic that uses an interactive interface to convey information. The choice to use
an interactive approach to presenting content can solve the challenge of conveying a large volume of
information by breaking it up into manageable chunks. The interactive approach allows some navigation choices
by the user. The sequence that the user views the content allows for navigation based on topics of interest
rather than a specific order. This adds some challenge to the design to consider that the user may only see
portions of the whole content.
Examples Cont.
26. Outline
An outline is a narrative description of the infographic content. In the section on typography, we explored the
idea of listing a headline, sub headlines, and body text in an outline format to gain an understanding of the
content to be conveyed. An outline can also serve as a sitemap for a website listing all the pages available on a
site. An outline of content can also support search engine optimization.
Wireframe
A wireframe is a display of how a page of content will be organized. A wireframe is like a blueprint for the
content sections on a page. Shapes are used in a wireframe to indicate portions of space used for items such as
headlines, body text, or images. The visual organization of content on the page should relate to the identified
information structure. Wireframes provide a good way to mock up ideas for the visual flow of information on a
page.
27.
28. Chapter 6 Navigation
The visual interface of an infographic represents the invited navigation created by designers for the viewer
to use. Cues in the visual design that represent the navigation include the hierarchy based on a focal point
and natural flow in the design based on scale and proportion of content, color, and typography.
Putting infographics on the Internet raises the challenge of helping people find the content. Infographics
contain their information in a composed graphic presentation that includes text and images. To support
search engine functions, which benefit from text information, descriptive data can be used to help people
find the content. To gain a better understanding of how to place content in an Internet format, we’ll
explore how to create basic web pages in addition to search engine optimization techniques
29. Search Engine Optimization
The infographic depicts search engine optimization techniques.
Keywords
Identify keywords to emphasize strengths and unique attributes to
differentiate content on the site.
HTML
Include keywords in HTML code.
URLs
Be descriptive in naming conventions, and use keywords in HTML code.
Tags
<meta> Use meta descriptions. </meta>
<title> Be descriptive in titles. </title>
<h1> Use structured headings. </h1>
<img> Use image alt descriptions. </img>
HTML5
HTML Tags
Tags are used to communicate how content is organized on a web page. The web page begins and ends with the <html></html> tags. The
closing portion of the tag is indicated with the / character in the end tag. The <head></head> section contains information about the web page.
The <title></title> tags allow for identifying the title of the page that will display at the top of the web page in the banner. The
<body></body> section contains the content for the document.
Page Layout
The HTML5 standard for content layout is a header section followed by navigation, section content, and footer areas. Some additional sections
include articles and an aside area as options. The control of how the sections of the page are displayed is determined by Cascading Style Sheets
code.
Sitemap
Use a sitemap page to emphasize in site links and keywords.
404.html
Create a 404.html page to handle missing page or broken link errors.
External Links
Increase links on other websites related to your content to improve
rankings.
rel=nofollow
Use rel=nofollow in anchor tags when linking to a website that is not
relevant to your site.
robots.txt
Edit the robot.txt file to disallow folders with irrelevant content.
35. Chapter 7 Usability
The infographic depicts usability characteristics for scanning, descriptive headlines, clear visual hierarchy, organized content, and accessibility.
Usability describes the functionality of the design in terms of ease of use and access to content.
Scanning: The pattern of the letter F is descriptive of the strategy that people use to review content on a page. Scanning is the technique that
helps people navigate quickly to content of interest to them. Designing content layouts to support scanning adds appeal for the viewer.
Descriptive Headlines: The choice of words in headlines guides the viewer to areas of interest and provides coaching about the purpose of the
content. A side benefit of descriptive words is that they can support search engine optimization. Tips for writing descriptive headlines involves
researching naming conventions and the purpose of the content.
Organized Content: Using a grid strategy and understanding the rule of thirds can contribute to layout benefits in the design. The rule of thirds
puts emphasis at the intersecting points of the grid lines. The scanning strategy that people use to view the content puts the emphasis on the
intersecting point at the top left of the design. The second location is the intersecting point on the left side bottom. The third point is the top
right intersecting point. The fourth location is the bottom right intersecting point.
Clear Visual Hierarchy: The scale of objects on the page helps establish the focal point and the natural flow of the eye through the content.
Planning for the visual hierarchy begins with an outline of the content to consider what to emphasize and how to organize the flow of content.
Content priorities motivate the choices for scale and proportion.
Accessibility: Section 508 guidelines establish standards for providing access to content to people with physical limitations. The challenge of
supporting access includes techniques, such as using high-contrast choices in text and background, using large fonts, including descriptive text,
to describe visuals to support text readers.
36. Infographic Resume
The infographic depicts an infographic resume. The challenge of standing out when being considered for
jobs can benefit from creative approaches to showcasing skills. Creating an infographic resume provides an
opportunity to demonstrate design skills along with purposeful presentation of content. Many designers will
create a traditional resume in addition to a creative one.
Items to consider in creating an infographic resume include the style of the presentation along with the
content. Placing your name in a prominent position with a distinctive style will add emphasis to your unique
identity. A descriptive title will support an emphasis on the role you intend to work in. A link to an online
portfolio will provide access to your demonstration of creative works.
Contact methods should be listed in the order of preference. An introduction or objective section can
emphasize skills and abilities. Searching current job listings can provide clues about valued descriptive words
to consider.
40. References
Krum, Randy (2014). Cool Infographics: Effective Communication with Data Visualization and Design
Population Reference Bureau (2015). World population data sheet. Retrieved from, www.prb.org
Gestalt Principles definition retrieved from:
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
Chapters 2-7 Lecture notes
Photo Credit:
• Plastic infographic -http://www.oneworldoneocean.com/blog/entry/plastics-breakdown-an-
infographic
• Evolution of the informavore and internet world stats images - Cool Infographics: Effective
Communication with Data Visualization and Design
• Willy Wonka Pictures – google images
• Typography images retrieved from google images
