Beschreibungsraster

Methode // Beschreiben und Analysieren

Beschreiben Sie einen Screen so, dass jemand ihn nachzeichnen kann, der ihn nie gesehen hat.

Klingt einfach. Probieren wir es aus.

Beschreibungs-Pingpong

Runde 1

So geht's

Zu zweit: Eine Person beschreibt, die andere zeichnet.

Wer links sitzt, beschreibt und scannt den QR-Code. Die andere Person sieht den Screen nicht.

Nur sprechen, nichts zeigen. Zeichnen, was man hört.

Danach vergleichen Sie Zeichnung und Original.

Runde 1

Nur für die Person, die beschreibt

Beschreiben und zeichnen

Ca. 5 Minuten. Die eine Person spricht, die andere zeichnet.

Was hat gefehlt? Was hat gut geklappt?

Wir sammeln gemeinsam.

Ablauf (ca. 15 Minuten)

2 Min. erklären, ca. 5 Min. beschreiben und zeichnen, danach vergleichen und gemeinsam sammeln.
Zu zweit: Eine Person beschreibt mündlich, die andere zeichnet. Wer links sitzt, beschreibt. Nur die beschreibende Person scannt den QR-Code.
Papier und Stift für die zeichnende Person reichen.
Bewusst ohne Hilfestellung. Die Lücken sind der Lerneffekt. Dass es dabei durcheinandergeht und gelacht wird, ist gewollt.

Sammeln an der Tafel: Was hat gefehlt? Was hat gut geklappt? Typische Lücken: Größenverhältnisse, Abstände, Ausrichtung (links, zentriert), Reihenfolge von oben nach unten, Schriftgröße und Schriftstärke, genaue Farben, Format des Screens. Was gut klappt, ist meist eine Reihenfolge: erst das Ganze, dann die Teile.

Screen: Produktdetail der AirPods Pro 3 auf apple.com, mobil.

Wie beschreiben wir einen Screen?

Vom Großen zum Kleinen

Das Raster

1. Format & Gesamteindruck

2. Elemente

3. Eigenschaften

4. Beziehungen

5. Wirkung

1. Format & Gesamteindruck

Welches Format, welcher Viewport? Hell oder dunkel, ruhig oder laut, voll oder leer? Wie viele Spalten, wo liegen die großen Blöcke?

2. Elemente

Welche Elementtypen gibt es? Text (Headline, Fließtext, Label), Bild, Grafik und Icon, Interaktionselement (Button, Link, Eingabefeld), Fläche.

3. Eigenschaften

Welche visuellen Eigenschaften hat jedes Element? Position, Größe, Form, Helligkeit, Farbe, Richtung, Textur.

Visuelle Variablen nach Jacques Bertin (1967)

4. Beziehungen

Wie stehen die Elemente zueinander? Abstand und Nähe, Ausrichtung, Ähnlichkeit und Gruppen, Kontrast. Und die Hierarchie: Was sehe ich zuerst, was danach?

5. Wirkung

Was löst das aus, und bei wem? Passt die Wirkung zu Funktion und Zielgruppe?

Input (ca. 15 Minuten)

Rückbezug auf letzte Woche: Dekomposition. Wir zerlegen den Screen vom Großen zum Kleinen und setzen ihn in der Beschreibung wieder zusammen.

Die Reihenfolge ist kein Zufall. Wer mit Details anfängt (»oben links ist ein kleines Icon«), verliert die Zuhörer:innen, bevor das Gesamtbild steht. Wer erst Format und Grobstruktur nennt, gibt ein Gerüst, in das sich jedes weitere Detail einsortieren lässt.

Die visuellen Variablen gehen auf Jacques Bertin zurück (Sémiologie graphique, 1967). Ausführlich: Prinzip Visuelle Variablen.

Hintergrund

Dekomposition ist ein Grundprinzip der Informatik: ein komplexes Problem in kleinere, beherrschbare Teile zerlegen. Das Raster wendet es auf Gestaltung an. Die Reihenfolge vom Großen zum Kleinen folgt dem Prinzip »Overview first, zoom and filter, then details-on-demand« (Ben Shneiderman, 1996).

Einmal zusammen

Screen A aus Runde 1, diesmal mit Raster

Screen A: AirPods Pro 3 auf apple.com, mobil

1. Format & Gesamteindruck
Smartphone, hochkant. Hell, ruhig, viel Weißraum. Eine Spalte, alles zentriert.

2. Elemente
Navigationsleiste mit Logo und drei Icons, Produktfoto, Produktname, Headline, Fußnote, Kaufleiste mit Preis und Button.

3. Eigenschaften
Foto auf hellgrauem Grund, füllt gut die Hälfte des Screens. Headline groß, fett, schwarz, vier Zeilen. Button blau, pillenförmig.

4. Beziehungen
Die Headline ist klar Nummer eins. Produktname klein und eng darüber. Preis links und Button rechts bilden eine Gruppe über die volle Breite am unteren Rand.

5. Wirkung
Hochwertig, aufgeräumt, selbstbewusst. Eine Botschaft, eine Handlung.

Und jetzt Sie?

Optional: Runde 2, mit getauschten Rollen und mit Raster.

Beschreibungs-Pingpong

Runde 2 (optional): mit Raster

Rollen tauschen

Wer gezeichnet hat, beschreibt jetzt und scannt den QR-Code.

Beschreiben Sie entlang des Rasters: Format & Gesamteindruck, Elemente, Eigenschaften, Beziehungen, Wirkung

Runde 2

Nur für die Person, die beschreibt

Beschreiben und zeichnen

Ca. 5 Minuten. Diesmal entlang des Rasters.

Was war anders als in Runde 1?

Was konnten Sie diesmal zeichnen, was vorher gefehlt hat?

Typische Fehler

Mit Details anfangen, bevor Format und Grobstruktur stehen

Dinge aufzählen statt Verhältnisse benennen: »groß« statt »das größte Element, halbe Bildschirmhöhe«

Werten statt beschreiben: »modern«, »clean«, »schön«

Die Wirkung vergessen, also den Schritt, auf den es am Ende ankommt

Welche Begriffe haben Ihnen gefehlt?

Wir sammeln sie in einem Glossar. Es wächst das ganze Semester mit.

Wo das Raster wiederkommt

Im Feedback zu Ihren Übungen und im Crit

Wenn Sie Briefings, Korrekturwünsche oder Prompts formulieren

Wenn Sie Gestaltungsentscheidungen begründen, im Portfolio und im Projekt

Begründen Sie Ihren Favoriten noch einmal.

Diesmal mit dem Raster.

Merksatz

Wer präzise beschreiben kann, kann präzise kommunizieren: mit dem Team, mit Entwickler:innen und mit KI.

Backup

Weitere Screens für das Beschreibungs-Pingpong

Weitere Screens

Zusatzscreen 1

Zusatzscreen 2

Danke für's Mitmachen

https://christiannoss.de