Learn how to create beautiful motion graphics and animated illustrations in Sean Brodbeck’s online course, Motion Graphics and Animation.
Illustration is one of the most powerful tools in a designer’s toolbox. It can communicate, entertain, decorate and elevate a design. It is also one of the most effective ways to create a distinctive design that stands out from the crowd. On the web, illustrations can be used to set the tone for a site, drive users’ attention and instantly convey the purpose of the site. In this collection, I will focus on an interesting evolution in this field: the animated illustration. Animations like these were really popular about 5 years ago when the use of Flash was at its peak. Now, with a wide range of new options to achieve similar results outside of Flash, animated illustrations are back on the upswing.
Note: If the animations below are not playing or appearing properly, click the image to visit the source website and see it in action.
Animation on the web is a hot topic right now. Designers and developers are finding beautiful ways to animate interfaces, as seen in the example above. The animation not only looks great, but it’s also easy to understand and connects the image to the text that is revealed.
We’ve recently started seeing exciting designs that blend illustration with animation techniques unique to the web. The end results are often gorgeous and remarkable for their technical complexity. Here is a prime example:
This particular example blends CSS animations with videos, all layered on top of each other for a completely unique result. The site is truly inspiring and a lovely look at the shape of things to come. The technical complexity here is not to be underestimated. The clear pairing of artistry and technical prowess is a beautiful demonstration of what makes the web such an exciting medium.
The website above has several animations throughout the design. In this case, the animated illustrations are much more simplistic. The animations are done using animated GIFs. This means the animation was created in a tool like Photoshop and simply saved as an image file. The real key here is that the designer understands the color limitations of animated GIFs and designs them (and the site) accordingly. In this example, it is clear that designer and developer worked together to find a an efficient solution.
This gem of a site is packed with gorgeous animated illustrations. In this tiny example from the site the creators have combined an animated transparent PNG (the rocket) with an HTML canvas tag in which the planet is rendered using JavaScript. Behind all this is another PNG for the planet’s glow.
In this fun example from the same website, we find another technique at work. In this case, the animation is actually a single image, containing 3 different states of the image. The three different states are quickly rotated to give the appearance of more advanced animation. This is not unlike the way animators of the past used a simple series of images to animate cartoons.
Above is the single image, containing three versions of the image that is used to create this illustration.
http://www.hermesemployeur.com/en
In some cases, animated illustrations are used in much more subtle ways. In the example above, the animations bring a sense of life to the design. The illustrations are gorgeous and create a unique feel for the site. The delicate use of animation just gives the site that extra dash of awesome sauce needed to make it a truly memorable experience.
It can be tempting to use this technique in meaningless ways, but the site above uses the animation to convey its message more effectively and creatively. Here, the designer used JavaScript to move and rotate the images, resulting in a simple but meaningful animation. Notice how the animation is used to draw attention to the feature and beautify the design all at the same time. The usage here is not accidental, meaningless or void of purpose. The biggest mistake you can make is to add animated elements just because you can. That said, if the animation reinforces the purpose of your website, then go for it. It is really a great way to breathe life into a static design.
http://gionkunz.github.io/chartist-js/
Sometimes the animation can be really subtle, as in this example. I particularly appreciate that the designer connected the animation with the part of the artwork that reflects what the product is. In this way, the animation drives attention to the message and helps users immediate
ly understand what this tool is all about. It would have been tempting to animate the character, but that would not have reinforced the most important element. Carefully consider what you animate and why you have selected it.
More than ever, talented illustrators are working with skilled web developers to find advanced ways to bring illustration to life. If it sounds complex, it’s because it is—though some techniques are much easier than others. Your best bet is to play around, dive in and see what you can do. And if it at all possible pair up with a more technical person to see what can be done!
Want to learn more about creating effective animations? Learn how in Sean Brodbeck’s online course, Motion Graphics and Animation.
By Lawrence Zeegen, Caroline Roberts
Whether you want to learn more about the flagrant idealism of the 1960s, the austere realism of the 1970s, the superfluous consumerism of the 1980s, the digital eruption of the 1990s, or the rapid diversification of illustration in the early 2000s, get an in-depth look at the historical contexts pertaining to the important artifacts and artists of the illustration industry in the latter half of the 20th century.
Introductory essays and profiles of prominent practitioners, as well as examples of their work, detail the influence and impact of contemporary illustration on design and popular culture. Explore the historical, sociological, political, and cultural factors that influenced contemporary illustration, and let full-color works from leading illustrators bring each decade to life. Get the book here.