Du verbesserst den Einkaufsweg der Wendekreis-Rösterei: von der Kaffeesuche bis zur sicheren Bestätigung im Warenkorb. Nicht mit möglichst vielen Effekten, sondern mit einem klaren Flow, eigenen Designregeln und genau drei begründeten Bewegungsmustern.
25–35 Minuten6 TransferaufgabenAufbaustoff · Begriffe werden erklärtVersand oder PDF
Arbeite mit einem Beispiel, nicht mit echten Fällen: Trage keine Kunden-, Personen-, Bestell-, Zahlungs- oder Zugangsdaten ein. Allgemeine Beschreibungen und erfundene Namen reichen vollständig.
KI kann in Minuten eine eindrucksvolle Website erzeugen. Professionell wird sie erst, wenn eine Person ihr Ziel versteht, Rückmeldungen erhält und den Ablauf auch auf dem Smartphone, mit Tastatur oder mit reduzierter Bewegung sicher abschließen kann.
Die Begriffe dazu — Screen, Flow, UI, UX, Motion, Micro-Interaction — sind im Vortrag und im Grundbegriffe-Blatt erklärt. Hier wird gearbeitet. Das ist der Weg, den du verbesserst:
Kaffee entdecken → Sortiment filtern → „Werkstatt“ öffnen → Größe und Mahlgrad wählen → in den Warenkorb legen → Bestellung prüfen
Der Maßstab für jede Entscheidung
Kannst du nicht sagen, was eine Person durch eine Bewegung besser versteht, lässt du sie weg. Ein guter Auftrag beschreibt keine „Animation“, sondern eine Zustandsänderung: vorher, nachher, was sie auslöst, welche Information betroffen ist.
Werkzeugrollen
Drei Quellen, drei verschiedene Fragen
Die Plattformen sind kein Selbstbedienungsbuffet zum Kopieren. Jede übernimmt in diesem Ablauf eine klar begrenzte Rolle. So wird aus Inspiration eine begründete Entscheidung.
Ablauf
Mobbin
Untersuche reale Screens und UI-Elemente. Beobachte besonders Filter, Produktdetail und Warenkorbbestätigung: Was folgt direkt auf eine Handlung? Bleibt das betroffene Produkt erkennbar?
Achtung Kosten: Der kostenlose Mobbin-Zugang zeigt nur die zuletzt aufgenommenen Anwendungen und hat eine eingeschränkte Suche. Die vollständigen Flows und Animationen gehören zum Bezahlplan. Für dieses Blatt brauchst du sie nicht: Zwei echte Shops, die du selbst durchklickst, liefern denselben Erkenntniswert.
Untersuche Hierarchie, Typografie, Farben, Abstände, Komponenten und Zustände. Übersetze passende Prinzipien in eine eigene kurze DESIGN.md, statt eine fremde Marke zu übernehmen.
Untersuche Bewegungsprinzipien und deren Timing. Übernimm für Wendekreis keinen Komplettprompt und keinen Frameworkwechsel. Das bestehende Projekt bleibt bei HTML, CSS und JavaScript.
Achtung Kosten: Ein Teil der Designs ist als Premium gekennzeichnet und braucht ein Abo. Die frei zugänglichen Beispiele und die Anleitung genügen für dieses Blatt.
KursmethodeDer Ablauf beantwortet „Wie läuft es?“, Refero „Welche Regeln halten es zusammen?“ und MotionSites „Wie kann ein Zustandswechsel verständlich werden?“. Diese Kombination ist unser Arbeitsablauf, keine gemeinsame Vorgabe der Anbieter.
Was dich nichts kostetDu brauchst für dieses Blatt keinen bezahlten Zugang. Der Pflichtweg sind zwei echte Shops, die du selbst benutzt: einer, bei dem du gern einkaufst, und einer, der dich schon einmal geärgert hat. Klick beide bis zum Warenkorb durch und beobachte, was nach jedem Klick passiert. Das ist die eigentliche Übung. Refero Styles ist frei zugänglich. Mobbin und MotionSites sind Zusatz, nicht Voraussetzung — was dort hinter der Bezahlschranke liegt, steht oben auf den Karten.
Screen → Flow
Der Praxisfall Wendekreis
Die Wendekreis-Rösterei ist bereits ein funktionierender statischer Shop. Die Zielperson kennt sich mit Kaffee nicht besonders gut aus, besucht die Seite häufig mobil und möchte drei Dinge sicher erkennen: Welcher Kaffee passt? Welche Variante ist aktiv? Ist genau dieses Produkt im Warenkorb?
Die vorhandene Marke wirkt handwerklich, präzise, ruhig und transparent. Grundfarben sind Rohkaffee-Grün #dfe2ce, Röstbraun #22190f, Kirschrot #96182f und Pergament #f1f2e8. Der Auftrag ist keine Neugestaltung. Inhalte, Warenkorblogik, Tastaturbedienung und technische Basis bleiben erhalten.
Vorher beobachten
Startseite öffnen und „Sortiment ansehen“ wählen.
Nach „Für Milchgetränke“ filtern und Ergebnisänderung erkennen.
„Werkstatt“ öffnen, Größe, Mahlgrad und optional Abo wählen.
In den Warenkorb legen und Produkt samt Variante prüfen.
Zur Kasse gehen; dort endet der Test ohne echte Zahlung.
Vorher dokumentieren
Desktop bei 1440 × 950 Pixeln.
Mobil bei 390 × 844 Pixeln.
Je ein Bild vor und nach Filter, Produktwechsel und Warenkorbaktion.
Notiz: „Welche Änderung musste ich mir selbst erschließen?“
MerksatzGestalte nicht nur das Bild. Gestalte den Weg von der ersten Frage bis zur verständlichen Bestätigung.
Eigene Regeln
Von der Referenz zur eigenen DESIGN.md
Eine DESIGN.md ist eine kurze Textdatei mit verbindlichen Gestaltungsregeln. Sie ersetzt „Mach es moderner“ durch Entscheidungen, die Mensch und Coding-KI prüfen können. Notiere Produkt und Zielgruppe, gewünschte Markenwirkung, Farben und Schriften, Layout, Komponenten, Zustände, Motion-Regeln, Barrierefreiheit und technische Grenzen.
Das gehört hinein
Wichtigste Nutzeraufgabe und Markenwirkung.
Bestehende Farben, Schriften, Abstände und Komponenten.
Standard, Hover, Fokus, aktiv, Laden, Fehler, leer und Erfolg.
Zweck, Dauer und ruhige Alternative jeder Bewegung.
HTML, CSS und klassisches JavaScript ohne neue Bibliothek.
Das bleibt draußen
Fremde Logos, Markennamen, Texte oder Produktbilder.
Komplette Screens und unveränderte Anbieterprompts.
Effekte ohne Aufgabe und dauernde Bewegung.
Ein neues Framework nur wegen einer Referenz.
Regeln wie „cool“, „modern“ oder „mehr Wow“ ohne Abnahmeziel.
Die entscheidende Qualitätsfrage lautet: Kann eine andere Person allein anhand der Datei erkennen, was zur Marke passt, was sich bewegen darf, warum es sich bewegt und wie derselbe Endzustand bei Reduced Motion aussieht? Falls nicht, ist die Regel noch zu vage.
Aus Adjektiven werden Abnahmekriterien
„Ruhig“ kann für zwei Menschen etwas völlig anderes bedeuten. Für Wendekreis wird es deshalb übersetzt: keine Endlosschleifen, kein Autoplay, keine unnötige Staffelung und kein Warten auf eine Bewegung. „Präzise“ bedeutet: Dauer, betroffene Elemente und Endzustand sind genannt. „Transparent“ bedeutet: sichtbarer Status, verständliche Auswahl und keine Information, die nur während einer Animation erscheint.
Auch Komponenten brauchen vollständige Zustände. Ein Filter ist nicht nur seine Standardansicht. Die Datei beschreibt, wie er bei Hover, sichtbarem Tastaturfokus und aktiver Auswahl aussieht. Für dynamische Bereiche kommen Laden, leer, Fehler und Erfolg hinzu. Gerade Coding-KIs erzeugen sonst gern einen hübschen Normalzustand, ohne die schwierigen Zustände mitzudenken.
Technische Grenzen schützen ein funktionierendes Projekt. Wendekreis darf weiterhin direkt als statische Seite geöffnet werden. Es gibt keinen Build-Schritt, keine zusätzliche Laufzeitbibliothek und keinen Wechsel zu React oder Tailwind. Produktdaten, Preisberechnung, Warenkorbspeicher und bestehende Schutzmaßnahmen bleiben erhalten. Eine Referenz bestimmt also nie automatisch den technischen Unterbau.
Genau drei Motion-Muster
Bewegung mit einem überprüfbaren Zweck
Für jedes Muster werden Problem, Auslöser, Element, Start- und Endzustand, Timing, Wiederholung, Mobilverhalten, Reduced Motion und Abnahmekriterium festgelegt. Die Information steht immer auch als Text oder sichtbarer Zustand bereit. Niemand muss auf das Ende einer Animation warten.
Filterfeedback
Nach „Für Milchgetränke“ müssen Ergebniszahl und neue Produktgruppe als zusammengehörige Reaktion erkennbar sein.
Auslöser: Klick oder Tastaturaktivierung
Bewegung: höchstens 8 px plus Opacity, 160–220 ms
Fokus: bleibt auf dem Filter
Ruhig: sofortiger Endzustand und Live-Text
Produktkontinuität
Beim Öffnen von „Werkstatt“ bleibt die Produktdarstellung als dasselbe Objekt zwischen Karte und Detailansicht erkennbar.
Auslöser: Produkt öffnen
Bewegung: gemeinsamer Übergang, höchstens 420 ms
Fallback: normaler Seitenwechsel bleibt nutzbar
Ruhig: keine räumliche Reise
Warenkorbbestätigung
Der neue oder aktualisierte Posten erhält einen kurzen Impuls. Artikelname, Variante und Menge sind sofort lesbar.
Auslöser: „In den Warenkorb“
Bewegung: dezenter Impuls, höchstens 420 ms
Fokus: Falle, Escape und Rückgabe bleiben erhalten
Ruhig: Text und Endzustand sofort sichtbar
Bewusst weggelassenKein animierter Cursor, kein Parallax, kein Scroll-Hijacking, kein automatisch bewegtes Karussell und keine dekorative Endlosschleife. Das Weglassen ist Teil des Designs.
Qualität
Reduced Motion, Mobil und Performance
Reduced Motion bedeutet weniger Bewegung, nicht weniger Information. Die Systemeinstellung prefers-reduced-motion signalisiert, dass eine Person räumliche Bewegung reduzieren möchte. Filterstatus, ausgewählte Variante und Warenkorbbestätigung bleiben trotzdem vollständig verständlich.
Barrierefreiheit
Teste den vollständigen Weg mit Tab, Shift+Tab, Enter, Leertaste und Escape. Bewegung verschiebt den Fokus nie. Sichtbarer Text trägt die Information; Motion ergänzt ihn.
Mobil
Es gibt kein Hover als Voraussetzung. Filter, Menü und Warenkorb bleiben bei 390 × 844 bedienbar. Nichts erzeugt horizontales Scrollen oder wird vom Sticky Header verdeckt.
Performance
Bevorzuge transform und opacity. Vermeide dauernde Schleifen, unnötige Bibliotheken und Animationen von Layoutgrößen. Prüfe die echte Seite trotzdem auf Ruckeln und Layoutsprünge.
Die W3C-Erläuterung zu WCAG 2.2 nennt die Möglichkeit, nicht wesentliche interaktionsbedingte Animation zu deaktivieren. Für dieses Projekt ist die praktische Regel einfacher: Gleiche Funktion, gleiche Information, gleiches Ziel – nur ohne räumliche Bewegung oder Puls.
So wird aus „funktioniert“ ein belastbarer Test
Teste nicht nur den glücklichen ersten Durchlauf. Wechsle Filter schnell hintereinander und prüfe, ob sich Bewegungen aufstauen. Lege denselben Kaffee zweimal in den Warenkorb und kontrolliere, ob Menge und Variante stimmen. Lade die Seite neu und beobachte, ob der gespeicherte Warenkorb erhalten bleibt. Öffne den Ablauf außerdem in einem zweiten Tab, wenn das Projekt eine Synchronisierung vorsieht.
Für die Tastaturprüfung startest du ohne Maus. Nach dem Filterwechsel bleibt der Fokus auf dem betätigten Filter. Beim Öffnen der Warenkorb-Schublade liegt er an der vorgesehenen Stelle; Tab und Shift+Tab bleiben im Dialog, Escape schließt ihn und gibt den Fokus an den Auslöser zurück. Eine Animation darf dieses Verhalten weder verzögern noch unbemerkt verändern.
Aktiviere danach im Browser die emulierte Einstellung prefers-reduced-motion: reduce und wiederhole die betreffenden Schritte. „Etwas kürzer“ reicht nicht: Räumliche Reise und Impuls entfallen, während Ergebniszahl, Statusmeldung, Artikelname, Variante und Menge erhalten bleiben. Schalte die Emulation anschließend wieder aus, damit du beide Varianten getrennt beurteilst.
Performance wird nicht allein aus dem Code geraten. Beobachte auf Desktop und Mobil, ob Elemente springen, ob Scrollen oder Tippen während des Wechsels stockt und ob die Konsole Fehler meldet. Prüfe die Netzwerkanfragen auf neue Abhängigkeiten. transform und opacity sind meist eine gute Grundlage, aber keine automatische Garantie für eine flüssige Website.
Inspiration ≠ Kopie
Prinzipien übernehmen, Identität selbst gestalten
Inspiration fragt: Warum funktioniert diese Lösung? Eine Kopie übernimmt konkrete fremde Gestaltung oder Inhalte so weit, dass der eigene Beitrag verschwindet oder Verwechslung entsteht. Ein öffentlich sichtbarer Screen ist keine Kopiererlaubnis.
Quelle
Beobachtung
Gelöstes Problem
Übernehmen
Nicht übernehmen
Echter Shop, den du benutzt
Status folgt direkt auf den Filter
Ergebniswechsel wird erkennbar
klare Rückmeldung
fremde Texte und Farben
Refero
Aktiver Zustand hat deutlichen Kontrast
Auswahl wird sicher erkannt
Zustandsprinzip
Markenidentität
MotionSites
Ansichten bleiben räumlich verbunden
Produktwechsel behält Kontext
Bewegungsprinzip
Komplettprompt und Technikwechsel
Wendekreis-RegelWir übernehmen ein erklärbares Prinzip, aber keine fremde Markenidentität, keine fremden Inhalte und keinen vollständigen Screen. Bei Unsicherheit wird neu gestaltet oder fachlicher Rat eingeholt.
Zweiter KI-Prüfer
Umsetzen, unabhängig prüfen, menschlich freigeben
Die erste KI erhält Projektdateien, DESIGN.md, den Flow, die drei Spezifikationen, technische Grenzen und sichtbare Abnahmekriterien. Die zweite bekommt keinen Verschönerungsauftrag: sie testet unabhängig und notiert jeden Befund mit Datei, Stelle, reproduzierbaren Schritten, Erwartung und Beobachtung. Was nicht getestet wurde, heißt ausdrücklich „nicht geprüft“.
Prüf-KI kontrolliert
vollständigen Flow auf Desktop und Mobil,
Tastatur, Fokusfalle, Escape und Fokusrückgabe,
Reduced Motion und gleiche Endzustände,
schnelle Filterwechsel und doppeltes Hinzufügen,
Konsole, Überbreite, Layoutsprünge und neue Abhängigkeiten.
Mensch entscheidet
Passt die Wirkung wirklich zur Marke?
Hilft jede Bewegung beim Verstehen?
Sind Befunde nachvollziehbar belegt?
Wurden offene Risiken akzeptiert oder behoben?
Erst danach lautet die Freigabe „ja“.
WichtigZwei übereinstimmende KIs sind kein Beweis. Beide können denselben Fehler übersehen. Die Gegenprüfung verbessert die Entscheidungsgrundlage; die Verantwortung bleibt beim Menschen.
So sieht ein brauchbarer Befund aus
Nicht „mobil wirkt komisch“, sondern: „Bei 390 × 844, nach dem Öffnen der Warenkorb-Schublade und zweimal Shift+Tab, verlässt der Fokus den Dialog. Erwartet: er bleibt drin.“ Dazu Datei, Stelle und der kleinste Lösungsvorschlag. Schweregrade: Blocker macht den Flow unbrauchbar, hoch betrifft Reduced Motion, Fokus oder Mobil, mittel eine unklare Bewegung, niedrig eine Kleinigkeit ohne Funktionsverlust.
25–35 Minuten · 6 Schritte
Dein Transfer auf ein eigenes Projekt
Die Aufgaben bauen aufeinander auf. Du darfst den Wendekreis-Fall verwenden oder einen erfundenen Shop aus deinem Arbeitsbereich wählen. Formuliere konkret genug, dass eine andere Person deinen Plan ausführen und prüfen könnte. Jede Antwort benötigt mindestens 30 Zeichen.
Lieber offline? Deine eingetragenen Antworten lassen sich über den Druckdialog als PDF speichern.