8-Bit Weather App

Client: Personal Project: UI Design, Motion, Interaction Design

 

Nostalgia

As a part of a daily UI challenge I designed a weather app inspired by late 80’s 8-bit devices. Features include gradients that change based on time of day/weather, Idle animations for icons and a scrollable time of day temperature forecast. Just in case you miss a time when things were simpler.

 
 
8-bit WeatherArtboard 2.jpg
 

The weather icons and details screen was heavily inspired by imagery made for devices that had limited color and resolution capabilities. I gave myself the restriction of only 3 or 4 frames worth of animation per icon. The design had to be incredibly simple, read quickly and had to be designed on a finite pixel grid.

Icons solo_1.gif
 
8-bit WeatherArtboard 1.jpg
8-bit WeatherArtboard 2.jpg
 
 

Fresh Gradients.

It’s easy to say “oh yeah, we can have the gradient be different all the time!” versus actually mapping out how that would work in reality. After some trial and error and some lengthy chats with the developer, we decided to use 3 main gradients based on temperate that each shift depending on time of day. This was the starting point for other variables like weather and location. The result is a beautiful variety of gradients that grace your phone daily.

 
 
 
GradientMap.jpg
 
 
8-bit WeatherArtboard 3.jpg
 
 

Screen Flow.

When designing an incredibly simple application with the goal of highlighting that simplicity, the user flow had to also be nearly imperceivable. 90’s era devices didn’t have swipe and slide but today’s user has come to expect it. The compromise here is letting the faux loading screen and low frame rate animation lead the feel - while the screen swipes and scrolls stay simple to create ease of use.