Hacker News Reader

Comment by radley | Hacker News Reader

Since most people using weather icons will also be using APIs by Accuweather, WUnderground, and Open Weather Map, it's good to try to match actual reported conditions as much as possible:

https://api.accuweather.com/developers/weatherIcons

Often designers create lots of different wind and extreme icons (Tornado, Meteor) which will never be used and not enough subtle-difference icons (Mostly Sunny, Partly Sunny, Intermittent Clouds) which are needed. When implemented, we end up using only a small portion of a collection and repeating many icons.

View on HN

There are some additions going on to make CSS addon sheets that match the NOAA, yahoo, accuweather, etc etc. It's just a ton of work to even get this far, I have to take month long breaks to return to the real world.

The next big release will be integration with weather service API codes and other weather codes, and fixing some nuanced things like moon phases which are hard to conceive when you're in the depths of things.

As far as the nuanced subtle-differences, that's a hard one. When designing, a lot of the icons start to be so similar, or the same, they become multi use. Some user research I need to do is to see how many people would use "mostly sunny, partly sunny, slightly overcast" as 3 icons, or if 1 works. I am pretty restricted with the choice to use the single color, bold stroke icon style. Especially when they are meant to look good at 16-20px.

A "hairline" font weight is also planned.

IMHO weather icons really need color. This will be even more necessary when you want to have more subtle variations in conditions. Color - or shades of gray - could even be an indicator to the cloud type. A dark cloud with yellowish lightning is going to convey thunderstorms much faster and with less visual processing than anything you can possibly do in a mono-color icon.

This all leads to the question: Why use a single color?

As a icon font, anything you want to do with it is via CSS. So they can be any color, have a shadow, etc, but unless someone wants to get clever, the icons have to be any single color.

I could make component pieces that have color CSS coded and stack, like a yellow sun on a white cloud that are positioned on top of one another, but that would be a massive undertaking I don't think I could commit to.

If you were to release this set as SVG, color would get a lot easier. It'd also open up the possibility of adding animation. For example: http://codepen.io/noahblon/details/lxukH

So someone made the wrong choice - font vs image.

It's a font, so single color. Multi-level (thus multi-color) fonts are possible, but are not heavily adopted.

They look really great. That's been a project I've wanted to try for fun but have lacked the time.

Who's using NOAA? Aren't they intended to be used primarily by weather services?

Reply on news.ycombinator.com