Designsystem · Bewegung
Bewegung, von einfach bis aufwendig.
Sieben Stufen, wie sich unsere Seiten bewegen können. Jede kostet etwas mehr Arbeit und bringt etwas mehr Wirkung. Alle Beispiele laufen hier live.
Balken zeigen den Aufwand
Stufe 1 von 7
Hover und Übergänge
Knöpfe, Karten und Links antworten, sobald man auf sie zeigt oder sie antippt. Die kleinste Stufe, sie gehört auf jede Seite.
- Einsatz
- Buttons, Karten, Links, Schalter
- Technik
- CSS-Übergänge, 150 bis 200 ms
- Aufwand
- klein
Zeigen Sie auf die Elemente, oder springen Sie mit der Tab-Taste durch.
Stufe 2 von 7
Einblenden beim Scrollen
Abschnitte erscheinen weich, sobald sie ins Bild kommen, und nie so langsam, dass man darauf warten muss.
- Einsatz
- Lange Seiten, Referenzen, Kennzahlen
- Technik
- CSS mit Scroll-Zeitleiste oder IntersectionObserver, 400 bis 600 ms
- Aufwand
- klein
- Server in Deutschland
- 9
- US-Dienste ersetzt
- 13
- Werktag bis zur Antwort
- 1
Im Fenster scrollen.
Stufe 3 von 7
Linien zeichnen
Eine Illustration entsteht Strich für Strich und füllt sich dann. Das lenkt den Blick, ohne laut zu sein.
- Einsatz
- Illustrationen, Diagramme, Häkchen in Listen
- Technik
- SVG, Strichlänge per stroke-dashoffset
- Aufwand
- mittel
Läuft in Schleife, alle 12 Sekunden.
Stufe 4 von 7
Bewegung auf Pfaden
Dinge wandern und machen einen Ablauf sichtbar. Hier laufen Pakete durch die acht Stationen bis zum Server.
- Einsatz
- Abläufe erklären, etwa die Pipeline auf /qualitaet
- Technik
- CSS-Keyframes entlang berechneter Punkte
- Aufwand
- mittel
Läuft in Schleife.
Stufe 5 von 7
An den Scroll gekoppelt
Die Bewegung folgt dem Scrollen, vorwärts wie rückwärts. So setzt sich der Stack Schicht für Schicht zusammen, im eigenen Lesetempo.
- Einsatz
- Ein Erklärstück pro Seite, etwa der Aufbau des Stacks
- Technik
- CSS-Scroll-Zeitleiste, ohne Unterstützung gleich der Endzustand
- Aufwand
- mittel
Im Fenster scrollen, dann zurück.
Stufe 6 von 7
Reagiert auf Maus und Finger
Die Szene neigt sich zum Zeiger. Ein Blickfang, der zeigt, dass hier jemand mitdenkt. Wichtige Inhalte hängen nie daran.
- Einsatz
- Einzelne Blickfänger, etwa im Hero
- Technik
- Pointer-Events oder CSS-Zonen, Neigung per perspective
- Aufwand
- mittel
Zeiger über die Szene bewegen, auf dem Handy antippen.
Stufe 7 von 7
Szenen mit Drehbuch
Mehrere Teile spielen nach einem gemeinsamen Takt: Eine Änderung verlässt den Laptop, besteht drei Prüfungen und ist live. Für Figuren, Zustände oder echtes 3D nehmen wir Lottie, Rive oder Three.js.
- Einsatz
- Ein Hero oder Erklärstück, höchstens eins pro Seite
- Technik
- CSS-Keyframes mit gemeinsamem Takt, bei Bedarf Lottie, Rive, Three.js
- Aufwand
- groß
- Änderung
- Prüfung
- Live
Ein Durchlauf dauert 10 Sekunden.
Für alle Stufen
Was immer gilt.
- Bewegung reduzierenIst die Einstellung im System an, steht alles still und zeigt den fertigen Zustand.
- Ein Schalter hält alles anIm Footer jeder Seite. Schleifen halten auch an, sobald sie aus dem Bild scrollen.
- Nur Lage und DeckkraftBewegt werden transform und opacity. Das läuft auch auf älteren Handys flüssig.
- Kurze Dauern150 bis 200 ms für Antworten, 400 bis 600 ms zum Einblenden, 6 bis 12 Sekunden für Schleifen.
- Nichts flackertKein Blinken schneller als dreimal pro Sekunde, kein Leuchten, keine Verläufe.
- Inhalt zuerstJede Seite funktioniert ohne Bewegung. Sie macht Dinge klarer, sie ersetzt sie nicht.
Bewegung für Ihre Seite?
Im Erstgespräch sagen wir Ihnen, welche Stufe sich lohnt. Oft reichen die ersten drei.