Kalender-App-Design: Ein Tagesansicht-Redesign, Vorher und Nachher

Eine Kalender-Tagesansicht hat nur einen Job: Sie sagt dir, was als Nächstes kommt und wie viel vom Tag noch übrig ist. Der erste Entwurf unten kennt den ganzen Tag, malt aber fünf Termine in fünf grellen Farben, packt ein Monatsraster dazu und setzt einen roten Alarm obendrauf. Nichts wirkt wichtiger als etwas anderes. Ein Meeting in 19 Minuten bekommt dasselbe Gewicht wie das Mittagessen.

Die Lösung behält jede Funktion und ändert das Gewicht. Lange Meetings sehen lang aus, freie Zeit ist einfach leer, und das eine Meeting, das gerade zählt, bekommt seine eigene ruhige Zeile.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links hat das Auge keinen Ort zum Landen. Header, vier Buttons, ein rotes Banner, ein Monatsraster und ein Stapel gesättigter Karten kämpfen um den ersten Blick. Die Terminkarten sind das Lauteste auf dem Screen, und sie sind alle gleich laut. Rot wird zweimal benutzt: einmal für einen Alarm und einmal für einen Termin, also bedeutet Rot nichts mehr.

Rechts hat der Screen eine klare Reihenfolge von oben nach unten: Wo bin ich in der Woche, was kommt als Nächstes und wie sieht der Rest des Tages aus. Farbe ist leise und hat nur eine Aufgabe: Termine voneinander zu unterscheiden.

Was sich geändert hat, gemessen

Fix 1: aus den Karten eine Timeline machen

Vorher

Nachher

Fünf gestapelte vollfarbige Karten in Blau, Rot, Orange, Grün und Lila, alle gleich hoch, jede mit Glocke, Avataren und Tags, gegenüber einer Timeline mit Stundenbeschriftungen, einem grauen vergangenen Meeting, einer roten Linie bei 9:41 und vier blassen Blöcken mit dünnem Farbbalken, bei der Mittagessen und Kundengespräch höher sind als das Einzelgespräch.

Eine Liste aus Karten sagt „hier sind fünf Dinge“ und sonst nichts. Ein einstündiger Check-in und ein dreistündiger Workshop brauchen gleich viel Platz, und die Lücken dazwischen, genau der Teil, den Leute in einem Kalender eigentlich sehen wollen, sind unsichtbar.

Eine Timeline gibt dem Tag eine Form. Ein 45-Minuten-Meeting ist ein kurzer Block, ein langes ein hoher Block, und freie Zeit ist sichtbarer Weißraum. Die Farbe ist von der ganzen Karte zu einem dünnen Balken links und einem blassen Ton dahinter gewandert, sodass sich der Text sofort lesen lässt und die Farbe trotzdem ein Arbeitsgespräch vom Mittagessen unterscheidet.

Zwei kleine Details tragen Bedeutung. Team Standup ist grau, weil es vorbei ist. Eine rote Linie markiert 9:41, damit du genau siehst, wo du im Tag stehst.

Regel zum Wiederverwenden: Zeige Zeit als Raum und spare die laute Farbe für das eine auf, was gerade passiert.

Fix 2: eine ruhige Zeile für das, was als Nächstes kommt

Vorher

Nachher

Ein rotes Banner mit Glocke und dem Satz Du hast heute 5 Termine. Nächster Termin in 19 Minuten, gegenüber einer weißen Zeile mit Roadmap Review, dann In 19 Min in Rot mit Zoom daneben, drei kleinen Avataren und einem gelben Beitreten-Button.

Der Alarm im Entwurf versucht, dir in einem Satz drei Dinge zu sagen: wie viele Termine es gibt, dass einer als Nächstes kommt und wann. Er liest sich wie eine Fehlermeldung. Niemand braucht die Anzahl der heutigen Termine, denn der Screen zeigt sie.

Die Lösung beantwortet die eine Frage, die Leute beim Öffnen eines Kalenders haben: Was kommt als Nächstes, und kann ich beitreten? Der Name steht zuerst, „In 19 Min“ in Rot ist das einzige Rot auf dem Screen, und ein 36-px-Beitreten-Button sitzt dort, wo ein Daumen ihn erreicht. Die Zeiten passen zusammen: Die Statusleiste zeigt 9:41 und Roadmap Review beginnt um 10:00.

Das Muster ist dasselbe, das Notion Calendar für seinen Beitreten-Button nutzt: das Meeting, der Countdown und eine Aktion.

Regel zum Wiederverwenden: Ersetze ein Banner, das den Tag beschreibt, durch eine Zeile, die beim nächsten Schritt hilft.

Fix 3: den Monat gegen eine Woche tauschen

Vorher

Nachher

Ein vollständiges Monatsraster, fünf Zeilen mit Zahlen und kleinen farbigen Punkten unter vielen davon und heute in einem kleinen gelben Kreis, gegenüber einer einzelnen Wochenzeile mit einem Buchstaben über jeder Zahl, einem großen ausgefüllten gelben Kreis auf Dienstag, dem 3., und der Zeile Dienstag, 3. November darunter.

Ein Monatsraster beantwortet eine Frage, die eine Tagesansicht gar nicht stellt. Es verbraucht 158 px eines Handys, um 30 Tage mit farbigen Punkten zu zeigen, und die Punkte sehen aus wie die Karten darunter, sodass der Screen zwei konkurrierende Zusammenfassungen derselben Sache hat.

Ein Wochenstreifen behält, was eine Tagesansicht braucht: heute und die Tage daneben. Ein ausgefüllter Kreis markiert heute, und das volle Datum steht direkt darunter in Worten. Der Monat ist trotzdem da: November im Header führt zurück zur Monatsansicht, und ein Wisch auf dem Streifen springt eine Woche weiter.

Regel zum Wiederverwenden: Zeige die Zoomstufe, um die es auf dem Screen geht. Eine Tagesansicht braucht eine Woche, keinen Monat.

Fix 4: vier Buttons in ein Menü falten

Vorher

Nachher

Ein Header mit November 2026, zwei Chevrons, einer Wortmarke, einem Heute-Chip, Such- und Einstellungs-Icons und darunter vier gleiche umrandete Buttons: Tag, Woche, Monat und Jahr, gegenüber einem Header mit Zurück-Pfeil und November, einem kleinen Tag-Menü mit Chevron, einem Such-Icon und einem Plus-Icon.

Vier gleiche Buttons sagen, dass alle vier Ansichten gleich wahrscheinlich sind. Sind sie nicht: Leute bleiben in einer Ansicht und wechseln selten. Die Buttons nehmen eine ganze Zeile ein und sehen aus wie die Karten darunter.

Die Lösung faltet sie in ein kleines Menü, das die aktuelle Ansicht zeigt. Woche, Monat und Jahr sind einen Tipp entfernt. Suchen und Hinzufügen werden schlichte 24-px-Icons, Einstellungen bleiben in der Tab-Leiste, und die Wortmarke fliegt raus, denn der Screen ist das Produkt, und Apple Calendar hat auch keine.

Regel zum Wiederverwenden: Wenn Optionen ungleich genutzt werden, zeige die aktuelle und verstecke den Rest dahinter.

Die kleineren Fixes

• Jede Funktion bleibt. Die Pfeile sind ein Wisch auf dem Wochenstreifen. Glocke, Tags und Ort jedes Termins öffnen sich mit dem Termin.
• Dieselben Termine. Alle fünf Termine sind auf beiden Screens, jeder behält seine alte Farbe als Tönung. Team Standup ist grau, weil es vorbei ist, und Roadmap Review ist im Markengelb, weil es als Nächstes kommt.
• Eine schwebende Tab-Leiste. Mit 62 px und dem Tag, der darunter durchläuft, nutzt der Screen die volle Höhe, und die Tab-Leiste sieht nicht mehr wie eine separate Box aus.
• Kein schwebender Button. Das 52-px-Plus saß früher über der letzten Karte und ihren Personen. Jetzt ist es ein Header-Icon.
• Gleichmäßige Ränder. Der Entwurf hat 14 px links und 12 px rechts. Die reparierten Zeilen laufen auf einem Raster von Kante zu Kante.
• Zoom auf beiden. Roadmap Review läuft auf beiden Screens über Zoom, damit Beitreten etwas bedeutet.

Prüfe deine eigene Kalenderansicht

Hol dir die Figma-Datei

Die kostenlose Datei enthält den Junior-Entwurf, den reparierten Screen und jedes Teil als Komponente.

Kostenlose Figma-Datei

Redesign der Kalender-Tagesansicht, vorher und nachher

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

In Figma öffnen

FAQ

Wie sollte die Tagesansicht einer Kalender-App gestaltet sein?

Als Timeline, in der die Blockhöhe der Meetingdauer entspricht, mit ruhigen Tönen und einem dünnen Farbbalken, leerer freier Zeit und einer Linie für die aktuelle Uhrzeit. Setze das nächste Meeting in eine Zeile darüber.

Wie zeigt man das nächste Meeting in einer Kalender-App?

In einer Zeile mit Meetingname, einem Countdown wie „In 19 Min“, den Personen und einem Beitreten-Button, wenn es einen Call gibt. Vermeide ein Banner, das die Termine des Tages zählt.

Sollte eine Kalender-App in der Tagesansicht ein Monatsraster zeigen?

Meistens nein. Ein Wochenstreifen mit einem ausgefüllten Kreis auf heute liefert den Kontext, den eine Tagesansicht braucht, und der Monat bleibt vom Header aus einen Tipp entfernt.

Wie viele Ansichts-Buttons braucht eine Kalender-App?

Einen. Zeige die aktuelle Ansicht in einem kleinen Menü, hier Tag, und lege Woche, Monat und Jahr hinein.

Warum sind vollfarbige Terminkarten in einem Kalender schlecht?

Wenn jeder Termin gesättigt ist, wirkt jeder Termin dringend, und Farbe trennt sie nicht mehr. Ein blasser Ton mit dünnem Farbbalken behält die Kategorie und lässt den Text lesbar.

Welche Farbe sollte der Beitreten-Button eines Kalenders haben?

Die Markenfarbe, als der eine gefüllte Button auf dem Screen, und Rot bleibt nur dem Countdown vorbehalten.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die App Sundial, die Personen und die Termine sind erfunden. Die Zeiten sind stimmig: Die Statusleiste zeigt 9:41, Roadmap Review beginnt um 10:00, und der 3. November 2026 ist ein Dienstag.
• Text- und Kontrastprüfungen: Tinte #1B1A17 auf dem Ringelblumengelb #FFC233 ergibt 10,8 zu 1. Eventtext auf seiner Tönung ergibt 8,1 (Gelb), 6,5 (Orange), 6,8 (Grün) und 8,4 (Lila) zu 1. Das rote „In 19 Min“, #D70015, auf Weiß ergibt 5,4 zu 1.
• Untersuchtes Muster: die Tagesansicht von Apple Calendar (Zurück zum Monat oben links, Suchen und Hinzufügen als schlichte Icons, ein Wochenstreifen mit einem ausgefüllten Heute, getönte Blöcke mit Farbbalken, leerer Raum als freie Zeit) und der Beitreten-Button von Notion Calendar.
• Wortmarke im Vorher-Screen: Playfair Display Bold. Avatarfotos von Pexels: Peter Platou, Son Hoa Nguyen, Luthfi Ramaditya und Carlos Gutierrez.
• Zuerst veröffentlicht als Karussell auf App Brainy.