Ungerboeck Digital - Blog



Choosy Sites Choose GIF

Kevin Zink
Nov 17, 2015
event website design gif


First and foremost, before I get too many comments to the contrary, the correct pronunciation of .gif is Jif… not Gif. This pronunciation comes directly from Steve Wilhite, the creator of the format, and was verified during his acceptance speech for a 2013 Webby Lifetime Achievement award. This is definitely worth the 79 seconds it takes to watch.

Who am I, however, to fight against the masses?

Now that that’s established, this post deals with the subtle art of enhancing a web design. The operative word being “subtle.” So let’s jo right to the jraphics discussion. See what I did there?

The Operative Word is "Subtle"

Unless you’re Michael Bay, your website does not need explosions, “can you punch the monkey” ads, or any other elements that resemble a humming bird on caffeine. The web has grown up since the mid-90′s and it is time that sites supporting it follow suit.

This is where the subtle gif makes its entrance. Often referred to as a Cinemagraph™, this technique enhances a static picture by allowing a minor portion of the frame to show a limited amount of movement. The result often has a slight Hitchcockian edge and introduces a sense of suspense during which a viewer may continue to watch an area; if for no other reason than to confirm that they aren’t simply seeing things.

A blink of an eye. A swing of a leg. The flutter of hair. These movements are the stuff of storytelling. They engage the user more deeply because instead of just consuming the image, the user is invited into a visceral, emotional exchange.

The inclusion of subtle gifs is reminiscent of a newspaper in Harry Potter. It is the fine, but distinct, line between the once ubiquitous, constantly looping “Site Under Construction” graphics and the still ubiquitous, too-long movie clip gifs favored by users of Reddit. Essentially, cinemagraphs split the difference between photos and video.

The process of generating this type of gif is fairly straight forward, albeit somewhat time consuming. The results, however, lend a certain elegance to a page.

Quick Steps

  • Get a video clip taken from a single vantage point. Placing the camera on a tripod while filming is the easiest way to ensure a solid shot.
  • Isolate the desired movement.
  • Retain the desired movement on a fixed frame background.

Because the area of change is limited, a fairly large (dimensions) Cinemagraph™ can retain a fairly small (file size) footprint.

There are a number of helpful tutorials available. The following videos by Aaron Nace from Phlearn act as a strong foundation.

How to Create a Cinemagraph™ – Part 1
How to Create a Cinemagraph™ – Part 2

If you’re thinking to yourself, “Ain’t nobody got time for that!” Sit back and revel in the wonder that is Flixel Cinemagraph™ Pro.

To get you started with a few ideas try going straight to the source: The site that coined the term Cinemagraph™.

Beyond the Web

This technique has jumped from the web to music videos. Though it’s a time consuming process, this effect grabs attention and makes an impression.

“That’s What I Like” Official Music Video – Kelsi Luck

Let's Talk

Looking to know more? Drop us a note through the form below.

636.300.5606  |  100 Ungerboeck Park, O'Fallon, Missouri, 63368