Visuelle Variablen

Prinzip // Fundament

Jedes Element hat Eigenschaften, mit denen wir gestalten.

Position, Größe, Form, Helligkeit, Farbe, Richtung, Textur: das Alphabet jeder Gestaltung.

Visuelle Variablen

So nennen wir diese Eigenschaften, nach Jacques Bertin. In älteren Texten und Folien heißen sie auch Gestaltungsparameter. Gemeint ist dasselbe.

Jacques Bertin: Sémiologie graphique, 1967 (»variables visuelles«). Wir nutzen im ganzen Modul den Begriff »visuelle Variable«, weil er bis zu Figma-Variablen, Design Tokens und CSS-Variablen trägt. Bertin hat die Variablen für Karten und Diagramme beschrieben. Sie gelten für jede Gestaltung, auch für Screens.

Hintergrund

Jacques Bertin (1918 bis 2010), französischer Kartograf, hat die visuellen Variablen 1967 in »Sémiologie graphique« beschrieben. Sein Ziel war eine Grammatik für Karten und Diagramme. Bertin unterscheidet die zwei Dimensionen der Ebene (Position) und sechs weitere Variablen: Größe, Helligkeit, Textur, Farbe, Richtung, Form. Spätere Arbeiten haben die Liste erweitert, etwa um Transparenz und Schärfe (Alan MacEachren, 1995) und die Variablen nach ihrer Eignung geordnet (Jock Mackinlay, 1986).

Visuelle Variablen nach Jacques Bertin (1967)

Kennen Sie schon: aus CSS

Position	`grid-area`, `margin`, `inset`
Größe	`width`, `height`, `font-size`
Form	`border-radius`, `clip-path`
Helligkeit	`oklch(L …)`, `opacity`
Farbe	`color`, `background-color`
Richtung	`transform: rotate()`, `writing-mode`
Textur	`background-image`, `mask`, `filter`

Design Tokens geben visuellen Variablen einen Namen.

Statt #9313ce heißt es color-accent. Design und Entwicklung sprechen dieselbe Sprache.

Drei Ebenen

Basis	Was gibt es?	`purple-500: #9313ce`
Semantisch	Wofür ist es da?	`color-accent: purple-500`
Komponente	Wo wird es eingesetzt?	`button-primary-bg: color-accent`

Im Code

Dieselben Tokens als CSS Custom Properties

:root {
  --purple-500: #9313ce;
  --color-accent: var(--purple-500);
  --space-m: 1rem;
  --radius-pill: 999px;
}

.button-primary {
  background: var(--color-accent);
  padding: var(--space-m);
  border-radius: var(--radius-pill);
}

Tokens sind die Übergabe vom Design an die Entwicklung.

Wer in Variablen und Tokens gestaltet, übergibt keine Bilder, sondern Entscheidungen.

Design Tokens sind benannte Werte für visuelle Variablen: Farbe, Größe, Abstand, Radius, Schrift, Schatten, Dauer. Sie sind die Schnittstelle zwischen Design und Entwicklung: In Figma als Variablen, im Code als CSS Custom Properties oder JSON. Austauschformat: Design Tokens Community Group des W3C.

Wichtig ist die Ebene: Basis-Tokens benennen Werte, semantische Tokens benennen Zwecke, Komponenten-Tokens benennen Einsatzorte. Gestaltet wird auf der semantischen Ebene.

Kommt wieder bei: Spacing-System, Typografische Skala, Gestaltungskontext analysieren, Interface-Inventar.

Hintergrund

Der Begriff Design Token wurde um 2014 bei Salesforce geprägt (Jina Anne und Jon Levine, Lightning Design System). Seit 2019 arbeitet die Design Tokens Community Group des W3C an einem gemeinsamen Austauschformat.

Format // Darstellungsfläche

Visuelle Variable

Position

Visuelle Variable

Größe

Artwork by Yayoi Kusama, Foto von Susanne Nilsson

Nicht jede Variable kann alles

Farbton unterscheidet Kategorien. Helligkeit und Größe zeigen eine Rangfolge. Wer Wichtigkeit über Farbton ausdrückt, wird oft nicht verstanden.

Rangfolge über Farbton: Welcher Punkt ist am wichtigsten?

Rangfolge über Helligkeit: sofort lesbar

Drei Kategorien über Größe: Wirkt, als wäre eine wichtiger

Drei Kategorien über Farbton: gleichwertig und unterscheidbar

Zusätzlich über Form: auch ohne Farbe unterscheidbar

Drei Buttons, drei Farbtöne: Welcher ist die Hauptaktion?

Füllung und Helligkeit zeigen die Rangfolge. Die Akzentfarbe kommt nur einmal vor

Punkt und Linie zu Fläche

Wassily Kandinsky, Bauhausbuch Nr. 9, 1926. Vor genau 100 Jahren.

Position, Größe, Form, Helligkeit, Farbe … Ein Punkt hat sie alle.

Führt zu

Wie Elemente aufeinander wirken: Prinzipien Kräfte und Eindeutigkeit. Wie wir sie beschreiben: Methode Beschreibungsraster.

Danke für's Mitmachen

https://christiannoss.de