11–20 of 58 posts
This is the Geocities of vector art. I don't see this as a good thing, I see this as a poor compensation for bad interface design. If your icon needs animation for it to make sense to your visitor you're doing it wrong.
http://www.textfiles.com/underconstruction/ http://www.bellsnwhistles.com/page29.html http://www.11points.com/Web-Tech/11_Best_Old_School_Animated...
Less is more.
Our app WebCode ( http://www.webcodeapp.com ) makes creating Canvas-based graphics like these much easier. It is a vector drawing app that instantly generates JavaScript Canvas code.
Our app WebCode ( http://www.webcodeapp.com ) makes creating Canvas-based graphics like these much easier. It is a vector drawing app that instantly generates JavaScript Canvas code.
Those unexpected downloads on a bunch of the links is... unexpected, and not cool.
This is the Geocities of vector art. I don't see this as a good thing, I see this as a poor compensation for bad interface design. If your icon needs animation for it to make sense to your visitor you're doing it wrong.
That said, I don't think the ones that look good add enough to justify their usage.
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.
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.