Weather
A visually rich and engaging experience built on Bing’s existing answer framework to answer the question, “what is the weather?”
Design lead — Product & motion design
Concept
Weather is defined as the state of the atmosphere at a place and time.
The basis of the concept for the experience was to visually represent atmosphere, place and time.
The experience needed to feel magical. Inspired by time lapse photography, users would feel like they were controlling time with a simple drag of a slider
Production
This concept had a few challenges we needed to solve in order to actually work on the web.
Like, how can we access finely detailed control of video playback? Would we be able to optimize the animation of the weather visual overlays?
With our team of developers and designers, we designed a system as close to the concept we set out to accomplish.
The solution was replacing the time lapse video with a series of still photos captured from the video.
It cross fades between the photos as the user drags the time slider control across the canvas. This gave the fine control needed to properly represent forecasts for sunrise and sunsets.
For the overlay of weather visuals, a sprite animation engine was created for the rain, snow, hail, and thunder.
The clouds were created as a seamless pattern scrolling horizontally to keep files as small as possible for mobile web delivery.