Animated Vector Icons
livicons.com
livicons.com
For the Geocities comparison commenters... My takeaway was not "Here are animated icons, you should litter all your pages with them" but rather "Here are animated icons, if you have a use case for them, then these are a very good option".
For the too-much-animation commenters... Are you actually surprised that the demo page stuffs a lot of icons into a page in order to demonstrate the range of capabilities? See above -- the intent is that designers should use them sparingly and appropriately. Is animation necessary? Probably not. Can it be engaging if the execution is good? Without a doubt.
These are very nice-looking icons that appear to offer quite a bit of flexibility. I think that they will seem more natural in contexts where lightweight animations (drop shadows, spinners, etc.) are already used: alerting a user to an available interactive element, on hover as a user prepares to perform an action, during a wait period while processing occurs, or drawing attention to a completed action.
Many of these are pretty subtle or clever animations. If you can get past the notion that "no one in the world can use animated icons well", you might realize that these could be used in moderation to add a hint of whimsy to a site.
OP, I salute you for great work. There is definitely a use for these animations. I think the occasional animation can help increase conversion rates by enticing people to click and get further down the funnel.
It's no surprise that wycats tweeted yesterday that he hates it when his work gets on HN. The critiques are getting out of control here.
Additionally, I find many of the animations confusing and non-meaningful. For example, having an email envelope in a site footer being filled and flying off correctly denotes the concept of "send me an email". But doing the same thing for an email field in a form feels completely out of place. The user is not sending an email, they're just giving their information for future reference. Many of the animations are similar: they demonstrate a vaguely related concept, not the specific use case being demonstrated.
The genius of gradients and shadows in design is that they allow for objects to appear 3D, that is, they can visually "pop" off the flat page and therefore draw the users' attention to them. This is good unless every element on the page has shadows and gradients, then it becomes very pretty but very distracting.
When I'm on a website, I'm not appreciating a colorful Monet, I'm trying to always do essentially one of two things: Find the right thing to click so that I no longer need to be on that website, or else read text. (or look at photos, etc.) Being a pretty site is a huge plus, but not if it distracts from one of those two goals.
The genius of Flat UI that has recently (re-)exploded in popularity is not to draw attention to specific elements, but to ease the experience by doing the opposite: it un-distracts by removing all this popping stuff.
And I love Flat UI for this. I can see clearly now, the bevel and embossed rain is gone.
Alas these icons are about as distracting as you can get. Many of them resemble a flat UI style, but they've missed the point of Flat UI entirely. It's not that I dislike gradients, its that I don't want to be distracted in my journey to find the one button I need to click and then get off the page.
I understand that they're examples of what you could do, but I do hope hey're something no site author would want to do. No user ever has had the thought, "Before I click a button, I really wish it would wabble back and forth."
(And if I'm there to read text, I sure don't want anything animating while I'm reading!)
~~~
I don't mean to be totally harsh on animations. They can be useful when you need to create affordances. Buttons that highlight as you mouse-over them afford clicking, just like the visual of knobs (say on a car dash board) in real life afford turning. An icon that flies away as I hover over it, or significantly changes shape as I hover over it is probably not a good choice for nearly any button.
For instance, a button is easily recognizable by its shape. We all know they can be clicked.
Some flat designs have buttons that look absolutely no different than a label. Worse yet, sometimes they don't even have hover effects. When the only way I can find out if something is clickable is by trying to press it, something's seriously wrong. When there are clickable things in my view that I don't realize are clickable until much much later, something's wrong.
Go flat, but leave the affordances alone. There's a difference between throwing everything out that's not needed and throwing everything out.
That being said, the problem I have with this is that a lot of the animations aren't very good. For example the "user" icon animates by the user's head barely moving. That doesn't mean anything. It's just pure distraction. It's animating for the sake of animating, not for the sake of explaining.
My favorites are (1) Upload, (2) Chrome, (3) Android, (4) and the Spinners. Thank you very much!
Not surely.
Having it animate back is just better communication for that particular interface.
You can see this on Google Chromes new tab "Most Visited" page, drag an item and let it go on nothing, it will animate back to its position.
Then there's sorting, it's much better (to me) when the interface animates to show you what the effect of moving one item to a new location will have on the rest of the items in that list, you can see this effect on sites like Trello when you drag around cards, etc.
I'm sure there are more examples of good uses of animation in interfaces.
That said, I don't think the ones that look good add enough to justify their usage.
Less is more.
What you take away from it is what is important. What would you improve in your design if you were able to add the perception of motion? How would engaging that human capacity make your product better?
Animate the bird"
overall, I feel that making every little button wiggle when I mouse over it would be distracting rather than helpful. I can't see myself using these.
"On this demo site the most part of the icons are in a static mode with disabled animation to prevent an unauthorized use. To see all of them in action please look at the LivIcons preview video below."
I think those would be better served to indicate the processing of an action, like the pin wheel/hour glass of old.
http://www.textfiles.com/underconstruction/ http://www.bellsnwhistles.com/page29.html http://www.11points.com/Web-Tech/11_Best_Old_School_Animated...
Ironically, the page that lists them all cannot achieve that. Perhaps they should have some sample pages with the animated icons used more subtly, to serve as a demo of good design.
(1) They only move when you're focusing on them (so they are less distracting)
(2) Because they react to your cursor, the page feels responsive
Reminds me of when we used animated GIFs everywhere and construction men explaining how the site is still under construction...
I'd like to see some comparison between static and animated icons, but not sure how to profile it. Measure FPS, or cpu time for rendering a page, perhaps?
Oh god, no.