Entwurf 3 · Name steht

flowfin

Ein Design-System für elf Clients, dessen wichtigste Eigenschaft nicht sichtbar ist: nichts wartet, nichts springt, nichts hängt. Alles Übrige ordnet sich dem unter — die Farbe, die Schrift, sogar die Menge an Gestaltung.

Beide Reihen wirken sofort und lassen sich frei kombinieren. In der App gehören sie in die Einstellungen — Helligkeit oben, Farbsicht darunter.

Farbe

Der Inhalt ist die einzige Farbe

Grund, Flächen und Schrift sind neutral. Filmplakate sind bunt, laut und alle verschieden — jede Farbe der Oberfläche konkurriert mit ihnen und verliert. Das ist auch der Grund, warum Apple und Netflix im Kern grau und schwarz sind.

Es bleibt eine Farbe übrig, und sie hat genau eine Aufgabe: zu zeigen, worauf der Fokus steht. Nirgends sonst.

Warum Blau und nicht etwas anderes. Blau ist der einzige Farbton, der bei allen verbreiteten Formen der Farbfehlsichtigkeit unterscheidbar bleibt. Rot und Grün sind genau das Paar, das am häufigsten zusammenfällt — deshalb gibt es hier auch kein rotes „Fehler" und kein grünes „Gut".

Zustände werden über Form und Text unterschieden, Farbe verstärkt nur. Wer den Farbton nicht sieht, verliert dadurch keine Information.

ground#121216 / #FAFAFA
raise#1C1C22 / #FFFFFF
raise-2#26262E / #F0F0F2
ink#ECECEF / #0E0E11
ink-2#9C9CA6 / #63636B
sel — nur Fokus#5B9CFF / #0A6CE8
Farbsicht

Nicht „Farbe weg", sondern der Farbton, den dieses Auge am besten sieht

Welcher Farbton gut funktioniert, hängt davon ab, welcher Zapfentyp fehlt. Eine einzige „barrierefreie" Farbe kann es deshalb nicht geben — und Schwarz oder Weiß zu nehmen ist die richtige Antwort für genau einen Fall, nämlich wenn gar keine Farbe wahrgenommen wird. Für alle anderen ist es eine Verschlechterung: es nimmt ein Signal weg, das dieses Auge sehr wohl hätte lesen können.

Deshalb eine Auswahl in den Einstellungen statt eines Schalters. Die Voreinstellungen oben wirken sofort — schalte durch und sieh dir die Fokusreihe weiter unten an.

VoreinstellungWas fehltFokusfarbeWarum diese
Standardnichts#5B9CFF Blau, weil es auch ohne eingestellte Voreinstellung bei den häufigsten Störungen noch trägt.
ProtanopieL-Zapfen · Rot#46B8E8 Rot wirkt dunkel und stumpf. Ein Blau mit Zyan-Anteil hat für dieses Auge die höchste Leuchtkraft.
DeuteranopieM-Zapfen · Grün#8AA0FF Häufigste Form. Grün und Rot fallen zusammen, Blau bleibt klar; der Violettstich trennt es zusätzlich vom Grau.
TritanopieS-Zapfen · Blau#FF6F7D Hier wäre Blau falsch — es fällt mit Grün zusammen. Rot ist der Ton, der bleibt.
Achromatopsiealle Farben#FFFFFF Nur hier trägt reine Helligkeit, und nur hier wird der Ring dicker: 4 statt 3 dp.

Unabhängig von der Voreinstellung bleibt die Regel bestehen: kein Zustand hängt allein am Farbton. Die Auswahl trägt zusätzlich Größe und Ring, ein Fehler trägt Text. Die Voreinstellung macht es besser lesbar — sie ist nicht die einzige Absicherung.

Dazu gehört in die Einstellungen ein freier Farbwähler. Diese fünf sind gute Ausgangspunkte, aber Farbfehlsichtigkeit ist ein Spektrum, keine Schublade — anomale Trichromasie liegt zwischen „normal" und den Fällen oben, und wo genau, weiß nur der Betroffene.

Schrift

Die des Systems, in zwei Größen-Welten

Keine mitgelieferte Schriftart. SF Pro auf Apple, Roboto auf Android, Segoe auf Windows. Eine eingebettete Schrift ist das Erste, woran ein Auge merkt, dass es keine native App ansieht — und sie kostet Ladezeit, also genau das, was hier am wenigsten ausgegeben werden darf.

Fernseher · aus 3 m

display 56/700Weiter schauen
shelf 32/640Zuletzt hinzugefügt
tile 24/540Die Reise nach Ixtlan
meta 20/4001974 · 2 Std 4 Min

Telefon · aus 35 cm

display 28/700Weiter schauen
shelf 19/640Zuletzt hinzugefügt
tile 14/540Die Reise nach Ixtlan
meta 12/4001974 · 2 Std 4 Min
Die Kachel

Drei Zustände, und der dritte entscheidet

Der Schacht
2019 · 1 Std 34
Nordlicht
2021 · 2 Std 06
Kalte Küste
lädt …
Die Reise nach Ixtlan
Die Reise nach Ixtlan
1974 · kein Bild
Halbmond
2017 · 1 Std 52
Sommergäste
2003 · 2 Std 18

Geladen — das Bild trägt, der Text ist klein

Titel unter der Kachel, nicht darauf. Text auf Artwork braucht einen Verlauf, und ein Verlauf kostet eine zusätzliche Ebene beim Zeichnen.

Lädt — BlurHash statt Spinner

Jellyfin liefert zu jedem Bild einen BlurHash mit: einen winzigen Farbverlauf, der aussieht wie das kommende Bild. Steht schon in der API, kostet nichts, und ist der größte Teil des Eindrucks, dass nichts wartet.

Kein Bild — ein lesbarer Ersatz, kein graues Loch

Netflix kuratiert seine Motive, deine Bibliothek hat, was gerade da war. Eine Kachelwand mit drei grauen Löchern sieht schlechter aus als eine Liste. Die leere Kachel bekommt den Titel als Motiv und sieht dadurch nach Absicht aus, nicht nach Fehler.

Fokus

Die einzige Stelle mit Farbe

Mit bewegen oder klicken. Schalte oben die Farbsicht-Voreinstellung um und sieh dir denselben Fokus an.

Das Verkaufsargument, als Zahlen

Ein Budget, kein Vorsatz

„Schnell und stabil" ist erst dann ein Versprechen, wenn es eine Zahl hat, die man verfehlen kann. Diese fünf gelten für jede App und werden vor der ersten Zeile Code an den heutigen Clients gemessen — dann heißt „besser" etwas Nachprüfbares.

WasZielWarum diese Zahl
Fokuswechsel< 80 msTastendruck bis erste bewegte Bildzeile. Darüber fühlt sich die Fernbedienung träge an.
Bildaussetzer0 bei 60 fpsÜber eine Reihe von 200 Kacheln gescrollt. Ein einziger Aussetzer ist sichtbar.
Erstes Bild< 1,2 sApp-Start bis zur ersten benutzbaren Kachel, kaltes Startverhalten.
Layout-SprüngekeineDie Kachelgröße steht fest, bevor das Bild da ist.
Wiedergabe-Start< 2 sAuswahl bis Bild, bei Direktwiedergabe im lokalen Netz.
Regeln

Was dieses System verbietet

Farbe zeigt nur den Fokus

Keine farbigen Knöpfe, keine farbigen Überschriften, kein Rot für Fehler und kein Grün für Erfolg. Zustände tragen Form und Text. Genau deshalb kann die Fokusfarbe gefahrlos je nach Farbsicht wechseln: sie ist der einzige Ort, an dem sie etwas bedeutet.

Keine mitgelieferte Schriftart

Die des Systems, auf jeder Plattform. Ausnahmen brauchen einen Grund, der stärker ist als „sieht besser aus".

Nichts wartet sichtbar

Kein Spinner in einer Kachel, kein Layout-Sprung, kein Nachrücken. Was noch nicht da ist, hat trotzdem schon seine Größe.

Fehlendes Artwork ist ein Entwurfsfall

Kein Fehlerfall. Jede Ansicht muss mit einer Bibliothek ohne Bilder noch gut aussehen. Daran scheitern bildlastige Entwürfe sonst.

Keine Gestaltung, die Bildwiederholrate kostet

Kein Weichzeichner über scrollenden Flächen, keine Schatten auf bewegten Elementen, keine Verläufe über Artwork. Wenn eine Verzierung und eine Zahl aus dem Budget in Konflikt geraten, gewinnt die Zahl.

Fernseher und Telefon teilen kein Layout

Gleiche Farben, Schrift, Bewegung und Bildbehandlung. Anordnung, Dichte und Navigation gehören der Plattform.