Meet Nollr Weather

Another early web app we developed for Nollr is for Weather. Like the Nollr Calculator it is designed and developed as a scalable HTML page that functions equally well at small (as a widget within our homepage frames) or large (think flatscreen big) sizes. Below we’ll walk you through some features and how they work.

The Nollr Weather app does its best to automatically discover your location, pulling real-time weather data from Google for that city. The page displays location, current temperature, sky conditions, and the daily highs and lows. Right now Nollr Weather is limited to degrees Fahrenheit but we’re working on adding Celsius as well.

One interesting idea we explored and eventually implemented was to have the background color shift dynamically based on the time and temperature. It’s become one of our favorite features.

To make it work we first determined a color range between orange (hot) and teal (cold). If the temperature is one hundred degrees it will be pure orange. At zero degrees or less, it’s pure teal. Anywhere in between, you’ll get a color variation between the two colors with up to 100 possible variations.

Nollr Weather Color Spectrum

Next we factor in the time of day. Assuming that 12:00 is generally the brightest part of the day, we adjust the color accordingly. 12:00 noon is thus 100% brightness and midnight is 50% brightness with 12 possible levels in between. When the brightness is combined with the color axis there are up to 1,000 possible color possibilities.

For the typeface we once again we stuck with Droid Sans designed by Steve Matteson. The Nollr Calculator was designed and developed by the Nollr design team and Oak Studios. The weather icons were picked up from our friends at The Noun Project.