Wetter-App-Design: Ein Redesign des Home-Screens, vorher und nachher

Menschen öffnen eine Wetter-App, um eine Frage zu beantworten: Wie ist es draußen, und was passiert als Nächstes? Der erste Entwurf unten beantwortet sie, und dann macht er einfach weiter, denn er zeigt alles, was die Vorhersage hergibt: den vollständigen Ortsnamen, einen Zeitstempel auf die Sekunde genau, neun Kacheln in 9 px und zehn Tage bunter Icons. Die Überarbeitung behält dieselben Daten und entscheidet, wofür der Home-Screen da ist.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links enthält die erste Karte einen Ortsnamen, einen Zeitstempel, einen Einheitenschalter, eine Temperatur, eine Wetterlage und vier weitere Fakten in einer kleinen Zeile. Darunter folgen drei weiße Kästen mit kleinem Text. Rechts hat der obere Teil des Screens drei Dinge: die Stadt, die Zahl und den Himmel. Alles darunter ist eine Karte auf demselben Blau.

Jede Karte rechts beginnt an derselben linken Kante bei 20 px, und das Wetter-Icon, eine gelbe Sonne hinter einer weißen Wolke, sitzt rechts im ersten Block, gegenüber der Zahl.

Fix 1: die Stadt und eine große Zahl

Vorher

Nachher

Ein Ortsname mit Bundesstaat und Land, ein Zeitstempel, ein Schalter und eine kleine Faktenzeile, gegenüber der Stadt, einer großen Zahl, dem Himmel und der Tagesspanne.

Die erste Karte des Entwurfs ist ein Formular für die Vorhersagedaten. „New York, NY, United States“ sind drei Namen für einen Ort, von dem die Person längst weiß, dass sie sich dort befindet. „Updated 10/24/2026 09:41:12“ ist sekundengenau und für die Person nutzlos: Niemand entscheidet anhand eines Zeitstempels, was er anzieht. Der Einheitenschalter sitzt in der Ecke der wichtigsten Karte.

Die Überarbeitung sagt „New York“ und „72°“ und macht die Zahl 84 px groß, das größte Element auf dem Screen, denn sie ist die Antwort auf die Frage. Der Himmel folgt in Worten, „Teils bewölkt“, dann die Tagesspanne, „H 75° T 61°“. Gefühlte Temperatur und Regenwahrscheinlichkeit haben diesen Block verlassen: Die gefühlte Temperatur ist in die Details gewandert und hat dort eine eigene Karte.

Die Regel zum Wiederverwenden: Der obere Teil eines Home-Screens gehört der einen Antwort. Die Daten, die man als Zweites prüft, kommen eine Stufe tiefer.

Fix 2: sechs Stunden, eine Karte, Platz zum Lesen

Vorher

Nachher

Acht schmale Spalten in einem umrandeten Streifen, gegenüber sechs breiten mit einem Titel in Alltagssprache.

Der Entwurf presst acht Stunden in eine Zeile, also ist jede Spalte dünn und die Schrift winzig. Die Überarbeitung zeigt sechs: Jetzt, 10 Uhr, 11 Uhr, 12 Uhr, 13 Uhr und 14 Uhr. Mit zwei Spalten weniger bekommt jede Stunde ein größeres Icon und eine größere Zahl.

Der Titel der Karte wurde vom Label zum Satz: „Sonnige Abschnitte bis 15 Uhr“. Er sagt dem Leser, worauf die sechs Spalten hinauslaufen, sodass er nicht jedes Icon absuchen muss, um zu finden, wann das Wetter kippt.

Die Regel zum Wiederverwenden: Eine Datenzeile braucht eine Überschrift, die sagt, was man daraus mitnehmen soll.

Fix 3: vier Details, jedes mit großer Zahl

Vorher

Nachher

Neun kleine Kacheln auf einer weißen Karte, gegenüber vier größeren Karten mit der Zahl in großer Schrift.

Neun Kacheln in 9 px behandeln jedes Detail als gleich wichtig, und keine lässt sich auf einen Blick lesen. Druck, Taupunkt und Sichtweite sind echte Daten, aber nicht das, was die Überarbeitung an die erste Stelle setzt.

Sie behält vier: gefühlte Temperatur, Luftfeuchtigkeit, Wind und UV-Index. Jede bekommt eine Karte, ein Icon, ein kleines Label und eine Zahl, die weit größer ist als im Entwurf. „6 Hoch“ und „8 mph NW“ lassen sich auf Armlänge lesen. Die anderen sechs, Druck, Sichtweite, Taupunkt, Sonnenaufgang, Sonnenuntergang und Luftqualität, sind auf diesem Home-Screen nicht dabei.

Eine vollständige Wetter-App braucht trotzdem einen Ort für sie, etwa einen Detail-Screen, und dieses Redesign zeichnet keinen.

Das ist der ehrliche Tausch. Der Home-Screen wird schneller lesbar, und die restlichen Daten brauchen ein zweites Zuhause.

Fix 4: drei Tage mit einem Balken für jede Spanne

Vorher

Nachher

Zehn Textzeilen mit Regenprozent sowie Höchst- und Tiefstwert, gegenüber drei Zeilen mit einem Balken für die Spanne jedes Tages.

Zehn Zeilen „75° / 61°“ sind zehn Summen, die der Leser im Kopf vergleichen muss. Welcher Tag ist der wärmste? Wo wird es kälter? Die Antwort steckt in den Zahlen, und das Auge muss sie ausgraben.

Der Balken übernimmt das Vergleichen. Tiefst- und Höchstwert jedes Tages liegen auf einer gemeinsamen Skala von 50° bis 78°, also bedeutet ein längerer oder weiter rechts liegender Balken einen wärmeren oder breiteren Tag, und die Farbe läuft entlang des Balkens von kühlem Blau zu warmem Gelb. Die Regenprozente haben die Zeilen verlassen. Samstag, der 24. Oktober, ist „Heute“; die nächsten zwei Tage folgen.

Die Regel zum Wiederverwenden: Wenn die Frage lautet, wie sich eine Reihe vergleicht, zeichne den Vergleich.

Die kleineren Fixes

• Eine linke Kante. Der Entwurf nutzte 14 px links und 12 px rechts, und seine Blöcke fluchteten nicht. Jeder Block der Überarbeitung beginnt an der 20-px-Kante, mit 12 px zwischen den Karten.
• Ein tieferes Blau. Der Himmel ist ein Verlauf von #1D4ED8 zu #3B82F6, wobei das eigene Blau des Entwurfs das hellere Ende bildet. Die Karten liegen auf einem marineblauen Schleier mit 24 % (#1E3A8A), sodass sie als Teil des Himmels wirken und nicht wie weiße Kästen darauf.
• Weißer Text auf Blau, der sich lesen lässt. Der weiße 9-px-Text auf #3B82F6 ist das schwächste Paar auf dem Screen. Größere Schrift auf den dunkleren Karten löst das.
• Eine echte Typo-Skala. Der Text ging von 8 bis 13 px auf die iOS-Größen von 13 bis 28 pt, mit der 84-px-Temperatur an der Spitze.
• Vier Tabs statt fünf. Die Überarbeitung entfernt einen Tab.
• Kein Einheitenschalter auf der Hauptkarte. Der F-und-C-Schalter hat die erste Karte verlassen.

Prüfe deine eigene Wetter-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens als Komponenten, jeden Fix als Vorher-nachher-Paar, die Farbvariablen und die iOS-Textstile.

Kostenlose Figma-Datei

Wetter-Home-Screen, vorher und nachher

Beide Screens und jedes reparierte Teil als Figma-Komponenten. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte ein Wetter-App-Home-Screen zuerst zeigen?

Die Stadt und eine große Temperatur, dann den Himmel sowie Höchst- und Tiefstwert des Tages. Alles andere kommt eine Stufe tiefer: die nächsten Stunden, ein paar Details und eine kurze Vorhersage.

Wie viele Details sollte eine Wetter-App auf dem Home-Screen zeigen?

Vier genügen den meisten Leuten: gefühlte Temperatur, Luftfeuchtigkeit, Wind und UV-Index. Druck, Sichtweite, Taupunkt und Sonnenauf- oder -untergang gehören auf einen Detail-Screen.

Wie sollte eine Wetter-App eine Stundenvorhersage zeigen?

Ungefähr sechs Stunden auf einer Karte, mit großen Icons und Zahlen und einem Titel, der sagt, worauf die Stunden hinauslaufen, etwa „Sonnige Abschnitte bis 15 Uhr“.

Wie zeigt man eine Mehrtagesvorhersage in einer App?

Drei Tage auf dem Home-Screen, jeweils mit einem Balken vom Tiefst- zum Höchstwert des Tages auf einer gemeinsamen Skala. Längere Listen gehören auf einen eigenen Screen.

Welche Schriftgröße sollte eine Wetter-App verwenden?

Nutze die Textskala der Plattform, etwa die iOS-Textgrößen, und halte die Temperatur weit größer als alles andere. Der reparierte Screen reicht von 13 bis 28 pt mit einer 84-px-Temperatur.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Ort, Temperaturen und Daten sind für die Übung erfunden.
• Kontrast geprüft mit der WCAG-2.2-Kontrastformel: Weißer Text hat auf jeder reparierten Karte 4,6:1 oder mehr, und der weiße 9-px-Text des Entwurfs auf #3B82F6 kommt auf 3,7:1.
• Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
• Zuerst als Karussell auf App Brainy veröffentlicht.