Animated Vector Icons(livicons.com)
livicons.com
Animated Vector Icons
http://livicons.com/#examples
57 comments
I like the technical idea of these items, but in reality they don't really provide any added usability. In fact, I would say they take away from a message more than a standard icon. The idea of an icon is to instantly convey a message. Adding an animation to said message on hover doesn't really add any extra 'reason'
An animated icon only makes sense when it represents the progress of a 'long running' command, such as reload or send. In this case it affords recognition that something is happening. Anywhere else this is a terrible ui decision.
Do they affect page performance / drain battery faster?
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?
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?
Totally useless for devices without a mouse. Touch-screen devices don't have pointer movement events.
Cute but annoying. And has no place on mobile touch devices where Hover is nonexistent.
I am very impressed. Adding to my current project now. Thank you.
I feel like some of the icons (PayPal and WordPress in particular) are animated for the sake of being animated.
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.
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.
I would treat this like a desert wine. You're not going to drink the whole bottle, but a small glass at the end of dinner is nice. You could do the same on an e-commerce site - work through the checkout process normally, and then make "Confirm purchase" button more fun to click.
Might be better to just animate them on click. Hover animations/color changes had some use for links, but a button shape already conveys "clickability". On the other hand, animating on click gives a nice feedback (how many times have I clicked a slow-responding link and wondered if I really did).
Good for distracting a user on a slow ajax day
I can see using these, but only sparingly. I don't think I'd use that preview eyeball. It's kind of creepy... :)
yeah, i kinda thought that same thing. these would be good to use for certain projects and in certain situations, but i don't think i would replace static icons with animated, ever.
Oh wow, this is kind of fun. Might definitely use on some of my quirkier sites. Thanks OP
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.
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 seems like a generalization. Surely there are instances where animation is appropriate for an interface. What's so wrong with another tool to achieve that goal with the added benefit of being entirely scaleable?
Animation is suitable in an interface, an icon does not constitute an interface. An icon on a button animating on rollover is just distracting. Now, perhaps if something had to go on in the background it would be relevant (indicating that the work is still in progress) but that's a very edge case.
Surely there are instances where animation is appropriate for an interface.
Not surely.
Not surely.
Drag and drop. When I drag an icon to a location and I miss, I think it's better to see the item animate back to it's original location rather than just disappear and "pop" back.
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.
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.
Why not? Say someone is designing a weather app where they want to show active snowfall - an animated vector icon showing falling snow communicates that perfectly.
[deleted]
Some of them feel natural (upload, download, and piggy bank), but most of them just detract from it.
That said, I don't think the ones that look good add enough to justify their usage.
That said, I don't think the ones that look good add enough to justify their usage.
I've been mulling over these kind of animated icons after seeing the little weather icons on http://forcast.io.
Seems like it would be extra neat to make this a webfont somehow (swapping out 'frames' of font-data under the font name alias). However pretty unnecessary, considering the LiveIcon perks of using data attributes to specify loops, etc.
The usage of these kinds of icons on forcast.io is brilliant though. I want to see the weather, it moves a little. I mean the only problem with animated icons/buttons like this is that if they get back in style, it essentially opens pandorras box. They make good web design better if used sparingly, yes, but they'll also make bad web design worse. A lot worse. Spinning visual tumor worse.
To me this feels like a return to classic geocities design.
http://www.textfiles.com/underconstruction/ http://www.bellsnwhistles.com/page29.html http://www.11points.com/Web-Tech/11_Best_Old_School_Animated...
http://www.textfiles.com/underconstruction/ http://www.bellsnwhistles.com/page29.html http://www.11points.com/Web-Tech/11_Best_Old_School_Animated...
I can see the similarity, but the big difference is that you can use these animations on hover responsibly.
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.
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.
I think the difference is that:
(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
(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
A little bit of movement can be nice, but this is really overdoing it on almost every icon. The animations here go so fast, it's only distracting you from the main message of the button/CTA/promo.
Less is more.
Less is more.
It's a sampler site. The gratuitous emphasis is intentional.
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?
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?
Remember me something... http://www.youtube.com/watch?v=Jz_BGezNE2Y Nice work!
Wow, I'm really surprised at the comments so far.
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.
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.
To reinforce the point, the page even shows the icons can be static. You certainly don't have to turn every available animation on just because it's there.
Yeah, the comments are completely ridiculous.
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.
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.
The problem is that this demo page feels like the modern equivalent of a Geocities page. It shows off the technology, but fails to show how it can be used tastefully by using it everywhere without restraint.
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.
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.
Sorry in advance for being negative, it's not these particular buttons that are problematic, they're technically very nice, its animated icons/buttons/logos in general that I think we should consider visually upsetting. Here is my reasoning:
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.
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.
I like flatt-er UI in general, but I don't like it when it goes so far out of its way that it removes all affordances.
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.
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 was the word I was completely unable to recall: affordance. Yes, that's exactly where you might find these icons useful. (We can agree to disagree on whether the content of the icons is whimsical or annoying.)
These icons are perfect for just that, making the most important thing on the page pop. The usual way we see this is a "call to action" button, but I think these sort of high-quality SVG buttons with just a bit of movement may do the same job in a more subtle manner.
The bouncing twitter bird is against twitter's TOS, right?
https://twitter.com/logo
https://twitter.com/logo
I cannot resist asking .. what isn't?
"Don't:
Animate the bird"
Animate the bird"
Yes. even if Twitter should use this one!
On the demo site(http://codecanyon.net/item/livicons-303-truly-animated-vecto...), some of the icons don't have any animation as far as I can tell from my browser (Chrome on MacOSX). Is it just me?
There is a notification on the site that says only some are animated:
"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."
"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."
same on Chrome Windows 7
I can definitely see the use-case on CTA buttons, it would be really interesting to A/B test.
Regardless of what others have said, I think using these in special circumstances is perfect. They are quirky, fun, and well designed. I look forward to using them in a fun design in the future.
My favorites are (1) Upload, (2) Chrome, (3) Android, (4) and the Spinners. Thank you very much!
My favorites are (1) Upload, (2) Chrome, (3) Android, (4) and the Spinners. Thank you very much!
I'm not sure why the comments are so negative. There are definitely huge problems that can crop up when using animated icons. I don't think the author is advocating that anyone animate every icon on their site like they did on this example landing page.
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.
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.
Oh no.
Oh god, no.
Oh god, no.
You could two things to improve this. Allow cutomization of speed (the icons move too fast), and let one icon morph into another. This could become a visual cue for further navigation or a preview of the steps that follow a user sequence. On its own, a moving icon doesn't carry much value in a layout.
Edited for grammar.
Nearly all the examples on that page seem to be distracting and not needed. I can't think of many uses where this would be overly useful or helpful to a user.
Reminds me of when we used animated GIFs everywhere and construction men explaining how the site is still under construction...
Reminds me of when we used animated GIFs everywhere and construction men explaining how the site is still under construction...
this is awesome. honestly people. shut up.
I think it has potential but it needs to be quite a bit more subtle. It seems too distracting the way it is right now. I find myself trying to just keep track of the animations and not really appreciating the attention to detail.
I think those would be better served to indicate the processing of an action, like the pin wheel/hour glass of old.