Open to new projectsTR
All work02 / 05

Cloudline

Mobile Weather Application

Category
Mobile app
My role
UI/UX Design, Visual Direction
Tools
Figma, Photoshop
Screens of the Cloudline weather app

About the project

Cloudline is a mobile weather app I designed so people can follow the weather anywhere in the world quickly, clearly and reliably. It brings temperature, feels-like, chance of rain, humidity, wind and conditions into a clean, readable interface. The aim was to avoid information overload and give fast access to the data people actually need to plan their day.

Mission

To simplify dense weather data into a clear, easy-on-the-eyes mobile experience where people find what they need fast.

What I did

I handled Cloudline’s UI/UX end to end: information hierarchy, navigation and the core screens. I focused on making temperature, rain, humidity, wind and other data easy to read, and worked on hierarchy, components and the visual language so the app feels simple, consistent and quick to use.

Scope
UI/UX DesignMobile App DesignVisual Design
My role
UI/UX DesignVisual Direction
Tools
FigmaPhotoshop

What it offers

  • Live snapshot

    See every condition at a glance: temperature, feels-like, wind and chance of rain.

  • Plan ahead

    Plan with confidence for any location with hourly changes, alerts and travel-ready forecasts.

Design process

January 8–25, 2024, about 3 weeks.

  1. Research

    Discovery

    Studying weather apps and user needs

  2. Screen flows

    Structure

    Home, location and settings flows

  3. UI and design system

    Design

    Colours, icons and components

  4. Presentation

    Delivery

    Mockups and Behance case

Cloudline home screen on a phone in hand

App screens

  • Cloudline home screen

    Home

  • Cloudline menu

    Menu and favourites

  • Add location screen

    Add location

  • Manage locations screen

    Manage locations

  • Calendar screen

    Calendar

  • Settings panel

    Settings

Logo and visual identity

Cloudline’s identity is built on a simple cloud shape that speaks directly to weather. Minimal lines and a black-and-white palette give the brand a modern, trustworthy character that matches the app’s interface.

Cloudline app icon
Light and dark versionsThe icon keeps the same form in the phone’s light and dark themes; only the background and cloud colours swap.
  • Home screen
    60 pt
  • Search
    40 pt
  • Notification
    20 pt
Sizes in useThe sizes iOS uses on the home screen, in search and in notifications. The cloud stays legible even at the smallest.

Colours

  • Dark Bg#202020
  • Cards Bg#363636
  • Morning#73B1FF
  • Evening#207AE1
  • Night#063C78
  • Sun#FFCC41
  • Snow#FFEB99

Typeface

Quicksand

A display sans-serif with rounded terminals, started by Andrew Paglinawan in 2008 on geometric shapes. Made for display use, it stays legible at small sizes too.

  • Aa Bb Cc 0123400
  • Aa Bb Cc 0123500
  • Aa Bb Cc 0123700

The full presentation is on Behance

See every screen and detail of the project in the Behance presentation.

View on Behance
Next projectTradeviewer