{"id":8586,"date":"2013-07-27T15:15:57","date_gmt":"2013-07-27T15:15:57","guid":{"rendered":"http:\/\/premiumcoding.com\/?p=8586"},"modified":"2023-03-03T12:01:48","modified_gmt":"2023-03-03T12:01:48","slug":"10-interactive-infographics-inspiration","status":"publish","type":"post","link":"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/","title":{"rendered":"10 Interactive Infographics for Inspiration"},"content":{"rendered":"

Of late, many designers have noted that the web has become oversaturated with infographics<\/a><\/strong>; that they’re a tired old trend in need of refreshing. And to a point, they’re correct. But even if they’re tiresome to web professionals, infographics<\/strong> are still very popular with web users, and there’s plenty of new ground yet to be explored in this still-young specialty. A perfect case in point can be found in the growing subdivision of interactive infographics<\/strong>, which take the seductive combination of imagery and information, and make it nearly irresistible by adding an element of participation and control.<\/p>\n

Of course, some results are better than others, whether because the topic is particularly suited to the format, or because the interactions are clever or unusual. Take a look at a few great examples of such well-done interactive infographics<\/strong><\/a>, which all make a noteworthy contribution to the expansion of this field:<\/p>\n

How a Hybrid Car Works<\/a><\/h2>\n

\"How<\/a><\/p>\n

The blueprint reference<\/strong> of the design makes it clear that the infographic<\/em> discusses the interior of a hybrid car’s mechanisms. The navigation is gratifyingly simple to use; clicking on the icons above takes you to a different section the material, while rolling over the diagram below offers detailed specs. This graphic is a great example of the simplicity that can be attained with a single-page layout; it uses no scrolling and a limited set of graphics, yet it presents a prodigious amount of information.<\/p>\n

Keeping it Reel<\/a><\/h2>\n

\"Keeping<\/a><\/p>\n

This infographic is a perfect example of complexity distilled into clarity. Although there’s an initially intimidating amount of information to be digested, clarity comes with just a little legwork. And once you understand how this graphic works, it’s instantly illuminating. The graph on the left side gives you an at-a-glance comparison of the relative production costs and revenue of each movie. These numbers, along with the net revenue and the ticket sales of each movie are concentrated into just one number; the cost of production per ticket sold. With that one number, the comparative success of each movie is clearly declared.<\/p>\n

Eastern Tennessee<\/a><\/h2>\n

\"Eastern<\/a><\/p>\n

This infographic<\/strong> feels simple and clean, but it stops short of being monotonous by being divided into colored sections with slightly divergent styles of graphics in each division. The different methods by which these graphics appear on the screen are slightly reminiscent of a Powerpoint presentation\u2014swooping in from the right, growing up from the ground\u2014but rather provide a great example of how entertaining these entrances can be when done stylishly.<\/p>\n

Evolution of the Cloud<\/a><\/h2>\n

\"Evolution<\/a><\/p>\n

A more unique type of interactivity<\/strong> lets the user choose whether they prefer to scroll through the timeline at their own pace, or allow the graphic to move automatically. The use of photography also adds an appealingly distinctive touch, as the vast majority of infographics still rest purely on the use of vector illustrations. They’re employed here as well, but also in a novel way: as the narrative enters into the present and then the future, the vector illustrations replace the photographs and expand across the whole page. This makes for an intriguing finale that mixes it up from the infographic’s original format.<\/p>\n

Foreign Language Enrollments in Higher Ed<\/a><\/h2>\n

\"Foreign<\/a><\/p>\n

Another great graphic that crams a lot of interesting information into one schema, this gives the user an at-a-glance perspective on how foreign language enrollments have changed and grown over recent years. Rolling over each language highlights the corresponding bar on each graph, which makes the interactive portion on this infographic simple but useful and satisfying.<\/p>\n

SimpliSafe Home Security Guide<\/a><\/h2>\n

\"SimpliSafe<\/a><\/p>\n

A truly enjoyable experience, this infographic<\/strong> takes you on a journey from the details to the big picture of home security tips and tricks. The clickable text makes the graphic feel nostalgically like a three-dimensional children’s book, a sensation that’s emphasized by the endearingly distorted illustrative style.<\/p>\n

Urbangap<\/a><\/h2>\n

\"Urbangap\"<\/a><\/p>\n

Even though this website isn’t in English, its graphics are so crystal clear that it’s perfectly understandable in any language. Reminiscent of the Feltron annual report<\/a> infographics, the site offers beautifully presented graphic displays of statistics about the company’s employees, taking what could be a basic “About Us” page and making it truly fascinating.<\/p>\n

Fish Tales<\/a><\/h2>\n

\"Fish<\/a><\/p>\n

As a charmingly informative look at the different varieties of fish and their places in the world, this infographic lets users click on location tags to find out more about each species. This simple interactivity<\/strong> is very suggestive of a regular website, which makes it a breeze to use.<\/p>\n

How Much House Can You Buy<\/a><\/h2>\n

\"How<\/a><\/p>\n

Similarly to the previous example, this infographic<\/strong> is more of an exploration piece than any of the others on this list. Rather than going through it linearly, the user is encouraged to browse through different locations, and then to mouse over different dollar amounts to find out what square footage that money will buy in that location. These styles of interactivity make the new infographics almost feel like a game; which is an interesting and appealing approach.<\/p>\n

Infographic<\/a><\/h2>\n

\"infographic\"<\/a><\/p>\n

Although this infographic features the cartoonish vector illustrations that have been previously discussed, they fit with both the tone and topic. Furthermore, the artistry of their movements and interactions make it quite an exceptional piece; by scrolling downwards, the user controls the pace of a continuously evolving story with quite a dazzling array of different movements.<\/p>\n

Although some of these infographics are quite complex, others are much simpler and yet just as successful. Examples like this ipod visualization<\/a>\u00a0or this landlord guide<\/a> show that infographics<\/strong> don’t have to be complex; they just have to be entertaining.<\/p>\n

So many topics and presentations are immeasurably enhanced by interactivity that it’s no surprise that this elaboration has grown so exponentially in popularity, and been applied to so many different subjects. By giving viewers a chance to actively contribute to the informative process, interactive infographics<\/strong> make that experience that much more pleasurable and effective.<\/p>\n","protected":false},"excerpt":{"rendered":"

Of late, many designers have noted that the web has become oversaturated with infographics; that they’re a tired old trend in need of refreshing. And to a point, they’re correct. But even if they’re tiresome to web professionals, infographics are still very popular with web users, and there’s plenty of new ground yet to be …<\/p>\n","protected":false},"author":1,"featured_media":8598,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,217],"tags":[1112,1113,1114],"yoast_head":"\n10 Interactive Infographics for Inspiration - PremiumCoding<\/title>\n<meta name=\"description\" content=\"Of late, many designers have noted that the web has become oversaturated with infographics; that they're a tired old trend in need of refreshing. And to a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Interactive Infographics for Inspiration - PremiumCoding\" \/>\n<meta property=\"og:description\" content=\"Of late, many designers have noted that the web has become oversaturated with infographics; that they're a tired old trend in need of refreshing. And to a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/\" \/>\n<meta property=\"og:site_name\" content=\"PremiumCoding\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-27T15:15:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-03T12:01:48+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/premiumcoding.com\/#organization\",\"name\":\"PremiumCoding\",\"url\":\"https:\/\/premiumcoding.com\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/premiumcoding.com\/wp-content\/uploads\/2013\/12\/premiumcoding-wordpress-themes-logo@2x.png\",\"width\":400,\"height\":134,\"caption\":\"PremiumCoding\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/premiumcoding.com\/#website\",\"url\":\"https:\/\/premiumcoding.com\/\",\"name\":\"PremiumCoding\",\"description\":\"WordPress Themes, Tutorials & Articles\",\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/premiumcoding.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/#webpage\",\"url\":\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/\",\"name\":\"10 Interactive Infographics for Inspiration - PremiumCoding\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/#primaryimage\"},\"datePublished\":\"2013-07-27T15:15:57+00:00\",\"dateModified\":\"2023-03-03T12:01:48+00:00\",\"description\":\"Of late, many designers have noted that the web has become oversaturated with infographics; that they're a tired old trend in need of refreshing. And to a\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/#webpage\"},\"author\":{\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\"},\"headline\":\"10 Interactive Infographics for Inspiration\",\"datePublished\":\"2013-07-27T15:15:57+00:00\",\"dateModified\":\"2023-03-03T12:01:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/#primaryimage\"},\"keywords\":\"graphics,infographics,interactive infographic\",\"articleSection\":\"Blog,Web Design\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/premiumcoding.com\/10-interactive-infographics-inspiration\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\",\"name\":\"Ales\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5b70a6c161b959988486ba65abb4653?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Ales\"},\"sameAs\":[\"https:\/\/premiumcoding.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/8586"}],"collection":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/comments?post=8586"}],"version-history":[{"count":1,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/8586\/revisions"}],"predecessor-version":[{"id":2509988,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/8586\/revisions\/2509988"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media\/8598"}],"wp:attachment":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media?parent=8586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/categories?post=8586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/tags?post=8586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}