Vielleicht ist es dir beim Laden der Startseite eben schon aufgefallen: M-Fleger hat ein visuelles Feintuning bekommen!
Wer im Web designt, steht oft vor der Herausforderung, Ästhetik und Performance in Einklang zu bringen. Manchmal ist weniger einfach mehr. Genau deshalb habe ich das obere Design komplett aufgeräumt. Das Ziel? Fokus. Der Blick soll direkt auf das gelenkt werden, was zählt.
Die Magie des perfekten Timings
Inspiration für das neue Layout war ein extrem cleaner, kartenbasierter Hero-Bereich mit stark abgerundeten Ecken. Wenn die Seite lädt, fliegt nun die gesamte blaue Header-Karte flüssig von unten rein. Doch das eigentliche Highlight liegt im Detail und im exakten Timing der Animationen.
Anstatt dass alles gleichzeitig auf den Bildschirm klatscht, ploppen die Elemente jetzt organisch nacheinander auf:
- Der Einstieg: Die Header-Karte baut sich weich auf dem Bildschirm auf.
- Der Sprung: Mein Name springt elegant ein kleines Stück nach oben.
- Der Pinselstrich: Erst wenn der Text steht, zeichnet sich eine türkise, handgezeichnete Linie wie von Geisterhand von links nach rechts direkt unter meinem Namen – völlig frei und ohne den restlichen Text zu stören.
Warum das wichtig ist?
Gutes Interface-Design lebt von solchen Mikro-Interaktionen. Wenn eine Linie gezeichnet wird, während der Text noch fliegt, wirkt das Auge schnell überfordert. Wartet die Linie jedoch, bis der Text zur Ruhe gekommen ist, erzeugt das einen richtig harmonischen Effekt beim Laden der Seite. Der Slogan „Punktgenau verbunden.“ schwebt nun stolz direkt darunter.
Vielen Dank an alle, die mich auf diesem Weg begleiten und dabei helfen, M-Fleger Stück für Stück schöner, schneller und besser zu machen.
Viel Spaß beim Entdecken des neuen Intros!
Julian