Wenn ein normaler Hover-Effekt nicht zur Website passt
Nicht immer sind es große Animationen oder aufwendige Funktionen, die einer Website ihren besonderen Charakter verleihen. Manchmal steckt die eigentliche Herausforderung in einem Detail, das Besucher kaum bewusst wahrnehmen. Zum Beispiel darin, was passiert, wenn sie mit der Maus über einen Link fahren.
Bei der individuellen Gestaltung einer Website wollten wir genau diesen kleinen Moment anders lösen. Statt eines gewöhnlichen Farbwechsels oder einer einfachen Unterstreichung sollte unter dem Link eine Linie erscheinen, die aussieht, als würde sie gerade von Hand gezeichnet.
Eine unscheinbare Idee, die allerdings einige Überlegungen bei der Umsetzung erforderte.
Die Gestaltungsidee
Eine Linie, die wie von Hand gezeichnet wirktDie meisten Websites verwenden recht einfache Hover-Effekte. Ein Link verändert seine Farbe, erhält eine Unterstreichung oder wird leicht hervorgehoben. Das funktioniert zuverlässig, passt aber nicht unbedingt zu jedem Gestaltungskonzept.
In unserem Fall sollte die Interaktion etwas verspielter und individueller wirken. Beim Überfahren eines Links sollte eine geschwungene Linie unter dem Text entstehen. Nicht einfach als gerader Strich, sondern mit einer leicht unregelmäßigen Form, die an eine handgezeichnete Markierung erinnert.
Dabei war wichtig, dass die Bewegung dezent bleibt. Die Linie sollte den Link hervorheben, ohne die Aufmerksamkeit unnötig vom eigentlichen Inhalt abzulenken.
Eine gewöhnliche CSS-Unterstreichung kam dafür nicht infrage. Sie hätte zwar denselben funktionalen Zweck erfüllt, aber nicht die gewünschte gestalterische Wirkung erzielt.
Unsere Umsetzung
Individuelle Linienführung statt Standard-UnterstreichungFür den Effekt haben wir uns die Möglichkeiten von CSS und SVG zunutze gemacht.
Eine SVG-Grafik eignet sich besonders gut, um individuelle Linienformen darzustellen. Anders als bei einer einfachen CSS-Rahmenlinie lässt sich ihre Form frei gestalten. So kann die Unterstreichung leicht geschwungen oder unregelmäßig verlaufen, ohne dass sie wie ein gewöhnlicher gerader Strich aussieht.
Die Herausforderung bestand darin, diese Linie nicht einfach nur einzublenden. Sie sollte beim Überfahren des Links so erscheinen, als würde jemand sie gerade unter den Text zeichnen.
Dafür haben wir die Darstellung mit einer CSS-Animation verbunden. Die Linie wird nicht sofort vollständig sichtbar, sondern erscheint innerhalb eines kurzen Bewegungsablaufs.
Auch die Geschwindigkeit spielt dabei eine Rolle. Eine zu langsame Animation würde die Bedienung unnötig träge wirken lassen. Erfolgt sie zu schnell, geht der handgezeichnete Eindruck verloren.
Durch die Abstimmung von Linienform, Bewegung und Dauer entstand schließlich der gewünschte Effekt.
Ein schönes Detail darf die Bedienung nicht erschweren
So individuell ein Hover-Effekt auch sein mag, die eigentliche Funktion eines Links muss natürlich erhalten bleiben.
Deshalb betrachten wir solche Gestaltungsideen nicht ausschließlich aus optischer Sicht. Ein Link muss weiterhin als interaktives Element erkennbar sein und sich auch ohne Maus bedienen lassen.
Gerade bei der Tastaturnavigation ist es wichtig, dass Besucher erkennen können, welches Element aktuell ausgewählt ist. Ein Hover-Effekt allein reicht dafür nicht aus.
Auf Geräten mit Touchscreen wiederum gibt es das klassische Überfahren mit der Maus häufig gar nicht. Die Website muss also auch dann verständlich und vollständig bedienbar bleiben, wenn die Animation nicht ausgelöst wird.
Solche Überlegungen gehören für uns ebenso zur individuellen Webgestaltung wie die eigentliche Animation.
Das Ergebnis
Eine kleine Bewegung mit eigener HandschriftAm Ende entstand ein Hover-Effekt, der sich deutlich von einer gewöhnlichen Unterstreichung unterscheidet und trotzdem angenehm zurückhaltend bleibt.
Die geschwungene Linie greift den Charakter der Gestaltung auf und verleiht den Links eine kleine persönliche Note. Technisch ist dafür keine umfangreiche Erweiterung notwendig. Die Kombination aus einer individuell gestalteten SVG-Linie und gezieltem CSS reicht aus.
Solche Details zeigen, wie vielseitig sich Websites gestalten lassen, wenn nicht ausschließlich auf vorgefertigte Standardeffekte zurückgegriffen wird.
Natürlich braucht nicht jeder Link eine besondere Animation. Aber dort, wo sie das Gestaltungskonzept sinnvoll ergänzt, kann selbst eine kleine Unterstreichung zum wiedererkennbaren Bestandteil einer Website werden.
Deine Website soll sich von anderen abheben?
Ein individuelles Webdesign entsteht nicht allein durch Farben, Bilder und Schriftarten. Oft sind es die sorgfältig aufeinander abgestimmten Details, die einem Internetauftritt seinen eigenen Charakter verleihen.
Du hast besondere Vorstellungen für die Gestaltung Deiner Website oder wünschst Dir eine Lösung, die über die üblichen Standardelemente hinausgeht? Wir unterstützen Dich dabei, individuelle Gestaltungsideen zu entwickeln und technisch passend umzusetzen.