Designsprache Quelltext auf GitHub
Drei Ebenen einer Oberfläche

Aussehen. Bedienung. Kontext.

Wähle eine Designsprache, prüfe ihre Bedienung und passe sie an die Nutzung an. Drei getrennte Entscheidungen, die zusammen eine brauchbare Oberfläche ergeben.

Referenzkatalog · Designsprache

Stil‑Katalog
37 Wege, dieselbe Oberfläche zu bauen

Jeder Eintrag zeigt exakt dieselbe Oberfläche — eine Projektliste mit Kopfzeile, drei Einträgen, Suchfeld und zwei Schaltflächen. Was sich ändert, ist ausschließlich die Gestaltung. Dadurch wird sichtbar, was ein Stil tatsächlich entscheidet — und was nur Geschmack ist.

37Einträge
10Familien
1Referenz‑UI
8Parameter

Die acht Parameter

Stilnamen sind austauschbar. Was einen Stil ausmacht, sind acht Größen — und jede davon ist eine Entscheidung, die man in Tokens schreiben kann. Wer sie kennt, kann Stile mischen statt kopieren.

Radius01
Von 0 px bis vollrund. Der am stärksten unterschätzte Marken­träger.0 kompromisslos · 6 werkzeughaft · 16+ freundlich
Kontrast02
Der Abstand zwischen Grund und Schrift. Entscheidet, ob eine Oberfläche ruhig oder laut wirkt.Text und Bedienelemente getrennt prüfen
Tiefe03
Wie Hierarchie entsteht: gar nicht, über Linien, über Schatten, über Unschärfe oder über echte z‑Achse.Der teuerste Parameter im Cross‑Platform‑Betrieb
Dichte04
Information pro Bildschirm. Sie ergibt sich aus Zeilenhöhe, Abständen und der Zahl gleichzeitig sichtbarer Inhalte.Bloomberg → Apple‑Marketing
Farbe05
Wie viel Bedeutung Farbe trägt: monochrom plus Akzent, Flächenfarbe oder Verlauf.Der stärkste Wiedererkennungsträger
Typografie06
Grotesk, Serif, Monospace oder Display — und in welchem Gewichtsband.Der zweitstärkste, meist zu vorsichtig gewählt
Motion07
Dauer und Kurve. Die Persönlichkeit einer Oberfläche — und der Parameter, der am häufigsten vergessen wird.0 ms · 120 ms linear · 400 ms Spring mit Überschwingen
Textur08
Die Beschaffenheit einer Fläche: glatt, gekörnt, gerastert oder stofflich.Kein Muster · feines Korn · sichtbares Druckraster

Modernistische Schulen

Das Fundament. Hier wurde entschieden, dass ein Raster, eine Grundform und ein Abstand Bedeutung tragen können — alles Spätere ist Zustimmung oder Widerspruch dazu.

3 Einträge
International Typographic Style · Zürich
Raster 12 Spalten · Basis 24 px

Projekte

12

NameZeitStatus
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
Spalte 1–9
Asymmetrische Satzachse · Trennung nur über Linie und Abstand
01

1950-heute

Ein modulares Raster trägt die gesamte Hierarchie; Ordnung entsteht aus Position, Größe und Weißraum statt aus Dekoration.

Haltbar5
Erkennbar3
Aufwand3
Dichte4

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
quadrat · kreis · dreieck
02

1919-1933, Wiederaufnahme ab ca. 1960 bis heute

Bedeutung wird von Grundform und Grundfarbe getragen, nicht von Ornament – Kreis, Quadrat und Dreieck sind Vokabeln, keine Dekoration.

Haltbar4
Erkennbar5
Aufwand4
Dichte3

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
03

1917-1931, Nachwirkung bis heute

Das Layout selbst ist das Bild: ungleich große Rechtecke, getrennt durch schwarze Balken unterschiedlicher Stärke, balanciert ohne Symmetrie.

Haltbar3
Erkennbar5
Aufwand4
Dichte2

Postmoderne & Rebellion

Die Gegenbewegungen. Jede bricht eine Regel der Modernisten — und braucht sie dafür als Bezugspunkt.

3 Einträge

Projekte

Katalog / Memphis
12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
04

1981-1988, Revival ab ca. 2016 bis heute

Farben und Formen werden nach Spannung statt nach Harmonie kombiniert; Dekoration darf nichts bedeuten und muss nichts rechtfertigen. Das Objekt spricht, statt zu dienen.

Haltbar2
Erkennbar5
Aufwand4
Dichte2
Basel → San Diego

Projekte

12
  • 01 Nexus vor 2 Std. Aktiv
  • 02 Autowrite Studio gestern Aktiv
  • 03 Balance Ally vor 4 Tagen Pausiert
05

1968-1998, Zitate und Revivals bis heute

Das Raster wird nicht abgeschafft, sondern sichtbar gebrochen - man muss die Ordnung erkennen können, damit die Verletzung Bedeutung hat. Typografie transportiert Ton und Lautstärke, nicht nur Inhalt.

Haltbar3
Erkennbar5
Aufwand5
Dichte4

Projekte

12
Nexus vor 2 Std. Aktiv
Autowrite Studio gestern Aktiv
Balance Ally vor 4 Tagen Pausiert

Diese Seite verwendet keine Schriftdatei, kein Framework und kein Bild. Alle Angaben ohne Gewähr.

letzte Aenderung: 2026-08-30   4 KB   text/html; charset=utf-8

Katalog visueller Stile — Eintrag 06
06

1993-1998 als technische Notwendigkeit, ab 2014 als bewusste Haltung

Nichts hinzufügen, was die Aufgabe nicht braucht. Die Struktur des Dokuments ist die Gestaltung, und der Werkszustand des Browsers ist ein legitimes Ergebnis.

Haltbar5
Erkennbar4
Aufwand1
Dichte4

Digitale Epochen

Die drei Wellen, die Bildschirmoberflächen tatsächlich durchlaufen haben. Sie erklären, warum heutige Erwartungen so aussehen, wie sie aussehen.

3 Einträge

Projekte

12
  • ◆ Nexus vor 2 Std. Aktiv ›
  • ✎ Autowrite Studio gestern Aktiv ›
  • ◑ Balance Ally vor 4 Tagen Pausiert ›
07

1984-2013 (Hochphase 2000-2012), Nische bis heute

Jedes Bedienelement behauptet, ein physisches Objekt zu sein: Licht fällt von oben, Kanten haben Volumen, Oberflächen haben Material. Affordanz wird nicht signalisiert, sondern simuliert.

Haltbar2
Erkennbar5
Aufwand5
Dichte4

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
08

2010-heute (Flat 1.0 2010-2015, Flat 2.0 ab ca. 2015)

Der Bildschirm gibt zu, dass er ein Bildschirm ist: keine simulierte Tiefe, sondern Farbe, Typografie und Weißraum als einzige Träger von Struktur und Bedeutung. Flat 2.0 nimmt genau so viel Tiefe zurück, wie für erkennbare Bedienbarkeit nötig ist - eine Schattenstufe, kein Millimeter mehr.

Haltbar3
Erkennbar2
Aufwand1
Dichte3

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
09

2014-heute (M3 2021, M3 Expressive ab Mai 2025)

Ein einziger Seed-Farbwert erzeugt algorithmisch das gesamte Farbsystem, und Tiefe entsteht nicht durch Schatten, sondern dadurch, dass höhere Flächen tonal näher an die Akzentfarbe rücken. Expressive fügt dem eine zweite Ebene hinzu: Form und Bewegung tragen Bedeutung, nicht nur Farbe.

Haltbar3
Erkennbar4
Aufwand4
Dichte2

Weiche Materialität

Drei Versuche, Tiefe zurückzuholen, ohne zum Skeuomorphismus zurückzukehren. Einer davon ist ein Lehrstück in Barrierefreiheit.

3 Einträge

Projekte

12
  • Nexus
    vor 2 Std.
    Aktiv
  • Autowrite Studio
    gestern
    Aktiv
  • Balance Ally
    vor 4 Tagen
    Pausiert
10

2019-2021 (Peak Anfang 2020), seither Zitat-Stil

Element und Hintergrund haben exakt dieselbe Farbe; Form entsteht ausschließlich aus einem hellen Schatten oben links und einem dunklen unten rechts, so als sei die Oberfläche aus weichem Kunststoff ausgestellt oder eingedrückt.

Haltbar1
Erkennbar5
Aufwand2
Dichte2

Projekte

12
  • N
    Nexus
    vor 2 Std.
    Aktiv
  • A
    Autowrite Studio
    gestern
    Aktiv
  • B
    Balance Ally
    vor 4 Tagen
    Pausiert
11

2007 (Windows Aero) - heute; Web-Welle 2020/21, Plattform-Renaissance ab 2025

Bedienflächen sind kein Papier, sondern Glas: sie liegen über dem Inhalt, lassen ihn unscharf und übersättigt durchscheinen und markieren ihre Kante nur durch eine Lichtbrechung von einem Pixel.

Haltbar3
Erkennbar4
Aufwand4
Dichte2

Projekte

12
  • N
    Nexus
    vor 2 Std.
    Aktiv
  • A
    Autowrite Studio
    gestern
    Aktiv
  • B
    Balance Ally
    vor 4 Tagen
    Pausiert
12

2021-2023 (Peak 2022), seither Nischenstil für Onboarding und Consumer

Interface-Elemente sind dicke, weiche Knetmasse-Objekte: sehr große Radien, pastellige Volltöne, ein Lichthighlight innen oben und ein Schatten innen unten geben ihnen Volumen, ein zweiter weicher Schatten hebt sie von der Fläche ab.

Haltbar2
Erkennbar4
Aufwand2
Dichte1

Produkt-Ästhetik heute

Was 2026 tatsächlich gebaut wird. Sechs Sprachen, die sich in echten Produkten bewährt haben — und die realistischsten Kandidaten für eine eigene Marke.

6 Einträge
sg / workspace ⌘K

Projekte

12 AlleAktiv
Nexus vor 2 Std. Aktiv
Autowrite Studio gestern Aktiv
Balance Ally vor 4 Tagen Pausiert
12 Projekte · 2 aktiv sync 14:02
13

2019-heute

Tiefe entsteht nicht durch Schatten, sondern durch minimal aufgehellte Layer und 1px-Hairlines; Farbe ist bis auf einen einzigen Akzent verboten, damit Zustand und Hierarchie allein aus Helligkeitsstufen und Monospace-Metadaten lesbar bleiben.

Haltbar4
Erkennbar3
Aufwand3
Dichte4
Arbeitsmappe August 2026

Projekte

12 im Bestand

Drei Arbeiten liegen offen auf dem Tisch, neun ruhen im Archiv. Der Bestand wird jeden Morgen gesichert; Notizen, Verlauf und Entwürfe bleiben beim jeweiligen Eintrag.

  • 01 Nexus vor 2 Std. Aktiv
  • 02 Autowrite Studio gestern Aktiv
  • 03 Balance Ally vor 4 Tagen Pausiert
Zuletzt gesichert um 14:02 Uhr
14

2012-heute, dominant seit ~2020

Die Oberfläche gibt sich als bedrucktes Blatt aus: warmes Papier statt Reinweiß, eine Serifenschrift trägt die Inhaltsebene, und Struktur entsteht aus Weißraum, Linealen und typografischer Hierarchie statt aus Kästen und Farbe.

Haltbar5
Erkennbar3
Aufwand3
Dichte2
Projekte // 2026

Projekte

12
N Nexus vor 2 Std. Aktiv
A Autowrite Studio gestern Aktiv
B Balance Ally vor 4 Tagen Pausiert
12 Treffer
15

2014-heute, kommerzieller Durchbruch ab 2022

Jedes Element bekennt sich als physisches Objekt: dicke schwarze Kontur, Volltonfarbe, ein harter Schlagschatten ohne Unschärfe - und beim Drücken fällt es hörbar in seinen eigenen Schatten hinein.

Haltbar2
Erkennbar5
Aufwand2
Dichte3
[-] ~/projekte ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── [×]
❯ proj ls --all

Projekte

12
├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
01 Nexus ······························································································································ vor 2 Std. Aktiv
02 Autowrite Studio ······························································································································ gestern Aktiv
03 Balance Ally ······························································································································ vor 4 Tagen Pausiert
/
NORMAL │ 3/12 sichtbar │ ^N neu │ ^I import UTF-8
16

1970-heute (als bewusster Designstil: ca. 2019-heute)

Das Zeichenraster ist das Layoutsystem: alles sitzt auf ganzzahligen Spalten- und Zeilenpositionen, und jede Trennung wird aus Text gebaut statt aus Grafik.

Haltbar4
Erkennbar5
Aufwand2
Dichte4
LIVE BUILDS14 FEHLER2 P95118ms QUEUE0 UPTIME99,96% SYNC

Projekte

12
Aktiv
8+2
Pausiert
3±0
Archiviert
1−1
⌕
# Name Zuletzt Status Trend 7T Δ
01 Nexus vor 2 Std. Aktiv +12%
02 Autowrite Studio gestern Aktiv +3%
03 Balance Ally vor 4 Tagen Pausiert −8%
Commits / 24 h max 41
00:0006:0012:0018:0024:00
Laufzeit
Build ø4,2 s
Bundle218 kB
Tests312/312
Deploys27
Offen2
12 ZEILEN │ 3 SICHTBAR │ SORT: ZULETZT ↓ │ VERBUNDEN REFRESH 5 s │ 14:02:37 CET
17

1982-heute

Bildschirmfläche ist die knappste Ressource, also arbeitet jede Pixelzeile: Werte stehen nebeneinander statt hintereinander, und Farbe bedeutet ausschließlich Richtung oder Zustand.

Haltbar5
Erkennbar4
Aufwand4
Dichte5

Projekte

12
Nexus vor 2 Std. Aktiv
Autowrite Studio gestern Aktiv
Balance Ally vor 4 Tagen Pausiert
18

2023-heute (Vorläufer ab 2007)

Hierarchie wird nicht gefärbt, sondern gestapelt: Wichtiges kommt näher, Unwichtiges weicht zurück, und jede Fläche ist ein lichtdurchlässiges Material statt einer Farbe.

Haltbar3
Erkennbar4
Aufwand5
Dichte2

Norm & Beschränkung

Stile, deren Werte nicht der Gestalter gesetzt hat, sondern eine Prüfvorschrift, eine Darstellungsnorm oder die Physik des Displays. Hier war nichts Geschmack.

2 Einträge
Beta Dies ist ein neuer Dienst. Ihre Rückmeldung hilft uns, ihn zu verbessern.

Projekte

12

Wählen Sie ein Projekt aus, um seine Einstellungen zu ändern.

Alle Maße stammen aus der Prüfvorschrift, nicht aus dem Entwurf: Fließtext 19px, Zeilenhöhen in 5px-Schritten, Radius 0px, Sockel 2px, Fokus #ffdd00 mit 4px schwarzer Unterkante.

19

2012-heute

Jeder Wert der Oberfläche wird aus einer Barrierefreiheits- und Verständlichkeitsprüfung abgeleitet statt aus Komposition; der einzige auffällige Farbton ist kein Markenzeichen, sondern der Tastaturfokus.

Haltbar5
Erkennbar4
Aufwand2
Dichte2
E-Ink 4 Bit 16 Stufen Kein Alpha 82 %

Projekte

Zuletzt geöffnet 12
Nexus vor 2 Std. Aktiv
Autowrite Studio gestern Aktiv
Balance Ally vor 4 Tagen Pausiert
Volltext
Vollbildaufbau 480 ms Seite 1 / 4
Graukeil 16
20

2004-heute

Kontrast ist kein Gestaltungsmittel, sondern eine gedeckelte Ressource: Wenn Tinte nie Schwarz und Grund nie Weiß wird, es keine Farbe, keine Transparenz und keine Bewegung gibt, muss die gesamte Hierarchie aus Größe, Fettung, Form, Füllgrad und Invertierung entstehen - und jeder Halbton aus einem Dither-Raster statt aus einem Alphawert.

Haltbar4
Erkennbar3
Aufwand2
Dichte2

Nostalgie & Subkultur

Stile, die eine bestimmte Zeit zitieren. Sie erzeugen sofort Zugehörigkeit — und altern genau deshalb am schnellsten.

3 Einträge

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
21

1998-2013 (Y2K 1998-2004, Frutiger Aero 2004-2013), Revival seit 2022

Technik wird durch Natur und Licht humanisiert: jede Oberfläche ist ein nasses, angeleuchtetes Objekt, das man anfassen möchte. Glanz ist kein Dekor, sondern die Behauptung, dass die Zukunft freundlich wird.

Haltbar1
Erkennbar5
Aufwand5
Dichte3

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
22

2010-heute (Kernphase 2011-2018), Vorbilder 1982-1989

Nostalgie für eine Zukunft, die nie eingetroffen ist: ein Neonhorizont mit Fluchtpunkt, auf den man ewig zufährt, plus die sichtbaren Fehler des Mediums, das ihn transportiert.

Haltbar2
Erkennbar5
Aufwand4
Dichte3
SYS 04 CH-7 REC 0032

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
23

1968-1982 (Vorbilder), Wiederaufnahme als Designsprache seit ca. 2012

Die Zukunft als benutztes Industriegerät: Ein Interface ist eine beschriftete Maschine mit Gehäuse, Kanalnummer und Warnstreifen -- keine schwebende Fläche, sondern ein Ding, an dem jemand arbeitet.

Haltbar4
Erkennbar4
Aufwand3
Dichte4

Ausdruck & Geste

Von der weichen Form über die bewusste Überfüllung bis zur sichtbaren Handschrift. Was sie verbindet, ist der Widerspruch gegen die Anonymität des Rasters.

4 Einträge

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
24

2017-heute (Peak 2019-2021), Vorläufer ab 1930er

Nichts im Layout ist rechtwinklig oder symmetrisch: jede Fläche bekommt einen leicht anderen, unregelmäßigen Radius, damit die Oberfläche gewachsen statt konstruiert wirkt. Farbe und Form simulieren Natur - Erde, Blatt, Stein - um digitale Strenge in Ruhe zu übersetzen.

Haltbar2
Erkennbar4
Aufwand3
Dichte2

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
25

Wurzeln 1954-1996, digitale Welle 2020-heute

Überfüllung als Haltung: Statt Elemente wegzunehmen, werden sie geschichtet, gedreht, gerahmt und miteinander kollidieren gelassen, bis die Fläche eine Persönlichkeit hat. Ordnung entsteht nicht durch Weißraum, sondern durch Kontrastführung innerhalb des Chaos.

Haltbar2
Erkennbar5
Aufwand5
Dichte5

Projekte

12
  • Nexus vor 2 Std. Aktiv
  • Autowrite Studio gestern Aktiv
  • Balance Ally vor 4 Tagen Pausiert
26

2018-heute (Peak ab 2023)

Ein dunkler, fast schwarzer Grund trägt zwei bis fünf große, weit ausgeblurte Farbfelder, die wie Licht hinter Milchglas wirken; darauf liegt bewusst minimale Typografie und ein feines Liniensystem. Die Stimmung kommt komplett aus dem Hintergrund, nicht aus den Komponenten.

Haltbar3
Erkennbar1
Aufwand2
Dichte1
Entwurf Idee prüfen, nicht Pixel

Projekte

12
01 Nexus vor 2 Std. Aktiv
02 Autowrite Studio gestern Aktiv
03 Balance Ally vor 4 Tagen Pausiert
27

2008-heute

Die Kantengeometrie wird pro Element erzeugt statt deklariert, und Flächendeckung entsteht aus Linienabstand statt aus Deckkraft; die sichtbare Unfertigkeit ist kein Mangel, sondern eine Einladung, über die Idee zu streiten statt über die Pixel.

Haltbar4
Erkennbar5
Aufwand3
Dichte2

Weitere Pole

Vier Extreme, die als Zutat oft nützlicher sind denn als ganzer Stil.

4 Einträge
Werkverzeichnis Folge II  ·  Seite 1

Projekte

Einträge 12

Drei Arbeiten stehen derzeit im Satz. Zwei laufen, eine ruht — das Verzeichnis führt sie in der Reihenfolge ihrer letzten Bearbeitung und hält den Stand der Woche fest.

  • I Nexus vor 2 Std.
    ■Aktiv
  • II Autowrite Studio gestern
    ■Aktiv
  • III Balance Ally vor 4 Tagen
    □Pausiert
Register
❧
28

1920er (Print) - Web-Adaption ab ca. 2010, aktuell

Hierarchie entsteht aus Schriftschnitt, Laufweite und Weißraum -- nicht aus Boxen, Schatten oder Farbflächen. Der Bildschirm wird als Papierseite mit Satzspiegel behandelt.

Haltbar5
Erkennbar4
Aufwand3
Dichte3

Projekte

12 _ □ X
  • Nexus vor 2 Std.
    Aktiv
  • Autowrite Studio gestern
    Aktiv
  • Balance Ally vor 4 Tagen
    Pausiert
>
BEREIT 3 / 12 v0.8
29

1983-1995 (Ursprung) - Revival ab ca. 2008, aktuell

Alles rastet auf ein sichtbares Pixelgitter: harte Kanten, ganzzahlige Größen, begrenzte Palette. Weichheit jeder Art -- Verlauf, Blur, Antialiasing, Zwischenwerte -- ist Stilbruch.

Haltbar3
Erkennbar5
Aufwand3
Dichte4

Projekte

★12
Wochenziel8 / 12
  • ● Nexus vor 2 Std. Aktiv
  • ✎ Autowrite Studio gestern Aktiv
  • ☰ Balance Ally vor 4 Tagen Pausiert
30

ca. 2015-heute, Hochphase ab 2019

Jedes Bedienelement ist ein physisches Objekt mit Dicke: es hat eine sichtbare Unterkante, lässt sich hineindrücken und federt zurück. Farbe und Rundung sagen 'ungefährlich, mach weiter'.

Haltbar2
Erkennbar4
Aufwand2
Dichte2
ProjektindexVerzeichnis aller Arbeitsstände

Projekte

12 NEU nach Aktivität
1 Nexus vor 2 Std. Aktiv
2 Autowrite Studio gestern Aktiv
3 Balance Ally vor 4 Tagen Pausiert
Import aus Ordner, Archiv oder Fremdsystem.
Zuletzt importiert am 24.08.2026.
Aktivität 7 Tage
NexusAnwendung318+42
Autowrite StudioWerkzeug174+9
Balance AllyEntwurf610
KarteiBibliothek1.093+205
FahrtenbuchAnwendung27-3
Offene Aufgaben 23
Meldungen
Meistgeöffnet
Speicher
Belegt41,2 GB
Frei58,8 GB
Dateien12.480
Sicherung06:00
Zuletzt geöffnet
Projektindex — interner Arbeitsstand, Stand 30.08.2026
31

1996-heute

Farbe kodiert Taxonomie statt Semantik: eine durchnummerierte Kette gleichrangiger Kategoriefarben liegt als 3px-Kopfbalken auf den Kästen, keine davon ist Leitfarbe und keine bedeutet einen Zustand - Hierarchie entsteht ausschließlich aus Fett, 1px-Linien und einem Sprung in der Schriftgröße.

Haltbar4
Erkennbar4
Aufwand3
Dichte5

Plattformsprachen

Gestaltung aus Plattformen und Designsystemen: Apple, Samsung, Microsoft, GNOME, KDE und IBM. Die Demos übertragen ihre Hierarchien auf dieselbe Projektliste.

6 Einträge
Arbeitsbereich

Projekte

12
  • Nexusvor 2 Std.Aktiv
  • Autowrite StudiogesternAktiv
  • Balance Allyvor 4 TagenPausiert

Deckende Inhalte · separate Materialschicht für Navigation und Aktionen

32

2025–heute; vorgestellt am 9. Juni 2025

Die Bedienung liegt als eigene Materialschicht über dem Inhalt. Glas kennzeichnet Navigation und Aktionen; die Projektliste bleibt eine ruhige, deckende Lesefläche.

Haltbar3
Erkennbar4
Aufwand4
Dichte2

Dein Arbeitsbereich

Projekte

12
  • Nexusvor 2 Std.Aktiv
  • Autowrite StudiogesternAktiv
  • Balance Allyvor 4 TagenPausiert

Betrachtungsbereich links · Interaktionsbereich rechts · eigene breite Adaption

33

2018–heute; hier das Prinzip der Betrachtungs- und Interaktionsbereiche

Information zuerst erfassen, danach bequem handeln: Ein ruhiger Betrachtungsbereich gibt dem Titel Raum, während zusammengehörige Aufgaben in gut erreichbaren Fokusblöcken stehen.

Haltbar4
Erkennbar3
Aufwand3
Dichte2

Projekte

12
  • Nexusvor 2 Std.Aktiv
  • Autowrite StudiogesternAktiv
  • Balance Allyvor 4 TagenPausiert

Microsoft / Fluent · eigener Web-Vergleich

34

Zeitgenössisches Designsystem · eigene Web-Adaption

Ruhige Materialebenen und eine klare Befehlsleiste halten Navigation, Inhalt und Aktionen auseinander.

Haltbar4
Erkennbar3
Aufwand3
Dichte4

Projekte

12
  • Nexusvor 2 Std.Aktiv
  • Autowrite StudiogesternAktiv
  • Balance Allyvor 4 TagenPausiert

GNOME / Adwaita · eigener Web-Vergleich

35

Zeitgenössisches Designsystem · eigene Web-Adaption

Ein fokussiertes Fenster bündelt wenige Hauptaktionen im Kopf und zusammengehörige Inhalte in einer ruhigen Liste.

Haltbar4
Erkennbar3
Aufwand2
Dichte3
Arbeitsbereich / Projekte

Projekte

12
  • Nexusvor 2 Std.Aktiv
  • Autowrite StudiogesternAktiv
  • Balance Allyvor 4 TagenPausiert

KDE / Breeze · eigener Web-Vergleich

36

Zeitgenössisches Designsystem · eigene Web-Adaption

Eine einfache Ausgangsansicht führt zu leistungsfähigen Werkzeugen, ohne Orientierung und anpassbare Arbeitsbereiche aufzugeben.

Haltbar4
Erkennbar3
Aufwand3
Dichte5
Arbeitsbereich

Projekte

12
  • NameGeändertStatus
  • Nexusvor 2 Std.Aktiv
  • Autowrite StudiogesternAktiv
  • Balance Allyvor 4 TagenPausiert

IBM / Carbon · eigener Web-Vergleich

37

Zeitgenössisches Designsystem · eigene Web-Adaption

Ein strenges Raster und präzise Typografie machen umfangreiche Arbeitsabläufe überschaubar und Daten gut vergleichbar.

Haltbar4
Erkennbar3
Aufwand3
Dichte5
Entscheidungsraster

Haltbarkeit gegen Wiedererkennung

Die beiden Größen stehen in Spannung: Was sofort erkennbar ist, altert meist schneller. Alle Werte sind ganzzahlig von 1 bis 5, deshalb ein Raster statt eines Streudiagramms — Einträge auf derselben Position verdecken sich hier nicht.

Alle 37 im Vergleich

Die harten Parameter nebeneinander. Spalten mit Zahlen sind sortierbar — Kopfzeile anklicken. Ein Klick auf den Namen öffnet den vollständigen Eintrag.

Nr.StilRadiusKontrastDichteTiefe
01 Modernistische Schulen 0px sehr hoch luftig keine; Trennung ausschließlich über 1px-Linien, Abstand und Fluchtlinien 5 3 3
02 Modernistische Schulen 0px oder 50% sehr hoch mittel keine echte Tiefe; Schichtung durch Überlagerung von Flächen und harte Versatz-Schatten (5px, 0 Blur) 4 5 4
03 Modernistische Schulen 0px sehr hoch mittel keine; Ordnung entsteht ausschließlich über die Stärke der schwarzen Balken 3 5 4
04 Postmoderne & Rebellion bewusst gemischt: 0px, 999px und asymmetrische Kombinationen nebeneinander hoch mittel keine echte Tiefe; Ebenen entstehen über harte Offset-Schatten (0 Blur) und Rotation, nicht über Licht 2 5 4
05 Postmoderne & Rebellion 0px, ausnahmslos sehr hoch dicht keine Schatten; Tiefe entsteht durch Überlagerung, Transparenz-Echos und Beschnitt an der Kante 3 5 5
06 Postmoderne & Rebellion 0px sehr hoch (Schwarz auf Weiß, 21:1) - außer bei den Systemgrautönen der Widgets dicht keine; Trennung ausschließlich über 1px-Linien, Tabellenraster und Leerzeilen 5 4 1
07 Digitale Epochen 6-12px (Buttons 5-6px, Icon-Kacheln 9-10px, Suchfeld als 15px-Pille) mittel dicht maximal simuliert: Bevel + Emboss, inset- und drop-shadow gleichzeitig, 3-5 box-shadow-Ebenen pro Element 2 5 5
08 Digitale Epochen 0px (1.0) bzw. 4-6px (2.0) hoch mittel bis luftig - große Typo, große Farbflächen, wenig Elemente pro Bildschirm keine; Trennung über Farbfläche, 4px-Fugen und 1px-Linien. Flat 2.0 fügt genau eine Schattenstufe plus 1px-Border als Container-Marker hinzu 3 2 1
09 Digitale Epochen 4 / 8 / 12 / 16 / 28 / full - und in Expressive animiert zwischen diesen Stufen hoch mittel bis luftig - große Radien und 48dp-Ziele erzwingen Luft tonal: jede Ebene ist eine eigene Surface-Container-Stufe. Schatten nur noch bei FAB und schwebenden Elementen 3 4 4
10 Weiche Materialität 20-34px an Flächen und Karten, 999px an Pills und Eingabefeldern niedrig luftig Pseudo-Relief aus zwei gegenläufigen Schatten auf gleicher Grundfarbe; extrudiert (outset) vs. eingedrückt (inset), dazwischen nichts 1 5 2
11 Weiche Materialität 18-30px an Flächen, 999px an Pills, Feldern und Aktionsleisten niedrig bis mittel, und vor allem: nicht konstant luftig Echtes Layering: jede Ebene unschärft die darunter; zusätzlich weiter, tiefer Schlagschatten und eine helle Innenkante als Fase 3 4 4
12 Weiche Materialität 26-46px an Flächen, 999px an Pills und Feldern, 20px an kleinen Kacheln mittel sehr luftig Volumen aus inset-Highlight oben plus inset-Schatten unten; Abhebung aus zwei weichen, farbigen Außenschatten -- anders als Neumorphismus echte, stapelbare Ebenen 2 4 2
13 Produkt-Ästhetik heute 6-8px Controls, 10-12px Container hoch dicht Layer-Ladder aus minimal helleren Flächen plus 1px-Hairlines; Glow nur an Primäraktionen 4 3 3
14 Produkt-Ästhetik heute 8-14px an Flächen, 0px an Feldern und Trennlinien hoch luftig kaum vorhanden: ein weicher warmer Schlagschatten hebt das Blatt vom Grund ab, im Inneren trennen nur Lineale 5 3 3
15 Produkt-Ästhetik heute 0-4px, Ausnahmen nur 50% und 9999px sehr hoch mittel Ausschließlich harte Offset-Schatten ohne Blur; Tiefe wird als Distanz behauptet, nicht als Licht simuliert 2 5 2
16 Produkt-Ästhetik heute 0px, ohne Ausnahme sehr hoch dicht keine; Trennung ausschließlich über 1px-Hairlines und Box-Drawing-Zeichen 4 5 2
17 Produkt-Ästhetik heute 0-1px hoch sehr dicht keine z-Tiefe; Ebenen entstehen über Hintergrundtöne mit 2-4% Unterschied und über Hairline-Raster 5 4 4
18 Produkt-Ästhetik heute 22px Karten, 44px Fenster, 999px Pillen mittel luftig Echte z-Ordnung: Rückplatte, Fensterebene, Karten, Ornament davor - getragen von Blur, Rim-Licht und dreistufigem Umgebungsschatten 3 4 5
19 Norm & Beschränkung 0px durchgehend - Buttons, Felder, Marken, Statusbalken; kein Bauteil mit Ausnahme sehr hoch - #0b0c0c auf #ffffff sind rund 19,6:1; Grau ist als Fließtextfarbe ausgeschlossen und nur für Trennlinien zugelassen luftig - eine Entscheidung pro Bildschirm als Layoutgesetz, 19px Basis und 5px-Raster erzwingen große Blockabstände 2px-Vollsockel unter Bedienelementen plus 5px/10px-Vollbalken an Blöcken und Seitenkopf; Tiefe ist Affordanznachweis, nicht Atmosphäre 5 4 2
20 Norm & Beschränkung 0px ausnahmslos, an Buttons maximal 2px Demo-Palette: #2B2B2B auf #E4E2DD ergibt rund 10,9:1; der physische Panelkontrast ist geräte- und lichtabhängig luftig und latenzgetrieben: 68px-Zeilen, 22px-Innenabstände, Paginierung statt Scroll keine in dieser Demo; 2px-Linien trennen die Inhalte auf einer Ebene, Alpha und Schatten werden bewusst vermieden 4 3 2
21 Nostalgie & Subkultur 12-20px an Containern, 999px an Buttons/Pills, 18px am Fensterrahmen mittel mittel sehr stark: Bevel (inset-Highlight oben, inset-Shadow unten) + Außenschatten + Backdrop-Blur + Spiegelung; drei Ebenen gleichzeitig 1 5 5
22 Nostalgie & Subkultur 0-4px an Panels und Buttons, 50% nur an der Sonne hoch bei Neon auf Schwarz (Cyan #01CDFE auf #0B0121 ca. 11:1), niedrig bei allem, was durch Aberration oder Scanlines läuft mittel keine Schatten, sondern Leuchten: offsetlose box-shadows und inset-Glows; Tiefe entsteht zusätzlich perspektivisch über das Bodengitter 2 5 4
23 Nostalgie & Subkultur 0-3px an Flächen, 12px nur an Tasten; Ecken werden stattdessen um 20px angefast hoch dicht keine weichen Schatten: Tiefe entsteht über Gehäuse-in-Gehäuse-Staffelung, 1px-Fasenkanten, inset-Schwarz auf dem Bildschirm und harte Sockelschatten an Tasten 4 4 3
24 Ausdruck & Geste unregelmäßig, prozentual: 34-66% je Ecke, pro Element neu gewürfelt mittel luftig sehr weiche, farbig getönte Schatten plus überlappende Blob-Ebenen; keine harten Kanten 2 4 3
25 Ausdruck & Geste 0px an Flächen; nur Sticker und Zähler rund (50%) sehr hoch sehr dicht harte Offset-Schatten ohne Blur plus echte Überlappung mit z-index - Tiefe als Collage, nicht als Licht 2 5 5
26 Ausdruck & Geste 10-12px an Flächen, 999px an Pills hoch beim Text, sehr niedrig bei allem Strukturellen sehr luftig keine Schlagschatten; Tiefe entsteht durch Unschärfe-Ebenen, Glasfüllungen und farbige Glows 3 1 2
27 Ausdruck & Geste Unregelmäßig, pro Ecke und pro Achse verschieden; Bootswatch-Vierergruppen wie 255px 25px 225px 25px / 25px 225px 25px 255px, pro Element leicht variiert hoch mittel - 20-24px Luft zwischen zwei Konturen, weil die Kontur selbst schon Raum beansprucht keine - das Blatt ist flach, die Karte liegt nicht über dem Papier, sie ist auf das Papier gezeichnet 4 5 3
28 Weitere Pole 0px, ausnahmslos sehr hoch mittel bis dicht keine; Ordnung über Linien, Einzüge und Spaltenkanten 5 4 3
29 Weitere Pole 0px, ausnahmslos hoch dicht harte Bevel-Kanten (2px hell/dunkel) plus versetzter Vollton-Schlagschatten -- Tiefe als Zeichnung, nicht als Licht 3 5 3
30 Weitere Pole 15-24px an Flächen, 999px an Pills und Balken mittel luftig harter Farbsockel unter jedem Objekt (0 4-6px 0, Blur 0) plus Innenschatten in gefüllten Kacheln -- Tiefe als Materialdicke, nicht als Lichtquelle 2 4 2
31 Weitere Pole 0-4px, dominant 2-3px; 5px nur an der Suchleiste mittel, bewusst nicht maximiert - #333 auf #fff und #f5f5f5, Linien in #ddd sehr dicht; feste zentrierte Spalte von 950-1220px, Zeilen mit padding:3-4px 8px und line-height 1.4-1.5 sparsam und hart: ein bis zwei 1px-Innenschatten am Eingabefeld, ein flacher Vertikalverlauf am Knopf, ansonsten trennen 1px-Linien - nichts verläuft weich 4 4 3
32 Plattformsprachen Demo: 28px Fenster, 22px mobile Inhaltsgruppe, 999px Aktionsflächen; keine Apple-Tokenvorgaben. Deckende Leseflächen; Materialkontrast ist hintergrundabhängig und separat zu prüfen. Luftig: ein klarer Inhaltsschwerpunkt, getrennte Zeilen und wenige gleichzeitig sichtbare Aktionen. Inhalt, darüber eine abgesetzte Bedienebene; Demo mit Blur-Fallback, Innenlicht und weichem Schatten. 3 4 4
33 Plattformsprachen Demo: 24px Außenradius der Listengruppe und 999px an Suche und Aktionen; keine Samsung-Tokenvorgabe. Dunkler Text auf deckenden hellen Flächen; Status und Fokus brauchen eigenständige Prüfung. Luftig im Betrachtungsbereich, gruppiert und kompakter im Interaktionsbereich. Flächen gruppieren Inhalte; Schatten sind für die Hierarchie dieser Demo nicht nötig. 4 3 3
34 Plattformsprachen Demo: 4px; Abweichungen je Bauteil siehe Merkmale. Dunkler Text auf deckenden hellen Flächen; Fokus und Zustände haben eigene Rollen. Kompakte Navigation, großzügigerer Inhalt; Desktop-Zeilen mindestens 64px. Gruppierung durch Flächen und 1px Grenzen. 4 3 3
35 Plattformsprachen Demo: 12px; Abweichungen je Bauteil siehe Merkmale. Dunkler Text auf deckenden hellen Flächen; Fokus und Zustände haben eigene Rollen. Begrenzte Lesebreite, wenige Aktionen und mindestens 64px hohe Desktop-Zeilen. Gruppierung durch Flächen und 1px Grenzen. 4 3 2
36 Plattformsprachen Demo: 3px; Abweichungen je Bauteil siehe Merkmale. Dunkler Text auf deckenden hellen Flächen; Fokus und Zustände haben eigene Rollen. Werkzeughafte Dichte mit mindestens 48px hohen Desktop-Zeilen und 36px hohen Aktionen. Gruppierung durch Flächen und 1px Grenzen. 4 3 3
37 Plattformsprachen Demo: 0; Abweichungen je Bauteil siehe Merkmale. Dunkler Text auf deckenden hellen Flächen; Fokus und Zustände haben eigene Rollen. Kompakte Tabelle; Desktop-Zeilen mindestens 48px, Namen 16px, Metadaten 14px. Gruppierung durch Flächen und 1px Grenzen. 4 3 3
Wie es weitergeht

Vom Katalog zur eigenen Sprache

Ein Katalog ist keine Entscheidung. Drei Dinge sind beim Durchsehen nützlicher als die Frage „welcher gefällt mir“ — denn die beantwortet man in fünf Jahren anders.

Marken sind Hybride

Kein starkes Produkt trägt einen Reinstil. Linear ist Swiss‑Raster plus Dark‑Mode plus Terminal‑Dichte. Notion ist Warm Editorial plus Flat. Stripe ist Swiss plus Aurora. Ein Reinstil wirkt wie ein Kostüm; eine Mischung aus zwei Familien mit einer klaren Hauptstimme wirkt wie eine Haltung. Jeder Eintrag nennt unter „Kombiniert sich mit“ die tragfähigen Paarungen.

Haltbarkeit schlägt Wirkung

Für einen Fundus, der viele Apps über Jahre tragen soll, ist Haltbarkeit wertvoller als Schockwirkung. Ein Stil mit Wiedererkennung 5 und Haltbarkeit 1 kann früher einen Neuentwurf nötig machen — möglicherweise über mehrere Projekte zugleich. Das Raster oben macht diesen Handel sichtbar.

Der Stil bestimmt die Kosten

Flächenfarbe, Radius und Typografie lassen sich aus Tokens sauber nach CSS, Compose und SwiftUI generieren. Unschärfe, mehrschichtige Verläufe und Materialien brauchen plattformspezifische Renderer und Fallbacks. Auch sie lassen sich teilweise in Tokens beschreiben. Wie viel Mehrarbeit daraus entsteht, hängt von den Zielplattformen und vorhandenen Komponenten ab; Tauri nutzt dabei die Web-Umsetzung.

Alle 37 Desktop-Stildemos sind handgebautes HTML und CSS — keine Bilder, keine Skripte, keine Bibliotheken. Jede zeigt dieselben dreizehn Textbausteine. Die Schriften stammen aus Google Fonts oder dem System-Stack. Stilnamen und Familien sind eine redaktionelle Einordnung. Die Faktenblätter unterscheiden Vorbilder und konkrete Demo-Entscheidungen; Werte sind keine unveränderlichen Produktvorgaben. Verlinkte Quellen belegen jeweils die benannte Aussage, nicht das gesamte Faktenblatt. Die vier Kennzahlen sind fachliche Einschätzungen, keine Messwerte.

In der Praxis

Vom Stil zur benutzbaren Oberfläche

Die Desktop-Demos sind auf 780 px entworfene Vergleichsbilder aus HTML und CSS. Die Smartphone-Adaptionen fließen bis 390 px Breite und zeigen Liste, Detail und Formular. In den Kacheln bleiben alle Bedienelemente inaktiv; im Faktenblatt lässt sich der mobile Ablauf ausprobieren. Ein fertiges Produkt braucht zusätzlich seine echten Inhalte und Zustände.

Eine Hauptstimme, klare Rollen

Wähle einen Grundstil und höchstens einen ergänzenden Einfluss. Lege zuerst Rollen für Hintergrund, Text, Akzent, Rand und Fokus fest. Dokumentiere danach die acht Parameter. Ein Farbwert allein sagt noch nicht, auf welcher Fläche er lesbar ist.

Den schwierigen Zustand gestalten

Prüfe lange Namen, leere Listen, Ladezustände, Fehler und deaktivierte Aktionen. Teste schmale Fenster und vergrößerten Text. Das Verkleinern der gesamten Demo macht die Stile vergleichbar; für ein Produkt müssen Text, Reihenfolge und Bedienelemente dagegen neu umbrechen können.

Barrierefreiheit konkret prüfen

Prüfe Tastaturbedienung, sichtbaren Fokus und Statusmeldungen mit Text. WCAG 2.2 AA verlangt für normalen Text mindestens 4,5:1, für großen Text 3:1. Kleine Metadaten sind davon nicht ausgenommen. Prüfe transparente Flächen auch vor ihrem ungünstigsten Hintergrund und biete eine deckende Variante an.

Zum Nachlesen: Textkontrast · Textvergrößerung · Zielgrößen und Ausnahmen. Die Stil- und Finder-Kennzahlen sind redaktionelle Einschätzungen, keine WCAG-Prüfung. Die Prozentzahl im Finder beschreibt nur die Übereinstimmung mit den beantworteten Präferenzen; „egal“ wird nicht gewertet.

02 · Bedienung

Prinzipien zum Ausprobieren

Sechs kleine Versuche machen die Wirkung einer Entscheidung sichtbar. Alle Änderungen bleiben in dieser Sitzung und lassen sich durch Neuladen zurücksetzen.

01 / 06

Hierarchie & Gruppierung

Dieselben Inhalte: Abstände und Gewichtung verändern, was zuerst gelesen wird.

Projektübersicht

NexusAktivZuletzt geändert: heute
Balance AllyPausiertZuletzt geändert: gestern

Carbon · Typography

02 / 06

Schrittweise Offenlegung

Häufige Eingaben bleiben sichtbar. Weitere Einstellungen erscheinen bei Bedarf und behalten ihre Werte.

Erweiterte Einstellungen

Änderungen gelten nur für dieses Beispiel.

KDE · Simple by default

03 / 06

Rückmeldung & Fehlerbehebung

Einen Speicherversuch mit Ladezustand, Fehler, erneutem Versuch und Rückgängig durchspielen.

Nexus · Entwurf

Bereit zum Speichern.

Nielsen · Usability heuristics

04 / 06

Orientierung & Navigation

Eine Auswahl in zwei Navigationsmustern verfolgen: eigene Detailseite oder Liste und Detail nebeneinander.

Android · List-detail

05 / 06

Anpassung & Eingabe

Layoutbreite und Bediengröße unabhängig ändern. Die Aufgabe und die Auswahl bleiben erhalten.

Alle Varianten unterstützen Tastatur und Touch. Die Umschaltung ändert die Gestaltung, nicht die verfügbare Eingabe.

GNOME · Pointer & touch

06 / 06

Inklusive Darstellung

Schrift vergrößern, Kontrast erhöhen und lange Texte einschalten. Beobachte, wie die Inhalte neu umbrechen.

Nexus

Ein gemeinsamer Ort für Projekte.

Systemseitig reduzierte Bewegung hat Vorrang. Diese Schalter veranschaulichen einzelne Anforderungen und ersetzen keine vollständige Barrierefreiheitsprüfung.

W3C · Resize text

03 · Nutzung

Ein Kontext verändert die Aufgabe

Geräteform, Aufmerksamkeit und Eingabe bestimmen, wie viel eine Oberfläche auf einmal leisten soll. Die Beispiele zeigen jeweils eine passende Aufgabe in einer neutralen Gestaltung.

01 / 08 · Links, Verlauf, wechselnde Fenster

Web

Ein Projekt per Link öffnen und zur Übersicht zurückkehren.

  • Adresse und Zurück-Verhalten gehören zur Orientierung.
  • Layouts fließen mit der verfügbaren Breite.
  • Tastatur und Touch bleiben gleichwertig nutzbar.

Die Demo zeigt lokale Navigation; sie lädt keine Projektdaten.

Verbindungen zu den anderen Ebenen

Mögliche visuelle Referenzen, keine Plattformfreigabe: Swiss / International Typographic Style · Microsoft / Fluent · IBM / Carbon.

Passendes Bedienprinzip ausprobieren

MDN: History API

02 / 08 · Präzision, Tastatur, mehrere Bereiche

Desktop

Ein Projekt auswählen und seine Details neben der Liste prüfen.

  • Häufige Aktionen sind sichtbar und per Tastatur erreichbar.
  • Auswahl und Fokus sind unterschiedliche Zustände.
  • Fenster und Bereiche bleiben in ihrer Größe veränderbar.

Hier wird eine geteilte Ansicht gezeigt, keine native Fensterverwaltung.

Verbindungen zu den anderen Ebenen

Mögliche visuelle Referenzen, keine Plattformfreigabe: Microsoft / Fluent · GNOME / Adwaita · KDE / Breeze.

Passendes Bedienprinzip ausprobieren

KDE: Simple by default

03 / 08 · Touch, wenig Platz, Unterbrechungen

Smartphone

Den Projektstatus prüfen und mit einer klaren Zurück-Aktion weitergehen.

  • Eine Hauptaufgabe pro Ansicht erleichtert kurze Sitzungen.
  • Wichtige Aktionen bleiben beschriftet und gut erreichbar.
  • Tastatur, große Schrift und Querformat brauchen Raum.

Die ausführlichen mobilen Abläufe aller Stile stehen auf Ebene 1.

Verbindungen zu den anderen Ebenen

Mögliche visuelle Referenzen, keine Plattformfreigabe: Samsung / One UI · Apple / Liquid Glass · Material Design 3 / Material 3 Expressive.

Passendes Bedienprinzip ausprobieren

Samsung: Layout

04 / 08 · Touch trifft auf mehrere Bereiche

Tablet & Foldable

Zwischen einer schmalen Ansicht und Liste plus Detail wechseln.

  • Verfügbare Fensterbreite bestimmt die Zahl der Bereiche.
  • Auswahl bleibt beim Layoutwechsel erhalten.
  • Faltkanten, Stift und externe Tastatur separat prüfen.

Die Breitenumschaltung ist schematisch; sie simuliert weder Faltkante noch Stiftdruck.

Verbindungen zu den anderen Ebenen

Mögliche visuelle Referenzen, keine Plattformfreigabe: Material Design 3 / Material 3 Expressive · Samsung / One UI · GNOME / Adwaita.

Passendes Bedienprinzip ausprobieren

Android: List-detail layouts

05 / 08 · Ein Blick, eine kurze Handlung

Smartwatch

Einen Fokusblock starten, unterbrechen und fortsetzen.

  • Zeige zuerst eine wesentliche Information.
  • Kurze Aktionen ersetzen umfangreiche Formulare.
  • Krone, Sprache und Haptik ergänzen Touch gerätespezifisch.

Start und Pause sind bedienbar; Zeitablauf, Krone und Haptik werden nicht simuliert.

Verbindungen zu den anderen Ebenen

Mögliche visuelle Referenzen, keine Plattformfreigabe: Apple / Liquid Glass · Material Design 3 / Material 3 Expressive.

Passendes Bedienprinzip ausprobieren

Apple: Designing for watchOS

06 / 08 · Abstand und sichtbarer Fokus

TV & Fernbedienung

Mit Pfeiltasten oder den Richtungstasten eine Sendung wählen und öffnen.

  • Fokus muss aus der Entfernung eindeutig sein.
  • Richtungsnavigation folgt einer vorhersehbaren Ordnung.
  • Eine sichtbare Zurück-Aktion führt aus den Details.

Die Demo bildet eine Richtungstasten-Steuerung ab; echte Lesbarkeit aus Sitzentfernung muss am TV geprüft werden.

Verbindungen zu den anderen Ebenen

Mögliche visuelle Referenzen, keine Plattformfreigabe: Flat Design & Flat 2.0 · Spatial / visionOS-Tiefe.

Passendes Bedienprinzip ausprobieren

Android TV: Navigation

07 / 08 · Kurze Blicke, unterbrechbare Aufgaben

Auto

Zwischen Fahrt und Parken umschalten und einen Audiofavoriten wählen.

  • Die Fahraufgabe bestimmt die verfügbare Aufmerksamkeit.
  • Interaktionen müssen unterbrechbar bleiben.
  • Zugelassene Plattformvorlagen bestimmen den Produktumfang.

Schematische Web-Demo ohne Fahrzeuganbindung. Die vereinfachte Parksperre ist kein Nachweis einer Freigabe für den Fahrzeugeinsatz.

Verbindungen zu den anderen Ebenen

Mögliche visuelle Referenzen, keine Plattformfreigabe: Flat Design & Flat 2.0 · Material Design 3 / Material 3 Expressive.

Passendes Bedienprinzip ausprobieren

Google: Driving interaction principles

08 / 08 · Raum, Komfort, Blick und Hände

Räumliche Anwendungen / XR

Ein Inhaltsfenster und seine Bedienebene in zwei Anordnungen vergleichen.

  • Komfort und reale Umgebung bestimmen die Platzierung.
  • Inhalt und Bedienung haben erkennbare Ebenen.
  • Blick, Hände und alternative Eingaben brauchen eigene Tests.

Zweidimensionale Ebenenskizze; keine Simulation von Blicksteuerung, Tiefenwahrnehmung oder räumlichem Komfort.

Verbindungen zu den anderen Ebenen

Mögliche visuelle Referenzen, keine Plattformfreigabe: Spatial / visionOS-Tiefe · Apple / Liquid Glass.

Passendes Bedienprinzip ausprobieren

Apple: Design great visionOS apps