W05 · UI/UX und Bildgestaltung · Dozentenleitfaden

180 Minuten einschließlich 15 Minuten Pause. Elf Workshopseiten. Aufgaben eigenständig, kein verpflichtendes Tandem. Fremdtest am Ende ist eine separate Testhandlung. Der Button „Moderation“ zeigt kurze Hinweise; dieser Leitfaden erklärt jede Seite ausführlicher.

Seite 1 · Einfach. Und trotzdem alles da. · 0–5 Minuten

Didaktische Absicht: Über einen sofort verständlichen Vorher-/Nachher-Vergleich die Frage öffnen: Wie bleibt eine Anwendung einfach, obwohl sie alle benötigten Funktionen hat?

Fachliche Erklärung: Beide fiktiven Anmeldungen bieten Name, E-Mail, Termin, optionale Erinnerung und Unterstützungsbedarf sowie Validierung, Reset und Zusammenfassung. In der zweiten Variante machen klare Hierarchie, handlungsbezogene Beschriftung und bedarfsgerecht aufklappbare Extras die Hauptaufgabe sichtbarer. Das ist eine Designhypothese, keine gemessene Konversionssteigerung. Form follows function ist die didaktische Leitidee, übertragen aus Sullivans Architekturgedanken, nicht eine von ihm untersuchte Softwarewirkung.

Moderation: Kurz fragen: „Wo würden Sie zuerst klicken?“ Einen Fehler und eine optionale Angabe demonstrieren. Nur fiktive Testdaten; die Demo verschickt nichts.

Stolperstellen: Die absichtlich schlechte Variante bleibt bedienbar und ist kein Vorbild. „Einfach“ heißt nicht, Hilfe, Labels oder notwendige Funktionen wegzulassen. Die ruhige Oberfläche ist nicht automatisch schon bewiesenermaßen besser – der Test folgt später.

Übergang: „Genau diesen Unterschied bauen wir heute in Ihr eigenes Projekt ein.“

Seite 2 · Vier kleine Schritte · 5–10 Minuten

Didaktische Absicht: Orientierung geben, ohne einen Werkzeug- oder Theorieberg aufzubauen.

Fachliche Erklärung: Verstehen → Gestalten → Bilder verändern → Bauen und testen. Die vier sichtbaren Produkte sind Stilkarte, Bildpaar, überarbeitete Anwendung und Testbeobachtung. Ein Fortschrittshäkchen dokumentiert nur die eigene Bearbeitung, keine automatische Kompetenzmessung. Progressive Disclosure zeigt die wichtige Aktion zuerst; weiterführende Materiallinks bleiben erreichbar.

Moderation: Hauptziel vorlesen: „Die Hauptaufgabe ist sofort klar.“ Bei Bedarf Materialien/QR öffnen. Die Vorbereitung aus W04 genügt; kein neuer GitHub-/PWA-Setupblock.

Stolperstellen: Checklisten und Theme speichern nur lokal, nicht auf einem Kursserver. Bei gesperrtem Browserspeicher funktioniert die Sitzung trotzdem. Der andere Mensch beim späteren Test ist kein vorgeschriebener Baupartner.

Übergang: „Erst schauen wir auf die Oberfläche und den tatsächlichen Weg zum Ziel.“

Seite 3 · UI und UX · 10–25 Minuten

Didaktische Absicht: Oberfläche von Nutzungserlebnis unterscheiden und am gleichen Beispiel drei überprüfbare Verbesserungen erkennen.

Fachliche Erklärung: UI umfasst sicht- und bedienbare Elemente. UX umfasst das Erleben des gesamten Wegs zur Erledigung. Ein hübscher Button kann Teil einer frustrierenden Reise sein, wenn etwa Fehler unverständlich bleiben. Die zehn Wegweiser sind eigene Kurzfragen nach Nielsens Heuristiken: Status, Sprache, Kontrolle, Konsistenz, Fehlervermeidung, Wiedererkennen, Effizienz, Wesentliches, Fehlerbehebung, Hilfe. Es sind Faustregeln, kein Zertifikat. Kontrast und Bildalternativen sind wichtige, aber nicht alle Aspekte von Barrierefreiheit; 4,5:1 gilt für normalen Text, 3:1 für nach WCAG definierten großen Text.

Moderation: 10–13 Demo; drei Wegweiser auswählen, Gesamtinfografik bei Bedarf öffnen. 13–20 eigenständiger UI-Check (Aufgabe7Minuten). 20–25 Wrap-up (5 Minuten). Auftrag: drei Hindernisse mit Änderung und Nutzen; vollständiger Prompt auf der Seite.

Stolperstellen: Nicht zehn Regeln nacheinander dozieren. Vorher/Nachher nicht mit unterschiedlichem Funktionsumfang verwechseln. Fehlermeldung soll Problem und nächsten Schritt erklären, nicht nur rot sein. Ein Sprachmodell kann ungesehene Screenshots nicht belastbar bewerten – der Prompt fordert das Material ausdrücklich an.

Übergang: „Welche Gestaltungsmuster helfen unserer Hauptaufgabe – und welche lenken ab?“

Seite 4 · Farbkreis und Paletten · 25–30 Minuten

Absicht: Mit drei einfachen Beziehungen eine bewusste Palette statt zufälliger Lieblingsfarben wählen. Analog = benachbart (hier −30°/0°/+30°), komplementär = gegenüber (180°), triadisch = drei gleichmäßig verteilte Farbtöne (120°). Die Interaktion verwendet den digitalen HSL-Kreis, keinen traditionellen Pigment-Farbkreis. Sättigung und Helligkeit bleiben in den Farbfeldern gleich; Abstände allein garantieren keine Lesbarkeit.

Moderation: Drei Schemata umschalten, Regler einmal bewegen, Zahlen und HEX-Werte vergleichen. Die drei generierten Leseecken zeigen feste illustrative Beispiele. Der Regler färbt diese Bilder nicht live um. Adobe Color ist eine optionale externe Vertiefung mit Internetbedarf. Keine zusätzliche Pflichtaufgabe.

Seite 5 · Farbe anwenden · 30–35 Minuten

Absicht: Gleiche Funktion, andere Farbwelt. Basis, Hauptfarbe und Akzent haben unterschiedliche Aufgaben. Ruhig/Warm/Mutig ändern nur das Aussehen der fiktiven Workshop-Anwendung. Button bleibt lokal benutzbar, keine echte Reservierung. Farbe soll die Hauptaktion führen, nicht jede Fläche gleich wichtig machen.

Einordnung: Die Beispiele für Blau, Grün, Rot/Orange und Violett/Gold sind kontextabhängige gestalterische Konventionen, keine universellen Gefühle oder Kulturgesetze. Mit der Zielgruppe testen. Status zusätzlich als Text/Symbol, nie nur Rot/Grün. Kontrastwerte werden für Fließtext auf Hintergrund und weißen Buttontext auf Buttonfarbe berechnet; alle drei Beispiele liegen über4,5:1. Das ist keine vollständige WCAG-Prüfung. Harmonie der Farbtöne und Lesbarkeit sind unterschiedliche Fragen. Quellen COL1–COL3.

Seite 6 · Vorlagensafari und Stilkarte · 35–55 Minuten

Didaktische Absicht: Aus Vorbildern wenige begründete Regeln statt eine fremde Website kopieren.

Fachliche Erklärung: Eine kleine Stilkarte beschreibt Zielgruppe, Hauptaufgabe, Palette, Schrift, Buttons und Bildregel. Wiederverwendbare Regeln und Komponenten schaffen Konsistenz. Die öffentliche Vorlagensammlung dient der Inspiration; Lovables native Designsystemfunktion auf bezahlten Plänen ist keine Kursvoraussetzung. „Function follows form“ kann als kreativer Gegenansatz neue Nutzungen einer Form suchen, darf aber die Nutzeraufgabe nicht verdrängen.

Moderation: 35–50 eigenständige 15-Minuten-Safari. Zwei Links, ein nützliches Muster und eine Nicht-Übernahme notieren. 50–55 Wrap-up. Stilkarte kopieren und für den Bau aufbewahren. Optionale UI-Aufbauidee: Student Patrick Müller; sein Original wird nicht veröffentlicht, ein Repo-Link wird erst nach Vorliegen ergänzt.

Stolperstellen: Fremde Fotos, Marken, Texte und Templates sind nicht pauschal frei kopierbar. Kein Anmelde-/Bezahlprozess im Pflichtteil. Screenshot/Beobachtung statt behauptetem Zugriff auf eine vom Modell nicht gelesene Website. Schönes Muster ohne Nutzen weglassen.

Übergang: „Ein Bild ist ebenfalls eine Designentscheidung. Welches Motiv brauchen wir wirklich?“

Seite 7 · Ein Objekt, eine Person · 55–85 Minuten

Didaktische Absicht: Bildwünsche als beobachtbare Eigenschaften formulieren und eine geeignete Ausgangsbasis für kontrollierte Änderungen schaffen.

Fachliche Erklärung: Motiv, Ausschnitt, Licht, Stil und Ausschlüsse strukturieren das Briefing. O0 enthält eine Erdbeere auf einem weißen Teller; P0 eine fiktive erwachsene Person im Ganzkörperbild. Die vorbereiteten Medien wurden tatsächlich mit Kie.ai / Nano Banana 2 erzeugt. Ein Ganzkörperbild macht Pose und Gestik prüfbar, ein ruhiger Hintergrund erleichtert den Vergleich. Es gibt keine universell optimale Promptreihenfolge oder Englischpflicht.

Moderation: 55–60 beide Motive zeigen, 60–80 ein eigenes Basisbild erzeugen; die zweite Basis kann heruntergeladen werden. 80–85 Wrap-up. Danach 85–100 die 15-Minuten-Pause einlegen, ohne eigene Pausenfolie. Timer bewusst stoppen.

Stolperstellen: Keine privaten Personenbilder ohne geklärte Rechte/Einwilligung hochladen. Die KI-Person ist keine reale Identität. Motivanzahl, Hände, Füße, Schatten und ungewollte Extras prüfen. Ein fertiges Bild ist nicht automatisch sachlich richtig oder kommerziell rechtssicher. Anbieterbedingungen bleiben relevant.

Übergang: „Jetzt ändern wir genau einen Aspekt – und prüfen, was versehentlich mitwandert.“

Seite 8 · Eine gezielte Änderung · 100–125 Minuten

Optionale Vertiefung: „Personen-Atlas · Frau & Mann“ bietet14 Rastertafeln mit je8 Feldern: Mimik als große Gesichtsportraits, Gestik, Posen, Kleidung, Frisuren, Augenpartie und Gesichtsform für P0/M0. Ganze Tafel und passende Referenz sind lokal herunterladbar. Kein Anspruch auf alle möglichen Ausdrucksformen; inszenierte Mimik ist kein Nachweis innerer Gefühle. Bei anatomischen Änderungen kann sich Wiedererkennbarkeit bewusst verändern. Die sichtbaren Abweichungen bei Händen, Pose oder Augenmerkmalen sind Gegenproben, keine behauptete Perfektion.

Werbetypografie: OT4–7 zeigen Editorial, verspielt, Luxus und experimentelle Ebenen/Outline mit längeren Headlines, Subline und fiktivem Label. Nicht nur Schriftart nennen: Hierarchie, Position, Zeilenumbrüche, Kontrast, Freiraum und Überlagerung präzisieren. Alle Texte nachlesen; genaue Schriftfamilie und kleine Texte können Nacharbeit erfordern. In produktiven UIs echte HTML-Schrift statt eingebrannter Bildschrift verwenden.

Großmodus: Basis und Variante direkt im vergrößerten Bildpaar wechseln. „Prompt kopieren“ passt immer zur Auswahl; im Atlas ebenfalls Person/Thema ändern und Tafel-Prompt kopieren. Bei gesperrter Zwischenablage wird der Text für manuelle Kopie geöffnet und markiert. Die volle Bibliothek ist Auswahlmaterial, keine112 zusätzlichen Aufgaben.

Erweiterter Nutzerreview: Typografie auf O0 mit dem identischen Text „Einfach gut.“: Sans Serif oben links, Serif unten links, Handschrift oben rechts. Lesbarkeit, Schreibweise, Position und Motivüberdeckung vergleichen. Eine genaue Schriftfamilie kann ein Bildmodell nicht verlässlich garantieren. Für eine produktive Web-UI besser echten HTML-/CSS-Text verwenden; die generierten Schriftbilder sind hier eine bewusst getrennte Posterübung.

P8: Wohnzimmer; P9: Berggipfel und Schneefall; P10: im Café sitzend; P11: dicker, kräftiger, freundlicher Fantasy-Troll. Dazu PS4–PS7: Knete/Stop-Motion, Holzschnitt, Ölgemälde und Retro-Comic. Alle verwenden P0, nicht das vorherige Ergebnis. Für Szene und Sitzen dürfen Hintergrund, Licht, Schatten und Pose bewusst wechseln. Augenpartie, Nase, Lächeln, Haaransatz und Frisur als Charakteranker vergleichen. Über „Bildpaar vergrößern“ genauer prüfen. Eine starke Troll-Verwandlung testet die Grenze der Wiedererkennbarkeit; sie beweist keine biometrische oder perfekte Identitätstreue. Neue Beispiele sind Auswahlbibliothek, kein zusätzlicher Variantenmarathon im Kurs.

Didaktische Absicht: Änderungsziel und Erhaltungsziel auseinanderhalten; Bildmodelle kritisch beurteilen, statt nur das erste schöne Resultat zu akzeptieren.

Fachliche Erklärung: O1–O3 verändern Frucht, Tellerfarbe oder Hintergrund. P1–P7 zeigen jüngere/ältere erwachsene Variante, Frisur, Pose, Mimik, Gestik und Kleidungstausch. OS1–OS3 und PS1–PS3 übertragen die jeweilige Basis in Aquarell, Comic und 3D-Illustration. Jeder Auftrag verwendet erneut O0/P0 als Bildreferenz, keine schleichende Editkette. „Beibehalten“ ist eine Modellvorgabe, keine Garantie gleicher Pixel oder Identität.

Moderation: 100–105 ein Objektpaar und Kleidungstausch zeigen. 105–120 eine Objekt- und eine Personenänderung, Stil nur bei Zeit. 120–125 Wrap-up. Den exakten Prompt zur jeweiligen Auswahl öffnen. Vergleichen lassen: Was sollte sich ändern? Was blieb nicht erhalten?

Stolperstellen: Nicht alle 16 Varianten neu erzeugen lassen. Älter/jünger ist keine Bewertung menschlichen Wertes oder Könnens. Bei Stiltransfer ändern sich Materialien und Texturen gewollt; eine andere Handhaltung oder zusätzliche Motive können trotzdem Fehler sein. Bei Kleidung braucht es oft neue Stofffalten und Schatten – nicht jede Pixeländerung ist eine unzulässige Abweichung.

Übergang: „Unsere Anwendung bekommt jetzt nicht einfach mehr Bilder, sondern ein passendes Bild.“

Seite 9 · Smartphone-Dashboard · 125–135 Minuten

Didaktische Absicht: An einem konkreten mobilen Beispiel zeigen, wie dieselben Daten je nach Nutzerfrage eine andere, aber einfache Oberfläche erhalten.

Fachliche Erklärung: Drei eigene didaktische Muster, keine empirisch ermittelten „Sieger“: Überblick priorisiert eine Hauptkennzahl; Vergleich zeigt gleiche Zeiträume und Skalen; Handlung zeigt Zielabstand und eine Hauptaktion. Beschriftete Navigation, sichtbarer aktiver Zustand und echte lokale Rückmeldungen unterstützen Orientierung. Diagramme haben eine Nullbasis, Einheit und zugängliche Wertetabelle. Keine echte Bank-/Geschäftsanwendung, sondern eine native HTML-Demo mit erfundenen Café-Daten.

Moderation: Zwischen den drei Ansichten wechseln; Erklärung steht rechts. Bericht- Button, Wertetabelle und Notizfeld ausprobieren. Gleiche Daten betonen: 3.600 € versus 3.000 € (+20 %), 450 Bestellungen, Ø Bon 8 €, Ziel 4.000 € zu 90 % erreicht. Eine Beobachtungsfrage: Welche Hauptfrage beantwortet diese Ansicht – und was lässt sie weg? Dashboard-Prompt ist optionaler Transfer, kein neuer Pflicht-Bauauftrag.

Stolperstellen: Mehr Kennzahlen ist nicht automatisch mehr Erkenntnis. Fiktive Werte nicht als echte Geschäftsdaten verwenden. Ein schöner Chart ohne Einheit, Zeitraum oder faire Skala kann irreführen. Die Miniatur ist ein Designbeispiel, keine vollständige Barrierefreiheits-/Touch-Zielgrößenprüfung für eine produktive mobile App.

Übergang: „Welches dieser Muster hilft der wichtigsten Aufgabe Ihrer Anwendung?“

Seite 10 · Projekt überarbeiten und testen · 135–170 Minuten

Didaktische Absicht: Die Gestaltung auf das eigene W04-Projekt übertragen und Nutzen durch beobachtetes Verhalten statt Selbstlob beurteilen.

Fachliche Erklärung: Ausgangsdateien, Stilkarte, optionales Bild und Funktionsliste bilden den Auftrag. Die fachliche Logik bleibt erhalten. Der Test prüft Hauptaktion, Fehlerkorrektur und erweiterte Option. Drei gelungene Aufgaben sind hilfreiche Beobachtungen, kein umfassender Usability- oder Sicherheitsnachweis. Der Fallback ist eine eigenständige, lokal lauffähige HTML-Datei mit eingebettetem CSS/JavaScript; keine echte Buchung oder Datenübertragung.

Moderation: 135–138 Dateien und Prompt klären. 138–158 bauen (20 Minuten). 138–141 Setup-Check: Haben alle die Generierung gestartet? 141–149 mögliches Newsfenster mit der bestehenden Linkliste. Nur bei tatsächlich laufenden Builds; bei Problemen Unterstützung vorziehen und News verschieben/verkürzen. Keine Bauzeit doppelt zählen oder Timer neu starten. 158–165 andere Person testen lassen, Timer auf Test 7 Minuten. 165–170 Wrap-up 5 Minuten. Feedbackbogen anonym lokal, kein Versand; bei Bedarf TXT sichern.

Stolperstellen: Ausgangsversion sichern; kein versehentliches Backend-/Logik-Redesign. Dateien statt bloßer Beschreibung übergeben. Nicht erklären, wo die Buttons sind, bevor der Test beginnt. Eine Rückmeldung ist kein repräsentatives Forschungsresultat. Bilder nur nutzen, wenn sie die Aufgabe unterstützen. Kein unaufgeforderter Veröffentlichungsauftrag an das Modell; bestehende Offline-Funktion bewahren, kein neuer PWA-Installationsblock.

Übergang: „Welche eine Verbesserung macht den nächsten Schritt für die Person leichter?“

Seite 11 · Big Picture, Prüfliste und Quellen · 170–180 Minuten

Didaktische Absicht: Den Gestaltungszyklus verbinden und eine nächste konkrete Verbesserung festhalten.

Fachliche Erklärung: Ziel klären → einfach gestalten → Bild gezielt ändern → Benutzung testen → verbessern. Die generierte Infografik ist eine Metapher, kein empirisches Prozessmodell. Die Anfangsfrage beantwortet sich: Hauptweg sichtbar machen, benötigte Funktionen behalten, Extras verständlich anbieten und die tatsächliche Benutzung prüfen. Die Liste deckt nur einen Teil einer vollständigen Qualitätsprüfung ab.

Moderation: Erst das statische Big Picture lesen lassen. Eine Verbesserung pro Person. Prüfliste und Quellen als Reiter dieser Seite, bewusst kein neuer Theorieblock. Vollständige Quellenübersicht liegt offline bei; Originalseiten benötigen Internet. Die freigegebene Workshopstruktur bündelt Agenda/Initialfrage im Cockpit und Quellen im Schlussreiter.

Stolperstellen: Das Bild ersetzt nicht die Prüfung. Generierte Medien nicht als echte Fotobeweise verwenden. Kein Konversionsversprechen oder Barrierefreiheitszertifikat ableiten.

Übergang: Zum eigenen Projekt: nächste Änderung umsetzen und erneut testen, statt noch ein Werkzeug einzurichten.

Bedienhinweise

Timer: kein Autostart, getrennte Aufgabe/Test/Wrap-up-Zustände. Phasenwechsel pausiert die vorige Phase; Promptdialog setzt nicht zurück. Live-Bildgenerierung, Lovable und News brauchen Internet. Offline funktionieren Medien, Demo, Promptbibliothek, Timer und Feedback. Auf echten Trinity- iPad-Import nicht getestet; vollständigen Wochenordner/ZIP statt einzelner Startdatei importieren.