UI Design - Mobile Weather App

Project Type
Interactivity, Application Design, User experience

Photoshop, Illustrator, Premiere Pro, INvision 

January 2016–February 2016



The topic I worked with to develop this app was weather. When I was in the planning stages I wanted to create a basic refreshed look of weather apps that were already available. After discussion I felt that wasn't the best approach. I changed the target audience to be people like me, those that can't rely on numbers or writing to tell them information. So I wanted to create a weather app that shows rather than tells. 

Luft (german for Air) would use animation and colour to represent weather changes throughout the day.


I wanted to compliment written temperature indications with a visual method of explaining the weather. You could have the option of using written information along with visuals or only visual to tell you the weather.

Indicates temperature changes:

  • Warm Weather in Reds

  • Cool Weather in Blues

Temperature and Time

  • Shown in the upper left corner of screen

  • Location in the bottom center

  • Shown in either Celsius or Fahrenheit which can be changed in settings

Indicates condition changes:

  • Snow, Rain, clouds, etc would be shown in the animated scene

  • Sun and moon positions would change in the scene based on time of day

  • How dark or light the animation appears gradually changes over the course of the day



Animation for cool weather and the condition of snow

Animation for cool weather and the condition of snow

Navigating the app

Video Advertisement in Keynote