Make it Memorable—Your Website Design in Technicolor

Sustainable website design presents a technicolor moment to quickly get your audience to say—yes, I’m interested—and take a next step.

Based on a study by Chao Liu, Ryen W. White, and Susan Dumais, “the first 10 seconds of the page visit are critical for users’ decision to stay or leave.” (Jakob Nielsen)

Given today’s 10 secs (or less) attention span, it is hard to believe that not so long ago, how we communicated was mostly long-form and verbal, not visual.

A tiny bit of storytelling history

Previously, we sat on porches or around campfires and shared stories. This was followed by the birth of radio.

Both of those forms of media were audio only. The listener supplied her own visuals. And those earlier stories, which contained rich descriptions—often with a sense of suspense or emotional content—helped the listener to do just that.

As technology evolved, we shifted from the world of rich verbal audio descriptions to theater and the first black and white movies. Suddenly the stories could be seen, guiding the viewer in a specific direction based on the director’s visual cues.

Those early days of black and white movies were exciting, though silent. Eventually, sound was added to the visuals, the movies became longer and the origin of what we know today as movies—visual storytelling—was born.

Taking a step back, as technology continued to mature movies started to include technicolor. This provided a whole new sense of memorable because originally the color was used in short bursts for dramatic effect in an otherwise black and white film.

Adding color to motion pictures represented a revolutionary shift in onscreen storytelling….Today, we’re accustomed to seeing color choices set the tone for a scene, a film—even an entire body of work….[The choice of color and when to use it] highlights the extent to which color schemes help establish the feel of a director’s work….

“Something living had been brought into the world that was not there before,” the Broadway set designer Robert Edmond Jones wrote in 1935 of the newly honed Technicolor process. The Wizard of Oz, in 1939, employed one of the most famous uses of Technicolor as narrative: the moment when Dorothy leaves her sepia-toned reality for the colorful land of Oz.

—Adrienne LaFrance, The Atlantic

When compared with previous ways of storytelling, whether audio, theater or a black and white movie, technicolor automatically stands out as memorable. It is novel—out of the ordinary and usual flow.

It catches your eye and commands attention.

With your website, you want your design (and content) to be a technicolor moment and capture your visitor’s attention quickly. Otherwise he’ll move on, possibly to the competition.

How do you create a technicolor website design that cuts through the noise and captures attention?

First you need to know what you offer. To whom the offer is for. And if they are willing to buy it.

In any given moment, there are hundreds of radio channels, movie choices and today, streaming internet feeds like Spotify (audio) and YouTube or Netflix (video) competing for our attention to both educate and entertain us.

They each offer something different. That difference maybe be as simple as geographic location and travel which is important when it comes to radio waves or your brick and mortar store. Or as complicated as the underlying technology platform and how a listener or viewer interacts with the storyteller.

And like any viewer or listener finds his favorite channel, your audience is looking for a specific type of content. Those who love to watch docudrama are less likely to voluntarily watch a horror flick. Rap listeners are less likely to head on over to the broadway shows channel. And when he finds a solution with ease, he will settle in and engage. That is a technicolor moment.

Similarly your audience needs to know from the visuals (and then content) on your site, that you understand them. That your specific content resonates.

What role do visuals play in a technicolor website design?

Simply said…many.

Simple, clear navigation is one aspect that makes a website design memorable—

• Make it easy for your site visitor, at a glance, to know which path to choose.
• Navigation words are labels to effectively inform your reader.
• Use enough contrast between the link and its background so that he can clearly distinguish the link, especially if he is colorblind.
• Links need to standout from the surrounding text so he knows where to click.
• The font style must be easy to read and the words legible.

In the end, your navigation is memorable because your reader got to his solution without having to think.

How your website design impacts what is memorable

It’s akin to a grade B movie vs a full-featured, star-studded one. You may or may not show prices on your website, yet how you design and layout your website can still convey a sense of cost.

At one end of the cost spectrum

Design that is memorable uses a strong page hierarchy. Instead of meandering or cluttered chaos, the hierarchy creates a distinct flow and sense of authority. The movie director uses visual cues to convey a story. Clearly defined hierarchy guides your reader to her destination creating a technicolor experience.

Visual hierarchy elements can include—

• Size of images as they relate to the text and space on the page
• How close or far apart elements are from each other
• Use of subheads, bolding, quotes
• Your choice of bolder vs subtler colors and tones and how they relate to each other on the page

Hierarchy also creates balance which, combined with a sense of authority, unconsciously puts your reader at ease. She feels supported and safe to go on a journey with you, even if she doesn’t know the cost.

Balance is more than simply centering the text on a page.

When created in technicolor, balance is uniquely baked into the layout of your site design. This includes—

• The use of various font sizes for titles and subtitles that draw your reader’s eye down the page and provide a narrower path within the context of the page
• The placement of your images and how they balance the blocks of text on the page instead of making the page feel choppy.
• The amount of white space (the “empty” space between lines of text or around images)
• The use of captions, which are usually in a smaller font size, vs quotes, which are usually in a larger size

The above design elements help unconsciously set expectations and reassure the reader that your service or product is worth the price. When done correctly, design hierarchy helps her visually know where to start and the path to her destination.

At the other end of the price spectrum

Is your website design like any other? Memorable mainly for its go-to sameness? Do you use a cookie-cutter template without customization so your site looks like any other? Its main claim to fame—predictable.

Each of the above examples convey a different visual sense of who you are, what you offer and who is most likely to resonate with you. In the end, people do business with people. Even online, given a choice, we buy where we feel a connection.

A strong and unique visual hierarchy and creative, though clear, use of elements on the page, will standout from the sea of websites and has a better chance of capturing your reader’s attention and being shared. This sends a certain message to the right site visitor. Memorable.

These are all variations on memorable. They are technicolor by virtue of either being outside the scope of a searcher’s daily experience or because they are specifically searched for.

Your site visitor arrived because they are searching for something. And they will stick around because your aligned website design connects with their persona.

Like comparing Beethoven’s symphony to John Cage’s music. Each piece of music is a one-of-a-kind piece—each may touch you yet each will be memorable to different audiences. Similarly, the quality and type of images you use on your website impacts your visitor and his decision to buy.

Attention to detail in your website design creates a subtle, yet memorable, experience. Conveying a message to the reader that you will take care of the details to meet her needs.

We’ve covered a few ways that you can create a technicolor experience through your website design. Ways you can use the power of design to capture and hold attention.

For the website design to be sustainable, you need to be consistent across all aspects with your visuals and message. From social media or printed brochures. With time and consistency, you, just like Nike, can create memorable moments that are shared.