Animated Vector Icons

by fady • 13 years ago

328 55 13 years ago

davefp• 13 years ago

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.

notjustanymike• 13 years ago

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.

blktiger• 13 years ago

I can see using these, but only sparingly. I don't think I'd use that preview eyeball. It's kind of creepy... :)

fady• 13 years ago

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.

tlarkworthy• 13 years ago

Good for distracting a user on a slow ajax day

rpc_was_taken• 13 years ago

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).

ffn• 13 years ago

Oh wow, this is kind of fun. Might definitely use on some of my quirkier sites. Thanks OP

PixelCut2• 13 years ago

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.

gotrythis• 13 years ago

Those unexpected downloads on a bunch of the links is... unexpected, and not cool.

PixelCut2• 13 years ago

There are only 2 text links on the title page that result in download - both links are labeled "Try" and download the demo version. Do you have these in mind?

trebor2• 13 years ago

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.

uptown2• 13 years ago

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?

jodrellblank• 13 years ago

Surely there are instances where animation is appropriate for an interface.

Not surely.

trebor2• 13 years ago

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.

jimktrains2• 13 years ago

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.

Breefield• 13 years ago

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.

solistice• 13 years ago

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.

mayoff• 13 years ago

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...

shurcooL2• 13 years ago

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.

tedsanders• 13 years ago

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

cocoflunchy• 13 years ago

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.

reeses• 13 years ago

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?

pzeups2• 13 years ago

Remember me something... http://www.youtube.com/watch?v=Jz_BGezNE2Y Nice work!

Cyranix2• 13 years ago

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.

HCIdivision17• 13 years ago

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.

dsowers• 13 years ago

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.

johnbm• 13 years ago

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.

simonsarris• 13 years ago

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.

Cyranix2• 13 years ago

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.)

rinon• 13 years ago

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.

shurcooL2• 13 years ago

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.

pgrote• 13 years ago

The bouncing twitter bird is against twitter's TOS, right?

https://twitter.com/logo

pzeups2• 13 years ago

Yes. even if Twitter should use this one!

darklajid• 13 years ago

I cannot resist asking .. what isn't?

austengary• 13 years ago

"Don't:

Animate the bird"

kailuowang• 13 years ago

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?

arianvanp• 13 years ago

same on Chrome Windows 7

kayge• 13 years ago

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."

adambard• 13 years ago

I can definitely see the use-case on CTA buttons, it would be really interesting to A/B test.

tonydiv• 13 years ago

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!

ianstormtaylor• 13 years ago

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.

nkozyra• 13 years ago

Oh no.

Oh god, no.

capex• 13 years ago

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.

hadem• 13 years ago

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...

dmvaldman• 13 years ago

this is awesome. honestly people. shut up.

sjdev• 13 years ago

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.

cabirum• 13 years ago

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?

achy2• 13 years ago

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.

rohanic• 13 years ago

I am very impressed. Adding to my current project now. Thank you.

empire29• 13 years ago

Neat idea, but I dont like the concept. The animations instinctively make me think some action is occurring, which isn't.

I think those would be better served to indicate the processing of an action, like the pin wheel/hour glass of old.

mahmud• 13 years ago

Totally useless for devices without a mouse. Touch-screen devices don't have pointer movement events.

andyhmltn• 13 years ago

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'

st3fan• 13 years ago

Cute but annoying. And has no place on mobile touch devices where Hover is nonexistent.

Animated Vector Icons

Related Stories