Datavis: Infographics
Summary
TLDRThis lecture podcast focuses on infographics, emphasizing their importance in simplifying complex data into visually appealing formats. It covers the definition, elements, and principles of effective infographics, including clarity, visual hierarchy, and aesthetic appeal. Examples are provided, such as the London Underground map and the Billion Dollar Gram, to illustrate these principles. The podcast also discusses various infographic types like timelines, comparisons, and lists, offering strategies for integrating infographics into data storytelling.
Takeaways
- 🎨 Infographics blend data and design to make complex information visually appealing and easy to understand.
- 📊 Infographics are commonly used in various fields, from social media to scientific reports, to distill large amounts of data into digestible formats.
- 📑 A good infographic emphasizes clarity and simplicity, using elements like charts, graphs, icons, and concise text to present information.
- 🗺️ The London subway map by Harry Beck is a great example of how visual clarity can simplify complex networks, making it a classic infographic.
- 📏 Visual hierarchy, achieved through scale, color, and layout, is key to guiding the viewer's attention in an infographic.
- 💡 Aesthetic appeal is crucial for keeping the audience engaged while still communicating the data effectively.
- 📐 Visual hierarchy can also be achieved through color, such as using brighter colors to emphasize important data points.
- 📸 Photographic elements, when combined with other design elements, can add interest and improve visual communication in infographics.
- 📅 Timeline infographics are excellent for showing changes over time, using icons or images to represent key moments.
- 📊 Infographics should follow a clear structure, guiding the viewer through the data in a logical and visually engaging manner.
Q & A
What is the main purpose of infographics?
-The main purpose of infographics is to simplify complex data, making it accessible and easy to understand at a glance. They combine elements like charts, graphs, icons, and concise text to convey data in a visually appealing and easily digestible format.
What are the three key elements that make a good infographic?
-The three key elements that make a good infographic are clarity and simplicity, visual hierarchy, and aesthetic appeal. These elements ensure that the infographic communicates information very clearly, guides the viewer's attention, and maintains a strong visual appeal.
Can you provide an example of clarity and simplicity in infographics?
-An example of clarity and simplicity in infographics is the London Underground map designed by Harry Beck in 1933. It transformed a convoluted network into an easy-to-read diagram using clear lines and color coding, prioritizing the order of stations and the lines they were on over geographical accuracy.
How does visual hierarchy contribute to the effectiveness of an infographic?
-Visual hierarchy in infographics contributes to effectiveness by arranging design elements to prioritize the most important information. This is typically done through scale, color, or layout, guiding the viewer's attention and creating a visual flow that makes the data story clear and easy to follow.
What role does aesthetic appeal play in infographics?
-Aesthetic appeal in infographics is crucial for attracting the audience's attention and keeping them engaged. It ensures that the visual representation is not only informative but also pleasing to the eye, enhancing the overall communication of the data.
What is a list infographic and how is it used?
-A list infographic is used to present a list of facts or data points in a structured and visually appealing manner. It often uses icons or other visual elements to structure the information, making it easy to digest and understand quickly.
How can a timeline infographic be used to show changes over time?
-A timeline infographic uses a linear representation to show how things have changed over time. It can use simple line drawings, icons, or photographs to represent changes and often shows these changes in scale to indicate the magnitude of the changes.
What strategies should be used to effectively incorporate infographics into a data story?
-To effectively incorporate infographics into a data story, they should follow a clear flow with a beginning, middle, and end. The infographic should have a structure that guides the viewer through the data story, be comprehensive in covering all essential data, and prioritize key information without overwhelming the reader.
How can minimizing text in infographics improve their effectiveness?
-Minimizing text in infographics can improve their effectiveness by forcing the designer to rely more on visual elements to convey the message. This ensures that the infographic still makes sense and guides the viewer's eye through the information even without the text, emphasizing the visual hierarchy and clarity.
What is the difference between an infographic and a straight data visualization?
-The difference between an infographic and a straight data visualization is that infographics prioritize clarity, simplicity, and aesthetic appeal to communicate complex information quickly and engagingly. Straight data visualizations focus more on the accuracy and detailed presentation of data, often without the additional design elements found in infographics.
Outlines
📊 Introduction to Infographics
This paragraph introduces the concept of infographics, emphasizing their role in simplifying complex data into a visually appealing and easily digestible format. The speaker discusses the importance of clarity, visual hierarchy, and aesthetic appeal in effective infographics. Examples such as pictograms, icons, headings, and percentage typography are mentioned as elements of infographics. The London Underground map by Harry Beck is highlighted as a classic example of clarity and simplicity in infographic design.
🔍 Visual Hierarchy in Infographics
The second paragraph delves into the concept of visual hierarchy, explaining how it guides viewers' attention and prioritizes information through scale, color, and layout. The 'Billion Dollar Gram' by David McCandless is used as an example to illustrate how size can effectively communicate the magnitude of government spending. The importance of creating a visual flow and emphasizing the significance of different content parts is underscored, along with the idea that a clear hierarchy makes designs more accessible.
🎨 Aesthetic Appeal and Design Principles
This section focuses on the aesthetic appeal of infographics, which is crucial for engaging the audience. The speaker mentions David McCandless's work as an example of striking designs that balance information with visual interest. Design principles such as balance, contrast, and alignment are discussed, along with the idea of using photographic elements to enhance aesthetic appeal. The paragraph also covers various infographic elements like pictograms, stylized bar charts, and donut charts, explaining how they contribute to the visual storytelling of data.
🗓️ Types of Infographics and Storytelling Techniques
The final paragraph explores different types of infographics, including list infographics, timelines, and comparison infographics. It discusses how these can be used to structure data stories effectively, with a clear beginning, middle, and end. The importance of a clear flow and comprehensive coverage of essential data is emphasized, along with the suggestion to minimize text and ensure the infographic makes sense visually. The speaker concludes by summarizing key techniques and strategies for incorporating infographics into data storytelling, aiming to guide students in creating effective visual representations of data.
Mindmap
Keywords
💡Infographics
💡Clarity and Simplicity
💡Visual Hierarchy
💡Aesthetic Appeal
💡Pictograms
💡Data Visualization
💡Typography Treatment
💡Timeline
💡Comparison
💡List Infographics
💡Photographic Elements
Highlights
Infographics are a vital part of modern data communication, offering a visually appealing and easily digestible format for complex information.
An infographic is a visual representation of information, data, or knowledge designed to convey complex ideas quickly and clearly.
Effective infographics combine elements like charts, graphs, icons, and concise text to simplify complicated information.
Three key elements of a good infographic are clarity and simplicity, visual hierarchy, and aesthetic appeal.
Clarity and simplicity in infographics mean prioritizing the simplification of complex data for accessibility.
Harry Beck's 1933 London Underground map is an excellent example of clarity in infographics, transforming a complex network into an easy-to-read diagram.
Visual hierarchy in infographics guides viewers' attention through the use of scale, color, and layout.
The Billion Dollar Gram by David McCandless uses block sizes to show billion-dollar spending areas for the US government, exemplifying visual hierarchy.
Aesthetic appeal is crucial for infographics to engage the audience and maintain their interest.
David McCandless is known for creating striking designs that are both informative and engaging.
Infographic elements include pictograms, stylized bar charts, percentages, and colored scales to show relative sizes.
List infographics are useful for summarizing data stories and presenting facts in an organized manner.
Timeline infographics effectively show changes over time using simple line drawings or icons.
Comparison infographics compare and contrast two different subjects, using color and design elements to highlight differences.
Location-based infographics use maps to visualize geographic data, adding interest and clarity to the information presented.
Visualized numbers in infographics, such as pictograms or large numerals, draw attention and add visual interest.
Infographics should follow a clear flow, like a story, with a beginning, middle, and end, to guide the reader through the data story.
To create effective infographics, minimize text and ensure the visuals lead the eye through the design in the appropriate order.
Ensure infographics are comprehensive, covering all essential data promised by the headline without overwhelming readers.
Transcripts
hi there and welcome back uh today's uh
lecture pod which is on um data
presentation Styles and we're going to
focus on infographics today the idea of
synthesizing data with design um
infographics have become an integral
part of how we communicate complex
information in what we would see is a
visually appealing and easily digestable
format so things from social media to
Scientific reports infographics helped
still large volumes of data individuals
that can be understood at a glance so
this short pod will guide you through
the essentials of effective
infographics um with a view to ensuring
that your work is not just uh uh
accurate but it's also um aesthetically
pleasing so let's keep going let's start
with um a short definition I've sort of
given one but let's just start with a
simple one and infographic is a visual
representation of information data or
knowledge intended intended to represent
complex ideas quickly and
clearly um it combines elements such as
charts graphs icons and concise texts or
pool quotes or those sort of things to
convey data in a way that's easy to
understand it's often used to simplify
quite complicated information and
enhance communication or the visual
communication of information to a very
broad audience we can see on the slide
there there's quite a few examples we've
got pictograms we know what they are now
we've got some icon based stuff we've
got some I guess headings which are
infographic elements in themselves uh
we've got some percentage and the
typography treatment we would say is an
infographic approach let's move
on um the what makes a good
infographic um is one that communicates
information very clearly it uses visual
hierarchy to guide the users or viewers
attention and it maintains a strong
aesthetic appeal so there are the three
things there Clarity and simplicity
visual hierarchy and aesthetic appeal
let's go through um some examples of of
these together for clarity and
simplicity I've chosen um that's just a
definition the primary purpose of an
infographic to begin with is really to
simplify complex data making accessible
it means that Clarity should always be
your top priority um so whenever you're
designing one saying is this making it
clearer is this simplifying what it is
that I'm showing or you know
clarifying and make your decision there
one of the best examples of clarity in
infographics I think is this subway map
by Harry Beck um it was designed in 1933
for the London the ground and I think
the genius of the fact that this was
supposed to be a map was that it was not
a map at all it was a diagram which is a
common type of infographics now Beck's
work transformed what was a convoluted
Network into an easy to read diagram and
he used very clear lines color coding um
to represent the different Roots um it's
something that would be great to emulate
in your work you can see that how the
color coding works there we take this
simplification for granted nowadays but
if we were to look at the original map
that it came from and let's bear in mind
that the example I just showed you the
subway map my be
was what I'd say is a diagram which is a
type of infographic beex highly
simplified this map he did away with all
of the above ground references that are
shown in the map like the streets and
all of those sort of things um he kept
the river TS in there because it was an
orientation point
but he also replotted all of the
stations that you know equidistant
points along the colorcoded straight
lines let's just look back at uh yeah
let's just look at it again um so even
though it didn't match the geography
anymore like you couldn't work out the
distance the real distance between
places but it clarified what needed to
be shown in this infographic which was
the order of the stations and what line
they were on um so I think it's a great
you don't often think of this as an
infographic but I think it's a great
example showing how Simplicity and
Clarity can be um used within
infographics next one is visual
hierarchy and I've chosen a little bit
of a a sideways example here but visual
hierarchy as you probably know refers to
the arrangement of elements whatever
your design is in a way that prioritizes
the most important information and
that's usually done through scale so you
know the size of something the color or
in fact the layout I've chosen here the
billion dollar gram by um David
mandis um main because it uses the block
sizes it is in fact a tree map so we
might get confused whether this is a
data it is a data Vis but it's also
infographic in nature um it it shows
uses scale to show the billion dollar
spending areas for the US government so
each of those things has a number on it
and it tells you how many billion
dollars so you can effectively compare
um buckets of billions across things and
it makes the scale of the spend much
more obvious um so I think it's it's
great even though it's a tree map it
also serves as a great
infographic
um yeah so it's from information is
beautiful let's keep
going all right so just so I don't end
on a treeo u let's go with the visual
hierarchy idea as it's a big part of
design generally and you'll find it very
useful in creating your final project so
if you take a look at this image it used
as a typographical hierarchy um almost
everyone on Earth you guys to you've
probably you know read it in order
you'll read this first then you'll read
this then this one and then finally the
one at the top and the reason that we do
that is that the sizing of the elements
within this
composition um kind is kind of telling
us what it signpost what we need to pay
attention to first so hierarchy here
visual hierarchy is about the scale of
things it's not necessarily the order
it's it's really you know using scale to
lead us through um the importance of
having a clear hierarchy in your content
I don't think can be understated so it
allows you to create to do three things
it allows you to create a visual flow so
the visual flow of how you're going to
be telling your data story
through some of these infographic
techniques um for each element will be
clear to the reader you know we go from
here to here to here so it provides a
little bit of a snapshot even if we
don't look at the details we can kind of
get some of the key points the main
point Min points Etc using scale it
emphasizes the importance of the
different parts of your content over
others so what's most important and it
makes your designs easier to understand
at a
glance okay so let's let's keep going um
another way to achieve hierarchy so we
looked at scale there
um is it is
um is looking at some shapes here so if
we look at the first example the no and
the yes we can see that the information
in both those circles in the first one
is equal because they're both the same
size in the second example we can see
that we're invited to see a relationship
or a hierarchy before between the two
bits of information there circles and in
the bottom one it shows how to clarify
only using you know a singular example
not two so that the viewers is not
confused so the content um prioritize or
hierarch provides a hierarchy of what's
important it may be that when you go to
design your your um infographic elements
for your final project that you go oh
actually I've got too much there I just
need to choose the s
one to tell people what the important
content
is we're still going with visual
hierarchy because it's really important
um again this one is is achieving visual
hierarchy through color and here we can
see the orang is telling us the visual
hierarchy orange is brighter than the
sort of lilac purpley colored things
it's telling us that they're the
important data points for us to be
looking at so even though again it's a A
barograph or column graph we can see
that visual hierarchies through using
color as a visual hierarchy we're
getting an infographic element into um
the presentation of this
data let's move on again now in terms of
aesthetic appeal we could go on about
this forever but it's always hard to
Define but you do need to ensure that
what you're making is attractive to your
audience and keeps them engaged terms of
the visuals we can see some examples
here again from David mandus um because
he's renowned for making quite striking
um designs that are both informative and
engaging and you can see just in this
one example here that um he's leveraging
some of the design principles such as
the balance of it so we can see it's
almost split into two there's a contrast
happening so it there's enough contrast
between I guess the photographic
elements themselves and the line or
vector based graphics on the left there
um the alignment creates a visual
harmonious composition so we can see
that that photographic element is
showing us that that Refugee or
immigrant person is actually looking at
the data which adds interest to us so um
we haven't covered it yet but um you
could um include photographic elements
as part of your infographic treatment
and I think it's a great way to go
photographs provide provide a great deal
of interest and aesthetic appeal to your
project um I've added in here a mixed
chart now that we have some of the ideas
of some of the design principles um as
we can let's just have a look what's
included as infographic elements here we
can see pictograms so the little male
and female symbols there um we can see
the bar chart is stylized and that the
percentages are then added to the end so
that we can in fact read it so it's
taken the familiar bar chart out and add
it and made it into it what we would say
is an infographic it's it's real data
it's the real size um but it sort of
freed it from its XY coordinates and so
labels and what have you the colored
scale um shows us the relative size of
something um we can see the large
percentage in the middle of that donut
chart on the par graph with the hole in
the middle um that adds meaning to it
and it means that we can because we can
see the number we immediately understand
percentage without having to go is it
half is it more so it's got a real
number in that all right let's move on
um a list
infographic um a list infographic mainly
shows a list of facts um it could be
part of a too long didn't read kind of
presentation of your data driven story
about the time but you can see here
they're using icons to structure the
information so they're infographic
elements because they're all the same
size we could say oh yeah they're all of
equal importance they're all four
different facts um for example or four
different outcomes or things to
communicate so list a list infographic
is a great way to approach giving a
summary of some good data
stories all right so next one I'm just
moving on to to now is a timeline and we
could go along on about timelines for a
whole lecture pod but they will show how
things have changed over time this one
uses some simple line drawings or you
could even call them icons to represent
changes and it shows them in scale to to
say how much of those things have
changed over time so nice infographic
for showing um those changes all right
let's move on um final example here for
timeline um is it my fin one I'm not
sure okay so it's a great great um
infographic in the sense that it's
providing some photography and some real
items with the little covid uh viruses
there the scale of those viruses
representing how much of it and we can
see the timeline perspective being used
to show how it's it's moved through time
so there's a lot of visual interest
there I would certainly not go do I
really want to look at a time like his
pandemic T pandemics but I definitely
would be invited into this and I would
get a lot of information but you can see
that the infographic approach has been
you has used scale and the composition
of the hierarchy of it we've got the
timeline at the top the simple facts
there and then like things about each of
the viruses they're done to scale so it
it is Data driven okay so that was a
nice example to look at next we'll move
on to comparison as one of our
techniques a comparison always will
compare and contrast two different
subjects and as we know data Vis is
really about comparing you know data
points to see how much or how little of
something there is generally um and we
can see here some nice things it's bit
like a report card starting on the left
we compare two things the colors showing
us that they're very discrete things and
there's a whole range of little elements
there the ticks and the crosses and the
verses thing so nice a very simple way
there so two different subjects been
compared next one a location based um
approach uh we can see this one's using
a map to visualize uh Geographic data
and we've done that with the rain in
Spain it adds a lot of interest and
shows you exactly where we're talking
about moving along a photographic one
it's not strictly a photo here but it's
it's a graphic approach which is a
little bit like like photos using photos
to combine with text is a really great
way to explain a point we saw that with
the co pandemic timeline and again we
could imagine this could be a plate and
knives which would be a photo with the
actual data on the plate about who's
eating what I would imagine this would
be surrounding so combining that is a
great way of getting some infographic
elements done very easily next
visualized numbers um we've seen them a
lot from the semester
pictograms we've seen that or the the
big numbers so the 20 our eyes drawn to
that we go 20 of what obviously it's a
gender thing there
182 what suitcases I'm not sure but you
can see the statistics are suddenly
becoming more visually appealing so a
visualized number whether it's done with
the pictograms or just a raw number um
is a great way of getting attention and
adding more interest visual interest to
your infographic
approach okay so we we're getting
towards the end here but so now that we
know we know that there's lots of
different types there's I've done a
summary of key techniques um let's just
end with some strategies for getting
infographics into a data story
um first up your infographics should
follow a clear flow so it like a story
it should have a beginning like a title
a middle and an end so you would start
with a heading that introduces your
topic then you would present the
information either in uh chronological
order or in order of what based what you
your reader will find more important
first um in this infographic that we're
looking at here they follow a very clear
structure of historical data and pick
the most momentous or most important
ones that changed history um each event
has an accompanying illustration and we
can see that with the orange and the
blue sections see 1948 very clear but
nice visual thing the fold or fake fold
is saying this is 48 slice this is 2005
slice this is the 2031 slice we can see
important um percentages down in the
leftand corner we've got a donut the
color scheme is consistent we've got the
real data vises or out there a few area
charts um
yeah but you can see using some icons
with or pictograms with the thing with
the uh people there in the right hand
side it's starting to make sense there's
some big numbers there as well and it's
very consistent in the treatment it adds
a lot of visual appear but you can see
how our eye is guided through this
infographic as a design so we naturally
start on the left because that's the way
we read um it uses very effective
visuals um um and one technique for
doing that is when you're using visuals
see if you can get rid as of much text
as possible and to make sure it still
makes sense without the text so is your
eye being led through it in the
appropriate order without the text and
if not your visuals might need attending
to particularly to terms of the size and
the visual hierarchy of them um you
should be be be comprehensive with the
infographic so make sure it covers all
of the essential data that your headline
promises you're obviously prioritizing
key information so that you don't
overwhelm your readers
um and you can see also that the
hierarchy of the typography here is bang
on okay so that was our quick our quick
introduction to infographics we will
discuss more techniques in class but at
a minimum you now know what to look for
and how to kind of work out what the
difference between an infographic and a
straight data vises we can see that
there're straight data data Vis charts
here but they have theyve become more
infographic in in terms that they've
been treated in a similar color we see
those bar charts there we can see the
donut graphs the color has brought them
up into more infographic area even
though they remain pure data vises so
hopefully that's useful and thanks for
listening I will see you in class
Ver Más Videos Relacionados
10 Types of Infographics and When to Use Them
Empowerment Technologies - Imaging and Designing for Online Environment
IB ENGLISH A: Paper 1 - Infographics
TEKSTONG BISWAL | MATATAG CURRICULUM
Data Visualization in 2024 | The Ultimate Guide
¿Cómo hacer una infografía?¿Qué es una infografía?Pasos para hacer una infografía
5.0 / 5 (0 votes)