Erst die Wörter, dann die Website
Allgemeines Modul 0: Datei, Ordner, Browser, Server, Cloud, Prompt — die Computerwörter. Dort steht die Schreinerei Vogt als Beispiel.
Dieses Blatt (hier): die Webdesign-Wörter. Screen, Flow, UI, UX, Designsystem, Motion. Damit dir im Hauptmodul kein Begriff den Faden abschneidet.
Hauptmodul „Von der KI-Website zum professionellen Web-Erlebnis": Dort werden die Wörter angewendet — ein vollständiger Einkaufsweg und genau drei begründete Bewegungen.
Das Hauptmodul baut auf diesen Begriffen auf. Du musst hier nichts auswendig lernen und nicht von vorne bis hinten lesen. Schlag nach, wenn ein Wort fällt, das du nicht sicher einordnen kannst. Mehr braucht es nicht.
Keine dumme Frage
Der wichtigste Abschnitt dieses Blattes – und er enthält keinen einzigen Fachbegriff.
Niemand muss das alles wissen. Nicht du, nicht dein Sitznachbar, nicht der Kollege, der sich sicherer anhört. Wer seit Jahren Kunden berät, Termine plant oder Material bestellt, hat diese Wörter schlicht nie gebraucht. Das ist kein Rückstand, das ist ein anderer Beruf.
Wenn du bei „Screen“, „Flow“ oder „UX“ bisher nur geraten hast, hast du nichts verpasst. Diese Wörter kommen aus dem Englischen und werden im Alltag durcheinander benutzt – auch von Leuten, die davon leben. Es gibt keinen Zeitpunkt, an dem man sie „eigentlich schon können müsste“.
Du sollst nach diesem Blatt keine Fachsprache beherrschen. Es genügt, wenn du jedes Wort in eigenen Worten erklären und im Bild der Rösterei wiederfinden kannst. Nachschlagen ist ausdrücklich erlaubt, auch während der Aufgaben. Und wenn du eine Frage hast, die dir zu einfach vorkommt: die ist meistens die beste im Raum.
Vier Menschen in der Rösterei Wendekreis
Damit die Wörter nicht in der Luft hängen, gehört jedes zu einem Menschen im Laden. Die vier begleiten dich durch das ganze Blatt.
Frau Keller, die Kundin
Etwa 45, trinkt gern guten Kaffee, kennt sich mit Röstung nicht aus, ist meist mit dem Handy unterwegs. Sie geht den Weg.
Nadja im Laden
Berät, zeigt auf Sorten, bestätigt jede Auswahl mit einem Satz. Sie gibt die Rückmeldung.
Ruth, die Inhaberin
Röstet selbst, hat die Marke aufgebaut, entscheidet am Ende. Sie legt die Regeln fest und gibt frei.
Jonas, die Aushilfe
Neu im Betrieb, soll den Laden allein bedienen können, stolpert über alles Unklare. Er prüft.
👉 Warum ausgerechnet diese vier?
Weil sie vier verschiedene Fragen tragen, die im Webdesign ständig verwechselt werden. Frau Keller steht für den Weg durch den Laden – daran hängen Screen, Flow und UX. Nadja steht für alles Sichtbare und Bedienbare samt Rückmeldung – daran hängen UI, Zustand und Feedback. Ruth steht für die verbindlichen Regeln und die letzte Entscheidung – daran hängen Designsystem, DESIGN.md und Freigabe. Jonas steht für die Prüfung mit Tastatur, kleinem Bildschirm und weniger Bewegung.
Wenn in deinem Betrieb andere Menschen arbeiten – Werkstatt, Praxis, Kanzlei, Handel – funktioniert dasselbe Bild. Es gibt immer jemanden, der den Weg geht, jemanden, der antwortet, jemanden, der entscheidet, und jemanden, der stolpert.
So arbeitest du mit diesem Blatt
Du brauchst keine Programmiererfahrung. Die Begriffe werden im Vortrag und im Quiz ausführlich erklärt — hier stehen nur die zwei Nachschlagetabellen und die sechs Aufgaben. Schlag beim Ausfüllen nach, so oft du willst.
Alle Aufgaben sind ohne Bezahlzugang lösbar. Mobbin und MotionSites sind nur optionale Quellen: vollständige Mobbin-Flows und -Animationen liegen im Bezahlplan, bei MotionSites ist ein Teil der Designs als Premium gekennzeichnet. Du brauchst beides für keine Aufgabe.
Verweis auf das allgemeine Modul 0
Die bereits behandelten Computer- und KI-Grundlagen werden hier bewusst nicht erneut erklärt.
- Datei, Ordner und Dateiendung
- Browser, Tab, Link und URL
- Server und Cloud
- Modell, Prompt und RAG
Diese 10 Wörter solltest du kennen, bevor du mit dem Motion-Modul anfängst
Die absolute Minimalauswahl aus den 58 Begriffen dieses Blattes. Alles andere kannst du später nachschlagen – diese zehn brauchst du schon in der ersten Aufgabe.
| Wort | In eigenen Worten | Wer im Laden | Für Aufgabe |
|---|---|---|---|
| Website | Der ganze Internetauftritt, nicht nur die Ansicht vor dir | alle | 1 |
| Screen | Ein einzelner sichtbarer Zustand, wie ein Foto vom Laden | Frau Keller | 1 |
| Flow | Der ganze Weg vom Eingang bis zur Kasse | Frau Keller | 1 |
| UI | Alles Sichtbare und Bedienbare: Schilder, Griffe, Knöpfe | Nadja | 2 |
| UX | Wie der Weg erlebt wird: verständlich, sicher, schnell | Frau Keller | 2 |
| Designsystem | Die gesammelten Gestaltungsregeln des Betriebs | Ruth | 3 |
DESIGN.md | Die Textdatei, in der genau diese Regeln stehen | Ruth | 3 |
| Motion | Bewusst gestaltete Bewegung, die etwas erklärt | Nadja | 4 |
| Trigger | Der Auslöser: die Handlung, nach der sich etwas bewegt | Nadja | 4 |
| Reduced Motion | Die Geräte-Einstellung „bitte weniger Bewegung“ | Jonas | 5 |
📌 Keines dieser zehn Wörter ist Programmierung
Das ist kein Zufall. Alle zehn beschreiben nur: was man sieht, welchen Weg man geht, was gelten soll. Keines ist ein Befehl an einen Computer. Deshalb kannst du sie auch benutzen, ohne eine Zeile Code zu schreiben – und deshalb kannst du mit ihnen einer KI sagen, was du willst.
Sechs der zehn kennst du aus dem Laden. Website, Screen, Flow, UI, UX und Motion beschreiben nur Dinge, die es im echten Geschäft auch gibt: den Betrieb, den Blick, den Weg, die Schilder, das Erleben und die Bewegung. Nur Designsystem, DESIGN.md, Trigger und Reduced Motion sind wirklich neu.
Die übrigen Begriffe, nach Aufgabe geordnet
Ausführlich erklärt werden diese Wörter in der Präsentation und im Quiz. Hier stehen sie nur als Gedächtnisstütze, damit du beim Ausfüllen nicht suchen musst. Ein Satz pro Begriff genügt.
| Begriff | In einem Satz | Für Aufgabe |
|---|---|---|
| Seite | Ein einzelner erreichbarer Bereich innerhalb der Website | 1 |
| Zustand | Das aktuelle Aussehen eines Elements: normal, Hover, Fokus, aktiv, Fehler, Erfolg | 1, 3 |
| Referenz | Ein echtes Beispiel, das du untersuchst, um eine Entscheidung vorzubereiten | 6 |
| Muster | Eine wiedererkennbare Art, ein häufiges Problem zu lösen | 6 |
| Token | Ein benannter Gestaltungswert, etwa eine Farbe oder ein Abstand | 3 |
| Komponente | Ein wiederverwendbarer Baustein wie Button, Karte oder Filter | 3 |
| Animation | Die technische Veränderung eines Werts über Zeit | 4 |
| Transition | Der Übergang zwischen einem Start- und einem Endzustand | 4 |
| Micro-Interaction | Eine kurze Reaktion auf eine einzelne Handlung | 4 |
| Dauer | Wie lange die Bewegung läuft — bei Rückmeldungen kurz halten | 4 |
| Verzögerung | Die Wartezeit, bevor die Bewegung beginnt | 4 |
| Easing | Der zeitliche Verlauf: gleichmäßig oder mit Anlauf und Ausklang | 4 |
| Hover | Zeigerkontakt ohne Klick — auf dem Smartphone nicht vorhanden | 5 |
| Fokus | Die aktuelle Position bei Tastaturbedienung, muss sichtbar sein | 5 |
| Tap | Die Berührung auf dem Touchscreen | 5 |
| scroll-triggered | Eine Bewegung startet, wenn ein Element ins Blickfeld kommt | 5 |
| scroll-linked | Ein Wert folgt laufend dem Scroll-Fortschritt | 5 |
| Layout · Paint · Composite | Die drei Schritte des Browsers: rechnen, zeichnen, Ebenen zusammensetzen | 5 |
| Core Web Vitals | Der Oberbegriff für LCP (Laden), INP (Reaktion) und CLS (Stabilität) | 5 |
| Kopie | Übernahme fremder Gestaltung oder Inhalte so weit, dass der eigene Beitrag verschwindet | 6 |
| Lizenz | Die Erlaubnis, etwas Fremdes in bestimmtem Umfang zu nutzen | 6 |
| Marke | Geschützter Name oder geschütztes Zeichen eines Unternehmens | 6 |
| Messung | Zahlen zur Nutzung: schafft die Person die Aufgabe, wie lange braucht sie | 6 |
| Korrelation | Zwei Werte verändern sich gemeinsam — das ist noch kein Grund | 6 |
| Kausalität | Eine Ursache ist belegt, dafür braucht es ein Experiment mit Vergleich | 6 |
Was sieht die Person gerade? Welches Ziel verfolgt sie? Welcher Zustand ändert sich? Woran erkennt sie das Ergebnis auch ohne den Effekt? Damit lassen sich Screen, Flow, UI, UX, Zustand und Motion sauber auseinanderhalten — mehr Wortschatz brauchst du für die Aufgaben nicht.
Sechs Aufgaben zum Einordnen
Kurze Antworten in eigenen Worten reichen. Es geht um deinen Wortschatz, noch nicht um die Planung oder den Umbau einer echten Website.
Keine echten Kunden- oder Personendaten eintragen. Nutze erfundene Rollen und allgemeine Beispiele. Namen, E-Mail-Adressen, Bestellnummern und interne Projektdaten gehören nicht in die Antworten.
Bereit für das Hauptmodul?
Wenn du acht der folgenden zehn Satzanfänge verständlich beenden kannst, reicht deine Grundlage: Website ist mehr als ein Screen · UI und UX unterscheiden sich · Flow zeigt den Weg · Referenz ist keine Kopiervorlage · DESIGN.md hält Regeln fest · Motion braucht einen Zweck · scroll-triggered ist nicht scroll-linked · Reduced Motion erhält Information · Korrelation ist keine Kausalität · der Mensch bleibt für die Freigabe verantwortlich.
Ausgewählte Quellen
- Mobbin: Screens – optional; vollständige Flows und Animationen liegen im Bezahlplan
- Refero Styles: Designsysteme
- Refero: DESIGN.md-Beispiele
- MotionSites: Lektionen – optional; ein Teil der Designs ist Premium
- Motion: Transitions
- Motion: Scroll
- Motion: Accessibility
- W3C: Animation from Interactions
- Motion: Performance
- web.dev: Core Web Vitals
- DPMA: Marken
- Claude Code: Best Practices