Nobody likes to read a wall of text, and yet everybody loves to learn. With a little bit of creativity and good eye for design, it’s now possible for Internet users to digest a great deal of information in just a short time, thanks to web graphics and interactive media.
Here is a rundown of the great web graphics to give you some inspiration for your next content marketing or web design project:
1. Water Usage, Visualized
To that end, Levi partnered with GOOD to create this beautiful graphic that can help us all to better understand our water usage habits.
2. Take a Road Trip
We all do a great deal of reading on the Internet, but sometimes it’s fun to experience something just a little bit more immersive. Chances are good you’ve come across plenty of static infographics by now. CJ Pony Parts’ unique take on the idea puts you (literally) in the driver’s seat.
3. Bring Maps to Life
Condé Nast Traveler built this beautiful, interactive map to take readers on a guided tour of the locations around the world that received their coveted Readers’ Choice Awards.
4. Make Awareness Fun
It may not be flashy or interactive, but 12 Keys Rehab has a history of providing beautiful and fascinating infographics about social, psychological and medical issues in the US. Thanks to brilliant color schemes and thoughtful organization, they’re a pleasure to read through.
5. Gamify Your Website
6. Immerse in History
The Deep Time interactive infographic offers a gorgeous interface and a clean design, letting users dig into the history of our earth.
7. Make Music Interactive
Denver-based rock band created this website for one of their songs, entitled “This Shell.” Visitors are challenged to solve the puzzle before time runs out. If they can manage it, they are rewarded with a free download of the song.
8. Learn a New Skill
Learning a new skill can be a challenge, but it helps if you can make the process fun. Google’s Guide to the App Galaxy provides a wonderfully interactive overview of the app design process. Having a creative, unique and user-friendly web design is a sure way to drive traffic to your site.
9. Show Customers the Whole Picture
Atom Bicycles hit it out of the park when they created this detailed bike customizer. It lets customers customize every aspect of their bike and get a good look at it, all before they hit the Buy button.
10. Watch Technology Evolve
Symantec, a world leader in technology, built an interactive timeline to help us understand the evolution of cloud technology.
11. Visualizing Common Problems
Just about every product on the market is designed to solve a problem, so helping customers visualize those problems could go a long way toward persuading them to make a purchase. Atlassian, maker of business-centric software, set out to do just that with a wonderful infographic that imagines a day in the life of a typical office worker.
12. Uncover Little-Known Facts
One of the best things about infographics is that it offers a way to dive into stats and facts that you wouldn’t have found otherwise. Case in point: Derby’s infographic on Eastern Tennessee. Derby is a warehousing company by trade, but their website seeks to educate residents (and potential business partners) on some lesser-known attributes of their home state.
13. Skyscraper Content
As the name might suggest, skyscraper content goes above and beyond the sort of content you’re used to reading on the Internet by now. This longform content includes graphics, videos and images to help give you a complete picture. Skyscraper content, such as The New York Time’s wonderful article on the Tunnel Creek Avalanche, is meticulously researched and packed with beautiful graphics.
14. Explore the Stats Behind National Headlines
It’s not as lighthearted as some on this list, but the Gun Deaths infographic from the Huffington Post provides some much-needed perspective on recent current events.
15. Drink Responsibly
Column Five’s interactive guide to alcoholic beverages could prove to be an invaluable tool for the drink aficionado. You may be looking for information about the caloric content of your favorite cocktail or the amount of alcohol in a red wine.
16. Put Your Road Rage to the Test
17. Animate an Infographic
If you were a biology researcher, how would you interest people in funding your studies or hiring you for research? Eleanor Lutz uses an animated infographic illustrating 42 different butterflies with wings flapping. The minute you land on the page, the infographic grabs your attention.
Take a common topic and jazz it up with animations. A subject that otherwise is ordinary becomes extraordinary with a bit of interactivity.
18. Play a Game
If your target audience likes gaming, adding an element of gameplay to your site creates just the right atmosphere. Designer Robby Leonardi embraces the concept of gaming in his online resume. The design sets the mood with cartoon-like graphics. A call to action (CTA) invites you with the words “Launch Website.”
Click on the CTA button, and the character animates and walks through the “game” as you browse different topics such as “Level 1: About.” Scrolling goes sideways rather than up and down, which matches the direction of many video games.
19. Learn an Old Language
Users enjoy learning new things, especially with interactive lessons. My Grandmother’s Lingo walks users through the language of an old Aboriginal woman. The site teaches the language Marra by having you speak into a microphone. Learn various phrases and progress through the story of the language, the reason for the site and ideas for sharing the language to keep it alive.
The design is simple, but keeps users engaged throughout the learning process. My Grandmother’s Lingo model teaches designers interesting ways for getting a message across without losing the user’s interest.
20. Tell a Story
Amur Tiger Center elevates the concept of teaching people about tigers to a storybook-type event. The nonprofit organization’s goal is keeping the Amur tiger from going extinct. The information about the Amur tiger looks like a child’s storybook with moving parts. As you scroll, the images change and facts pop up, such as that 95 percent of the Amur tiger population inhabits Russia. As the user scrolls, the pictures and details change, making scrolling down the page both exciting and interactive.
21. Pick Some Apples
The VGNC liquor company makes a product called Apple Cinder. They introduce consumers to the product with a unique approach where they have site visitors pluck, squeeze and pour apples with their website called Apps.
When you land on the page, a man’s voice invites you to choose an apple. The site walks you through the process of making apple cider. It’s a fun way of introducing people to the product.
22. Spread Holiday Cheer
As visitors land on this page, a dark screen greets them and invites them to press a button. Then, the screen spins 360 degrees and closes in on Christmas Island. Once a user lands on the island, certain elements are interactive. For example, if you click on the presents under the fir trees, a reindeer leaps across the screen.
A design studio — 14 Islands — created the site. Christmas Island showcases their apps and games for the web.
23. Click and Drag the Narrative
This site tells the story of an unusual boy named Solace. As the user goes through the story, they click and drag elements, driving the narrative. The story is memorable, and the use of shapes and colors create an extraordinary level of engagement. The narrative plays like a movie, but the user must drive the story forward.
Storytelling offers a powerful connection with readers. When users drive the story, it becomes more interactive than ever before. Add an element of intrigue to your designs by providing an engagement-driven narrative that connects with readers.
24. Answer a Few Questions
Chekov is Alive uses a combination of literature, modern technology and theater to showcase the works of Russian writer Anton Chekhov. Google is one of the main partners for the project. Choose a specific character by answering a few pertinent questions. The minute the landing page loads, the screen flips through different characters and invites you to “Take the Test.”
The test asks seven questions. The site pulls up a character and explains which story they are from and some of their personality traits. You can then “audition” for the character by uploading a video.
25. Stream a Video
Zhenya Rynzhuk makes her design website playful and interactive by creating actions for different areas of the site. The landing page invites the user to “click click” with a spinning star and calls visitors to “play showreel.” The page brings in geographic elements for interest, starts a fast rotation slideshow on hover or plays videos with music on a click. Videos are a popular way of engaging users on both desktop and mobile devices, so they make an excellent addition to your interactive graphics presentation.
26. Guide the User
When the user lands on Solar Digital’s landing page, they see a small hand-shaped cursor moving empty boxes up. This symbol indicates the user can reorder the images below the empty boxes to see different pictures. Each photo has a special effect, such as appearing to be underwater and with a red tone layered over it. As the user drags up different photos, they also see different text appear that explains the highlighted project and what the company did for that client. It’s a brilliant use of interactive graphics to highlight their best work.
27. Delve Into a New World
If you’ve ever wanted to see the beautiful redwoods in California, the Humboldt County Visitors Bureau has a beautiful, interactive site that takes you there the moment you land on the page. They invite you to explore their world and plan a vacation as a video plays in the background. The video features an Alice in Wonderland-type character having a tea party with the Mad Hatter amid the striking scenery of redwood trees and a view of the Pacific Ocean. The site invites you to follow the rabbit down the magic hole and learn more about California’s Redwood Coast. Your selections include adventure, relaxation, family outings and romantic dates.
28. Change the Scene
When a visitor lands on your page and spends a few minutes there, they can quickly grow bored with the same images and background. Gianluca Rinaldi solves this problem by changing the background depending on mouseovers throughout the page. See various portfolios of designs and get details on the line. The interactivity on the page is a bit different than some of the other examples we’ve looked at, but it is a good one to study because it is so unique. Keep the user engaged and highlight your work without requiring people to play games or jump through hoops.
29. Shake Loose a Visual
Anytime you can tie your interactive features into the product you sell, so much the better. The Cool Club sells games, and you can view different cards in a deck by clicking on the box, which then spits out a variety of cards. Just the act of clicking on the box is a bit of a game and gets the user in the mood to make a purchase. If you move on to the card games page, each box of cards has a unique look. Hover over any of the boxes, and samples of the cards inside appear so you can see what you’re buying.
30. Move Small
When creating interactive elements, you don’t have to make everything big and startling. Sometimes, a subtle movement is all it takes to grab user attention and encourage them to do something. J. Hornig sells coffee beans and uses small interactive motion graphics to draw the user in. Various effects occur as users mouse over different areas of the page. For example, hover over one of their most popular blends, and the image dims slightly and grows fractionally larger. It signals you should click on the image to order the product. Just under that is a headline that reads “Coffee Beans Directly from the Farmer.” When you mouse over the words, a call to action to “Read More” appears.
Interactivity Is the Future
Sites filled with paragraphs of endless text are so yesterday. The future of the Internet is interactive sites that engage users. Study the examples above and gather ideas for ways to make your designs more interactive than ever before.
This article was originally published on 1/24/2014 and updated on 9/30/2019.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her re-reading the Harry Potter series, burning calories at a local Zumba class, or hanging out with her dogs, Bear and Lucy.