Identity In Motion: Why Your Digital Product Needs An Animated Logo And How To Make One

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">What is an animated logo, why does your brand need it, and how you could make one: find out here.</p></div></div></div>

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Your logo is the cornerstone of your brand identity. Its main goal is to be memorable, which it can hardly fulfill as an abstract static picture. And it could stay the same. Or it could get moving. Here’s how you could create a memorable animated logo.</p></div></div></div>

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">In this article, we take a look at the making of animated logos for Apple, Google, Netflix, and more, and at our own work.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Why Do You Need An Animated Logo</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The most important thing is memorability. The main goal of your logo is to be memorable, creative, and animation adds to it. The logo is the first thing your potential customer sees, the logo is the first introduction. You need to make a good first impression. Imagine if your logo is a cartoon dinosaur. It’s cute, it’s pleasant, but it doesn’t stick out in the memory among many cartoon animal mascots. Now imagine how much more memorable it would be if he’s wagging his little tail. Or imagine if your service works with music, and your logo beats and pulsates to the rhythm. Instantly memorable, if not even captivating.</p></div></div></div>

<div class="p-lr mt-104 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Storytelling. At a glance, most people probably wouldn’t know what your logo means. It’s just some abstract symbol, completely devoid of meaning to an average viewer. If they don’t personally care a lot about your company, or about graphic design and branding, they won’t think twice about it. This is where the animation comes in: it clearly and easily reveals the metaphor of your logo.</p></div></div></div>

<div class="p-lr mt-104 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">This is the animated logo we’ve made for <a href="http://seampay.com/" class="underline">SeamPay</a>, a Nigerian digital bank. The logo with its arrows already implies motion, so animation add drive, excitement, and easily reveals the metaphor: of the money moving around and connecting people. Perpetual motion. You can read more about our work for SeamPay <a href="https://www.embacy.io/cases/seampay" class="underline">here</a>.</p></div></div></div>

<div class="p-lr mt-104 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Flexible identity. As your company changes, be it in products, services, or branding, it needs to be shown in your corporate identity. And again, your corporate identity starts with your logo. For example, if your product line extended, you could show off the variety of the products you offer in a simple and memorable way in your animated logo. Here are examples from Google and Logitech:</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">How To Make An Animated Logo</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Well, in theory, you could do an animated logo yourself. There’s a surprising amount of free templates and constructors available online to make an animated logo. But with free design, you’ll get what you paid for. No one will take you seriously with an animated logo made on a free constructor.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">And then you’ll go to a studio or an agency or a designer and they’ll be using After Effects for 75% of the job. The rest depends on your logo. For 3D animation, which is a trend now that you’ll see more and more of soon enough, they’ll use Cinema 4D. For physical processes, they’ll use Houdini, which is used by Apple and Google, among many others. And to add detail, they might use Adobe Animate.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Who Needs An Animated Logo And Where To Use It</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Your website and UI. There are still not too many websites using animated logos. Maybe they think animation is just the logo appearing out of thin air, and that’s that, rightly enough, would be distracting. To create a good animated logo, you need to have it in constant and unobtrusive motion. It’s catchy and it draws attention to itself, but not to the point of overwhelming. While the regular logo is restrained, the animation provides near-endless options: and the animations in the logo, or some elements of it, could repeat throughout the website, reinforcing the style, the metaphor, the identity. Which results in a website that really grabs your attention. At the very least, on a heavy website or on your app, your animated logo could look well on the preloader.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">Slack mobile app's preloader</p></div>

<div class="p-lr mt-104 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Presentations. Apple, Microsoft, Google, Sony, Xiaomi, Huawei, all these big companies, and many many more, start their presentations with their animated logo. Each year it’s something different. The logo is instantly recognizable, but with a new twist to it, it draws your attention. It creates expectations, it sets the mood right.</p></div></div></div>

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">However, the most obvious answer is the videos. If videos on your YouTube channel are a big part of your branding, an animated logo is a must. An animated logo would also greatly improve your showreel. And if you’re a startup looking to brighten up your pitch video, an animated logo would help. But as a startup, you probably don’t have the budget for it. An animated logo isn’t a necessity. Not yet.</p></div></div></div>

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Example of good use of an animated logo in the video: Mailchimp. The chimp, already full of personality, slyly winks at the beginning of each video on their YouTube channel, and this little detail makes it all the more memorable.</p></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">And of course, if the video is your product, you absolutely need to create an animated logo. Your corporate identity needs to suit what you provide, and a simple static logo wouldn’t make any sense if you’re working with a dynamic medium.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Outro</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Animated logos are hardly necessary for a digital product. At the moment. With everything becoming more and more digital, and with animation being a big current trend, soon enough even a local grocery store will be expected to have a logo that’s moving around..</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">But right now it’ll supplement the corporate identities’ main goal: to be memorable. An animated logo can better reveal the concept of your corporate identity, better show your personality, or show the connection between the product and the company, but the most important thing is that you won’t easily forget it</p></div></div></div>