No doubt, we’re innately drawn to stories we can relate to. As with our relationships, both personal and professional, it’s only human nature to seek the familiar. But do we take the same approach with the products we buy and the brands we engage with? According to Donald Miller in, Building a StoryBrand 2.0, businesses don’t just understand our propensity for familiar storytelling, the best ones actually take advantage of it. In exacting detail, Miller explains how every successful story can be broken down into seven precise acts. I was a little disheartened to learn that storytelling is so sequential and formulaic. Are we really that predictable? I have to believe that unexpected twists and turns add variety and spice to our lives.

Reading & Writing

Animated Storytelling, by Liz Blazer 

What Miller's thesis fails to recognize is that people get bored with repetition. Recall Bill Murray in 1992’s Groundhog’s Day? Oftentimes, second chances offer opportunities to reconsider the script and take different paths. In other words, if life is about unique experiences — rather than the same ho-hum — it seems likely that we’d be more interested in unorthodox storytelling. 

It’s the search for novelty that I love about Liz Blazer’s take in, Animated Storytelling. The book’s purpose is outlined quite succinctly in the introduction: Animated Storytelling is a "step-by-step guide on how to make great stories for both animation and motion graphics.” However, the steps she lays out, we'll soon learn, leave plenty of room for creativity and exploration. Throughout, Blazer intends to inform and inspire us with the best ways to create successful stories using animation.

Chapter 1: Pre-Production
As a graphic designer, I completely understand and appreciate the importance of a well-defined brief. Without one, it’s impossible to set expectations and gain alignment with our clients. Blazer agrees, and kicks off Chapter 1 by explaining that every storytelling project should start with a creative brief. When done correctly, she continues, the creative brief helps to define objectives, describes the target audience, and confirms reasonable deadlines. The idea is to set all stakeholders up for success.

Among the most challenging goals of pre-production is to develop "The Big Idea." This is especially true for animation and motion graphics. Blazer provides several tactics to try, and her favorite is to brainstorm using sticky notes. Story refinement comes by using her “yes, and...” technique. This is a free association exercise that attempts to connect one event to the next. Doing so creates a stronger plot. Next, creating a “six-word story” and a tagline are both useful tools to develop deeper meaning, which will eventually evolve into an underlying theme. As an added bonus, these elements of pre-production will make it easier to sell the idea to the client or production studio.

Another important part of pre-production involves establishing the look and feel of the animation. What does the story look like? Among other recommendations, Blazer suggests keeping a folder with lots of visual references. Obviously, the idea here is not to copy — visual references should be used to inspire and broaden perspective in order to create something new. The initial collection of assets and visuals are vital to designing the initial style frame. Similar to a mood board, the style frame is a single image that helps describe the overall aesthetic of the animation.

As you’ll see in the animated gifs below, I took some of Blazer's recommendations to heart. For example, I tried several variations of a style frame. In addition, the “six word story” was a helpful exercise to write headline copy, especially since I decided to incorporate copy into the animations. Before I designed anything, though, I began scouring the internet for inspiration.

Research to Inform

In some ways, animated gifs are the perfect tool to help define the look and feel of a longer story or animation. True, they have to be short and simple because of the file size limitations, but the graphics also have to be thoughtful and deliberate in order to be successful. As such, animated gifs can be leveraged to define the tone of voice and present the big idea. On the other hand, I discovered slight movement can be added to elevate a simple idea or illustration. The movement can be fun and humorous, or attractive and inviting. My research began by looking for animated gifs that were visually interesting, or that told stories in the simplest way possible.

Andrew Bannecker Illustrations
The first three examples I discovered were made by the incomparable illustrator and art dirtector, Andrew Bannecker.

1. This playful gif highlights the letter "U" by quickly alternating between three different splatter illustrations. By placing hands on either end, the "U" also looks like colorful sleeves. Genius!
2. Here, Banneker mimics a jack-o-lantern humorously mumbling with three variations of the mouth, while everything else remains static.
3. With sharp geometric patterns and bright neon colors, this gif is a nostalgic take on an 1980's arcade game. The dreaded "Game Over" is highlighted by simply glitching on and off.

Champions Design Website
The following three animated gifs were created by the creative studio, Champions Design, to showcase work on their portfolio.

1. Champions Design created this fun animated gif to celebrate 15 Years in business. Using different typefaces is the perfect way to draw attention to their typographic approach to branding.
2. Simply scrolling through logos with different background colors proves to be a successful way of showcasing their varied list of clients.
3. Champions Design created several title treatments the Magnolia Network and were able to show each one in an animated gif, rather than three separate images. This is just a smart and creative use of a super simple gif.

Chris Piascik Illustrations
Chris Piascik is a CT illustrator that's most famous of his daily drawings on Instagram.

1. Is there a better way to show all the skulls you've drawn than rifling through them with an animated gif? I submit that there is not! Notice the play with scale and position here.
2. For local and independent brewing company, Tröegs, Chris animated their logo morphing into hops, which morphs into a fun muscle man, which then morphs into a simple character. It's a great example of onion-skinning.
3. By slightly tweening many different characters, Chris is able to bring to life the title, "It's Okay to be Weird," in a really fun and interactive way. It certainly caught my attention. 

Create

When designed as a series, animated gifs can help establish the design standards of a brand campaign. I’m currently working with the Cultural Alliance of Western Connecticut on an awareness campaign, and thought this would be the perfect opportunity to combine theory with practice. The campaign's goal is to educate the community about a $250,000 grant to study the feasibility of a new arts hub in Danbury, CT. During the initial briefing, we discussed the importance of the arts in driving economic development. After a number of working sessions, the assignment was defined: inspire the community to take part in the study. I decided to sell the idea of creating short animations to catch the target audience's eye. The intention is to intrigue the viewer to learn more and, hopefully, to participate.

Stop-motion with Photoshop
The first step to developing a successful theme was write compelling headlines. We needed to be straight to the point, and “Art Moves the Economy” does just that. When combined with a high-contrast image of a dancer, bold colors, expressive hand-drawn elements, and simple charts, the graphic approach became easily identifiable. The layouts were then animated using a simple “cut out” technique in photoshop to reveal the words and add movement to the charts. I was so thrilled with the initial result, I ended up creating two examples:

Art Moves the Economy

The Arts Attract Visitors
For the next animation, I wanted to incorporate fine art into the layout. I chose a classic stone sculpture that would look somewhat ironic next to an animated line graph.

Onion-Skinning with Adobe Animate
This layout uses the three main components from the original design approach — a high-contrast black and white image, bold uppercase type, and transparent geometric shapes taken from the logo. Instead of animating the vector objects, though, onion-skinning in Adobe Animate allowed me to create hand-drawn animations. The animated eye is symbolic of looking for community members to engage with the Cultural Alliance. The flower is used in place of a chart, and connotes creative expression and organic growth.

Creativity Sparks Community

Tweening with Photoshop
Of course, the entire campaign calls for a cohesive element that ties everything together. We decided this needed to be straightforward and functional, and landed on a wordmark for the “Arts Hub Feasibility Study.” I used a custom stencil font that adds to the “guerrilla marketing” aesthetic. In photoshop, I used simple motion tweaks to bring the letters together, taking inspiration from the title sequence of Stranger Things. Motion tweeting also draws the squiggly line, while a shift in opacity reveals the tagline.

The Arts Hubs Feasibility Study

---

References

Blazer, L. (2020). Animated storytelling: Simple steps for creating Animation & Motion Graphics. Peachpit Press. 

Miller, D. (2025). Building a StoryBrand 2.0. HarperCollins Publishers.