Skycons: ten animated weather icons, generated by JS using the HTML5 canvas(darkskyapp.github.com)

39 pointsby nvk13 anni fa7 comments

darkskyapp.github.com

Skycons: ten animated weather icons, generated by JS using the HTML5 canvas

http://darkskyapp.github.com/skycons/

4 comments

mullr13 anni fa

I'm going to be contrary here, not for its own sake but because I think this is kind of an important issue. What purpose does the animation serve? In what specific way is it better for these icons to be animated than to sit still? This is the question we should ask ourselves before putting motion on any user interface.

Tech-wise this is neat though, and thanks for open sourcing it.

jws13 anni fa

In a field of icons, icons representing more interesting states should draw the eye†. Traditionally you might do that with color, or mass, or value, but you have to balance the attraction with keeping a cohesive feel.

What the darksky icons do is keep the feel with line weight and mass, but let the motion do the attraction.

Pull up http://forecast.io to see them in action. If you live in a desert or England, search to 63131 to see what I mean. Monday and Saturday I have light rain. It leaps right out.

␄

† "Windy" is interesting. If I am near a sailboat, I absolutely want it the way it is. If I am 500 miles from a sailboat I don't care about windy until it gets to a level where I'll make sure the car isn't parked under trees.

pgambling13 anni fa

I agree that animating the icons just for the sake of animation isn't useful. However, the precipitation rate of the rain and snow animations could change in response to the forecast.

shawn-butler13 anni fa

Yes, spatial v object based attention. The use of animation could be used to convey information and draw the visual attention.

So for example a rain cloud for it's raining. An animated rain cloud for thunderstorm warning, draws the attention to a piece of text that might be overlooked.

Jelly-Bean13 anni fa

Aww those are cute! Nice job.

Just wanted to point out that when viewing the demo on my iPad's high resolution display they look pixel-y.

Sprint13 anni fa

The moons and the leaf have some crazy node flickering in Opera.

xkcdfanboy13 anni fa

Why canvas and not SVG? The code is gross, I know you mention it in the comments. It definitely affects who will use your library. If someone is sane about a consistent clean codebase, they would never use this lib. Cool idea and execution though, not trying to knock you.