Adding Customized SVG Animation
by Elliott Chen, a developer
One of the design trends I'm noticing is that most awesome websites incorporate animated SVGs that respond to user interactions. For example, take a look at stripe.com – as you scroll, you'll notice smooth, sequential content reveals; when you click, icons respond with dynamic movements; and when you hover, there are floating borders and more.
Why do designers add these animations?
From what I've gathered, these animations are not merely superficial eye candy for users to play with. They represent a more profound level of user-friendliness, subtly conveying that users are engaging with tailor-made solutions. In simple terms, they differentiate a highly customized website from one generated by AI. That's precisely why I'm eager to infuse my website with personalized SVG animations in the first place.
The challenge, however, is that I'm not entirely sure how to go about it...🤨
But that doesn't deter me as long as I'm determined. One of the mindsets I've cultivated over the years is the ability to keep moving forward when faced with obstacles. In the present situation, it's a vague concept without detailed implementation.
So, I am gonna use this blog post to collect my thoughts along the way, hopefully by the end, it is interesting to read. For now, I'll shift my focus to other tasks and come back to this with fresh perspective later.
Alright, let's get started on the logo first.
I used to have a logo that is a combination of initial letters from my name. I designed it when I was in college, and I liked it for a long time. I felt quite comfortable with it. I showed it to a lot of people and was expecting to receive compliments. The truth is I received none. I had to take it as a failed logo design, at least not one that everyone likes.
Does it bother me, though?
Not at all. Here's what I've learned during my time as an engineer, and a proficient one at that. I've always placed great emphasis on the finer details, and I consistently strive for excellence in those aspects. The challenge lies in the fact that the things I care about most may not necessarily align with what others would prioritize. When I'm creating something to sell or offer to others, I can certainly put their preferences ahead of mine. However, when it comes to my own logo, at this stage, I couldn't possibly be more focused on my personal preferences.
Until recently, I felt there's something lacking in this logo. I don't know what it is, but it's just wrong.
So, I decided to go on a path of rebranding the logo and rebranding myself. That sounds familiar, doesn't it? You're kind of right. Just like rebranding a product, I decided to rebrand myself.
First of all, my personal pet peeve of a logo should be a sign and text combination. Both are equally important. It might be the way they are displayed. The best is side by side.