Design in der Medieninformatik

Gutes Auge, präzise Sprache

Ihre Plakate

Abgabe vom 8. Oktober

Welches Plakat funktioniert am besten?

Einigen Sie sich zu zweit auf einen Favoriten. Und warum?

»Gefällt mir« ist kein Argument.

Letzte Woche: Entscheiden Sie nicht nach Geschmack. Heute: das Werkzeug dafür.

ToDo: 6 bis 8 Plakate einfügen

Heute

Für wen gestalten wir eigentlich?

Wie beschreiben wir einen Screen so präzise, dass andere ihn nachbauen können?

Ein Raster, das Sie das ganze Semester begleitet

Und heute Nachmittag: der Punkt

Für wen ist das?

Funktion & Zielgruppe

Gleiches Thema, zwei Hefte. Für wen ist welches?

Gleiche Funktion. Was ist der Unterschied?

Gleiche Funktion: Nachrichten. Für wen ist welche Seite?

Wir gestalten fast nie für uns selbst.

Die erste Frage ist nicht »Wie sieht es aus?«, sondern »Wofür und für wen?«

Beschreibungs-Pingpong

Runde 1

So geht's

Zu zweit. Links: Screen A, rechts: Screen B. Nicht spicken!

7 Min. Screen schriftlich beschreiben. Nur Text, keine Skizzen.

7 Min. Zettel tauschen, nach der Beschreibung zeichnen

Zeichnung und Original vergleichen

Runde 1

Screen A
links sitzend

Screen B
rechts sitzend

Schreiben

7 Minuten. Nur Text, keine Skizzen.

Tauschen und zeichnen

7 Minuten

Was hat in den Beschreibungen gefehlt?

Sammeln Sie zu zweit drei Dinge, die Sie falsch oder gar nicht zeichnen konnten.

(aktive) Pause

In der Pause veranstalten wir einen Papierflieger-Langflugwettbewerb! Jeder hat 5 Minuten Zeit, um aus einem DIN-A4-Blatt seinen eigenen Papierflieger zu falten. Schreiben Sie gut lesbar Ihren Namen auf den Flieger, denn alle Papierflieger werden gleichzeitig abgeworfen.

Nach der Bauzeit stellen sich alle Teilnehmenden nebeneinander auf, und auf ein gemeinsames Startsignal werfen wir die Papierflieger gleichzeitig in die Luft. Gewonnen hat der Flieger, der am längsten in der Luft bleibt. Die Person mit dem am längsten fliegenden Papierflieger gewinnt Ruhm, Ehre und eine kleine Überraschung.

Viel Erfolg und gute Flugzeit!

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)

Gleiches Konzept, konkreter Anwendungsfall: 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`

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?

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.

Runde 2, diesmal mit Raster.

Beschreibungs-Pingpong

Runde 2: mit Raster

Gleiche Regeln, neue Screens

Beschreiben Sie diesmal entlang des Rasters:

Format & Gesamteindruck, Elemente, Eigenschaften, Beziehungen, Wirkung

Runde 2

Screen A
links sitzend

Screen B
rechts sitzend

Schreiben

7 Minuten. Format, Elemente, Eigenschaften, Beziehungen, Wirkung.

Tauschen und zeichnen

7 Minuten

Was war anders als in Runde 1?

Vergleichen Sie Ihre beiden Zeichnungen.

Welche Begriffe haben Ihnen gefehlt?

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

Und Ihr Favorit von heute Morgen?

Begründen Sie Ihre Wahl noch einmal. Diesmal mit dem Raster.

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.

Heute Nachmittag

Wir fangen beim kleinsten Element an: dem Punkt. Alles, was Sie heute Morgen beschrieben haben, ist daraus gebaut.

Zusammenfassung

»Gefällt mir« ist kein Argument.

Wir gestalten fast nie für uns selbst. Erst Funktion und Zielgruppe, dann die Form.

Beschreiben Sie Screens vom Großen zum Kleinen: Format, Elemente, Eigenschaften, Beziehungen, Wirkung.

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

Danke für's Mitmachen

https://christiannoss.de