Since our ancestors first roamed the shores of the Euphrates, we’ve been explaining our world with stories. Most of our sense of what is good and bad comes from our understanding of stories: the hero does a good thing, the hero is rewarded; the villain does a bad thing, the villain is punished.

As human beings, we understand our lives as stories, with ourselves cast as the hero. And so, when a designer wants to sell an experience — as opposed to a product — one way to achieve that is to weave the experience into the user’s story in a positive way.

Design Color To Reflect The Morning

The stories we tell to explain our lives are linear and straightforward, with clear beginnings and endings.

When we think about the evening, we think about conclusions. That’s why so many sites advertising vacations focus on images of early evening — they’re showing us the culmination of a successful journey.

When we’re designing the beginning of an experience — starting college, moving jobs, buying a home — we’re showing the start of a journey. Consequently, the imagery we use should be bright, evoking early morning sunshine. The user will then see themselves at the beginning of a successful journey.

For example, the website for Winchester College uses increased exposure on its photography, evoking morning light, to depict children at the start of their lives filled with potential. And because the primary audience for the site isn’t really the prospective students but rather their parents, the children are mostly seen outside, in nature, to emphasize their health, and ability to grow.

The non-profit organization Echoing Green’s site uses a combination of bright, primary colors coupled with desaturated pastels. The result is a site that feels bathed in warm, early-morning light. Browsing the site, you can’t help feel the positive potential of the project.

When we designed ChooseLandscape for the Landscape Institute, we used a combination of high-contrast text and vibrant yellow, pink, green, and blue hues. This combination creates a sense of vibrancy, and coupled with the yellow circle motif, is a subtle reminder of the sun rising on the user’s future. The result is a positive marketing project that encourages young people to investigate landscape design as a career.

Academy Olivia draws much of its color palette from the greens and silvers of the olive trees from which it takes its name. The pure, natural colors feel healthy, and the sensation of wellness is enhanced by the bright morning light-like palette.

Transport the User With Illustration

For all the optimism of the early morning and its association with positive, uplifting stories, the message is lost if the user can’t see themselves in the story.

We tend not to see ourselves in photography — unless it’s somewhat self-conscious first-person photography. When we see other people in an image, it is a voyeuristic and distancing experience; we might still feel optimistic, but we’re confident for the person in the photograph, not for ourselves.

Illustration offers designers two excellent tools for solving this problem. Firstly, illustrations are entirely in our control so that we can eliminate anything negative from an idealized view.

Secondly, and more importantly, illustrations invoke the world rather than reproduce it. And the same mental leap that a user makes to transform an illustrated scene into a real place simultaneously places the user at the center of the same scene.

Les Petits M’O uses a delightful illustration to highlight the works belonging to the Orsay and Orangerie collections scattered around Paris. It builds an optimistic, even idealized view of the Parisian trip we’re considering by creating a Paris without the rain, the traffic, or the crowds.

You could be forgiven for subconsciously searching for a red and white striped hat and jumper when browsing the i-Spy site. These illustrations are a fun way of imagining a trip to New Zealand. None of these scenes could be captured in a single photo, and the illustrative approach helps us visualize the endless possibilities in a country most of us have yet to experience first-hand.

Langmobile teaches foreign languages to children remotely. It uses plenty of bright, optimistic colors, but the real secret is the use of illustration. The site is aimed at parents, and showing children as illustrations helps the parents imagine their own children in the role of student.

Creating Calm Energy With Animation

We often think of positive animation as filled with energy. But when we’re selling experiences, the most positive-feeling animation comes from simple, calm motion.

Minimal slides and fades and complementing optimistic color palettes create a sense of safety and control. When a user envisages an experience as safe and controlled, they have the confidence to explore.

Locomotive uses a low-contrast color palette to evoke the morning; still, the real visual interest in the design is created by the numerous content elements revealing themselves, instilling the site with the joy of discovery.

The Cellular Agriculture Society uses several types of animation to reinforce its message. The animated blobs may be the most obvious, but the really positive animation is the way the blocks of content corkscrew into place; the action is both progressive and transformative.

Often, we can enhance simple animation with the right type of easing. React uses an ease-out — an initially fast motion, that then slows to a halt — to convey growth and success. Each image bursts onto the page feeling both energetic and effortless.

Instilling Sites With Optimism

Optimism is about looking forwards to positive experiences. To achieve this, we assist the user in placing themselves at the start of a journey, with the symbolism of morning light, the idealism of illustration, and calm, confident animation.

It’s all about convincing the user that the step they are considering taking — whether that be education, travel, or any other type of experience — will turn out to be not just a success but the beginning of tremendous personal growth.