Every week, we send out useful front-end & UX techniques. Subscribe and get the Smart Interface Design Checklists PDF delivered to your inbox.
Smashing Newsletter
Infographics For Pages 3 1 – Visualization Graphics For Pages Download
Infographics is designed to be used with Apple’s Pages but you can also paste the images to Keynote, Numbers, or iBooks Author. Version 3.1.1: New content: 50 City Maps (new category!) 5 Data Visualization sets; 100 Diagrams; 5 sets of Infographic Elements; Compatibility. OS X 10.11 or later, 64-bit processor. Featuring great examples of infographics, data visualizations and visual communication including critique, commentary, best practices, tips, design tools, jobs board, posters, and the Cool Infographics book! Infographics Maker 3.2.5 – Visualization graphics for Pages (was Infographics Lab for Pages). March 31, 2018 Infographics Maker (was Infographics for Pages, then was Infographics Lab for Pages) contains a wide range of high-quality designs for illustrating your Pages documents. All Rights Reserved.
Editor’s Note: You might want to read Nathan Yau’s article The Do’s And Don’ts Of Infographic Design: Revisited here on Smashing Magazine which is a response to this article.
Since the dawn of the Internet, the demand for good design has continued to skyrocket. From Web 1.0 to Web 2.0 and beyond, designers have remained on their toes as they define the trends and expectations of our online universe. The Internet is a great designer’s playground, and online businesses are growing more and more appreciative of what can be gained from a bit of well-executed eye candy. Over the past two years, this fact has become the backbone of a growing trend in online marketing: the infographic.
Infographics are visual representations of information, or “data viz” as the cool kids call it these days. The term “data viz” comes from “data visualization,” which implies that sets of data will be displayed in a unique way that can be seen, rather than read. This visualization should not be left up to interpretation, it should instead be designed in a way that provides a universal conclusion for all viewers. In the simplest terms, infographics are not too different than the charts and graphs that programs like Excel have been spitting out for years.
Further Reading on SmashingMag:
Of course, just as Web 2.0 changed 1.0, today’s infographics are far more eye-catching than simple pie charts and bar graphs. Today, infographics compile many different data visualizations into one cohesive piece of “eye candy.” They have evolved with design trends, received some creative facelifts, and the Internet is now getting filled with interesting information delivered in enthralling ways.
While some design trends come and go, infographics are here to stay. With brands like USA Today, The New York Times and Google and even President Obama getting behind them, infographics are becoming a powerful tool for disseminating huge amounts of information to the masses. Companies large and small are using infographics to build their brands, educate their audience and optimize their search engine ranking through link-building. This is why learning how to design a good infographic is a must, and avoiding the common pitfalls of infographic design could mean the difference between landing a big client and losing them entirely.
Wrapping Your Mind Around Data Viz And Infographic Design
Designing an infographic is not the same as designing a website, flier, brochure, etc. Even some of the best designers, with portfolios that would make you drool, cannot execute an effective infographic design. Creating infographics is a challenge and requires a mindset that does not come naturally to everyone. But that mindset can be gained through practice and by sticking to certain standards, the most important of which is to respect and understand data viz. Here are some simple rules to follow when wrapping your mind around proper data viz.
Show, Don’t Tell
A rule of cinema is to show, don’t tell. The same holds true for infographic design. The foundation of any good infographic is data viz. As an infographic designer, you may or may not determine the concept and compile all of the research for the final design, but either way you are responsible for turning that information into a visually stimulating, cohesive design that tells a story and that doesn’t miss a single opportunity to visualize data. Take this portion of an infographic about Twitter by ViralMS as an example:
What’s wrong with this infographic? It breaks the first rule right out of the gate. When you have an opportunity to display information visually, take it. Here, the tweets per second could have at least been shown in a bar graph. This would enable someone to quickly look at this section and see what’s going on; by seeing the various heights of the bars, the eye could have quickly gauged the differences in tweets per second per event without having to read anything.
If you’re having trouble adhering to this rule, try keeping all of your text on one layer of your AI file (excluding text inside charts and graphs). Every once in a while, turn off the text layer and see whether the infographic still makes sense. If there isn’t any data viz, or if a bunch of pictures are missing context, then you are doing too much telling and not enough showing.
If the Client Wanted an Excel Chart, They Wouldn’t Need You
It might sound harsh, but it’s true. If infographics were as simple as laying out a bunch of standard charts and graphs on a page, then clients would not need to search out great designers. Many tools are online that can create colorful pie charts, line graphs and bar graphs, so you have to take things to the next level for your design to stand out. Taking the data from above, which of the two graphs below do you think would make a client happier?
If you answered Graph B, you’re catching on. Of course, not all data lends itself to creative and unique graphs. Graph A might work very well if the rest of the infographic shared a similar aesthetic. Sometimes you just have to bite the bullet and produce a traditional bar graph or pie chart; nevertheless, always consider ways to dress it up, as in the examples below:
Typography Should Not Be a Crutch
Typography can make or break a design, but it should not be the solution to a data viz problem. More often than not, designers begin an infographic with a great deal of energy and excitement, but they lose steam fast as they continue down the page. This often leads to quick decisions and poor solutions, like using typography to show off a big number instead of visualizing it in some way. Here’s an example:
Whenever I see this, I’m reminded of the “Where’s the beef?” ad campaign, and I think, “Where’s the data viz?” Although Sketch Rockwell is one of my all-time favorite fonts, this is a perfect example of relying too much on typography.
Any time a research number is provided to you for an infographic, ask yourself how it can be visualized. Percentages can always be visualized with creative pie charts; numerical values in a set can usually be turned into a unique bar graph; and when numbers don’t fit on a consistent scale, you might be able to visualize them in a diagram. Here is another way the above data could have been visualized:
Typography Has Its Place
All that being said, typography does have its uses, which should not be ignored when creating an infographic. Most of the time, you will want to focus your creative typographical energies on titles and headings. The title of the infographic is a perfect opportunity to use a fun and eye-catching font and to give it a treatment that fits the theme or topic. Just make sure the title isn’t so distracting that it takes away from the reason we are looking at the infographic in the first place. The truth of the matter is that some infographic topics are boring, but the right title design can engage people enough to scroll through.
Similarly, headings help to break up an infographic and make the data easier to take in, giving you another chance to let your font-nerd flag fly.
Organization And Storyline
Organizing an infographic in a way that makes sense and that keeps the viewer interested is not always easy, but it’s part of the job for most infographic designers. Usually, you will be given a lot of data and will need to create a visual story out of it. This can be challenging at first, but you can follow some general rules to make things easier.
Wireframe the Infographic
Wireframing an infographic enables you to work out a storyboard and layout for the design. You may have an idea of the story you want to tell, but as you start laying things out, you might hit a wall and have to start over. Having to reorganize after having already done a lot of the design is incredibly frustrating. Avoid this by setting up your storyline at the start to determine what data to show and how. Set aside an hour to sketch things out and make sure it all makes sense. This will also help to ensure that the color palette you will choose drives attention to the important points and keeps the eye flowing down the page.
Think Outside the Box
As you wireframe the infographic, you will identify section breaks that help to tell the story. Most infographics online have a vertical flow, in which each section has a heading to distinguish it from the last. This gets boring fast. Organizing the data and sectioning off information without relying entirely on headings and color breaks is a good way to break the monotony.
For instance, rather than going for a typical one-column layout, you could use two columns in certain parts. You could also break up sections with borders, with backgrounds of different shapes or give the entire design a road or path theme. Here’s some outside the box layouts to get your creative juices flowing:
Tell a Story
All good stories have a beginning, middle and end. Infographics deserve the same treatment. At the beginning of the infographic, introduce the problem or thesis. From there, back it up with data. Finally, end the infographic with a conclusion.
Visualize the Hook
Every good infographic has a hook or primary take-away that makes the viewer say “A-ha!” As a designer, you should make this hook the focal point of the design if at all possible. Placing the hook at either the center or very end of the infographic is usually best, so that it grabs more attention. Give the most important information the most visual weight, so that viewers know what to take away. Here are some examples of well visualized hooks:
Cleaning Things Up With Color
The difference a color palette can make is amazing, especially in the world of infographics. The right palette can help organize an infographic, evangelize the brand, reinforce the topic and more. The wrong palette can turn a great topic into an eyesore, harm the brand’s image and convey the wrong message. Here are some tips to consider when choosing colors for your infographic.
Make It Universal
In Web design, it’s always important to choose a palette that fits the theme of the website and that is neutral enough for a diverse group of visitors. Because infographics are primarily shared online, picking the right palette for an array of visitors is equally important. You must also consider what looks good online.
For instance, dominant dark colors and neons typically do not translate well on infographics; neon on black can be hard to read, and if there is a lot of data, taking it all in will be a challenge. Also, avoid white as a background whenever possible. Infographics are often shared on multiple websites and blogs, most of which have white backgrounds. If your infographic’s background is also white, then deciphering where it begins and ends will be difficult.
A Three-Color Palette Is Easy on the Eyes
With all of the data that goes into an infographic, make sure that the reader’s eye easily flows down the page; the wrong color palette can be a big barrier to this. Choose a palette that doesn’t attack the senses. And consider doing this before you start designing, because it will help you determine how to visualize the various elements.
If picking a color palette is hard for you, stick to the rule of three. Choose three primary colors. Of the three, one should be the background color (usually the lightest of the three), and the other two should break up the sections. If you need to add other colors, use shades of the three main colors. This will keep the palette cohesive and calming, rather than jarring.
Use the Tools at Your Disposal
When picking colors, you don’t have to reinvent the wheel. A number of great websites out there will help you choose the right palette for your infographic. Adobe’s Kuler offers fresh themes and a searchable database, as well as an easy tool to adjust the palette that you’re interested in. One issue with Kuler is that all of the palettes have five colors, and the colors are sometimes from completely different families, rather than shades of a few primary colors, so finding the right palette can be like searching for a needle in a haystack.
Another color-picking tool is COLOURlovers. This database is easier to search through: it breaks palettes into different themes and can be sorted by favorites. While most of the palettes also consist of five colors, the colors are not always given equal weight; instead, the tool suggests which should be dominant. Here are some good and bad palettes for infographics:
We’re gonna take a crazy guess and say that your brand has churned out a few infographics over the last few years. Those infographics are great, but too often we publish those infographics, promote them a few times, and forget about them. This is a huge opportunity wasted. If you have an archive of infographics (or any type of visual content for that matter), there are plenty of ways to repurpose, reuse, and remix them to get even more mileage. One of the best ways to do that? Bring them to life through motion by turning those static infographics into animated infographics.
Why Motion and Animated Infographics Benefit Your Marketing
How does motion improve the impact of your infographics? Here are 5 reasons it makes them more effective.
1) It Grabs Your Viewer’s Attention
Publishing platforms and social platforms have come a long way. They now support static images, video, and GIFs, meaning you have a lot more formats to play with. While static infographics are still effective, bringing a static infographic to life through motion makes your infographic even more dynamic and attention-grabbing. This is especially true for social, where you’re trying to stand out in a feed. (It’s also more likely to get you published, as publishers are always looking for A-plus visual content to enhance their own editorial mix.)
2) It Makes Your Marketing More Effective
Animated infographics can also make great additions to your email marketing. When Dell used a GIF-centric email campaign to promote a new product in 2014, they saw tremendous success, including a:
Additionally, GIFS are great ways to enhance your blogs. In 2014 QuickSprout analyzed 41 blogs across different industries to try to find a correlation between the type of images included in blogs and how many social shares those blogs earned. The results were pretty interesting; animated graphics grabbed the no. 1 spot.
3) It Makes Content Easier to Digest
Motion isn’t just about making things more attention-grabbing. It can be a great tool to increase comprehension. Turning your infographics into things like videos or motion graphics is an easy way to help your reader consume and synthesize the information in less time.
4) It Engages Your Viewer
Turning a static infographic into an interactive infographic is a great way to bring your viewer into the story. Even if your interactive presents a single narrative as a slideshow, it still requires them to click, consume, and explore the content. This active participation is more engaging than consuming a simple static infographic. (This is especially when it comes to data storytelling. For more tips on that, check our free e-book, The Content Marketer’s Guide to Data Storytelling.)
5) It Extends the Shelf Life of Your Content
This is one of the biggest benefits of repurposing your infographics. The more content you have, the more you can promote it. When you animate infographics, you can create additional assets, whether you pull a clip from an animated video, extract an animated panel, or share a GIF on social. This helps you promote on different platforms, enhance additional existing content (such as blogs), and tailor content for different groups of people.
4 Ways to Bring Your Infographics to Life With Motion
You don’t have to start by converting your entire infographic archive into motion masterpieces. Instead, you can experiment with one or two to start. Comb through your infographics and look for high-value evergreen pieces or infographics that could be updated or enhanced with additional information.
Luckily, your designers have already done the basic design work. That means you have a visual language, as well as assets to start with. This makes the process much easier than building motion pieces or animated infographics from scratch.
That said, deciding exactly how to animate it depends on the content you have and the story you’re telling. If you’re not sure, here are four types of motion and animation to explore.
1) Animated Infographics
Animated infographics are exactly what they sound like: Infographics that feature animation. These are great to help illustrate stories, demonstrate tutorials, break down concepts, etc. If you plan to turn your infographic into an animated masterpiece, we recommend designing it in sections that can be easily extracted to support other content.
Example: We turned a Newscred survey into an animated infographic, designed in modular panels so that each section could be used individually.
If you also just want to get your feet wet, encourage your team to experiment with an internal project. As part of our own content marketing, we created an animated infographic on tips to hack a drought, which let our team flex their creativity and bring the useful tips to life:
2) InfoGIFS
Technically, animated infographics are GIFS. But the GIFS most people are familiar with are those standalone little loops you see all over the Internet. Those little gems get shared for a reason. They’re simple, entertaining, and eye-catching.
They’re also pretty easy to make. You can make GIFS by animating single elements from infographics, or extracting smaller panels from your animated infographics. (Again, this is why we’re big fans of modular design.) Look at all the assets in your infographic, including illustrations and data visualization. If you can make it move, you can get even more attention.
Best of all, these make great microcontent for social and can be used to tease a larger piece of content. (This approach is a big part of a divisible content strategy, where you create additional assets from cornerstone pieces of content.)
Example: We partnered with Takepart to create a set of GIFS highlighting important statistics about veterans’ mental health. Though simple, the animated data visualizations make a powerful statement.
3) Motion Graphics
Video storytelling has exploded in the last few years, as more social platforms have expanded their video capabilities. People are particularly drawn to this format because it’s an efficient form of storytelling. A 2014 Levels Beyond survey found that 40% of consumers would rather watch a brand video than read the same information. (For more info on that, check out our interactive e-book, The Content Marketer’s Guide to Brand Video.) Video is also passive, so people don’t have to do anything but press play and kick back.
Infographics For Pages 3 1 – Visualization Graphics For Pages Pdf
For that reason, turning your infographics into full-on motion graphics may be the right way to go, depending on your use case. Explainers, tutorials, or process overviews are particularly well suited for the motion graphic treatment as well.
Infographics For Pages 3 1 – Visualization Graphics For Pages Page
Your motion graphics don’t even have to be that long. A single infographic can easily be distilled into a 30-second motion graphic, saving people time and energy in consuming the content. For more on creating motion graphics:
Example: To celebrate Earth Week 2015, we created a motion graphic with NBC Universal, which featured stats about food waste in the U.S., as well as helpful tips to avoid it. It’s a simple story brought to life in only 45 seconds.
4) Interactive Infographics
Interactive infographics are an exciting way to bring viewers into your story. While they are often used to make large data sets easier to explore, they can also be a powerful tool for contained storytelling. You can turn an infographic into an interactive slideshow, guiding your reader through the content or adding additional content for them to explore. Again, the static assets you have make it easier to create interactives.
For more on creating great interactive infographics:
Example: Our People for Periods interactive infographic aims to destigmatize menstruation by guiding viewers through the history of menstruation, as well as the challenges that women and girls worldwide face today.
Consider More Ways to Repurpose Your Infographics
It takes a lot to create good content, so we think you should always get the most out of everything you make. If you’re looking for more ways to repurpose, reuse, or experiment with content, here are our best tips to get more from your infographics, e-books, and more.
And if you need more ideas, let’s talk through them.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |