UX Designer + Researcher
Weather Representation Cover.png

Weather Representations

Weather Representations

Speculative designs for an abstract and literal weather app.

Spring 2019

Weather Representation Cover.png

Overview

Weather Representations is a set of speculative designs for a weather app. These were made as a quick exercise in my Information Visualization course at MIT. The prompt was to create two versions of a weather app - one abstract and one literal. All screens were designed and built with p5.js.

Sketches

Some initial ideas and meanderings

Some initial ideas and meanderings

weather sketches 2.jpg
weather sketches 3.jpg

Final Designs

I ended up using a combination of simple shapes and color to reflect changing weather conditions. The shapes corresponded to weather conditions such as clouds, precipitation, and wind. The color corresponded to the temperature and time of day.

From Abstract…

The thickness of horizontal lines at the top represent wind conditions. The shape in the middle represents sun, clouds, or precipitation. The vertical lines at the bottom represent chance of rain.

A hot, sunny day

A hot, sunny day

A windy and rainy - yet warm day

A windy and rainy - yet warm day

A cool day with strong winds and hail

A cool day with strong winds and hail

A cold, slightly windy andcloudy day

A cold, slightly windy andcloudy day

To Literal

Building off of the abstract weather representations, I continued to use shapes and lines to represent weather conditions, while also adding in numbers and location for a more practical weather reading.

Vertical lines on days represent a chance of rain

Vertical lines on days represent a chance of rain

Hotter days are represented with warmer colors, while cooler days are represented with cooler colors

Hotter days are represented with warmer colors, while cooler days are represented with cooler colors

A black background represents nighttime

A black background represents nighttime

A grey background represents overcast weather

A grey background represents overcast weather