julianna kunstler logo

INFOGRAPHICS


Instagram icon

by JuliannaKunstler.com

what is an inforgraphic?

Infographic is a visual representation of data. It can make dry and boring information exciting!

Infographic is not a recent invention. Think maps, medical atlases, timelines, charts, educational posters, etc...

Recently infographics became extremely popular. Humans are visual creatures. It is easier to see "snapshots" of data vs. paragraphs of text.

You can use infographics to represent any information or message.

Types of layouts:

types of infographics

1.Data presenting

data presenting

Use this layout if you are working with a lot of statistics and charts.

Statistical infographics focus on data and data visualization. The layout and visuals will help you to tell the story behind your data.

You can also connect the different points of your data by inserting a flowchart.

2. Information

information

Communicate a specific concept or give an overview of a topic.

Works well with most types of data.
The layout should be practical - taking it easy to read. and comprehend the information

If your content has many subtopics to a main subject, this layout enables you to segregate them into clean chunks that are easy to consume.

Share information by organizing it into brief paragraphs, each section should have a descriptive title.

It helps to number each section, illustrate each section with an icon or an image.

3. Timeline

timeline

Visualize history, highlight important dates, or give an overview of events(a project timeline).

Use visual aids: lines, icons, photos, labels.

Use a main line (straight, curved, zig-zag, etc.) to connect different points in time.

4. Process

process process

Use this layout to illustrate a summary or steps in a process.

Simplify, clarify, and visualize each step.

Numbering the steps makes it easy to follow.

Use an S-shape layout or a “road map” concept to fit many steps, use arrows, or other visual cues to point to the next step.

5. Comparison

comparison

Comparison infographics visualize similar options for two or more things to make an informed decision by comparing options in an unbiased way. Divide layout in columns by using contrasting colors. Use brighter color for the option you want readers to pick.

6. Hierarchy

hierarchy

Use a pyramid or a flow chart layout to represent a variety of hierarchal information.

7. List

listlist

Share a collection of tips, or a list of resources, examples, or types of infographics.

Think about this layout as a set of equally important topics.

Add ons:

  • you can replace bullet points with icons or other graphics
  • you can number the points to make information flow,
  • or use different color backgrounds if there is no particular order.

8. Resume

resume

Creative way to set your resume apart from others is to use an infographic layout.

You can combine multiple infographic types to better represent the information.

Design (colors, graphics) should reflect your personality, have a friendly and professional feel, and be appropriate to the goal.

STEPS

infographics steps

researchStep 1: Research the Topic

research

Are you familiar with the topic?

Who is your target audience?

What is the main idea you need to share?

What kind of data do you need to illustrate the topic?

Research!!!!! Collect as much information (meaningful information!!!!) and data as you think is necessary. Look for images, other infographics that already exist on that topic, statistics, charts, symbols or icons you might want to use.

Keep all sources so you can include them as credits.

dataStep 2: Data processing

data processing

Sort and organize your data.

Simplify text to make it easy to read and process.

Break your data into "chunks".

How many units ("chunks") do you have?

Highlight all important points - you might want to emphasize them in your design.

Please keep the reference information to include in your footnotes.

storyboardStep 3: Storyboard

storyboard

Organize your data in the order it should be presented.

Create a powerful headline.

Decide if you need a header for each unit.

Does your presentation have a flow?

Which units will require graphics to support the data?

wireframeStep 4: Wireframe

wireframe sketch

Wireframe your story before you start any design work.

What type of infographic do you need to present the data?

Sketch out the structure of your future infographic..

designStep 5: Design Layout

design layout

Experiment with design ideas by creating rough concepts that visualize your data in different ways.

Explore layouts that would fit your wireframe (research!!!).

Create your own layout for your specific data.

This is the time when you create a file in Adobe Illustrator (11x17).

Import all graphics you have so far into Illustrator.

Create shapes, lines, text areas and image holders. Arrange them to fit your idea. Use shapes as backgrounds for your units. You can make them as simple or as complex as you see fit.

Spell check prior to pasting the text.

Keep graphics and text blocks on separate layers.

Ensure balance between text and graphics.

Utilize white space.

Align all elements as you go. Use smart guides, grid and guides.

colorsStep 6: Colors

colors

Choose a color scheme and stick to it. Make sure the colors fit your theme and topic!

Keep the colors consistent. Save them as swatches for a quick access.

Black, Grey, and white work with any color scheme.

Do use shades, tones, and tints!

color schemes

If you are not sure how to choose colors - use Adobe Color Wheel!!!

Note:

When choosing the colors for your graphic elements - consider this:

color palette

colors no

Random colors palette makes the design chaotic, confusing, and distracting from the topic

colors yes

Choose up to 5-colors palette, neutrals work with any color scheme. In case you want to use more colors - make sure they work well together.

background

colorsno

bright

colorsyes

neutral

type

colorsno

colors are too similar

colorsyes

contrasting colors

sample

colorsno
colorsyes

graphicsStep 6: Graphics

graphics

Incorporate appropriate charts and graphs to support your data.

Include symbols, icons, and other design elements (lines, arrows, connectors, background graphics, shapes, etc)

You can place images into any shape you want. Consider that for some images.

Note:

images & symbols

imagesno

Too many graphics. Images are too random - no logic in placement. They do not create a flow..

Photographs are not consistent in size and placement.
Don't use an image just because it is cute. Does it support your message?

imagesyes

Use images and symbols to enhance and support the flow of the infographic.

text is also a visual element

Treat each text block as a visual element, that has its own shape, color, texture, and value.

textno

Text block are not aligned and placed randomly.

text blocksyes

Text blocks are aligned and ordered.

charts

chartsno

Charts are not in the color scheme of the inforgraphic.

chartsyes

Colors are consistent with the color scheme of your infographic.

typographystep 7: Fonts

text

Use fonts that pair well.

If you are not sure what fonts to use - reference the Font Guide by Canva.

Use Font pairing generator.

Consider how your project will be viewed - print or screen. This will determine your font choices.

Note:

typeface selection

fontsno

 

fontsyes

 

text body

fontsno

 

fontsyes

 

font size

fontsno

 

fontsyes

 

example

fontsno

 

fontsyes

 

infographicsStep 9: Finalize

infographics

Make sure that information flows from one point to the next.

Adjust sizes and proportions of the elements.

Check alignment!

Add special effects if needed.

Adjust colors and graphics if needed.

Add sources and copyright your design

Finalize your design.

Export the design to a few formats (PDF or SVG)

checkStep 10: Checklist

  • Does your design relay the message?
  • Do you have appropriate number graphics? Need more / less?
  • Are all graphic elements lined up properly?
  • Did you check spelling?
  • Did you include sources?
  • Are Positive and negative spaces balanced?
  • Is text readable?
  • Does it look good?

design infographics | Illustrator extras

Credits: http://piktochart.com

credits: http://www.verticalmeasures.com/

http://dailyinfographic.com/nursing-your-sweet-tooth-infographic

credits: http://www.verticalmeasures.com/