Kinetische Typografie – Textanimationen, die das Web bedeuten

Als der Modedesigner Miguel seinen Geldgebern die neue Website vorführt, ist er glücklich. Es gibt dort alles zu sehen, was das Herz bewegt: seine Mode und Modeillustrationen, die Mitarbeiter, die Stoffe, selbst Shoppable Videos.
Doch etwas stimmt nicht. Die Website wirkt schlecht navigierbar. Die Schriften müssten sich bewegen. Dann wüssten Besucher sofort, was sie als Nächstes tun müssen. Bewegliche Schriften sind schließlich eine Möglichkeit, eine Website zu strukturieren.

Welche Textanimationen sind im Webdesign möglich?

Als Digitalagentur bzw. Usability-Agentur haben wir mit kinetischer Typografie in der professionellen Webentwicklung ja einiges an Erfahrung und daher eine Auswahl an Möglichkeiten für euch zusammengestellt – natürlich jeweils mit einem Code Example. So könnt ihr euch den Effekt als visuelle Darstellung und parallel als Code ansehen.

Wenn etwas dabei ist, was euch gefällt und ihr für eure Website umgesetzt haben wollt: Ihr wisst ja, wie ihr uns erreichen könnt. Zwinker, zwinker.

Kinetische Typografie – the Hacking oder Random Text Shuffle

Einsatz: um einen Text einzusetzen, der Aufmerksamkeit und Neugier erregen soll

Der Text erscheint nach und nach durch das Ausprobieren von Zeichen. Bei diesem ziemlich ungewöhnlichen Webdesign-Effekt werden sicher einige Beobachter an Agententhriller erinnert. Nur langsam schält sich die Botschaft des Textes aus der Vielzahl der Buchstaben.

Kinetische Typografie – from the Front

Einsatz: Wenn der User zum ersten Mal die Seite öffnet, sieht er ein Text-Element, das sich weit oben auf der Homepage befindet.

Textanimationen sind ein echter Hingucker und ziehen Aufmerksamkeit auf sich. Es gibt spektakuläre Angebote – und dann gibt es diese Form, bei der der Text lediglich ‚leise‘ von vorn kommt.

Kinetische Typografie – from the Top

Einsatz: als Willkommensgruß, wenn der User zum ersten Mal die Seite öffnet

Diese Fonts schleichen sich dezent von vorn heran. Das ist kein ‚Animationshammer‘, eher ein bescheidener Hinweis. Die Aristokratie dieser Text-Animationen weht leise, aber wirkungsvoll über die Website.

Kinetische Typografie – from the Bottom to the Top

Einsatz: als Willkommensgruß, wenn der User zum ersten Mal die Seite öffnet

Buchstaben erscheinen von unten – stehen – und verschwinden nach oben. Alles Gute kommt in diesem Fall von unten und geht nach oben, wie Grundwasser, das allmählich von unten durchsickert und durch die Wärme der Sonne langsam noch oben steigt.

Kinetische Typografie – to the Front

Spitzen-Einsatzgebiet: im Loading-Screen oder sogar als Scroll-Effekt auf der Seite (ohne Wiederholung)

Wenn dieser Webtext nach vorn rauscht, muss sich niemand ducken. Er springt niemandem entgegen. Das ist nicht unbedingt das Title Design von ‚Star Trek‘, muss es für eine Website aber auch nicht unbedingt sein.

Kinetische Typografie – funky Vibes

Der perfekte Einsatz: beispielsweise im Loading-Screen

Diese Typo schwingt von vorn nach hinten und zurück. Das ist die Schriftanimation aus dem Club. Es flippt in vielen Farben schillernd und erinnert uns daran, dass es sich im Vaporwave-Webdesign sehr gut macht.

Kinetische Typografie – Bricks

Einsatz: etwa als Scroll-Effekt auf der Seite

Die Buchstaben werden dicker. Dass aus dünn schnell beleibt wird, wissen wir seit dem ersten Lockdown. So ähnlich läuft es auch bei dieser Art, bei der der Text zunächst schmal beginnt, sich dann aber ganz schön breit(-)macht.

  • Hier gibt es ein Beispiel: Bricks

Kinetische Typografie – Typing

Richtiger Einsatz: als Scroll-Effekt, um auf eine andere Seite o. Ä. aufmerksam zu machen

Wenn der kurze Text wirkt wie live eingetippt, sind wir beim Typing. Schnell mit einem Sound versehen oder koloriert wirkt er resolut und erinnert uns daran, dass da noch was Wichtiges ist, auf das wir klicken sollten.

  • Hier gibt es ein Beispiel: Typing

Kinetische Typografie – Typing with Delete

Einsatz: Als animierender Platzhalter im Feld eines Formulars; ein Beispiel: Bei der Anmeldung zu einem Newsletter wird eine E-Mail-Adresse als Textanimation ausgegeben, damit der User sofort versteht, was im Feld eingetippt werden soll.

Diese Sätze wirken wie live eingetippt und werden wieder gelöscht. Hat sich da jemand verschrieben? – Interactive Motion Design in Perfektion! Nichts ist sicher oder unmöglich beim Typing with Delete.

Kinetische Typografie – Karussell

Einsatz: eignet sich perfekt für einen Loading-Screen oder eine Ladeanimation

Der Text rotiert in zwei Kreisen. Wenn das Große um das Kleine kreist, geht es nicht immer um Geld oder Zeit, sondern hier um ein Angebot der kinetischen Typografie, die sachte, aber kontinuierlich den Takt angibt.

Kinetische Typografie – Blur-Scroll

Brillanter Einsatz für deine Brille: Perfekt für eine Landingpage mit Wow- und Aha-Effekt!

Der Text wirkt zunächst unscharf, doch durch das weitere Scrollen nach unten wird er wieder klar. Hm, hast du etwas mit den Augen? – Nein, das ist nur ein Interactive Motion Design für deine Website!

Kinetische Typografie – Vervollständigung

Echter Einsatz: unter anderem im Loading-Screen oder als Scroll-Effekt auf der Seite

Diese Sätze vervollständigen sich selbst! Wie aus dem Nichts erscheint und vervollständigt sich der Text bei dieser kinetischen Textanimation. Sag Hallo, guten Morgen oder auch Tschüss und auf Wiedersehen! Irgendwie ein wenig unheimlich …

Kinetische Typografie – Switching-Text

Einsatz: als Willkommensgruß, wenn der User zum ersten Mal die Seite öffnet, im oder als Loading-Screen

Der Text switcht zwischen unterschiedlichen Wörtern. Wenn die ersten Worte feststehen und der Text dahinter auch, kommt es auf das mittlere Wort an, das den Sinn und die Intention der Sätze völlig verändert.

Gute Gründe fürs Interactive Motion Design

Kinetische Typografie ist ein Highlight auf einer gelungenen Website. Zum ästhetischen Aspekt kommen noch andere entscheidende Faktoren hinzu: Mit dem Interactive Motion Design, zu dem etwa Page Transitions, Scroll-Animationen und eben die kinetische Typografie gehören, leiten UI-/UX-Designer den User sicher und gezielt durch eine Website.
Diese Stilmittel werden nicht willkürlich, sondern mit Bedacht gewählt. Sie vermitteln Vertrauen und Kompetenz, erhöhen die Verweildauer, unterstützen das Ranking und festigen so langfristig den Erfolg einer Website.

In unserem Glossar (Wiki) könnt ihr noch mehr über kinetische Typografie erfahren und wo diese Typoanimationen eingesetzt werden, z. B. im Title Design von Filmen, in Lyric Videos oder in einer Logo-Animation.

Shantu Andreas Bhattacharjee - Portrait

Als Usability-Agentur programmieren wir dir gern eine individuelle kinetische Typografie für deine Website.

Shantu Bhattacharjee

Texte uns an!