Logo

Designs of the Times 03: Illustration and Animation

Abigail Shipps
October 6, 2020
Design

We’re back with more Designs of the Times, a series that explores the impact of digital design decisions on company branding, customer perception, and community building. We’re discussing how specific brands exhibit different elements, and we’ll be getting the Yaguara Design team’s take on each topic along the way.

Let’s dive into illustration and animation. 

History of Doodling 101

Illustrations have been used for centuries to help the spread of ideas, movements, and “brand” identity. From early woodblock printing in 200 AD, to the invention of the printing press in the 1400s, and all the way to the inventions of offset lithography in the early 1900s and laser printing in the late 1960s, illustrations have transcended their original notebooks and scrap papers and flown into the receiving hands of populations around the world. Pictures speak a thousand words– they have incited movements, rallied war efforts, educated masses, and entertained readers and viewers throughout history.

With the onset of the modern computer in the 70s, however, a new medium was born. With the development of computer technology into the sleek devices we use today, print is challenged by a high-speed, digital alternative. As a result, with the best technology at designers’ fingertips, impressive animation and out-of-this-world graphics (that would be impossible to emulate in print) infuse propaganda and entertainment with exciting and innovative design. However, with the desire of many eCommerce DTC brands to directly connect with their audience, we can see elements of design, such as hand drawn graphics and simple, whimsical shapes and images, take the forefront of DTC brand image. Just like the print propaganda of years past, hand drawn or digital illustrations bring a brand’s image and message to life. 

For the people who doodled in the margins of their notebook back in school (or still do, me included), keep at it, because not only are you contributing to history, but one day you could become a digital designer that contributes to brand voice through hand drawn doodles throughout a website, like with these brands:

Straight out of the Sketchbook 

The human touch signed, sealed, and delivered with handwritten notes is the same reason that hand drawn illustrations are so special. The level of intimacy associated with a sketch transports the viewer from the world around them into the artist’s thoughts and creative mind, straight from the source. 

Similarly, many brands incorporate handwritten or hand drawn details throughout their site as to spark the same human element behind their brand. Of course, websites are not physical sketchbooks or letters, but they are in large part a digital landscape of a product’s habitat– a mindmap of a brand, the brain baby of one or many minds put together to create a brand image. As a result, brands such as Mailchimp, The New Yorker, and Basecamp establish a specific rapport with their customers: with illustration alone, these brands are not only exhibiting a more personable, whimsical, and tangible image, but the hand drawn illustrations add a level of intimacy that ties the reader or customer closer to the humans behind the respective brands.

When Mailchimp rebranded in 2018, they wanted to maintain structure and consistency while also being playful and expressive. Specifically, their illustrations seek to help “communicate about complex tools in a more human way.” The organic strokes look like someone drew straight onto the computer screen– a digital scribble, if you will. Collins, the design agency who spearheaded the rebrand, says the company’s new design maintains balance between “the sophisticated and the surreal” but buckling down on simplified design aesthetics. The whimsical nature of Mailchimp’s illustration successfully brings the advanced product down to the level of a consumer without any experience in email marketing. 

Made with Technology

Where a handwritten note is nostalgic and personable, digital illustrations are truly a sign of the design times. With the plethora of tools now, digital creators can create infinite varieties of designs, drawings, landscapes, worlds...you name it. With fade, layering, and other Photoshop techniques, digital illustrations are bright (if not in color, then in essence), immersive, and aligned with the modern medium of digital creation.

Digital illustration brings together the whimsical personability of hand drawn illustrations with modern technology. In a sense, this theme translates into digital designs bringing people together through a digital product or website. For instance, Airbnb utilizes illustrations to transport customers into a storybook directory of destinations one can dream of, and actually, travel to. Additionally, Oscar incorporates illustrated characters to demystify and simplify healthcare for those who might otherwise be intimidated.

Moreover, Headspace, a guided meditation app, utilizes goofy illustrated characters to market towards beginner meditators, or for those who want a visually guided experience. Anna Charity, head of design at Headspace, notes how

“We try to show meditation in a really everyday way–we show it in contexts that people can easily imagine. And one thing that all of us have in common is, is that we have a mind….we knew we had to develop a style that communicated these ideas in an approachable and relatable way. And more importantly we found that characters are a great vehicle to represent the weirdness inside your head because they feel playful and memorable.”

Whether it looks hand drawn or digitally rendered, illustration narrates a brand’s story much like an illustrated book visualizes words. Whimsical illustrations help to demystify and simplify otherwise complicated markets, such as health care and email marketing, and illustrated characters make the people behind the DTC brand more tangible to the user. If all of this branding can be done with just two dimensions, get ready for an excellent adventure into the next dimension. 

Animation Killed the Radio Star

If illustrated books visualize words, then animation takes the words, lifts them off the page, and spins them around into a cloud of letters that form images like a school of fish. As this subtitle alludes to, the music industry shifted once “Video Killed the Radio Star” became the first music video to play on MTV.  Likewise, once animation bled into brand websites, the design standard for customer experience rose up a few notches. And rightfully so: video and animation not only illustrate words, but they bring words to life so that the viewer can visualize it over and over again in their memory.

Here and There

A little goes a long way, and the same can be said for animation. The smallest movement catches one’s eye almost as much as if the whole page were to move. Sparse touches of animation seem out of place at first against a mostly static website. But then, you can almost see the design team at work, saying, “hey, we thought this was really cool to include on our site to make it more eye catching and fun– enjoy!” 

Brands such as Intercom and Handwrytten animate small amounts of seemingly hand-drawn images. Handwrytten’s website features a handwritten note to the viewer, and potential customer, plus some small animated paper planes flying around. The handwritten note company features their product many times on the front page, and the small animations help speak to their craftsmanship, simplicity, and whimsical nature. 

No 3-D Glasses Needed

For a customer experience like no other, 3D animated sites are packed with exciting features to unfold. Oftentimes mixing with other animated effects, brands who incorporate 3D onto their site emulate the same mind-bending magic of Imax films or 3D movies, minus the glasses. For instance, CBD sparkling beverage company Recess brings together multiple variations of animation just on their homepage: slow moving clouds in the background, a can that opens up as you scroll, and floating product and page navigation help emulate a groovy, psychedelic aesthetic that calms “busy people who are overwhelmed, over-stimulated and over-caffeinated.” From floating makeup products, to scroll-based animation that brings a site to life, three dimensionality offers an escape into a brand’s product world– on one hand, incredible marketing, and on the other, impressive design. 

Modern makeup brands, such as Fluff Casual Cosmetics and Starface, utilize 3D to bring their products to life. Fluff packs a punch with a bright yellow background and luminescent makeup containers rotating as if they are suspended in space. Scroll down the page and a molten collage of images shifts around like ocean waves. Similarly, Starface features many of their products directly on the homepage, rotating like planets amidst intergalactic and yellow backdrops that reflect the brand’s namesake. The brand’s mascot, Big Yellow, symbolizes the Starface voice in two ways: as the people behind the computer screen, and as their main product, star-shaped pimple stickers. Kat from the Yaguara Design team exclaims how Starface “is so freaking cool! I love the pops of color and the out-of-this-world site experience. The site’s fun atmosphere definitely aligns with their fun skincare product– stars stickers for pimples? Incredible.” 

Scroll, Scroll Down the Page

Perhaps one of the most innovative animation features is scroll based animation. As the viewer scrolls down a brand’s homepage, graphics will appear, windows will slide into place, photos pop out, and so much more. Scrolling down an animated page unfolds a brand’s treasure trove of creative branding. Not only is the brand expressing themselves in an innovative way, but the consumer is placed in the driver’s seat of their own experience; the brand just handed the controller over to their consumer, all through a scroll pad. 

We’ve explored Recess earlier with the way they combine multiple elements, including scroll-based animation, to create a unique, immersive, and dreamy experience for their customer. Similarly, a truly eclectic example of scroll based animation is the website dedicated to Gucci’s Spring Summer collection from 2018. Scroll down the page and watch as dreamscape after dreamscape envelopes a unique editorial experience, all with Gucci clothes interwoven throughout, of course. There is even space at the bottom of the page where the viewer can draw on the dreamscape for themselves, which transcends the unfolding animation towards breaking the fourth wall with the viewer. 

A Picture Says a Thousand Words

In the digital sphere of eCommerce, competition is high for niche, standout content. We all know the saying, and so do brands. Illustration says one thousand words, and animation says one thousand more. 

Ultimately, DTC brands are concerned with how to best tell their story. In many aspects, illustration and animation are an easy solution and an exciting incorporation. Just like a picture book brings chapters to life in print, illustration and animation bring a brand’s voice to light. 

The incorporation of illustrated design on a brand’s site translates a brand’s personableness and desire to demystify, while animation grabs the customer by the hand and takes them along on a wild ride into the nucleus of a brand’s voice. Both visual design elements take pointers from their print propaganda predecessors and provide a visual for a product, which ultimately feeds into brand identity. 

Here at Yaguara, we love storytelling, and we’re attracted to customers who see the value in communicating with customers through a strong brand voice. We strive to communicate through data-driven metrics and strong content, coupled with a design that amplifies our ethos. 

Everyone loves a good story, and illustration and animation are two vibrant elements that highlight a brand’s capacity to connect with their audience, visualize voice, and spark excitement with their content and product. We’re excited to continue our exploration of impactful design elements on successful branding– stay tuned. 




Did you find this article helpful? Share it with your connections and engage with us online!