Are Your Website Images Really Telling the Story?

A company culture, personality, and purpose can be projected in two ways. That company can create a website that describes itself and incorporates some clean, sleek, images, perhaps photos of its facility.

Are Your Website Images Really Telling the Story?

There are also nice images of its products with great descriptions, or icons/drawings that relate to its services. The website may be pleasant to view and may present an honest depiction of the organization. But where is the personal appeal? Where is soul of the company? “Who” is this company?

If a company wants to become human, and capture the favor of today’s consumers, then it is the “who” not the “what” that must come through in its website and everywhere else that it presents itself online. Many companies have done this, and the results have been that a small idea has become huge, a fledgling startup has become a multi-million dollar business. This does not happen by having just a good product or service. It happens because there is a connection made and nurtured between that company and the consumer. And that connection is based upon “who” that company is, not upon what it sells. It’s hard to depict a “who” in words, and that is why creative visual design trumps text every time.

Images

The visual content of your site communicates messages, even more so than words. They tell stories about the company, about the brand, about the people and about the events related to that company. They make the company and its brand memorable.

Company marketers and designers need to take a long hard look at the images they are using and, if those images are not messaging the company and its brand properly, go through a process of renovation – creating and putting into place compelling and engaging images that send the right messages. Here is a process that will work.

  1. Determine the story you will tell. You may have some initial stories, and you may have new stories periodically, but there must be an overall story that tells “who” you company is. Is it energetic, leisurely, happy, poignant, etc.? Write the story down. While it may relate to the company mission, it also has a certain mood and tone. It is that mood or tone that your images have to capture. Many companies have “found” their stories and depicted them well. Among them are:
    • Headbands of Hope – children’s cancer
    • Dollar Shave Club – convenience and fun
    • Toms Shoes – charitable causes
    • ModCloth – validating all female body types
    • Red Bull – energy and excitement
    • GoPro– adventure and risk-taking

One of the best ways to find a “theme” that matches the mood and tone of a company is to start brainstorming. Use team members, friends who know your brand, etc. and have everyone write down descriptive words that come to mind. The common ones will be the themes that the images should portray as the company “story” unfolds.

Elements of a Story

As most of us remember from English classes, all stories have an introduction, a plot (rising action, climax, falling action) and a conclusion. A brand story can have roughly related elements on its website too. Let’s use Dollar Shave Club as an example:

1. Theme(s):

The overall theme and tone of this company is convenience, low-cost and humor. The company has decided that its story is to take a boring product that every man must have and buy and make it easy, cheap, and less boring with humor.

2. Introduction – Landing Page (Above the fold):

Here is the landing page above the fold. It features the company founder, who is a great story teller, telling the company’s “story” – its purpose and its benefits to customers. It’s fast-paced and funny and totally relates to the image to be portrayed.

Landing Page (Above the fold)
Landing Page example from dollarshaveclub.

3. Introduction – Landing Page (Below the fold):

Below the fold, the introduction continues with the convenience part. It shows the box that will be shipped to a subscribing customer every month. It shows the convenience, the cheap prices, and it adds a little humor too.

Landing Page (Below the fold)

4. Rising Action:

Now that you are intrigued, you can have a look-see at the products – razors and other personal care products. Here is the description page of the three razor options: You get the name, price, and a description, again with a little humor thrown in. All of the plot details moving you to the climax.

Rising Action

5. The Climax:

You join. Every page gives you an opportunity to get right to the story’s climax – you join the club and start partaking in the convenience and the cost savings.

6. Secondary Plots:

There are a few secondary plots which are found on links at the top of the page – personal care products, giving a subscription as a gift, and reviews from customers. There is also a pretty great blog, titled “Bathroom Minutes.”

7. Falling Action:

You are welcomed as a member and told that you will receive an email confirmation and notification when your first box ships. You will probably also share this company and its story with others. Done and done.

8. Promote Your Story

And, so that you get readers/viewers, you promote your story just like the movie industry promotes its newest flick, only you do it on your social media accounts. And you keep those “trailers” aligned in mood and tone with the story on your website.

Benefits of Storytelling

  • When storytelling is done right, and it portrays a company as a “who,” you get authenticity, credibility, and trust. And those three things get you followers and visitors and, ultimately, customers.
  • Consumers today want an experience, and a huge part of that experience are the images that tell a company story.
  • A story also helps people remember the company. Those who have experienced the story of Dollar Shave Club will remember it when they are looking for a unique birthday or Christmas gift for someone.

Using visuals to tell these stories is more compelling than words can ever be. They can be powerful if the right color, typography, images and backgrounds are used. Here are two factors that image creators must take into account as they tell stories:

1. Authenticity

If photos are a part of the images created, then stop using stock ones. People what to believe that these are just ordinary real people. It’s a good thing to show real people with a little muss to their hair or a not so perfect body. ModCloth has nailed this pretty well, because it uses actual customers as models. It asks those customers to send in their photos wearing ModCloth items, and they do so in droves. ModCloth features these “models” on its site and social media platforms.

Authenticity

2. Relevant for the Times and the Demographic

What is relevant for millennials? How about for senior citizens? There is a cultural relevancy for your target audience, and images must reflect that. Seniors, for example, are far more active than they were 20 years ago. Diversity and inclusiveness is important to Gen X, Y, and Z. And they demand social relevancy. They also demand environmental responsibility. Cheerios has responded with images of family racial diversity and its bee project. This appears on its landing page.

Relevant for the Times and the Demographic

Tips for Visual Storytelling Design

The “look” of a story must relate to the theme and tone of the company. It should be told simply and clearly without great amounts of bling and clutter. If it’s a video, it should not have distracting effects. With that in mind, here are five tips for visual design.

1. Images Should Be Bold and Large

If you plan to grab the visitor’s attention, small images will not suffice. It is far better to focus on a couple of images that are exceptional rather than many that can clutter a page or confuse the visitor. If your site has many pages, you can use several images, one on a page. Just be certain that every image relates directly to the most important things you want visitors to know about you.

Headbands of Hope is a company begun with a small idea that has grown into a large for-profit company that focuses on the cause of child cancer. For every headband purchased, one is given to a little girl with cancer and $1 is donated to child cancer research. The story is compelling; the images or poignant, authentic, and also optimistic. It’s very hard to resist buying some items from this store.

Images Should Be Bold and Large

2. Large Typography with Few Words

Not every image must have accompanying text; however, a few words or a phrase that are catchy and capture the message will reinforce that message. Words should be out of the way of the main element of your image.

GoPro is a company that produces wearable cameras for adventurers who engage in extreme sports and want to shoot or film their experiences and triumphs. After a couple of failed startups, Nick Woodman finally decided to focus on his passion – extreme sports. His was surfing. He developed his first wearable camera so that he could film himself hands-free. Today, at age 36, he is a billionaire. The GoPro site does not clutter its images, but does publish photos and videos that customers submit. Here is an example of featured customers. Note that the catchy caption is located at the bottom of the video.

Large Typography with Few Words

3. Colors Must Match the Mood

The colors that Headbands of Hope, with a purpose of making little girls feel feminine after they have lost their hair to cancer treatment will be “feminine” pastels. Red Bull, on the other hand, will use colors that align with its themes of energy and excitement.

There is a body of psychological research that co-relates colors to moods and emotions. Of course, the colors of images that are actual photos are what they are, but in the selection of those photos, colors should be kept in mind. And drawings should use the color palette most fitting.

Red Bull is not so subtle about its story. This company’s story is really told in the photos of the events it has sponsored over the years. Here is how visitors are invited into a closer look:

Colors Must Match the Mood

Colors for Red Bull are the primaries – red, blue, and yellow – and they appear on every page of the site.

Here is an infographic that will provide the emotional responses of colors.

Colors Must Match the Mood

It’s easy to see why Red Bull chose the colors it did, and a site like Rolex chooses shades of black and gray.

4. Image Scrolling

What a great design trend for storytelling. Scrolling allows visitors to get an entire story simply by scrolling through images, whether as slides, videos, or as a one-page site. The Dangers of Fracking is a one-page design that tells the story of fracking through the use of a single drop of water as it goes through the process. If you have not visited this site, do so. It is creative, colorful, and tells a compelling story, supported by informational boxouts along the way.

Image Scrolling

There are so many options with scrolling – a flip book or storyboard, for example – and they can be as simple or complex as desired.

5. Video

No explanation needed here. Video is obviously one of the best options for storytelling, and it can be imbedded in any number of places. Dollar Shave Club has its explainer video on its landing page, and it is also available through its social media platforms. Obviously it works – over 22 million views and counting.

Conclusion

Storytelling is the personalization of a company/organization. Using visuals to tell stories have significant impact on visitors, if they are done well and all of the elements of a story are present.

If you want to tell a story with visuals, then you begin with paper and pencil, jotting down each element of the story and potential visuals that will align with it. Once you have that, create your visuals and make certain that each one is in alignment with the image, the mood, and the purpose of the organization.

Like it? Share it.

One Comment

  1. Nice post ! Really wonderful. Came to know about the importance of Typography. Visual language is utterly important for a graphics designer. Typography is the art plus a technique of arranging elements of the type so that it is readable & appealing. This article even highlights how an website image can be a boon.
    University students pursuing their higher studies can get help from Online Dissertation Writing UK

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *