Grundlagen

TRFX Legacy ist das bewusste Gegenstück zu modernen, glatten Oberflächen. Es will nicht beeindrucken. Es will, dass der Knopf gefunden, gedrückt und verstanden wird.

Haltung

Wenn etwas aussieht wie ein Programm von 2002, vertrauen Menschen darauf, dass es auch wie eines von 2002 funktioniert: vorhersehbar, ohne Ladeanimation, ohne versteckte Gesten. Diese Erwartung ist ein Geschenk. TRFX Legacy nimmt sie ernst.

Merksatz

Langweilig sieht robust aus. Alt sieht bewährt aus. Wer beides ausstrahlt, muss weniger erklären.

Sieben Prinzipien

Langweilig ist ein ZielKein Element darf interessanter sein als der Inhalt. Wenn jemand das Design lobt, war es zu auffällig.
Sieht aus wie das, was es istSchaltflächen sind erhaben, Felder sind vertieft, Gruppen haben einen Rahmen mit Beschriftung. Fläche ist Fläche, Knopf ist Knopf.
Alles hat einen sichtbaren ZustandNormal, Hover, gedrückt, Fokus, deaktiviert, ausgewählt. Keiner davon verlässt sich allein auf Farbe.
Tastatur zuerstJede Funktion lässt sich ohne Maus erreichen. Der Fokus ist eine gepunktete Linie und sieht auch so aus.
Keine ÜberraschungenNichts springt, gleitet oder blendet ein. Einzige Bewegung: ein Fortschrittsbalken, der wirklich Fortschritt zeigt.
Ehrlich bei FehlernMeldungen nennen, was passiert ist und was jetzt möglich ist. Mit Symbol, Text und einer Schaltfläche, die etwas tut.
Funktioniert ohne allesKein Framework, keine Pflicht zu JavaScript, keine externen Schriften. Wenn das Skript fehlt, bleibt die Seite lesbar.

Vorbilder und was daraus wurde

Vorbild	Übernommen	Design
Windows XP (Luna)	Blaue Titelleiste, abgerundete Fensterecken, Aufgabenbereich, grüne Fortschrittsblöcke, orange Hover-Rahmen.	Luna Blau, Olivgrün, Silber
Windows 2000	Graue Flächen, harte 3D-Kanten, Titelleiste mit Verlauf von links nach rechts, keine Rundungen.	Klassisch
Mac OS 9 (Platinum)	Gestreifte Titelleiste mit zentriertem Titel, runde Schaltflächen, doppelter Rahmen für die Standardaktion.	Platinum
SAP Signature Theme	Blaugraue Töne, dichte Tabellen, goldener Akzent für Auswahl und Fokus, nüchterne Beschriftungen.	Signature

Nicht übernommen wurden Dinge, die auch damals schon störten: Marquee-Text, Sound, animierte Mauszeiger und 8-Bit-Farbpaletten, in denen Text nicht lesbar war.

Barrierefreiheit

Alt aussehen heißt nicht, alte Fehler zu wiederholen. Folgendes ist fest eingebaut:

Kontrast: Text und Hintergrund erreichen in jedem Design mindestens 4,5 : 1. Die Seite Farben misst das live. Ausnahme sind deaktivierte Elemente, wie in WCAG vorgesehen.
Fokus: Eine 2 px breite gepunktete Linie, sichtbar auf allen Untergründen. Sie wird nie entfernt.
Tastatur: Reiter (Pfeiltasten, Pos1, Ende), Menüs (Esc schließt), Dialoge (Tab bleibt im Dialog), Tabellenzeilen (Enter oder Leertaste).
Zoom: Alle Größen sind relativ (rem). Bis 200 % Zoom und 320 px Breite gibt es kein horizontales Scrollen der Seite.
Bewegung: Mit „Bewegung reduzieren“ im System steht der laufende Balken still.
Hoher Kontrast: Ein eigenes Design in Schwarz, Weiß und Gelb. Zusätzlich reagiert das CSS auf forced-colors des Betriebssystems.
Nicht nur Farbe: Statuslampen haben immer einen Text, Fehler ein Symbol und einen Satz.

Gut und schlecht

So

Eine Standardaktion pro Dialog, mit is-default markiert.
Beschriftungen als Verben: „Speichern“, „Löschen“, „Schließen“.
Gruppen mit Rahmen und Beschriftung statt loser Felder.
Fehlermeldung mit Symbol, Satz und nächster Handlung.
Systemschriften. Tahoma ist installiert, also wird sie genutzt.

Nicht so

Schatten, Glasflächen, Weichzeichner, Verläufe außerhalb von Titelleisten.
Animationen für Übergänge. Dinge erscheinen einfach.
Symbole ohne Beschriftung, wo Platz für Text ist.
Eigene Farben pro Seite. Dafür gibt es Variablen.
Emojis. Symbole sind SVG im Stil der Oberfläche.

Wann man es nicht nutzen sollte

TRFX Legacy passt zu Verwaltungsoberflächen, Werkzeugen, Admin-Bereichen und Formularen, bei denen Verlässlichkeit zählt. Für Kampagnenseiten, Spiele oder Produkte, die gerade durch ihr modernes Auftreten überzeugen sollen, ist es das falsche Werkzeug. Das ist Absicht und kein Mangel.