WOCHE 05 · UI/UX & BILDGESTALTUNG

Einfach. Und trotzdem alles da.

Gleiche Aufgabe. Gleiche Funktionen. Ein verständlicherer Weg.

VORHER · Was soll ich hier tun?

NACHHER · Platz reservieren.

Form follows function. Wir gestalten für Menschen – nicht für den Screenshot.

Quellen: [REF1] · [UI10]

WOCHE 05 · DEIN WORKSHOP

Vier kleine Schritte. Ein besseres Ergebnis.

Arbeite eigenständig. Vergleiche freiwillig. Lass am Ende jemand anderen testen.

01 · VerstehenWas braucht die Person vor dem Bildschirm?02 · GestaltenEine kleine Stilkarte statt Designchaos.03 · Bilder verändernEin Original. Eine klare Änderung.04 · Bauen & testenEine bessere Anwendung – mit Gegenprobe.

DAS ZIEL HEUTE

Die Hauptaufgabe
ist sofort klar.

Mehr Funktionen müssen nicht mehr Unordnung bedeuten.

0 von 4 Schritten markiert · nur auf diesem Gerät

Quellen: [REF1] · [UI10]

WOCHE 05 · OBERFLÄCHE VERSTEHEN

UI ist die Oberfläche. UX der Weg zum Ziel.

15:00

UI: Was sehe und bediene ich?
Felder, Farben, Buttons, Rückmeldungen.

UX: Komme ich verständlich ans Ziel?
Finden, ausfüllen, Fehler lösen, fertig.

Simplicity ≠ Funktionen streichen.
Hauptweg zuerst. Extras bei Bedarf.

10 UI-Regeln ↗ · Dos & Don'ts ↗

Wrap-up · Erkenntnis aufklappen

Gute UI zeigt den Hauptweg. Gute UX zeigt sich beim tatsächlichen Erledigen – nicht nur beim Anschauen.

Quellen: [UI1] · [UI5] · [UI6] · [UI7] · [UI8] · [UI10] · [UI11] · [UI13]

WOCHE 05 · FARBKREIS & PALETTEN

Farben brauchen einen Plan.

Eine Grundfarbe. Drei Wege, passende Nachbarn zu finden.

Grundfarbton verändern 185°

Digitaler HSL-Kreis, keine Anleitung zum Mischen von Malfarben.

Analog: nebeneinander.

Ähnliche Farbtöne verbinden Flächen. Helligkeit trennt Text und Hintergrund.

Leseecke mit benachbarten blaugrünen Farbtönen — Analog · illustratives KI-Beispiel, kein exakter HEX-Farbnachweis.

Der Regler ändert Kreis und Palette. Die drei Bildbeispiele sind fest vorbereitet.

Adobe Color live ausprobieren ↗

Quellen: [COL1] · [COL2]

WOCHE 05 · FARBEN ANWENDEN

Farbe führt. Sie schreit nicht.

Gleiche Anwendung, gleiche Funktion – drei Farbwelten.

CAMPUS · FIKTIVES BEISPIEL

Dein nächster
Workshop.

Wähle einen Termin.
Den Rest machen wir einfach.

Do · 14:00 Uhr 12 Plätze frei

✓ Anmeldung noch offen · keine echten Daten

UI-Farbstudie · Termine und Daten fiktiv

Petrol als Hauptfarbe, Salbei als ruhige Fläche. Ein Akzent lenkt zur Aktion.

Wenige Farben.
Klare Rollen.

Basis für Hintergrund und Lesbarkeit.
Hauptfarbe für Wiedererkennung.
Akzent für die wichtigste Aktion.

Was Farben bedeuten können

Blau/Petrol: oft sachlich oder vertrauensbezogen inszeniert.
Grün: oft Natur oder „erledigt“.
Rot/Orange: oft Aufmerksamkeit, Warnung oder Energie.
Violett/Gold: oft kreativ oder hochwertig inszeniert.

Konventionen, keine Naturgesetze. Zielgruppe, Kultur und Situation prüfen.

Lesbarkeit vor Harmonie.
Kontrast wird berechnet.
Status immer auch als Text oder Symbol – nicht nur rot/grün.

Farbton-Kontrast ≠ Hell-Dunkel-Kontrast. Die Zahlen prüfen nur die gezeigten Text-/Hintergrundpaare, nicht die vollständige Barrierefreiheit.

Quellen: [COL2] · [COL3]

WOCHE 05 · 15 MINUTEN VORLAGENSAFARI

Ideen leihen. Nicht den Ballast.

15:00

Zwei Vorlagen ansehen.
Ein gutes Muster mitnehmen.
Eine Sache bewusst weglassen.

Lovable-Vorlagen öffnen ↗

Inspiration ansehen, kein bezahlter Lovable-Zugang nötig.
Fremde Texte, Bilder und Marken nicht ungeprüft übernehmen.

Form follows function – und die Gegenperspektive?

Erst Aufgabe, dann Form: unser Leitgedanke. „Function follows form“ kann Ideen anregen: Welche neue Nutzung ermöglicht eine Form? Eine schöne Vorlage darf aber nicht die Aufgabe verdrängen.

Designsysteme ↗ · Webdesign-Praxis ↗

Wrap-up · Erkenntnis aufklappen

Wiedererkennbare Regeln sparen Entscheidungen. Nicht die ganze Vorlage übernehmen, sondern das passende Muster.

Quellen: [UI2] · [UI3] · [UI4] · [UI5] · [UI10] · [UI11] · [UI12] · [REF2]

WOCHE 05 · BILDER GEZIELT ERZEUGEN

Ein Objekt. Eine Person. Ein klares Briefing.

20:00

Motiv + Ausschnitt + Licht + Stil.
Und: Was soll nicht hinein?

Eine Erdbeere auf einem Teller.

Ein Hauptmotiv. Ruhiges Licht. Genug Platz, um später einzelne Dinge zu verändern.

Ausgangsbild herunterladen

Fiktive erwachsene Person, keine reale Identität.
Keine privaten Fotos hochladen, wenn Rechte und Einwilligung fehlen.

Nicht alles zugleich ändern.
Erst ein gut prüfbares Original schaffen.

Eine einzelne rote Erdbeere auf einem weißen Teller im weichen Seitenlicht — O0 · KI-generiertes Ausgangsbild · Kie.ai / Nano Banana 2

Wrap-up · Erkenntnis aufklappen

Ein präzises Bildbriefing beschreibt sichtbare Merkmale. Ein gutes Ausgangsbild macht spätere Änderungen vergleichbar.

Quellen: [IMG1] · [IMG2] · [UI9]

WOCHE 05 · BILDER BEARBEITEN

Ein Original. Viele Möglichkeiten.

15:00

AusgangsbildÄnderung

Unverändertes Ausgangsbild O0 — O0 · Original

Bearbeitete Variante: nur die Frucht ausgetauscht — O1 · Nur die Frucht austauschen

DEINE GEGENPROBE

Was ist anders?
Was sollte bleiben?

Teller, Tisch, Ausschnitt und Licht vergleichen.

Jede Variante beginnt bei O0/P0. Bei neuen Szenen dürfen Pose und Licht bewusst wechseln – nicht der Charakter.

Charaktercheck

Augenpartie, Nase, Lächeln, Haaransatz und Frisur mit P0 vergleichen. Neue Pose oder Umgebung ja; ein anderes Gesicht nein. Bei starker Verwandlung Konsistenz kritisch prüfen.

Variante herunterladen ↓

Wrap-up · Erkenntnis aufklappen

„Beibehalten“ ist eine Vorgabe, keine Garantie. Gewünschte Änderung und ungewollte Abweichung getrennt beurteilen.

Quellen: [EMO1] · [UI15] · [IMG1] · [IMG2]

WOCHE 05 · UI-DASHBOARD · VERGLEICHEN & AUSPROBIEREN

Ein Smartphone. Drei klare Ansichten.

Campus Café DEMO

Woche A · Mo–So

Deine Woche.

Umsatz

3.600 €

+20 % zur Vorwoche · 3.000 €

450Bestellungen

8,00 €Ø Bon

Umsatz pro Tag € · 0–800

Lokale HTML-Demo · alle Zahlen fiktiv.

DREI GUTE MUSTER · KEINE EINHEITSLÖSUNG

Das Wichtigste zuerst.

Eine Hauptkennzahl.
Zeitraum und Vergleich stehen direkt dabei.

Ein ruhiger Chart.
Zeigt den Verlauf, nicht zehn Dinge zugleich.

Eine klare Hauptaktion.
Details bleiben über beschriftete Zugänge erreichbar.

Buttons ausprobieren. Dann: Was würdest du für dein Projekt übernehmen – und was nicht?

Quellen: [UI7] · [UI10] · [UI14] · [UI16] · [DEMO1]

WOCHE 05 · DEIN BESTEHENDES PROJEKT WEITERENTWICKELN

Einfacher. Nicht ärmer.

20:00

ONEPAGER ODER LERNWERKSTATT AUS W04

Stilkarte + passendes Bild
+ bestehende Funktionen.

Dateien übergeben. Ausgangsversion sichern.
Oberfläche vereinfachen. Fachlogik erhalten.
Anders testen lassen. Nicht erst erklären.

Kein Projekt zur Hand? Fiktiven Onepager öffnen ↗ · HTML herunterladen ↓

7 MINUTEN TEST · ANDERE PERSON

Zeig nicht wie.
Schau zu.

Hauptaktion ohne Hilfe finden. Einen Eingabefehler korrigieren. Erweiterte Option finden.

Wo stockte es? Was ändern wir als Nächstes?

Kurzen Feedbackbogen öffnen ↗

Anonym, lokal, kein Versand.
Keine verpflichtende Zweierarbeit beim Bauen.

Wrap-up · Erkenntnis aufklappen

Die beste Verbesserung zeigt sich beim Benutzen. Weniger Unordnung – nicht weniger notwendige Funktionen.

Quellen: [UI2] · [UI3] · [UI5] · [UI7] · [UI8] · [UI9] · [UI10] · [UI11] · [UI13] · [REF2]

WOCHE 05 · DAS BIG PICTURE

Gutes Design macht den nächsten Schritt leicht.

Bildhafte Reise: Aufgabe klären, Oberfläche vereinfachen, Bild gezielt gestalten, Benutzung testen und Hindernisse verbessern — KI-generierte Infografik · Kie.ai / Nano Banana 2

Eine klare Aufgabe. Eine sichtbare Hauptaktion. Ein prüfbares Ergebnis.

Quellen: [UI6] · [UI7] · [REF1]

W05 · Quellen und Aussagegrenzen

Recherche und Gegenprüfung: 03.11.2026. Eigene didaktische Übertragungen; Designheuristiken sind kein Zertifikat. KI-Bilder: Kie.ai / Nano Banana 2; Varianten aus O0/P0/M0, keine Pixelgarantie. Medienmanifest und Prompts liegen bei.

Tagesumsatz in Euro · gemeinsame Skala 0–800
Tag	Woche A	Vorwoche
Summe	3.600 €	3.000 €

[UI1] Mailchimp · Der Unterschied zwischen UX und UI
UI: bedienbare Oberfläche; UX: Nutzungserlebnis und Weg zum Ziel. Keine alten Marketingkennzahlen übernehmen.
https://mailchimp.com/de/marketing-glossary/ux-ui/

[UI2] Nadya A. / Hostinger · Web design best practices
Zielgruppe, Hierarchie, Navigation und zugängliche Gestaltung; keine Konversionsgarantien.
https://www.hostinger.com/tutorials/web-design-best-practices/

[UI3] Lovable · Design systems
Wiederverwendbare Komponenten und Gestaltungsregeln. Produktfunktion auf bezahlten Plänen; kein notwendiger Kurszugang oder React-Setup.
https://docs.lovable.dev/features/design-systems

[UI4] Lovable · Website- und App-Vorlagen
15 Minuten Vorlagensafari als Inspiration; keine pauschale Kopiererlaubnis für fremde Medien und Marken.
https://lovable.dev/de/templates

[UI5] Emily Stevens / UX Design Institute · 8 UI Design Dos and Don'ts
Beispiele für Weißraum, Ausrichtung, Bilder, Kontrast und Bedienbarkeit.
https://www.uxdesigninstitute.com/blog/ui-design-dos-and-donts/

[UI6] Louise Bruton / UX Design Institute · User interface guidelines: 10 essential rules to follow
Zehn Heuristiken als bildhafte Prüfhilfe, keine zehn Theorieeinzelfolien.
https://www.uxdesigninstitute.com/blog/10-user-interface-guidelines/

[UI7] Jakob Nielsen / Nielsen Norman Group · 10 Usability Heuristics for User Interface Design
Primärabgleich: allgemeine Faustregeln, kein Qualitätszertifikat. Kursfragen sind eigene didaktische Übertragung.
https://www.nngroup.com/articles/ten-usability-heuristics/

[UI8] W3C WAI · Understanding SC 1.4.3: Contrast (Minimum)
Normaler Text 4,5:1; definierter großer Text 3:1. Teilaspekt, keine vollständige Barrierefreiheitsprüfung.
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

[UI9] W3C WAI · Images Tutorial
Bildalternativen nach Zweck: informativ, funktional oder dekorativ. Wesentliche Webtexte nicht ausschließlich ins Bild einbrennen.
https://www.w3.org/WAI/tutorials/images/

[IMG1] ProfEngel / Kursmaterial · Exkurs Bilderzeugung: Vorlesungsbegleiter, Cheat Sheet, Prompt-Katalog
Sehen lernen, Bildbriefing, jeweils eine Änderung pro Iteration. Modellabhängige Parameter und Garantien nicht ungeprüft übernehmen.
https://github.com/ProfEngel/KI-Literacy/tree/main/modules/Exkurs_bilderzeugung

[IMG2] Google · Image generation: image editing prompts
Referenzbilder, Ergänzen, Entfernen, Stilvariation. Generischer Workflow, keine ungetesteten Konto-/Modellversprechen.
https://aistudio.google.com/docs/image-generation

[REF1] Prof. Dr. Mathias Engel · W04: aktuelle achtseitige Workshopfassung
Im Browser und als Screenshot geprüft: acht Seiten, sechs Meilensteine, drei Laborteile. Gestaltungsreferenz, keine empirische Wirkungsmessung.
https://profengel.github.io/KI-Literacy/praesentationen/kivl-w04/AA_W04_Agenten_und_Werkstaetten.html

[REF2] Student Patrick Müller · Von der Idee zur Anwendung; angepasste lokale Referenz
Optionaler UI-Baukasten. Quelle nennen; keinen Repository-Link erfinden oder Original ungefragt veröffentlichen.
Lokale Nutzerreferenz, Original nicht veröffentlicht.

[UI10] Jakob Nielsen / Nielsen Norman Group · Progressive Disclosure
Häufig benötigte Hauptfunktionen zuerst zeigen, seltene/fortgeschrittene Funktionen über klar erkennbare Zugänge nach Bedarf anbieten. Keine essenziellen Funktionen verstecken.
https://www.nngroup.com/articles/progressive-disclosure/

[UI11] Louis H. Sullivan / Nachdruck bei Grantmakers in the Arts · The Tall Office Building Artistically Considered (excerpt)
Historischer Form-follows-function-Gedanke. Nutzeraufgabe vor UI-Dekoration ist unsere didaktische Übertragung, keine aus dem Architekturtext gemessene Softwarewirkung.
https://www.giarts.org/article/tall-office-building-artistically-considered-excerpt

[UI12] Systematic Inventive Thinking (SIT) · Function Follows Form (FFF)
Im kreativen Gegenansatz zunächst eine veränderte Form entwerfen und mögliche neue Nutzungen erkunden. Kein Grund, notwendige Nutzeraufgaben einer attraktiven Vorlage unterzuordnen.
https://www.sitsite.com/method/function-follows-form/

[UI13] Nielsen Norman Group · Flat-Design Best Practices
Reduzierte Gestaltung darf visuelle Bedienhinweise nicht beseitigen; anklickbare Elemente müssen erkennbar sein. Nicht gleichbedeutend mit Function follows form.
https://www.nngroup.com/articles/flat-design-best-practices/

[IMG3] Kie.ai · Nano Banana 2 generation and reference-image editing
Provider/Modell der Übungsmedien, keine Behauptung garantierter Identität oder Bearbeitungspräzision.
https://docs.kie.ai/market/google/nanobanana2

[UI14] Raluca Budiu / Nielsen Norman Group · Basic Patterns for Mobile Navigation: A Primer
Sichtbare, beschriftete Navigation und Inhalt priorisieren. Die drei Kurs-Dashboards sind eigene Beispiele, keine empirisch geprüften Gewinner.
https://www.nngroup.com/articles/mobile-navigation-patterns/

[UI15] W3C WAI · Images of Text
Für Weboberflächen echte Texte bevorzugen. Generierte Poster-Schrift ist hier eine Bildübung; derselbe Wortlaut wird im Alt-Text zugänglich gemacht.
https://www.w3.org/WAI/tutorials/images/textual/

[UI16] W3C WAI · Complex Images
Diagramme brauchen verständliche Aussage und zugängliche Datendarstellung. Das Kursbeispiel enthält eine lokale Wertetabelle.
https://www.w3.org/WAI/tutorials/images/complex/

[DEMO1] Kursredaktion · Campus-Café: synthetische Dashboard-Daten
Keine echten Unternehmensdaten. Woche A 3600 Euro, Vorwoche 3000 Euro, 450 Bestellungen, Durchschnittsbon 8 Euro, Wochenziel 4000 Euro (90%). Keine kausale Wirksamkeitsbehauptung.
https://profengel.github.io/KI-Literacy/praesentationen/kivl-w05/material/dashboard-demo.json

[EMO1] Lisa Feldman Barrett, Ralph Adolphs, Stacy Marsella, Aleix M. Martinez, Seth D. Pollak · Emotional Expressions Reconsidered: Challenges to Inferring Emotion From Human Facial Movements
Mimiktafeln zeigen inszenierte Ausdrucksvorgaben. Aus einem einzelnen Gesichtsausdruck lassen sich innere Gefühle nicht kontextfrei und eindeutig ablesen. Die acht Kursmuster sind kein vollständiger oder universeller Emotionskatalog.
https://pubmed.ncbi.nlm.nih.gov/31313636/

[COL1] Adobe Express · The color wheel explained and how colors work together
Analog: Nachbarn. Komplementär: gegenüber. Triadisch: drei gleichmäßig verteilte Farbtöne. Hier digitaler HSL-Kreis; andere Farbmodelle ergeben andere konkrete Paletten.
https://www.adobe.com/express/learn/blog/color-wheel-explained

[COL2] Kelley Gordon / Nielsen Norman Group · Using Color to Enhance Your Design
Eine kleine Palette und feste Farbrollen unterstützen Orientierung. Farbbedeutungen sind kontextabhängig; die Beispiele sind Design-Konventionen, keine allgemeingültigen psychologischen Wirkungen.
https://www.nngroup.com/articles/color-enhance-design/

[COL3] W3C WAI · WCAG 2.2 · Understanding 1.4.1 Use of Color / 1.4.3 Contrast Minimum
Status zusätzlich beschriften. Ausreichenden Hell-Dunkel-Kontrast prüfen; Farbton-Gegensätze allein garantieren keine Lesbarkeit.
https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html

Einfach. Und trotzdem alles da.

Deine Möglichkeiten!

Workshopplatz reservieren

Vier kleine Schritte. Ein besseres Ergebnis.

Die Hauptaufgabe
ist sofort klar.

UI ist die Oberfläche. UX der Weg zum Ziel.

Deine Möglichkeiten!

Workshopplatz reservieren

Farben brauchen einen Plan.

Analog: nebeneinander.

Farbe führt. Sie schreit nicht.

Dein nächster
Workshop.

Wenige Farben.
Klare Rollen.

Ideen leihen. Nicht den Ballast.

Ein Objekt. Eine Person. Ein klares Briefing.

Eine Erdbeere auf einem Teller.

Ein Original. Viele Möglichkeiten.

Was ist anders?
Was sollte bleiben?

Ein Smartphone. Drei klare Ansichten.

Deine Woche.

Was hat sich verändert?

Was ist als Nächstes dran?

Das Wichtigste zuerst.

Vergleiche fair machen.

Vom Wert zum nächsten Schritt.

Einfacher. Nicht ärmer.

Stilkarte + passendes Bild
+ bestehende Funktionen.

Zeig nicht wie.
Schau zu.

Gutes Design macht den nächsten Schritt leicht.

Bevor du „fertig“ sagst …

UI & UX

Ausprobieren

Ein guter Serviceweg – auch auf dem Bildschirm.

Präsentation & Repository

Gleiche Daten. Andere Fragen.

Mimik, Gestik und Pose gezielt gestalten.

Deine Möglichkeiten!

Workshopplatz reservieren

Die Hauptaufgabeist sofort klar.

Deine Möglichkeiten!

Workshopplatz reservieren

Analog: nebeneinander.

Dein nächsterWorkshop.

Wenige Farben.Klare Rollen.

Eine Erdbeere auf einem Teller.

Was ist anders?Was sollte bleiben?

Deine Woche.

Was hat sich verändert?

Was ist als Nächstes dran?

Das Wichtigste zuerst.

Vergleiche fair machen.

Vom Wert zum nächsten Schritt.

Stilkarte + passendes Bild+ bestehende Funktionen.

Zeig nicht wie.Schau zu.

Bevor du „fertig“ sagst …

UI & UX

Ausprobieren

Die Hauptaufgabe
ist sofort klar.

Dein nächster
Workshop.

Wenige Farben.
Klare Rollen.

Was ist anders?
Was sollte bleiben?

Stilkarte + passendes Bild
+ bestehende Funktionen.

Zeig nicht wie.
Schau zu.