They grab attention and set expectations within your audience for what they are about to see. Video: Start and end frames to video make your content ownable and recognisable.If you have an animated logo, you should consider using it in any of these contexts: This allows you to take advantage of the possibilities for motion that digital media provides. It is likely that most of your communication with target audiences now happens on a screen. Where and when could my brand use an animated logo? It makes creating a convincing facsimile of your brand that much harder and helps to guarantee the authenticity of your messages. Crafting an animated logo that is uniquely yours is another barrier for criminals to cross. You can use it to communicate a unique aspect of the brand that we want our target audience to remember: conveying a product USP like Nintendo Switch, drawing attention to your service like FedEx, or amplifying a personality like Google.Ĭreating an appropriate and relevant animated logo requires some thought, time, and money – things a forger is probably unwilling to invest. Using an animated logo can become part of your brand’s narrative. Animation can help to convey any one of a whole range of emotions in a few seconds. Animation allows us to draw on those emotional responses to make our brands more memorable. Animated logos can add delight and surprise to communications and demonstrate a business’s professional understanding of how to use communication channels effectively.Īll B2B and B2C brands should aim to evoke an emotional reaction from their audiences. Leaving a good first impression with your target audiences is vital if you want them to find out more. In today’s communication landscape, adding an animated logo asset will serve you well, both from a business and practical perspective.Īdding motion to your logo can help you stand out from your competitors, creating a logo that is impossible to ignore and improving brand awareness. What could an animated logo do for my brand?Īs part of your brand identity asset pack, you should have a suite of logos in all the necessary file formats. The trick to creating a memorable execution is to decide on what you are trying to communicate before you start, rather than just animating for its own sake. This presents an opportunity to expand the narrative inherent in your logo design.Ĭonsidering animation as part of the logo design process can amplify your brand’s personality, emotion, intelligence, and distinctiveness. While printed communications still play a vital role, most of our daily interactions occur on a screen. Businesses, large and small, find themselves with multiple touchpoints and channels to reach their audiences. For example, for the above circle, you can change the fill color on hover, using JS. To animate these graphics, based on other inputs, such as hover, or button click, you can use JavaScript. Other attributes of these elements, like fill, stroke, etc, can also be changed using CSS. These elements which form the SVG file, like you may have a path, text, or circle, or rectangle, etc., can be animated using CSS Transforms, Transitions and Animations. This same principle can be applied for other graphics. Similarly you can make the circle move, if you animate the “cx” or “cy” attributes. For example, you can use the below code to animate the size of the circle. Standalone AnimationsĪnimations can be added to an SVG element using the animate tag. You can use this id in your HTML document to refer to the element. In the above example, I’ve created a circle with the id ‘wdm_example_cr’. If you had created this file using Illustrator or any other editing tool, you should have an id for every layer you create. Once you create the SVG file, you can embed it into an HTML document using the tag. But, there are free online tools which you can use too, like the GoogleCode: SVG Edit. At WisdmLabs, I use Illustrator to create such graphics. In such cases, it is best to go with an image editing tool. However, forming complex shapes might be difficult. Since SVGs are created as XML files, you can use a normal text editor to create them. They appear as crisp on mobile phones or tablets, as on larger screens. The use of such graphics, makes such images responsive.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |