screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile weather forecast flow examples

Search the library

Weather Pro · Radar Alerts: Browsing Weather Details

Open recorded flow

  1. Step 1 · 0:41

    Weather Pro · Radar Alerts: Top header with location and temperature, followed by an hourly forecast card, a 10-day forecast list card, and a map preview at the bottom.See the flow
    Weather Pro · Radar Alerts

    Top header with location and temperature, followed by an hourly forecast card, a 10-day forecast list card, and a map preview at the bottom.

  2. Step 2 · 0:54

    Weather Pro · Radar Alerts: Full-screen map background with a floating control card at the bottom.See the flow
    Weather Pro · Radar Alerts

    Full-screen map background with a floating control card at the bottom.

  3. Step 3 · 0:58

    Weather Pro · Radar Alerts: Full-screen map background with a floating control panel at the bottom and navigation buttons at the top corners.See the flow
    Weather Pro · Radar Alerts

    Full-screen map background with a floating control panel at the bottom and navigation buttons at the top corners.

  4. Step 4 · 1:00

    Weather Pro · Radar Alerts: Map background with a floating layer selection menu in the top right and a time-scrubber card at the bottom.See the flow
    Weather Pro · Radar Alerts

    Map background with a floating layer selection menu in the top right and a time-scrubber card at the bottom.

  5. Step 5 · 1:02

    Weather Pro · Radar Alerts: Map background with a centered floating menu and a bottom control card.See the flow
    Weather Pro · Radar Alerts

    Map background with a centered floating menu and a bottom control card.

  6. Step 6 · 1:27

    Weather Pro · Radar Alerts: A map view occupies the background with a centered modal menu for layer selection and a bottom panel for time-based playback controls.See the flow
    Weather Pro · Radar Alerts

    A map view occupies the background with a centered modal menu for layer selection and a bottom panel for time-based playback controls.

  7. Step 7 · 1:44

    Weather Pro · Radar Alerts: Top map, followed by a vertical list of activity cards, and a bottom grid of weather metrics.See the flow
    Weather Pro · Radar Alerts

    Top map, followed by a vertical list of activity cards, and a bottom grid of weather metrics.

  8. Step 8 · 1:45

    Weather Pro · Radar Alerts: A modal window containing a header and a grid of five information cards arranged in two columns.See the flow
    Weather Pro · Radar Alerts

    A modal window containing a header and a grid of five information cards arranged in two columns.

  9. Step 9 · 1:52

    Weather Pro · Radar Alerts: Top map header followed by a vertical list of activity cards, then a two-column grid of weather metrics, and a full-width air quality card at the bottom.See the flow
    Weather Pro · Radar Alerts

    Top map header followed by a vertical list of activity cards, then a two-column grid of weather metrics, and a full-width air quality card at the bottom.

  10. Step 10 · 1:56

    Weather Pro · Radar Alerts: A grid-based layout featuring a large top card, four medium square cards, and two bottom rectangular cards.See the flow
    Weather Pro · Radar Alerts

    A grid-based layout featuring a large top card, four medium square cards, and two bottom rectangular cards.

Windy.app — Wind, Tides, Radar: Exploring Weather Forecast

Open recorded flow

  1. Step 1 · 2:12

    Windy.app — Wind, Tides, Radar: Top navigation bar, horizontal forecast strip, primary action button, map card, list of weather stations, route forecast card, and bottom navigation links.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, horizontal forecast strip, primary action button, map card, list of weather stations, route forecast card, and bottom navigation links.

  2. Step 2 · 2:19

    Windy.app — Wind, Tides, Radar: Top navigation bar, map view with wind overlay, model selection tabs, date selector, scrollable weather data table, and bottom settings button.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, map view with wind overlay, model selection tabs, date selector, scrollable weather data table, and bottom settings button.

  3. Step 3 · 2:26

    Windy.app — Wind, Tides, Radar: Top navigation bar, image carousel, chat link, reviews section, promotional card, and a historical weather chart with a bottom action button.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, image carousel, chat link, reviews section, promotional card, and a historical weather chart with a bottom action button.

  4. Step 4 · 3:03

    Windy.app — Wind, Tides, Radar: Top navigation bar, map with wind rose overlay, year/month filter tabs, central area chart, data table rows, and a bottom navigation button.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, map with wind rose overlay, year/month filter tabs, central area chart, data table rows, and a bottom navigation button.

  5. Step 5 · 3:18

    Windy.app — Wind, Tides, Radar: Top map view, followed by a year selection tab bar, a monthly calendar grid, and a detailed hourly weather data table at the bottom.See the flow
    Windy.app — Wind, Tides, Radar

    Top map view, followed by a year selection tab bar, a monthly calendar grid, and a detailed hourly weather data table at the bottom.

  6. Step 6 · 3:40

    Windy.app — Wind, Tides, Radar: Top navigation bar, map view with overlay, model selection tabs, date navigation, and a detailed weather data table.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, map view with overlay, model selection tabs, date navigation, and a detailed weather data table.

  7. Step 7 · 3:44

    Windy.app — Wind, Tides, Radar: Top navigation bar, map view with overlay, model selection tabs, instructional text, date picker, interactive time-series chart, and a data table at the bottom.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, map view with overlay, model selection tabs, instructional text, date picker, interactive time-series chart, and a data table at the bottom.

  8. Step 8 · 3:46

    Windy.app — Wind, Tides, Radar: Top navigation bar, map view with overlaying toolbar, and a centered educational modal.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, map view with overlaying toolbar, and a centered educational modal.

Precip - Rain Totals & Gauge: Exploring Weather Data

Open recorded flow

  1. Step 1 · 1:18

    Precip - Rain Totals & Gauge: Top navigation bar, map preview, current conditions card, last event card, monthly calendar view, and bottom navigation bar.See the flow
    Precip - Rain Totals & Gauge

    Top navigation bar, map preview, current conditions card, last event card, monthly calendar view, and bottom navigation bar.

  2. Step 2 · 1:21

    Precip - Rain Totals & Gauge: Top search bar, horizontal filter tabs, central map view with floating controls, bottom info card, and bottom navigation bar.See the flow
    Precip - Rain Totals & Gauge

    Top search bar, horizontal filter tabs, central map view with floating controls, bottom info card, and bottom navigation bar.

  3. Step 3 · 1:38

    Precip - Rain Totals & Gauge: Top navigation bar, followed by a monthly calendar grid, a legend, a cumulative precipitation section with filter chips, and a bottom navigation bar.See the flow
    Precip - Rain Totals & Gauge

    Top navigation bar, followed by a monthly calendar grid, a legend, a cumulative precipitation section with filter chips, and a bottom navigation bar.

  4. Step 4 · 1:40

    Precip - Rain Totals & Gauge: Top navigation bar, calendar header, central paywall call-to-action, cumulative precipitation filter list, and bottom navigation bar.See the flow
    Precip - Rain Totals & Gauge

    Top navigation bar, calendar header, central paywall call-to-action, cumulative precipitation filter list, and bottom navigation bar.

  5. Step 5 · 1:44

    Precip - Rain Totals & Gauge: Top navigation bar, followed by a monthly calendar grid, with a bottom-anchored modal sheet containing a chart and action buttons.See the flow
    Precip - Rain Totals & Gauge

    Top navigation bar, followed by a monthly calendar grid, with a bottom-anchored modal sheet containing a chart and action buttons.

Found an example you like?See the whole story.

See the full library See plans