Using Cinemagraphs in Website Design

In the world of Web design, many design trends come and go, but occasionally some stick around for the long haul. Trends such as prominent call-to-action buttons and emphasis on scrolling became more than just trends; they redefined what the components of great Web design are and now are common features on almost every website today.

Hero images are another example of a design trend that has been around for years, but they have also shown evolution in unique ways. While the hero image is still popular today, designers have combined the hero image aesthetic and placed video in the background instead of a picture.

More recently cinemagraphs have bridged photography and video, combining the strengths of each into a striking hybrid. So what is a cinemagraph? In essence, a cinemagraph is a gif, but more subtle. It is a high-definition photo with one element of that image moving, such as a flickering candle flame, someone's hair waving in a breeze or swirling wine in a glass (image source). 

Cinemagraphs were invented by husband-wife team Kevin Burg and Jamie Beck in 2011, and since then have appeared in many places around the Web. Most commonly, cinemagraphs are made by recording high-definition video and editing it within Photoshop to create the still frame within its moving parts. It sounds complicated, but there are many Photoshop tutorials out there, so the skill to make cinemagraphs can be picked up with relative ease.

The unique aesthetic of cinemagraphs has lead to their popularity in a number of different mediums. In particular, cinemagraphs have been successful in marketing campaigns for numerous large companies, including Coca-Cola and Netflix. Recently, Web designers have started included cinemagraphs in their design as well, and they appear in numerous websites in striking ways.

Source

Here are four great examples of cinemagraphs in Web design right now:

1. The Deep End

Source: The Deep End Design 

The Deep End, a Web consulting and Internet marketing agency, uses a cinemagraph to great effect on their landing page. The still image alone conveys a powerful message: a successful individual at work on his computer with a bookshelf behind him, effectively conveying professionalism, hard work and intelligence all at once.

Then visitors see a moving part of the cinemagraph: a reflection of a moving train off a window. Not only does this create unique framing-usually this type of picture is shot from within the office, not outside the window-but it's also a cunning play on "train of thought" as the train passes right through the professional's head. Here's a live example on the site's homepage.

2. Cinemagraphs

Source: Cinemagraphs

Of course, no list would be complete without the work of the inventors of the cinemagraph. Burg and Beck utilize the cinemagraph beautifully on their website by creating a bare white space with minimal use of color and text. The image itself is suggestive of a lobby in a modern business building, as if the visitor is at the entrance to a cutting-edge operation, and a moving escalator conveys a sense of motion and direction toward that unknown.

The second moving part of the image, is a man leaning on the rail on his phone, which conveys that cinemagraphs can animate people as easily and as well as inanimate objects, and the phone creates an association with technology. In essence, this cinemagraph feels like a welcome mat, as if saying "welcome to the business of cinemagraphs, please step this way."

3. Glendevon Motors

Source: Glendevon Motors

Glendevon Motors landing page says it all: consumers know what the business does and can book without needing to scroll or click through any pages. To convince visitors that this site is indeed a luxury service, the image shows a convertible driving down a Los Angeles boulevard framed by palm trees at sunset, a beautiful image to be sure.

Glendevon Motors introduces motion on the car's windshield, and the reflections of the palm trees move as if the car itself was in motion. This cinemagraph creates the illusion of a car in motion through this cinemagraph and keeping the consumer's attention on what matters most: the car.

4. Tiffany & Co

Source: Tiffany & Co.

The subtlest cinemagraph on this list, Tiffany & Co employs a cinemagraph that focuses on a pair of rings. The only motion in the image comes from the twinkling lights below the rings. This makes the image appear lifelike and realistically plays off the imaginary light source coming from the top right and also ties into the prominent "light up the room" copy. The twinkling of the rings is a subtle reminder of their value and attracts the consumers' eyes, as if to say, the beauty of jewelry is not just the metal and jewels themselves, but the light they reflect and who wears them-the fact that the shining light is in the absence where a finger would go only reinforces this idea.

These are just four of many cinemagraphs present in Web design today. The best examples use cinemagraphs not just for aesthetic purposes, but to convey additional meaning on the website. This layered approach is what sets cinemagraphs apart from still images and full video; Web designers have greater control of what visitors pay attention to by assigning motion to just one part of an image, a level of control unique to the medium. If you want to see more cinemagraphs, check out this live gallery to spark your inspiration.

About the Author

Josh Althauser is a tech entrepreneur and open source advocate specializing in providing mentorship for startups for their marketing technology. You may connect with him on Twitter.