julianna kunstler logo

INFOGRAPHICS


by JuliannaKunstler.com

infographics

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:

1.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

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

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

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 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

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

7. List

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

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

Step 1: Research the Topic

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.

Step 2: 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.

Step 3: 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?

Step 4: Wireframe

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..

Step 5: 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.

Step 6: 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!

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

no

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

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

no

bright

yes

neutral

type

no

colors are too similar

yes

contrasting colors

sample

no
yes

Step 6: 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

no

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?

yes

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

no

Charts are not in the color scheme of the inforgraphic.

yes

Colors are consistent with the color scheme of your infographic.

step 7: Fonts

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

no

 

yes

 

text body

no

 

yes

 

font size

no

 

yes

 

example

no

 

yes

 

Step 9: Finalize

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)

Step 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/