Web Design Basics Design Principles Elements of Visual Storytelling: What Does Your Site Say?

Elements of Visual Storytelling: What Does Your Site Say?

It is commonly said that "Content is King." To many people, that simply means written content. After all the buzz surrounding keywords, long form content, etc. that is preached by just about everyone claiming to be an SEO expert its no wonder why written words take center stage when it comes to content. However if you consider the fact that the human brain processes visual elements 60,000 times faster than text and 90 percent of the information transmitted to the human brain is visual it makes you wonder if a text heavy website might be causing your visitors to miss your message.

Enter the concept of visual storytelling. It's not a new trend or a recent development; in fact you could say that using visual images to tell a story has been around since people started drawing on the walls of caves. However the web has been driven by text for so long that is seems like most sites are just beginning to catch on to the fact that you can more effectively relate to their visitors if they use the technologies that allow them to effectively tell a story.

The Infographic

visual storytelling

Using data and statistics has always been an effective way to make a point. However using facts to support an argument is often limited to a bulleted list when presented on a web site. The list makes it easier to read and understand, but even in this condensed format the delivery of important information can be a bit dry. Enter the infographic.

By taking the data and putting it into a visual display you are giving much more flair to what you are presenting to your visitor. The rich imagery helps them better remember the point you are making and it keeps them interested in learning more. The best part is, infographics don't rely on any special server side or client side technologies to work; simply turn the infographic into a image file and insert that into your HTML code.

Video and animation

visual storytelling

Viewers will spend 100 percent more time on web pages that include video. Embedding videos into your web site has been made simple by just about every video hosting/sharing community on the web so finding video content is easy; but its better to create your own.Smartphones now have cameras that shoot higher quality video than most home video cameras did, and allow you to store more footage. Using editing software available it is easy even for small businesses to create short videos for their web sites. If video isn't possible, consider animation as the answer. Using a variety of free and commercial tools even someone without any skill in drawing can create rich animations to tell their story. With HTML5 and CSS animations, these multimedia elements can be viewed on any device as well.

Parallax Scrolling

visual storytelling

Simply put, parallax scrolling is a technique used to create an illusion of depth by making the background images move more slowly than the foreground images. While this was a popular technique used in early video games, technologies like HTML5, CSS3 and JavaScript have made it possible on the web as well. When the scrolling interaction is used to expose different elements of the story or reveal more to the visitor at relevant points, it can bring digital storytelling to an entirely new level.

The basics

Some of the elements mentioned here might be a bit more interesting than the use of a simple photograph or icon, but these elements should never be overlooked. A simple picture can be used to relate the exact mood you are looking for or it can showcase the best use of a product. Text should not be left out of the discussion either. Not a wall of text like we think, but the use of typography to give your visitors a visual connection to the text you are presenting them with.The key to effective visual storytelling starts with having a great story to tell. Without that, no amount of glitz can keep someone interested. Once you have something to say, play around with the different elements to see which works best. You may find that while animation works for some things, an infographic is the way to go for something else.

As the web grows, more technologies will be developed that will allow sites to deliver content in ways that are much more fluid than those today. Stay on top of the different trends and techniques to make sure your visitors never miss out on what you have to say.

visual storytelling


Jeff Orloff

Jeff is the web content developer for PhishMe, a security training and awareness company. He frequently writes about design, blogging and WordPress. You can follow him on Twitter @jeorl

subscribe to newsletter