Branding Refresh with Animations in Mind
One of the hardest parts of designing for the web is the lack of limitation. There is no artificial limit to the amount of space you have to work with, no limit to how something could be animated or function, no limit to how deep an integration can go, etc., etc… However, we can create artificial limits to specific things to keep some level of consistency. I’m talking about branding guidelines.
Clear branding guidelines provide constraints which makes designing a website quicker and the final product better. Less time thinking about branding details in the website design phase means more time spent on thinking about the purpose of the design and the overall user experience and end goals. This is why I love to get a new website project that includes updating their branding.
The Client: Dr. Scott Redrick’s Citrus Medical Clinics
Dr. Redrick offers three primary services, each with their own visual identity. However, they also share specific qualities to show that they are part of the same family.
Logo Animation
One of the cool things you can do with a vector logo (you have a vector logo, right?!) is add a subtle animation to it on your website. It’s a great way to delight your users and really make for a memorable experience. I’m a huge fan of subtle animations, they just make you feel good! Twitter’s “heart” animation when you like a tweet for example:
These types of animations can be done in a variety of ways. The most performant way is almost always going to be using JS or CSS in tandem with an inline SVG which requires having an extremely clean vector file. Here is what Citrus Medical’s logo animations look like: