The Eames by Enso is not just any old website. It’s a critical study for a designer’s web design self-education because it is a tribute to two legendary designers in their own right. When you stumble across this website, it stands out for its great use of motion, light and deft animation on the page.
Forget flash or other VFX animation. This is animation done with old-school stop-motion graphics.
The website uses stop-motion graphics, a technique that creates the illusion of motion from moving an object across time. Objects appear from the bottom of the screen and move up the page as you scroll. There’s no video, no ultra-modern techniques. The website takes you back to an earlier time, the time when its subjects, Charles Eames and Ray Eames, were alive.
This is 1940. The dressing style of the designers in the photo that appears from the bottom tells you this. The choice of black and white clues you in.
The website takes you on a guided tour of the illustrious career of these two designers, which began in the buildup to World War II. Plywood, their favorite material for furniture design, was conscripted for military purposes. The Eames, however, were only beginning to enter their best design phase. The website’s design uses the following range of techniques to their full potential in the exposition of its remarkable topic.
Without the horizontal scrolling that catches your attention as you move the cursor, it would be hard for the page to stand out. Sure, the black and white image of two illustrated heads at the very top looks somewhat unusual.
The choice of a black background is appropriate here. Its blankness suggests that there is something else waiting to happen. It’s a deliberate setting the stage for the fireworks to follow.
When you move the cursor down the page, instead of scrolling down the page as you would expect, the page shifts left.
A new vista unfolds to the right as the entire page scrolls to the left, like actors stepping off the stage and new ones entering in at the right. You watch as an image of the two designers appears from below the stage. They are riding a motorcycle in the image, which shoots up the page. There’s a curious mix of horizontal and vertical scrolling here.
The website makes use of this pattern multiple times, mixing a bit of horizontal scrolling with a dose of vertical scrolling.
A pattern emerges.
As the page scrolls down, time passes. When we reach an important time period, the story picks up again and we explore the events of that epoch.
The page then scrolls to the right, instead of down. This is using the movement of the page on the screen to mimic the movement of time like how a time machine might pinpoint specific eras to revisit.
And this is all accomplished with the simple mechanism of the user scrolling or attempting to scroll, down the page. No buttons, no clicking on anything. Just scroll, and the story unfolds.
From the user’s viewpoint, the reward to effort ratio here is almost addictive. Maybe that is why it succeeds so well at getting the user to scroll through all the screens that chronicle the story of the Eames’ lives.
The website uses mainly easy-to-read sans-serif typography to recount its subjects’ lives. However, when it needs to make a bold statement and call out an important piece of information, it changes tack.
A slab serif font in the large size calls out an earth-shattering piece of news. This is fitting given that you might otherwise miss this important news if it appeared in the ordinary non-attention-seeking sans serif.
The dates, as a critical piece of data, appear in an overwhelming black serif font. This font-size is the largest anywhere on the page. This is appropriate here because each time period defines its own unique chapter of the designers’ lives.
The typography combines with the scrolling effect described above to shift the user through important eras and events.
There are hidden buttons on this website that look like little camera icons. When you simply hover over one, a photo magically appears. This is a delightful technique because it keeps many images out of the way so they do not appear unless a user wants them to.
Above are two little harmless icons. It looks like a tiny camera. On the left side of the screen. I think I will click on it.
Turns out you do not need to click anything. As soon as you hover over the harmless icon, behind the scenes it shapeshifts into a button and out pops a beautiful hidden image that fills the screen.
This technique is used here to show what a storage unit designed by the Eames looks like. First, the storage unit is shown in isolation. Then, it is shown inside a room, as part of the furniture. When you hover away from the camera-like button, the hidden image goes back into hiding.
The website makes frequent use of images that move and slide in or out of view as you move around the page. This is evident as you scroll down the page and see product images that enlarge in size, then decrease, as you navigate further into the unique website design.
The principle of hiding and then revealing notable images from behind unexpected places is at work again in the following mask header.
As it slides across the screen, it engulfs the black background of the page, revealing a hidden chair. The mask is pulled away, so to speak. The abstract form of the illustration gives way to the substance, the image of the actual chair.
Yes. Instead of viewing the use of motion, animation and retro images here as just cool, you can use them in your own projects. They would probably not fit in well on a regular old page. But if you have something you want to call special attention to, copying a page from the Eames design would work.
The use of retro images could work to showcase a bit of your company’s history. Rather than just pasting old images on an “About” page, you could make the history more exciting by making the page itself exciting.
Another aspect of the design you can apply is the use of a black and white color scheme. Black and white are simple but can give the impression of profundity. These other websites have discovered that black and white design works wonderfully for a variety of topics.
The Eames website design by Enso combines clear and effective use of typography with image motion techniques to craft a nostalgic experience. It’s a very exquisite retelling of the careers of two of America’s greatest midcentury designers and architects, the Eames.