Overview

This project explores a modern weather mobile application interface that balances usability and emotional design. The goal is to transform weather data into a visually engaging and easy-to-understand experience.

Problem

Many existing weather apps are overloaded with information, making them difficult to scan quickly. They often lack emotional engagement and fail to visually represent the atmosphere of each weather condition.

Goal

  1. - Deliver key weather information within 3 seconds

  2. - Improve readability and visual hierarchy

  3. - Create emotional engagement through visual design

  4. - Build a scalable UI system for multiple weather conditions

Design Approach

1. Visual Storytelling

  1. Each weather condition is represented using a unique combination of:

  • - Color mood (temperature-based)

  • - Sky elements (sun, moon, clouds, rain, snow)

  • - Background illustration for atmosphere

2. Minimal UI Structure

The interface focuses only on essential data:

  • - Current temperature (primary focus)

  • - Location

  • - High / Low temperature

  • - Hourly and daily forecast

Unnecessary elements were removed to reduce cognitive load.

3. Consistency System

All screens follow the same layout structure.
Only these elements change:

  • - Background color

  • - Weather icon

  • - Decorative elements

  1. This ensures scalability and design efficiency.

Design System

Color Strategy

  • - Day: Soft blue gradient

  • - Sunset: Warm orange tone

  • - Night: Deep purple

  • - Rain: Dark navy

  • - Snow: Desaturated cold blue

Typography

  • - Large temperature text for primary focus

  • - Secondary data uses lower contrast

  • - Clean sans-serif for readability

Key Screens

  • - Sunny (Day Mode)

  • - Sunset Mode

  • - Night Mode

  • - Rain Mode

  • - Snow Mode

Outcome

  • - Improved readability and faster information scanning

  • - Strong visual identity

  • - Ready for real-world application and scaling

What I Learned