Notizen-App-Design: Ein Redesign des Home-Screens, Vorher und Nachher

Eine Notizen-App hat auf ihrem Home-Screen genau eine Aufgabe: dich zu der Notiz bringen, die du willst. Der erste Entwurf unten hat alles, was man zum Finden einer Notiz braucht, malt aber zwölf Haftnotizen in sechs Farben mit 8-px-Text, packt acht Tags in acht weiteren Farben dazu, warnt vor Speicherplatz, bevor du ein Wort gelesen hast, und parkt ein schwebendes Plus auf einer Notiz.

Die Lösung behält jede Funktion und entfernt den Chrome um die Notizen herum. Aus den bunten Tags werden Ordner-Chips mit Haarlinie, die angepinnten Notizen werden zu zwei weißen Kacheln, jede andere Notiz wird eine schlichte Zeile, und die Suche ist ein graues Feld unter einem schlichten Titel.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links schreit alles in derselben Lautstärke. Sechs Haftnotiz-Farben, acht Tag-Farben, ein gelbes Banner und ein gelbes Plus konkurrieren miteinander, und die Notizen selbst sind das Kleinste auf dem Screen.

Rechts liest sich der Screen in der Reihenfolge, in der ein Mensch denkt: Was ist das, kann ich suchen, welcher Ordner, was habe ich angepinnt, was gibt es sonst noch. Die einzigen Farben sind die in den Notizen.

Was sich geändert hat, gemessen

Fix 1: ein schlichter Titel und ein Suchfeld

Vorher

Nachher

Ein winziger Serifen-Schriftzug über Alle Notizen (128), ein Dropdown Änderungsdatum, zwei Ansicht-Umschalter und ein Such-Icon, darunter ein gelbes Speicher-Banner mit einem Button JETZT UPGRADEN. Dagegen ein großer Titel Notizen, ein Drei-Punkte-Menü und ein graues Suchfeld mit dem Wort Suchen darin.

Der Header im Entwurf enthält sieben Bedienelemente, bevor du eine einzige Notiz siehst: ein Menü, einen Schriftzug, eine Anzahl, eine Sortierung, zwei Ansicht-Umschalter und ein Such-Icon. Dann sagt dir ein Banner, dass du 85 % deines Speichers belegt hast, samt Button zum Bezahlen.

Die Lösung gibt dem Screen einen Namen und einen Einstieg. Notizen steht in 34 px fett. Die Suche ist ein Feld in voller Breite mit 10 px Radius in hellem Grau (#F2F2F7), damit es wie ein Feld aussieht und niemand raten muss, dass ein Icon eine Suche ist.

Sortierung und Ansicht gibt es weiterhin, hinter den drei Punkten. Die Speicherwarnung und Upgrade sind ins Profil gewandert, wo man hingeht, um sein Konto zu verwalten.

Regel zum Wiederverwenden: Der obere Bereich eines Screens soll ihn benennen und den Haupteinstieg anbieten. Alles andere kommt hinter ein Menü.

Fix 2: Ordner-Chips statt farbiger Tags

Vorher

Nachher

Acht winzige gefüllte Tags, Arbeit in Rot, Ideen in Amber, Tagebuch in Grün, Privat in Blau, Reisen in Türkis, Rezepte in Orange, Zuhause in Lila und Bücher in Pink, alle in eine Zeile gequetscht. Dagegen Pill-Chips mit Haarlinie mit den Texten Alle, Arbeit, Ideen, Tagebuch und Reisen, wobei Alle schwarz gefüllt ist und der Rest über den rechten Rand hinausläuft.

Acht Tags in acht Farben lassen sich auf Dauer nicht an der Farbe unterscheiden, und bei 9 px sind sie schwer zu treffen. Außerdem füllen sie die Zeile genau aus, sodass die Reihe fertig aussieht und keinen Hinweis gibt, dass es mehr gibt.

Die Lösung nutzt 32-px-Pills mit Haarlinie. Der gewählte, Alle, ist schwarz gefüllt. Die übrigen sind schlicht, und die Ordner nach Reisen wischen vom rechten Rand herein. Ein Chip, der vom Bildschirmrand abgeschnitten wird, sagt dem Daumen, dass er scrollen kann, und niemand braucht einen Pfeil.

Regel zum Wiederverwenden: Zeige die Auswahl mit Füllung, nicht mit einer anderen Farbe pro Element.

Fix 3: Pinne die Notizen, die du nutzt, als zwei weiße Kacheln

Vorher

Nachher

Drei farbige Haftnotizen in einer Reihe, gelb, pink und blau, jede mit einem winzigen Pin und einem Mehr-Icon in den oberen Ecken und 8-px-Text. Dagegen eine Überschrift Angepinnt mit einem amberfarbenen Pin und zwei weiße Kacheln: eine Bleistiftskizze einer Hütte mit dem Titel Hüttenumbau und vor 2 Std., und eine Textvorschau der Launch-Checkliste mit Titel und 9:12.

Im Entwurf sieht eine angepinnte Notiz exakt aus wie jede andere, abgesehen von einem 11-px-Pin-Icon. Die ersten beiden Haftnotizen sind dieselben Notizen, die in der reparierten Version angepinnt sind. Der Pin ändert nichts daran, wie sie behandelt werden, also ändert er nichts daran, wie leicht du sie findest.

Die Lösung gibt angepinnten Notizen einen eigenen Bereich und eine eigene Form. Zwei weiße 169-px-Kacheln mit 12 px Radius und Haarlinie sitzen unter der Überschrift Angepinnt. Die Hüttennotiz zeigt ihre Skizze, die Launch-Checkliste zeigt eine Textvorschau, und jede hat einen 14-pt-Semibold-Titel und darunter ein 12-pt-Datum. Pinnen verändert jetzt, was du siehst, und das ist der Grund zu pinnen.

Regel zum Wiederverwenden: Wenn ein Zustand wichtig ist, gib ihm einen Platz auf dem Screen. Ein kleines Icon auf einer identischen Karte ist kein Platz.

Fix 4: Jede andere Notiz ist eine schlichte Zeile

Vorher

Nachher

Zwei Reihen farbiger Haftnotizen, grün, orange, lila, gelb, pink und blau, jede mit winzigem Fließtext gefüllt und einem Bearbeitet-Datum unten. Dagegen vier schlichte Zeilen auf Weiß: Lissabon im Mai, Sauerteig-Notizen, Buchideen und Morgenseiten, jede mit einem 16-pt-Titel, einem Datum und darunter einer Zeile Text, getrennt durch Haarlinien.

Eine Haftnotiz zeigt eine Notiz komplett, also bekommst du ein paar Zeilen 8-px-Text. Du kannst sie nicht lesen und nicht überfliegen, und zwölf davon füllen einen ganzen Screen. Die sechs Farben bedeuten nichts, also lernt man aus ihnen nichts.

Die Lösung ist eine Liste. Jede Notiz ist ein Titel in 16 pt, ein Datum und eine Zeile ihres Textes in 14 pt, die mit einer Ellipse endet. Die Zeilen sind 57 px hoch mit Haarlinien dazwischen, sodass etwa acht unter die angepinnten Kacheln passen. Du kannst alle Titel auf einen Blick lesen und die richtige Notiz an ihrer ersten Zeile öffnen.

Regel zum Wiederverwenden: Eine Liste ist zum Finden da, eine Karte, um eine einzelne Sache anzusehen. Nimm die, die zur Aufgabe passt.

Fix 5: die Tab-Leiste und der Schreiben-Button

Vorher

Nachher

Der untere Bereich des Entwurfs: ein gelber runder Plus-Button, der auf der letzten Notiz sitzt, über einer flachen Tab-Leiste mit fünf beschrifteten Tabs, Notizen, Täglich, Aufgaben, Tags und Profil, mit gemischten gefüllten und Outline-Icons. Dagegen eine schwebende Kapsel mit vier Icons, eines davon ausgewählt, mit den Notizen, die darunter weiterlaufen, und ein separater runder amberfarbener Schreiben-Button mit einem Stift daneben.

Der Entwurf setzt ein schwebendes Plus auf die letzte Notiz, sodass es Text verdeckt. Die Tab-Leiste hat fünf Tabs mit Beschriftung, und das Notizen-Icon ist gefüllt, während der Rest Outlines sind.

Die Lösung macht zwei Bedienelemente für zwei Aufgaben. Eine 52-px-Kapsel nur mit Icons enthält vier Tabs in einem Icon-Stil, und ein 52-px-Schreiben-Button in Amber mit einem Stift sitzt daneben. Die Notizen laufen unter beiden weiter, sodass sich der Screen wie eine lange Liste anfühlt statt wie eine Liste, die von einer Leiste abgeschnitten wird. Der Tags-Tab ist weg, weil die Ordner-Chips seine Aufgabe übernehmen.

Regel zum Wiederverwenden: Setze den „Neues erstellen“-Button dorthin, wo der Daumen ist, und gib ihm eine eigene Form und Farbe, damit er nicht mit Navigation verwechselt wird.

Die kleineren Fixes

• Jede Funktion bleibt. Die Suche ist das Feld unter dem Titel. Sortierung nach Änderungsdatum und die Umschalter für Raster und Liste liegen hinter den Punkten. Alle Notizen (128) wurde zum Ordner Alle. Der Mehr-Button sitzt in jeder Notiz. Die Speicherwarnung ist ins Profil gewandert.
• Ein Rand. Der Entwurf hat 14 px links und 12 px rechts. Der reparierte Screen nutzt auf beiden Seiten 20, mit 10 px zwischen den Blöcken.
• Ein Akzent. Amber (#F5B301) wird nur für den Pin und den Schreiben-Button verwendet. Alles andere ist Schwarz, Grau und Weiß.
• Eine lesbare Schriftskala. Der Entwurf reicht von 8 bis 14 px. Der reparierte Screen beginnt bei 12 px für Daten und geht bis 34 px für den Titel.
• Echter Inhalt. Die Skizzen-Kachel zeigt eine echte Zeichnung statt eines farbigen Kastens, sodass der Bereich Angepinnt zeigt, worum es in der Notiz geht, bevor du sie öffnest.
• Kein Schriftzug. Der Entwurf hat im Header einen Serifen-Schriftzug, Margin. Der reparierte Screen hat keinen, denn bei Apple Notes ist der Screen-Titel der Header.

Prüfe deinen eigenen Notizen-Screen

Hol dir die Figma-Datei

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

Kostenlose Figma-Datei

Notizen-App-Redesign, vorher und nachher

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

In Figma öffnen

FAQ

Wie sollte der Home-Screen einer Notizen-App gestaltet sein?

Beginne mit einem schlichten Titel und einem Suchfeld, dann Ordner-Chips, einem kurzen Bereich Angepinnt und einer Liste von Notizen mit Titel und je einer Zeile. Halte Warnungen und Upsells aus dem Weg, damit die Notizen das Lauteste auf dem Screen sind.

Sollte eine Notizen-App ein Raster oder eine Liste verwenden?

Eine Liste zum Finden von Notizen, weil Titel und eine Zeile Text auf einen Blick lesbar sind. Ein Raster aus vollen Karten funktioniert nur, wenn jede Karte groß genug zum Lesen ist, und bei 117 px Breite schrumpft der Text auf 8 px.

Wie viele Farben sollte eine Notizen-App verwenden?

Einen Akzent. Apple Notes nutzt ein einziges Amber für den Pin und den Schreiben-Button und hält alles andere neutral, sodass die Notizen die Farbe tragen.

Wohin gehört die Speicherwarnung in einer Notizen-App?

Auf den Profil- oder Einstellungs-Screen, oder als kleiner Hinweis nur dann, wenn der Nutzer nah am Limit ist. Ein Banner über der ersten Notiz lässt jeden Besuch mit einer Verkaufsbotschaft beginnen.

Wie sollten angepinnte Notizen in einer Notizen-App aussehen?

Als eigener Bereich unter der Überschrift Angepinnt, dargestellt als zwei Kacheln mit Vorschau, Titel und Datum. Ein Pin-Icon auf einer identischen Karte macht eine Notiz nicht leichter auffindbar.

Quellen

• Beide Screens stammen von uns, entworfen und gemessen in Figma. Die App, Margin, und alle ihre Daten sind erfunden. Die Notizen stimmen auf beiden Screens überein: Die zwei angepinnten Kacheln sind die ersten beiden Haftnotizen des Entwurfs, und die Zeilen sind die nächsten Haftnotizen mit denselben Titeln, Daten und Anfangszeilen.
• Untersuchtes Muster: Apple Notes auf dem iPhone.
• Foto: eine Bleistiftskizze von Sofya Borboris auf Pexels, begradigt, auf die Zeichnung zugeschnitten und auf Weiß gesetzt. Keine KI.
• Die Icons stammen von Phosphor (MIT). Die Statusleiste ist nach einem vermessenen iPhone-Screenshot gezeichnet. Der Schriftzug des Entwurfs ist Libre Caslon Display Regular.
• Zuerst als Karussell auf App Brainy veröffentlicht.