Bring your brand to life – 5 ultimate logo animation tips
The world of internet is nowadays full of beautiful animations since our tools allow us to build them very easily. That is why you need to be witty and engage the viewers by something more interesting than just by a movement itself.
1_ The idea
It all starts from the logo. What is different on it from other logos, what is the thing that makes it memorable? That we can emphasize to make the animation meaningful. It can be a special letter, swoosh or the symbol of the logo. Make that one most important and the rest will just go with the flow.
(source: Zajno Crew)
2_ From point to point
Every animation happens in stages. It somehow starts, it somehow finishes and it has several seps in between. This is when storyboard comes handy. Those “stills” you can prepare in a graphic software like Adobe Illustrator to see if your concept actually works and whether the stages connect well together. It is very useful when showing to the client, since you actually spend much less time making this before you jump in after effects and work for several hours on animating it.
(source: https://dribbble.com/shots/2357942-AIUX-Logo-Animation-Storyboard)
3_ Loop it or drop it
Starting and finishing is very important, it is what people usually remember the most. Oh,here is a crazy idea – not finish at all? What is the intended use? If it’s for social media or a website header, you may want to animate the logo endlessly. It may mean that it will appear, show itself in full glory and disappear again closing the loop. People will always see it animated.
(source: Owlsome studio)
Or it can have just very slight animation that never stops. Which is great for email signature or newsletter header. It doesn’t distract but is more interesting than still image.
(source: Owlsome studio)
If your intended use is for the beginning or ending of a video, or another form of presentation, you may want the logo to appear and stay at the final stage as a full logo. In this case you don’t need to think of looping it back to the beginning.
(source: https://dribbble.com/shots/9878062-Wibbitz-Logo-Animation-Concept)
It is a good idea to define these stages with your client at the beginning of your conversation since all these decisions will affect not only the storyboard but also the overall process of the animation.
4_ Sound on!
One might say that sound is as important as the animation itself. We would compare sound for animation to smell for taste. It not only sparks up the overall experience, it can add much more character and life-like experience from the overall animation. Sound design defines three types of sounds for animation: Foley sound – adds life, highlights materials Ambient (background) noise – adds context, placing Music – adds atmosphere, mood If you decide to add music to your animation, the very best decision is to start with it. The tempo, gradation or specific part of the song can help you define specific movements and overall atmosphere of each part of the animation.
(source: Owlsome studio)
5_ GIFing times
Ok, you have finished your piece of art! Now let’s decide where to put it and how to export it. You can export video format for Instagram (.mp4) or video with transparent background (.mov) for you video editor colleagues. Or you can make a GIF! GIFs are basically a lot of images stacked up together. The higher is your frame rate (number of frames per second), the bigger is the size of the file. When you export it for web, you may want to have the size as small as possible. Lower your frame rate and resolution, make the compression higher and limit number of colors. SVG animations are the smallest, you can prepare very basic ones free on this site: https://www.svgator.com/
(Source: https://dribbble.com/shots/3869680-Vesterbro-Animated-Typeface)
Conclusion
As soon as your concept is smart, the rest will follow and you can present your logo design in completely new attention-grabbing exciting light. Good luck!
More inspiration:
(source: https://dribbble.com/shots/3604443–Logitech-Logo-animation)
(source: https://dribbble.com/shots/1954414-And-Ident)
(source: https://dribbble.com/shots/2649530-Circus-Balancing)
(source: https://dribbble.com/shots/5880822-Slack)
(source: https://dribbble.com/shots/4930815-Fiverr-logo-animation)
(source: https://dribbble.com/shots/3976511-Logo-animation-series-1)
(source: https://giphy.com/gifs/26vUL7hQASXNm53l6)
