Lernziel
Lernziel
Nach diesem Kapitel können Sie:
- Animationen in Wix Studio hinzufügen
- geeignete Animationen auswählen
- Animationen bearbeiten oder entfernen
- Interaktionen sinnvoll einsetzen
- Ladezeiten berücksichtigen
- Besucher gezielt durch die Website führen
- typische Animationsfehler vermeiden
Warum wichtig
Warum Animationen sinnvoll sind
Animationen können eine Website moderner wirken lassen.
Richtig eingesetzt helfen sie dabei,
Animationen sollten jedoch niemals vom eigentlichen Inhalt ablenken.
Weniger ist mehr
Ein häufiger Fehler besteht darin, jedes Element zu animieren.
Das führt häufig dazu, dass Besucher:
- den Überblick verlieren
- länger warten müssen
- die Website als unruhig empfinden
Professionelle Websites setzen Animationen deshalb gezielt und sparsam ein.
Welche Animationen gibt es?
In Wix Studio stehen verschiedene Animationen zur Verfügung.
Zum Beispiel:
- Einblenden
- Hochgleiten
- Heruntergleiten
- Vergrößern
- Verkleinern
- Ausblenden
- Drehen
Nicht jede Animation eignet sich für Unternehmenswebsites.
Schritt für Schritt
Schritt-für-Schritt: Animation hinzufügen
Öffnen Sie den Wix Studio Editor.
Wix Studio · Editor öffnen
Editor öffnen
Wann Animationen sinnvoll sind
Animationen eignen sich besonders für:
Wann sollten Animationen vermieden werden?
Nicht jedes Element benötigt Bewegung.
Verzichten Sie möglichst auf Animationen bei:
- langen Fließtexten
- Formularen
- Impressum
- Datenschutz
- Footer
Diese Bereiche sollen schnell gelesen und genutzt werden.
Animationen auf Smartphones
Kontrollieren Sie jede Animation zusätzlich auf mobilen Geräten.
Zu starke Bewegungen können auf kleinen Bildschirmen störend wirken.
Achten Sie außerdem auf eine flüssige Darstellung.
Geschwindigkeit
Eine gute Animation dauert meist nur kurz.
Zu langsame Animationen können Besucher ausbremsen.
Zu schnelle Animationen wirken hektisch.
Das Ziel ist eine natürliche Bewegung.
Hover-Effekte
Hover-Effekte erscheinen, wenn Besucher den Mauszeiger über ein Element bewegen.
Typische Beispiele:
- Button wird etwas dunkler
- Bild wird leicht vergrößert
- Karte hebt sich an
- Schatten erscheint
Hover-Effekte geben Besuchern eine Rückmeldung, dass ein Element anklickbar ist.
Mikrointeraktionen
Mikrointeraktionen sind kleine visuelle Reaktionen.
Beispiele:
Diese kleinen Details wirken oft hochwertiger als große Animationen.
Best Practice
Web by David Best Practice
Bei unseren Projekten verwenden wir meistens nur zwei bis drei Animationsarten.
Zum Beispiel:
- Fade In
- Slide Up
- leichter Hover-Effekt auf Buttons
Dadurch bleibt die Website ruhig und professionell.
Aus der Praxis
Verkaufspsychologie
Animationen sollen den Blick lenken.
Nicht beeindrucken.
Ein Button, der sich dezent hervorhebt, erhält häufig mehr Aufmerksamkeit als ein Button, der blinkt oder ständig seine Farbe wechselt.
Subtile Bewegungen schaffen Vertrauen.
Übertriebene Effekte wirken oft unseriös.
Aus der Praxis
Expertenwissen
Professionelle Designer sprechen häufig vom Prinzip der visuellen Hierarchie.
Animationen unterstützen diese Hierarchie.
Wichtige Inhalte erscheinen zuerst.
Sekundäre Inhalte folgen.
Dadurch verarbeitet das Gehirn Informationen leichter.
Häufige Fehler
Häufige Fehler
Zu viele Animationen
Die Website wirkt unruhig.
Unterschiedliche Animationen
Jeder Bereich bewegt sich anders.
Dadurch fehlt ein einheitlicher Stil.
Zu lange Animationen
Besucher müssen warten.
Blinkende Elemente
Sie lenken unnötig ab.
Animationen ohne Zweck
Jede Bewegung sollte einen erkennbaren Nutzen haben.
Profi-Tipp
Profi-Tipp
Wenn Ihnen eine Animation selbst auffällt,
ist sie meistens bereits zu stark.
Die besten Animationen werden häufig gar nicht bewusst wahrgenommen.
Sie unterstützen lediglich den natürlichen Lesefluss.
Aus der Praxis
Praxis aus unserem Agenturalltag
Viele Kunden wünschen sich möglichst viele Effekte.
Unsere Erfahrung zeigt jedoch:
Je hochwertiger eine Website wirken soll,
desto zurückhaltender werden Animationen eingesetzt.
Premium-Marken setzen fast immer auf dezente Bewegungen.
Bonus – Welche Animation eignet sich wofür?
Checkliste
Checkliste
Praxisaufgabe
Praxisaufgabe
Öffnen Sie Ihre Startseite.
Überprüfen Sie jede Animation.
Fragen Sie sich:
- Unterstützt sie den Inhalt?
- Oder lenkt sie davon ab?
- Ist sie auf Smartphones angenehm?
Element
Empfehlung
Hero-Überschrift Fade In
Hero-Button Slide Up
Bilder Fade In
Leistungsboxen Slide Up Kundenbewertunge n Fade In
CTA-Bereich Leichter Zoom oder Fade In
Footer Keine Animation
- Ist sie wirklich notwendig?
Entfernen Sie mindestens eine Animation, die keinen Mehrwert bietet.
Mini-Projekt
Mini-Projekt
Analysieren Sie drei Websites großer Unternehmen.
Achten Sie ausschließlich auf Animationen.
Notieren Sie:
- Welche Elemente werden animiert?
- Welche Animationen werden wiederholt?
- Welche Bereiche bleiben bewusst statisch?
Überlegen Sie anschließend, welche Prinzipien Sie auf Ihre eigene Website übertragen können.
Wissenscheck
Quiz
Warum werden Animationen eingesetzt?
Welche Aussage trifft zu?
Welche Animation eignet sich häufig für Unternehmenswebsites?
Warum sind Hover-Effekte sinnvoll?
Zusammenfassung
Kapitelzusammenfassung
Sie haben gelernt:
- wie Sie Animationen in Wix Studio einsetzen,
- welche Effekte professionell wirken,
- warum weniger häufig mehr ist,
- wie Animationen die Benutzerführung unterstützen,
- und welche Fehler Sie vermeiden sollten.
🚀 Vorschau auf Teil 3 – Inhalte
Mit dem nächsten Kapitel beginnt ein neuer Abschnitt der Academy. Jetzt geht es darum, Inhalte professionell zu verwalten und die Website lebendig zu halten.
Kapitel 14 – Galerien professionell erstellen
Sie lernen:
- Bildergalerien anlegen und verwalten
- verschiedene Galerie-Layouts auswählen
- Projekte, Referenzen und Produkte optimal präsentieren
- Lightbox-Funktionen nutzen
- Bilder für schnelle Ladezeiten optimieren
- Galerien verkaufspsychologisch einsetzen, um Vertrauen aufzubauen
Dieser Abschnitt zeigt Ihren Kunden, wie sie aus einer schönen Website eine überzeugende
Unternehmenspräsentation machen.
Ziel dieses Moduls
Eine professionelle Website lebt von aktuellen und hochwertigen Inhalten. In diesem Teil lernen Sie, Bildergalerien, Videos, Formulare, Karten und Downloads professionell einzusetzen. Sie erfahren außerdem, wie Inhalte Vertrauen schaffen und Besucher zu Kunden machen.
Geschätzte Bearbeitungszeit: 3–4 Stunden
Praxisprojekt am Ende des Moduls:
Eine vollständige Referenzseite inklusive Galerie, Video, Kontaktformular und Downloadbereich erstellen.