weather app mockup

Daily UI #037 - Weather

weather app three screens
weather app iphone 6 mockup

I've seen a lot of this "overlapping, wiggly, gradienty, graphs" style, and I thought it would work really well for a weather app.

The top wiggly graph is the hourly temperature forecast. Tapping/dragging over the graph shows detailed information for each data point. Drips icons show when there is a chance of rain, and are always visible.

Bottom graph is the daily temperature forecast (corresponding to the individual days below). Days show icons for the weather on each day, and the background of each day showing the overall chance of rain on that day.

Scrolling down reveals more information for that day - sunrise/sunset etc. as well as a few buttons.

The colours of the UI correspond to the weather at the time - for example the light blue for fine/sunny weather, grey/green for storms or rain, purple/orange at night.

stormy 1
fine 1
night 1
stormy 2
fine 2
night 2
{{ message }}

{{ 'Comments are closed.' | trans }}