SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
One of the best ways to make your content stand out from the deluge of information on the Internet is to make it interactive. Nowadays, it’s not enough to offer audiences static content–it has to be dynamic and involve the user.
A surefire way to do this is through an interactive slideshow. Whether for a marketing campaign, educational e-learning material or your personal website, an interactive slideshow can significantly increase engagement levels in your audience.
To help you create educational content that is both entertaining and informative at the same time, we’ve created an easy-to-follow, step-by-step tutorial on how to create an interactive slideshow with new and original information. In this case, we’ll show you how we created this visual on the top U.S. cities to found a startup in 2016 (click here to view full-screen, interactive version):
The first step to creating interactive content that delights your audience is to find something new and original to share with your audience. Besides the sites shared on our blog post on how to find interesting stories in numbers, you can also consult the latest studies and research on a particular subject.
In this case, we did a Google search for “study best startup cities 2016” and used the Search Tools option to limit the results to those published in the past day, to get the most recent results. We found recently released studies that hadn’t made the rounds on social media yet and decided to translate the findings into an attractive visual. We chose to use DataFox’s study on the best cities to found a startup outside of Silicon Valley and New York.
Next, we brainstormed ways to visualize this information in an engaging and interactive manner. Since we were presenting information on different cities in the U.S., we naturally decided to use a map to visualize the geographic location of each city and then link these to images of hot startups in each entrepreneurial hub.
If you don’t already have a Visme account, you can easily and quickly create one by simply going to www.visme.co, entering your email and name and choosing a password. Next, click on the “Create New Visme” option in the top left corner to create and name a new project. Then, select the Presentations options to view all the available templates.
You can choose one of the several ready-to-use templates to make your presentation, or you can create one from scratch. In this case, we decided to create an entirely new design.
Next, you want to choose a background color for your slideshow. In this case, our first slide contains the U.S. map with all the startup hubs, so we decided to go with a light, subdued color for both the background and map. This would allow us to choose more vibrant colors for each city location, which would make the most relevant information pop out at the viewer.
A trick you can apply here is to find inspiration for your color schemes by searching for other infographic maps on Pinterest or Google images. You can then take a screenshot of these images and paste them into a simple application like Paint. By using the Eyedropper tool and Edit Colors option, you can locate the RGB values of a color.
Then, use this simple site to convert them into hex color codes.
By inserting this code into the Visme color customization option, you can easily replicate your favorite color schemes in Visme, as seen above. Another option, which may be easier for Chrome users, is to use the Chrome Eye Dropper tool to pick colors from web pages.
Now comes the fun part of inserting your icons, design elements and shapes. In this case, we started by searching for a map of the U.S. and inserting shapes to identify each of the different locations across the map.
Next, you can insert your title, subtitle and smaller body text into your map. To reflect the nature of the subject, we chose a bold, modern-looking font, Oswald, coupled with a rounder, more readable font, Lato, for the rest of the text.
Once our map was completed, we proceeded to create the image slides that would link back to each of the respective cities. To do this, we simply inserted additional slides, chose a black background for each and inserted one image of a startup per slide, with a caption to the side.
We then inserted an icon in the shape of an arrow and linked it to the next slide so that when viewers click on the arrow, they are taken to the next slide.
Also, we linked all the landmarks on the interactive map with each of the respective images so that when users click on a city, they are shown an image of one of the startups in that city.
There is one nifty trick to creating these hyperlinks, also called hotpots. Instead of linking each of the individual elements (numbers, circles, arrows, text) to a specific slide, you can simply create a hotspot so that when the user’s cursor hovers over an area and clicks, it will take them to the desired slide.
You can do this by creating a shape to cover the “hotspot,” then reducing its opacity to 0% in the Effects option so that it becomes invisible and linking it to the slide, as seen below.
Finally, once we confirmed that each of the slides and icons were linked to the right destinations, we published it and embedded it into our site.
How about your interactive slideshow? We would love to hear about your experiences and reactions. Feel free to share your thoughts in the comments section below.
Want to set yourself apart from the rest? Start creating amazing presentations within minutes with our easy drag-and-drop software. Access dozens of sleek templates, 100+ free fonts and millions of images and icons right now.