Screendesign ist kein Fach, das man auswendig lernt. Es ist ein Handwerk, das man übt, und eine Sprache, die man spricht. Damit das gelingt, ordnen wir alle Inhalte des Moduls in ein gemeinsames System: Die fünf Elemente. Jede Vorlesung, jeder Workshop und jede Übung bedient sich daraus.
Diese Seite beschreibt das System und listet alle Inhalte auf. Sie können sie als Landkarte durch das Semester nutzen, zum Nachschlagen und zur Vorbereitung auf das Gestaltungsportfolio und das Projekt.
Beobachten vor Bewerten. Erst genau hinschauen und beschreiben, dann urteilen. Aus “gefällt mir” wird “funktioniert, weil”.
Wenige Methoden, oft angewendet. Ein kleiner Methodenkoffer begleitet Sie durch das ganze Semester. Sie lernen die Methoden nicht nur kennen, Sie wenden sie immer wieder an.
Erleben vor Erklären. Wahrnehmungsphänomene erfahren Sie zuerst selbst, danach sprechen wir darüber, was passiert ist.
Konkret statt Metaebene. Jede Veranstaltung liefert etwas, das Sie am nächsten Tag anwenden können.
Wir gestalten nicht für uns. Jede Lösung muss in ihren Kontext passen: zur Zielgruppe, zum Produkt, zur Produktfamilie, zur Organisation.
Barrierefreiheit ist Haltung, kein Kapitel. Sie steckt in vielen Gestaltungsentscheidungen und zieht sich deshalb als roter Faden durch das ganze Modul.
Phänomen: Das passiert. Was unsere Wahrnehmung mit uns macht. Sie erleben es selbst und wundern sich hoffentlich.
Prinzip: Darum gilt. Eine Regel, die Sie beim Gestalten nutzen können. Lässt sich in einem Satz sagen und am Screen zeigen.
Methode: So gehen wir vor. Ein Verfahren mit klaren Schritten und einem sichtbaren Ergebnis.
Begriff: So heißt das. Das Vokabular, mit dem wir präzise über Gestaltung sprechen.
Haltung: So arbeiten wir. Wie wir arbeiten, Feedback geben und annehmen, im Team entscheiden.
Ein einzelnes Phänomen, Prinzip oder eine einzelne Methode nennen wir einen Baustein. Eine Vorlesung setzt sich aus mehreren Bausteinen zusammen.
Nicht jede Methode müssen Sie beherrschen. Wir unterscheiden zwei Tiefen. Methoden, die Sie können sollen, wenden Sie in der Vorlesung in einer kurzen Übung an, und sie kommen in mindestens zwei weiteren Terminen wieder: im Workshop, im Feedback oder im Projekt. Diese Methoden erwarten wir in Ihren Arbeiten. Methoden, die Sie kennen sollen, haben Sie gesehen und verstanden, wofür sie gut sind. Sie können sie nachschlagen und bei Bedarf einsetzen.
Der Vormittag beginnt mit Feedback zu Ihren Gestaltungsübungen der Vorwoche. Danach folgt der Input, zusammengesetzt aus mehreren Bausteinen. Meist steigen wir mit einer Haltung ein, Sie erleben ein Phänomen, wir leiten daraus ein bis drei Prinzipien ab, und Sie probieren eine Methode in einer kurzen Übung von 10 bis 15 Minuten aus. Zum Schluss schlagen wir die Brücke zum Workshop am Nachmittag.
Hier wird es praktisch. Sie setzen um, was am Vormittag Thema war.
Gestaltungsprozesse wechseln zwischen Öffnen (viele Möglichkeiten erkunden) und Schließen (gezielt entscheiden). Das Modell dazu ist der Double Diamond. Er taucht im Semester immer wieder auf, damit Sie wissen, in welcher Phase Sie gerade arbeiten.
Die fünf Elemente zahlen auf vier Lernziele ein.
Briefings, Korrekturwünsche und Aufträge im Designkontext verstehen und selbst formulieren, auch Aufträge an KI-Werkzeuge. Getragen vor allem von Begriffen, Beschreibungsraster, Vier-Seiten-Modell, Rebriefing, Gestaltungsziel formulieren, Text im Interface und Crit.
Gestaltungen zerlegen, beschreiben und begründet bewerten. Getragen vor allem von Beschreibungsraster, Layoutanalyse, Gestaltungskontext analysieren, Unschärfetest, Kontrast prüfen, Heuristischer Evaluation und Crit.
Eigene Lösungen entwickeln, systematisch variieren und begründet auswählen. Getragen vor allem von Gestaltungsraster, Spacing-System, Schriftauswahl, Variieren, Entscheidungslog und Gestaltungsziel formulieren.
Die Wirkung von Gestaltung wahrnehmungspsychologisch begründen und mit einfachen Tests prüfen. Getragen vor allem von den Phänomenen, Semantischem Differential, Axis Map, 5-Sekunden-Test, Präferenztest und Variieren entlang einer Achse.
Die Grundhaltung lautet: Beobachten vor Bewerten. Jede Haltung hat einen methodischen Partner, mit dem Sie sie in die Praxis bringen.
Beobachten vor Bewerten. Erst beschreiben, dann urteilen. Partner: Beschreibungsraster
Gefällt mir ist kein Argument. Gestaltung wird mit Sachargumenten begründet, nicht mit Geschmack. Partner: Semantisches Differential, 5-Sekunden-Test
Wir gestalten nicht für uns. Lösungen passen zu Zielgruppe und Gestaltungskontext. Partner: Proto-Persona, Gestaltungskontext analysieren
Wissen ist nicht Können. Können entsteht durch Üben. Partner: alle Übungen
Fragen sind die Antwort. Unvollständige Briefings sind Alltag. Gute Fragen vervollständigen sie. Partner: Rebriefing
Entwickeln Sie Alternativen. Wer nur eine Lösung hat, hat keine Argumente. Partner: Variieren
Gestaltungslösungen sind nicht binär. Es gibt viele gute Lösungen, aber gute Gründe für eine. Partner: Präferenztest, Crit
Feedback gilt dem Entwurf in seinem Kontext. Ändert sich der Kontext, ändert sich das Feedback. Partner: Crit
Verlieben Sie sich nicht in Ihren Prototyp. Entwürfe sind Werkzeuge. Partner: Variieren, Crit
Zeigen statt erzählen. Früh und unfertig zeigen statt beschreiben. Partner: Crit
Kritik gilt der Arbeit, nicht der Person. Grundregel für Feedback, in beide Richtungen. Partner: Crit
Präzision ist Respekt. Sorgfalt im Detail ist Respekt vor den Menschen, die Ihre Gestaltung nutzen. Partner: Spacing-System, Gestaltungsraster
Begründen Sie, warum. Jede Entscheidung braucht ein Warum. Partner: Entscheidungslog
Erst ausprobieren, dann schärfen. Erst frei erkunden, dann mit Methode präzisieren. Partner: Variieren, dann Testen
Erst viele, dann gute. In der offenen Phase zählt Menge. Bewertet wird später. Partner: Thumbnail-Sketching, Variieren
So grob wie möglich, so fein wie nötig. Ein Entwurf ist nur so detailliert, wie es die Frage verlangt, die er beantworten soll. Partner: Thumbnail-Sketching, Prototyping
Über das Naheliegende hinaus. Neugier und Gestaltungswille. Partner: Permutation, Morphologischer Kasten
Wer nie danebenliegt, hat nicht genug ausprobiert. Fehler sind Lernanlass. Partner: Morphologischer Kasten
Gestalten Sie für die Ränder. Wer für extreme Situationen gestaltet, hilft allen. Partner: Barrierefreiheit prüfen
Früh an alle denken. Barrierefreiheit von Anfang an mitdenken, nicht am Ende nachrüsten. Partner: Kontrast prüfen
Was Menschen mit Einschränkung hilft, hilft allen. Barrierefreiheit macht Produkte für alle besser (Curb-Cut-Effekt). Partner: Barrierefreiheit prüfen
Gestaltung lenkt, also tragen wir Verantwortung. Wissen über Wahrnehmung lässt sich missbrauchen. Keine Dark Patterns. Partner: Crit mit der Frage “Wem nützt das?”
Phänomene erleben Sie selbst, bevor wir sie erklären. Jedes Phänomen führt zu mindestens einem Prinzip.
Geometrische Täuschungen. Länge, Größe und Richtung hängen vom Kontext ab (Müller-Lyer, Ebbinghaus, Hermann-Gitter, Café-Wand, Sander).
Kippfiguren. Dieselbe Form erlaubt zwei Lesarten, aber nie beide zugleich (Necker, Rubin, Escher).
Scheinkonturen. Wir sehen Kanten, die nicht da sind (Kanizsa).
Sinnsuche. Wir suchen immer nach Sinn und sehen Gesichter in Wolken.
Erkennen braucht Vorwissen. Was man kennt, erkennt man schneller.
Helligkeitstäuschung. Gleiche Grauwerte wirken je nach Umgebung verschieden (Adelson-Schachbrett).
Unaufmerksamkeitsblindheit. Wer auf eine Aufgabe fokussiert ist, übersieht Offensichtliches.
Ersteindruck in 50 ms. Ästhetische Urteile fallen in Sekundenbruchteilen (Lindgaard 2006).
Pop-out. Ein abweichendes Merkmal springt sofort ins Auge, Kombinationen von Merkmalen müssen gesucht werden (Treisman & Gelade 1980).
Change Blindness. Veränderungen bleiben unbemerkt, wenn der Moment des Wechsels unterbrochen wird (Rensink 1997).
Ästhetik-Usability-Effekt. Was schön ist, wird als leichter benutzbar wahrgenommen (Kurosu & Kashimura 1995).
Von-Restorff-Effekt. Das Andere bleibt hängen.
Serial-Position-Effekt. Anfang und Ende einer Liste bleiben besser hängen als die Mitte.
Begrenztes Arbeitsgedächtnis. Wir halten nur wenige Dinge gleichzeitig im Kopf, etwa drei bis vier.
Blickrichtung lenkt den Blick. Wir schauen dorthin, wohin abgebildete Personen schauen.
Tiefenstaffelung. Was ferner ist, wirkt kleiner, kontrastärmer und weniger gesättigt.
Bewegung zieht den Blick. Das Auge reagiert am Rand des Blickfelds stark auf Veränderung.
Verdichtung. Viele Punkte oder Linien kippen in Fläche und Tonwert.
Quadrat gegen Raute. Gleiche Form, gedreht, andere Wirkung.
Optische Mitte. Die geometrische Mitte wirkt zu tief. Kreise wirken kleiner als gleich hohe Quadrate.
Irradiation. Helles auf Dunklem wirkt größer und fetter.
Phi-Phänomen. Zwei abwechselnd aufleuchtende Punkte sehen wir als Bewegung. Wertheimer 1912, der Beginn der Gestaltpsychologie.
Gefühlte Wartezeit. Reaktionen unter etwa 400 ms wirken unmittelbar. Wartezeit lässt sich gestalterisch verkürzen.
Simultankontrast. Eine Farbe verändert sich durch ihre Nachbarfarbe.
Flimmern. Komplementärfarben gleicher Helligkeit vibrieren an der Kante.
Stroop-Effekt. Farbe und Wortbedeutung konkurrieren beim Lesen.
Stufen gegen Verlauf. Benachbarte Tonstufen erzeugen Kanten, die es nicht gibt.
Helmholtz-Kohlrausch. Gesättigte Farben wirken heller als graue mit gleichem Helligkeitswert.
Wortbilder. Wir lesen Wortformen, nicht einzelne Buchstaben. Buchstabendreher stören kaum.
Die Prinzipien sind nach Gestaltungsaufgaben sortiert. Jede Gruppe hat eine Leitfrage. Zusammen ergeben die Leitfragen eine Prüfliste, mit der Sie jeden Entwurf durchgehen können, Ihren eigenen und den von anderen:
Prinzipien mit dem Zusatz (Für alle) haben einen direkten Bezug zur Barrierefreiheit. Die Namen am Ende verweisen auf die Quellen.
Man kann nicht nicht kommunizieren. Jedes Element sendet etwas, auch das ungestaltete. Watzlawick
Wahrnehmungsarbeit. Der Wert einer Gestaltung bemisst sich an den Kosten der Wahrnehmung. Moles
Kognitive Belastung. Belastung entsteht durch die Aufgabe selbst, durch unnötige Hürden oder durch Lernen. Gute Gestaltung senkt die unnötige. Sweller, Yablonski
Vier-Seiten-Modell. Jede Gestaltung sendet vier Botschaften: Sache, Selbstkundgabe, Beziehung, Appell. Schulz von Thun
Syntaktik, Semantik, Pragmatik. Zeichen haben eine Form, eine Bedeutung und eine Wirkung auf Menschen. Morris
Visuelle Variablen. Position, Größe, Form, Helligkeit, Farbe, Richtung, Textur: das Alphabet jeder Gestaltung. Bertin
Prägnanz. Wir sehen die einfachste mögliche Ordnung. Yablonski
Erfahrung. Bekannte Formen erkennen wir schneller und stabiler.
Erst wofür und für wen, dann wie. Funktion und Zielgruppe kommen vor der Form.
Nutzungskontext bestimmt Gestaltung. Unterwegs, am Schreibtisch, unter Stress: der Kontext ändert die Anforderungen.
Mentale Modelle. Menschen bringen Erwartungen mit, wie etwas funktioniert. Yablonski, Lidwell
Identität. Etwas bleibt trotz Veränderung als dasselbe erkennbar. Lorenz
Passung zum Gestaltungskontext. Eine Lösung muss in ihren gestalterischen, funktionalen und interaktiven Kontext passen: Produkt, Produktfamilie, Organisation. Runde Ecken mögen moderner wirken, aber passen sie zum Corporate Design? Lorenz
Feste und flexible Elemente. Identität entsteht aus Konstanten, Lebendigkeit aus Spielräumen. Lorenz
Öffnen und Schließen. Erst den Möglichkeitsraum öffnen, dann gezielt schließen. Design Council
Reduzieren und Vereinfachen. Weglassen, verstecken, verdichten: Was nicht hilft, stört. Maeda
Signal-Rausch-Verhältnis. Signal maximieren, Rauschen minimieren. Lidwell
Progressive Disclosure. Erst das Nötige zeigen, Details auf Anfrage. Lidwell
Hick’s Law. Mehr gleichwertige Optionen bedeuten eine längere Entscheidung. Yablonski, Lidwell
Tesler’s Law. Komplexität verschwindet nicht, sie wird nur verschoben. Die Frage ist, wer sie trägt. Yablonski
Erkennen statt Erinnern. Sichtbares wiederzuerkennen ist leichter, als sich zu erinnern. Nielsen, Lidwell
Nähe. Was nah beieinander steht, gehört zusammen. Lidwell, Yablonski
Ähnlichkeit. Was gleich aussieht, gehört zusammen. Lidwell, Yablonski
Geschlossenheit. Wir ergänzen Unvollständiges zu geschlossenen Formen. Lidwell
Gute Fortsetzung. Was auf einer Linie liegt, lesen wir als Verlauf. Lidwell
Gemeinsames Schicksal. Was sich gemeinsam bewegt oder verändert, gehört zusammen. Lidwell
Gemeinsame Region. Was in einem gemeinsamen Rahmen steht, gehört zusammen. Yablonski
Verbundenheit. Was verbunden ist, gehört zusammen, und zwar stärker als bei bloßer Nähe. Yablonski, Lidwell
Abstand zeigt Beziehung. Innen enger als außen: Was zusammengehört, steht näher als das, was trennt. Refactoring UI
Chunking (Für alle). Information in Häppchen ist leichter zu erfassen. Yablonski, Lidwell, Maeda
Farbe zum Strukturieren. Gleiche Farbe stiftet Zusammengehörigkeit.
Ausrichtung. Jedes Element richtet sich an etwas aus. Lidwell
Raster schafft Zusammenhang. Ein gemeinsames Raster verbindet alles, was darauf steht. Müller-Brockmann, Lupton
Wiederholung und Rhythmus. Wiederkehrende Abstände und Formen erzeugen Ruhe und Erkennbarkeit.
Gleichgewicht. Elemente haben optisches Gewicht. Ein Layout ist ausbalanciert oder bewusst in Spannung.
Kräfte. Schwerkraft (oben leicht, unten schwer) und Leserichtung (links oben nach rechts unten) wirken auf jedes Element.
Eindeutigkeit. Ordnen Sie Elemente so eindeutig wie möglich an. Zufall oder Gestaltung muss erkennbar sein.
Inhalt bestimmt Form (Für alle). Das Layout folgt dem Inhalt und seiner Priorität, auf jedem Viewport. Refactoring UI
Hierarchisieren. Nicht alles ist gleich wichtig, und das muss man sehen. Refactoring UI, Krug
Räumlichkeit als Hierarchie. Was größer, kontrastreicher, gesättigter oder vorn ist, wirkt näher und wichtiger.
Figur und Grund. Wir trennen jede Szene in Vordergrund und Hintergrund. Lidwell
Scanmuster. Screens werden in Z- oder F-Mustern überflogen, nicht gelesen. Krug
Farbe zum Akzentuieren. Eine Akzentfarbe zeigt, wo es langgeht.
Betonen durch Zurücknehmen. Hierarchie entsteht oft, indem man das Unwichtige leiser macht. Refactoring UI
Tiefe durch Licht und Schatten. Schatten und Überlagerung zeigen Ebenen. Refactoring UI
Typografische Hierarchie. Lesestufen: Dachzeile, Headline, Lead, Fließtext, Bildunterschrift. Lupton
Staging. Nur das Relevante bewegt sich, der Rest bleibt ruhig.
Hier geht es um Kontrast, Verhältnis und Spannung.
Farbkontraste. Farbe an sich, Hell-Dunkel, Kalt-Warm, Komplementär, Qualität, Quantität. Itten, Albers
Kontrastarten jenseits der Farbe. Größe, Form, Richtung, Menge, Textur.
Verhältnis statt Einzelmaß. Gute Proportionen entstehen aus Relationen, nicht aus Pixelwerten.
Goldener Schnitt. Ein Teilungsverhältnis von etwa 1 : 1,618, auch als Konstruktionshilfe. Lidwell
Bevorzugte Zahlen. Fibonacci, Renard und Drittel als Skalen für Größen und Abstände. Lidwell
Weißraum. Leere ist gestalteter Raum, nicht übrig gebliebener. Refactoring UI
Sparsam hervorheben. Wer alles betont, betont nichts. Lidwell
Helligkeit für Details, Farbton für Kategorien (Für alle). Formen und Text über Helligkeit unterscheiden, Kategorien über den Farbton. Ware
Formsemantik. Formen tragen Bedeutung: rund, eckig, spitz, offen.
Richtung hat Bedeutung. Steigend wirkt positiv, fallend negativ, waagerecht ruhig, senkrecht aktiv.
Farbwirkung und Farbklima. Farben tragen Stimmung, kulturell geprägt und abhängig vom Kontext. Itten
Farbe zum Emotionalisieren. Farbe erzeugt Atmosphäre, bevor ein Wort gelesen wird.
Schrift hat Ausstrahlung. Dieselbe Botschaft wirkt in jeder Schrift anders. Lupton
Schriftmischung. Kontrast oder Verwandtschaft, aber kein Zufall. Lupton
Bildsprache. Bilder tragen Haltung. Ausschnitt und Anschnitt steuern Nähe.
Visuelle Metaphern. Funktionieren nur, wenn Sender und Empfänger denselben Bezugsrahmen teilen.
Farbe und Lesbarkeit (Für alle). Lesbarkeit braucht Helligkeitskontrast, nicht Farbkontrast. Albers
Kontrastverhältnis (Für alle). Text braucht mindestens 4,5 : 1, große Schrift und Bedienelemente 3 : 1. WCAG 2.2, Kalbag
Farbe nie allein (Für alle). Information nie nur über Farbe transportieren. Refactoring UI, WCAG 2.2
Zurichtung und Laufweite. Buchstabenabstände bestimmen Ruhe und Lesbarkeit. Lupton
Zeilenlänge und Zeilenabstand (Für alle). 45 bis 75 Zeichen pro Zeile, Zeilenabstand etwa 120 bis 150 %. Lupton, Refactoring UI, Butterick
Grauwert. Ein Textblock soll gleichmäßig grau wirken. Lupton
Satzart folgt Textmenge. Mengentext linksbündig, Blocksatz nur mit Trennung und genug Breite, zentriert nur für Kurzes. Lupton
Absätze, Hurenkind, Schusterjunge. Text gliedern, Umbrüche kontrollieren.
Schriftschandtaten. Schriften nicht verzerren, nicht künstlich fetten, nicht konturieren. Lupton
Tabellen und Daten setzen. Daten brauchen eigene Regeln: Ausrichtung, Ziffern, Linien. Lupton
Verständlich formulieren (Für alle). Text im Interface, also Buttons, Fehlermeldungen und Labels: einfach, gegliedert, kurz und anschaulich. Langer, Schulz von Thun & Tausch, Krug
Signifier (Für alle). Was man bedienen kann, muss so aussehen. Norman, Lidwell
Feedback (Für alle). Jede Aktion braucht eine sichtbare Reaktion. Norman, Nielsen
Konsistenz (Für alle). Gleiches gleich, Unterschiedliches unterschiedlich gestalten. Lidwell
Konventionen (Für alle). Menschen verbringen die meiste Zeit auf anderen Seiten und bringen deren Gewohnheiten mit. Yablonski, Krug
Fitts’ Law (Für alle). Große, nahe Ziele trifft man schneller. Yablonski, Lidwell
Farbe zum Orientieren. Farbe zeigt, wo man ist und wohin es geht.
Animation hat einen Zweck (Für alle). Feedback, Zustandswechsel, Orientierung: Animation ist keine Dekoration.
Zustände gestalten (Für alle). Nicht nur den Idealfall: leer, laden, Fehler, Erfolg, dazu Hover, Fokus, aktiv, deaktiviert. Refactoring UI
Peak-End-Regel. In Erinnerung bleiben der Höhepunkt und das Ende. Yablonski
Mapping. Bedienelement und Wirkung entsprechen sich räumlich oder logisch. Norman, Lidwell
Easing und Timing (Für alle). Natürliche Bewegung beschleunigt und bremst. Die Dauer folgt Größe und Distanz.
Constraints (Für alle). Fehler verhindern statt warnen: Die Oberfläche lässt nur Sinnvolles zu, zum Beispiel eine Datumsauswahl statt eines Freitextfelds. Norman, Lidwell, Nielsen
Methoden mit dem Zusatz können sollen Sie beherrschen. Alle anderen sollen Sie kennen, sofern nichts anderes dabeisteht.
Beschreibungsraster (können). Screens vom Großen zum Kleinen beschreiben: Format und Gesamteindruck, Elemente, Eigenschaften, Beziehungen, Wirkung.
Layoutanalyse. Layouts über die 5 W-Fragen erschließen.
Semiotische Analyse. Zeichen auf Syntaktik, Semantik und Pragmatik prüfen.
Kommunikationsmodell. Sender, Empfänger, Code und Störung sichtbar machen.
SLIP. Inhalte sortieren, benennen, zusammenführen, priorisieren (nach Maeda).
Semantisches Differential (können). Wirkung über Gegensatzpaare beschreiben, vergleichen und messen.
Axis Map (können). Lösungen auf zwei Wirkungsachsen verorten.
Moodboard. Eine Grundstimmung aus Bildern, Farben und Begriffen verdichten. Im Projekt je nach Aufgabe gefordert.
Farbklima ableiten. Farbpaletten aus Bildern und Moodboards gewinnen.
Rebriefing. Briefings durch gezielte Fragen vervollständigen.
Gestaltungsraster (können). Spalten, Rinnen und Module anlegen.
Spacing-System (können). Abstände aus einer festen Skala statt nach Augenmaß.
Schriftauswahl (können). Schrift nach Zweck und Art des Lesens wählen.
Typografische Skala. Schriftgrößen in einem festen Verhältnis.
Goldener Schnitt und bevorzugte Zahlen. Proportionen konstruieren.
Satzspiegelkonstruktion. Ränder und Textfläche systematisch bestimmen.
Interface-Inventar. Ein bestehendes Interface systematisch erfassen.
Schriftklassifikation. Schriften einordnen.
Thumbnail-Sketching. Viele winzige Layoutskizzen in kurzer Zeit.
Scribbles. Layoutideen skizzieren.
5-Sekunden-Test (können). Was bleibt nach fünf Sekunden hängen?
Präferenztest. Welche Variante wird bevorzugt, und warum?
Unschärfe- und Graustufentest (können). Hierarchie prüfen, ohne Details und ohne Farbe.
Kontrast prüfen (können). Kontrastverhältnisse nach WCAG messen.
Barrierefreiheit prüfen. Mit den vier WCAG-Prinzipien (wahrnehmbar, bedienbar, verständlich, robust), Prüftools und der Simulation von Farbfehlsichtigkeit.
Heuristische Evaluation. Interfaces gegen Nielsens zehn Heuristiken prüfen.
Variieren entlang einer Achse (können). Ein Parameter ändert sich, alles andere bleibt gleich.
Übergangsreihe. Von A nach B in festen Schritten.
Permutation. Elemente nach einer Regel drehen, spiegeln, umstellen.
Morphologischer Kasten. Parameter und Ausprägungen systematisch kombinieren.
Remix (gelegentlich). Den Entwurf eines anderen Teams weiterentwickeln.
Crit (können). Designkritik mit festem Ablauf und gemeinsamem Vokabular.
Entscheidungslog (können). Festhalten, welche Variante warum gewählt wurde.
Gestaltungsziel formulieren (können). Die gewünschte Wirkung in einem Satz, prüfbar mit dem Semantischen Differential.
Gestaltungskontext analysieren (können). Konstanten und Spielräume finden: Produkt, Produktfamilie, Organisation.
Proto-Persona. Die Zielgruppe auf Basis von Annahmen auf einer Seite verdichten.
User Journey. Schritte, Gedanken und Gefühle entlang der Zeit.
User Stories. “Als … möchte ich …, damit …”
Double Diamond. Prozessmodell: Wo stehen wir gerade?
Was gibt es schon? (je nach Projekt). Recherchieren, welche Lösungen es für das Problem schon gibt.
Mit jedem Baustein kommen neue Begriffe dazu. Wir sammeln sie im Laufe des Semesters in einem Glossar. Einige Beispiele:
Anatomie der Buchstaben, Ligatur, Geviert, Variable Fonts, Legibility und Readability, Fovea, Sakkade, Fixation, Affordanz, Microinteraction, Design Tokens, Fidelity, Skeuomorphismus, Tonalität, modulares Raster, Rinne, Kerning, Easing
Steve Krug: Don’t Make Me Think, Revisited. New Riders, 3. Auflage 2014. Kurz, witzig und sofort einleuchtend. Der beste Einstieg.
Adam Wathan & Steve Schoger: Refactoring UI. Bildlastig, aus Entwicklersicht geschrieben, sofort anwendbar.
Jon Yablonski: Laws of UX. O’Reilly, 2. Auflage 2024. Psychologie im Interface, schön aufbereitet.
Josef Albers: Interaction of Color. Yale University Press, Jubiläumsausgabe 2013. Farbphänomene zum Selbermachen.
Benedikt Groß, Hartmut Bohnacker, Julia Laub & Claudius Lazzeroni: Generative Gestaltung. Creative Coding im Web. Verlag Hermann Schmidt, 2018.
William Lidwell, Kritina Holden & Jill Butler: Universal Principles of Design. Rockport Publishers. Ein Prinzip pro Doppelseite, ideal zum Nachschlagen.
Martin Lorenz: Flexible Visual Systems. Systematisch variieren, regelbasiert gestalten.
Ellen Lupton: Thinking with Type. 3. Auflage 2024. Schrift, Text und Raster.
John Maeda: The Laws of Simplicity. MIT Press. Eine Haltung zum Reduzieren.
Sophie Cure & Barbara Seggio: Graphic Design Play Book. Rätsel und kleine Challenges zum Mitmachen.
Colin Ware: Visual Thinking for Information Design. Morgan Kaufmann, 2. Auflage 2021. Wahrnehmung und Kognition als Grundlage für Gestaltungsregeln.
Jacques Bertin: Sémiologie graphique (1967). Harry Brignull: Deceptive Patterns (2023). Matthew Butterick: Practical Typography (online). Bill Buxton: Sketching User Experiences (2007). Adam Connor & Aaron Irizarry: Discussing Design (2015). Nathan Curtis: Space in Design Systems (Artikel). Design Council: Double Diamond (2005). Johannes Itten: Kunst der Farbe (1961). Laura Kalbag: Accessibility for Everyone (2017). Austin Kleon: Show Your Work! (2014). Langer, Schulz von Thun & Tausch: Hamburger Verständlichkeitsmodell. Abraham Moles: Wahrnehmungsarbeit. Charles W. Morris: Zeichentheorie. Josef Müller-Brockmann: Rastersysteme für die visuelle Gestaltung (4. Auflage 1996). Jakob Nielsen: 10 Usability Heuristics. Don Norman: The Design of Everyday Things. Charles E. Osgood: Semantisches Differential. Dieter Rams: Zehn Thesen für gutes Design. Friedemann Schulz von Thun: Miteinander reden. John Sweller: Cognitive Load Theory (1988). Paul Watzlawick: Menschliche Kommunikation. W3C: Web Content Accessibility Guidelines 2.2. Hans Peter Willberg & Friedrich Forssman: Lesetypografie. Fritz Zwicky: Morphologischer Kasten.