By on .

Last year, Adam Whitcroft came out with his lovely Climacons: a comprehensive set of tastefully understated weather icons. You've probably seen them at one point or another, because virtually every weather app that has come out since then has been using them. (And for good reason: they're gorgeous!)

For most of it's development, Forecast also used them: they fit well with the aesthetic, and they were an easy way to bootstrap our design. They always seemed to be missing a certain je ne sais quoi, though, and we had a very difficult time identifying what, exactly, it was. Eventually, it dawned on us that, given the animations we had elsewhere in the app, the Climacons simply felt too flat, too static; we therefore set about making our own set of animated weather icons that felt more alive—but not so much so that they distract—which are the icons you now see on Forecast.

We are calling them Skycons, and they are now open source on GitHub.

Some Technical Highlights

  • Skycons are animated in HTML5 Canvases using JavaScript. In browsers that support it, we use the recent RequestAnimationFrame API to animate them efficiently.
  • Skycons are stateless: that is, the only information that is needed to render a frame is the current system time. It's somewhat tricky to develop this way, but the benefit is that the animations degrade gracefully regardless of the framerate they are able to be displayed at, and we don't have any data structures to maintain from frame-to-frame: this actually makes the animations lighter-weight, and hopefully less taxing on older or weaker devices, such as smartphones.
  • We intentionally designed the more-interesting weather conditions (such as "rainy" or "windy") to have much more motion in them than less-interesting weather conditions (such as "sunny" or "cloudy"), in order to naturally draw the eye to them.
  • There is currently an icon for every possible "icon" value that the Forecast Data API can return. As values are added to the API, you can expect us to make new Skycons, as well.

What's Next?

We're pretty happy with how Skycons came out, but there's always room for experimentation and improvement.

  • The code for Skycons is rather sloppy at the moment, due to its rapid development. It could really use some refactoring!
  • We developed Skycons in Canvas, because that's what we know and it was quick for us, but we were quite interested in experimenting with animated SVG images. This would make the Skycons declarative and completely self-contained, hopefully making them better-suited to a wider range of uses.
  • The set of icons was adequate for our uses, but there are quite a few weather conditions that aren't covered: thunderstorms, hail, tornadoes, tsunamis, etc. Adding these icons would make the package more useful as a whole.
  • Allowing dynamic customization of the animations, such as the angle of precipitation, could allow for any number of playful tricks, such as having the rain always fall towards the ground on your iPhone, using it's internal accelerometer.

As we get more time for playing around, perhaps you'll see some of these things pop up. Additionally, since Skycons are open-source, if you feel a burning desire to experiment with them, we invite you to do so! We're making the source code available in the public domain, with no restrictions whatsoever on its use, so use them however you see fit. (Naturally, we'd appreciate being credited for our work and for any interesting contributions to also be made open source, but we don't believe that either should be a legal requirement.)

So that's Skycons! We hope you enjoy them and find them a useful tool in the weather design toolbox.