Rückblick
Vor etwa einem Jahr habe ich bereits einen Blog-Artikel zu diesem Thema geschrieben: Webdesign Trends 2024. Die meisten Punkte haben sich als richtig erwiesen. KI Bilder haben viele Stockphotos ersetzt und sind mittlerweile auf fast allen Websites zu finden. Auch abgerundete Ecken sind nach wie vor weit verbreitet.
Daneben lag ich mit der Prognose, dass viele Cookie-Banner auf Schweizer Websites wieder entfernt werden. Tatsächlich haben sie sich noch weiter verbreitet, auch wenn sie in der Schweiz nicht vorgeschrieben sind. Grund dafür ist sicher auch, dass Google seit August 2024 für die Nutzung seiner Tools (wie zum Beispiel Google Analytics) ein Cookie-Banner vorschreibt. Dies gilt auch für die Schweiz. Es gibt aber auch alternative Analyse-Tools oder man kann - wie in meinem Fall - auf Google Analytics auch gut verzichten.
1. Retro-Look
Immer öfter sieht man seit langer Zeit, wieder die alte Typewriter-Fonts oder sogenannte Monospaced Fonts (wie Courier, Space Mono oder IBM Plex Mono). Diese zeichnen sich dadurch aus, dass alle Buchstaben und Zeichen die gleiche Breite haben und sind eigentlich für Programmierumgebungen gedacht. Prominentes Beispiel dafür ist die Website von Cursor AI:
Neben Monospace-Fonts erleben auch andere Retro-Elemente ein Comeback. Tapeten-artige Hintergrundmuster in gedämpften Farben, leicht verschwommene oder körnige Fotos und pixelige Icons tauchen vermehrt auf. Auch die Gestaltung von Buttons und Navigationselementen greift oft bewusst den Look der frühen Webseiten auf - mit deutlichen Schatten, 3D-Effekten und teilweise sogar dem charakteristischen Grau der ersten Windows-Versionen. Dieser Stil wird häufig mit modernen Elementen kombiniert und schafft so einen Kontrast zwischen Alt und Neu.
2. Rückkehr der System-Fonts
Wer schon etwas länger in der Web-Entwicklung tätig ist, erinnert sich. Früher gab es keine sinnvolle Möglichkeit, Schriften einzubetten. Das heisst, man musste eine Schriftart verwenden, welche auf allen gängigen Betriebssystemen installiert war. Und dies waren die Schriften Arial und Verdana.
2014 hat Apple seine eigens entwickelte System-Schrift San Francisco vorgestellt. Diese wurde speziell für digitale Displays optimiert und bietet unterschiedliche Varianten. Auch Google und Microsoft verfügen über ansehnliche System-Schriften, welche mehrmals optimiert wurden und auf Android bzw. Windows zum Einsatz kommen.
Websites, welche diese System-Schriften verwenden, passen sich damit an die vom Nutzer gewohnte Umgebung an. Sie haben zudem folgende Vorteile:
- Starke Verbesserung der Performance und Reduktion von Layout-Shift (CLS)
- Dem Nutzer bekannt und gewohnt
- Für digitale Displays optimiert
- Keine Lizenzgebühren
3. Scroll-Animationen und Effekte
Scroll-Animationen und Effekte lassen sich mit Baukasten-Systemen oder JS Libraries immer einfacher erstellen. Man sollte es aber auch nicht übertreiben, denn oft haben Website-Betreiber und die Entwickler mehr Freude daran, als die eigentlichen Nutzer.
Sicher gibt es sinnvolle Einsatzgebiete, speziell bei präsentationsartigen und Agentur Websites, welche ein Produkt oder eine Agentur vorstellen. In einem Online-Shop, wo Nutzer mit direkter Kauf-Absicht hinkommen, sollte darauf verzichtet werden.
Aufhalten lässt sich dieser Webdesign Trend jedenfalls nicht mehr. Ich bin mir sicher, dass er sich 2025 noch verstärken wird.
Nachteile von JavaScript Lösungen
Einige Nachteile von Animationen mit JavaScript sind: Schlechtere Performance, höhere Komplexität, Verlust von Flexibilität, erhöhtes Risiko für geringere Zugänglichkeit und Fehler.
Alternative: PureCSS
Mittlerweile können allerdings auch Scroll-Animationen mit reinem CSS erstellt werden (Pure CSS). Dies ist sicherlich die eleganteste Methode mit den wenigsten technischen Nachteilen.
4. CO2 reduzierte Websites
Durch geringe Datenmenge und möglichst wenig serverseitige und clientseitige Rechenleistung wird versucht, den Energieverbrauch einer Website zu reduzieren. Bei OLED- und AMOLED-Displays können zudem dunkle Hintergrundfarben den Stromverbrauch des Bildschirms senken.
Bereits gibt es verschiedene Test-Tools (z.B. hier oder hier), mit welchen man den CO2-Ausstoss einer Website messen kann.
All unsere für PageSpeed Insights optimierten Websites schneiden hier bereits sehr gut ab. Denn die meisten Massnahmen für Öko-Optimierung sind auch ein Bestandteil der PageSpeed-Optimierung.
5. KI-Integration
Bereits haben viele Websites einen KI-basierten Assistenten integriert, welcher deutlich besser hilft und Auskunft geben als frühere Assistenten ohne KI. Voice-Chat und Video-Chat werden folgen. Dies ist aber nur der Anfang einer Entwicklung, denn es ist noch viel mehr möglich.
Aufgrund vorhandener Informationen über den Nutzer kann KI individuelle Inhalte generieren und das Aussehen der Website, Bilder und Videos anpassen. Dies ermöglicht eine Echtzeit-Personalisierung während des Besuchs einer Website. Aufgrund des Klickverhaltens können Vorlieben des Nutzers erkannt und entsprechende Anpassungen der Website vorgenommen werden.
6. Bunte Farbverläufe innerhalb Fonts und im Hintergrund
Seit einiger Zeit sieht man immer mehr bunte Farbverläufe im Webdesign - oft als Hintergrund, manchmal leicht animiert und manchmal auch innerhalb von Fonts und Figuren. Ich bin mir ziemlich sicher, dass sich dieser Trend auch 2025 fortsetzen wird.
Farbverläufe können einfach mit CSS erstellt werden und benötigen keine grosse Datenmengen. Das heist, sie beeinträchtigen weder die Website-Performance noch die Zugänglichkeit.
7. Beige und herbstliche Brauntöne
Immer öfter sieht man wieder hellbeige Hintergrundfarben kombiniert mit unterschiedlichen Brauntönen. Ein besonders prominentes Beispiel ist die Website Anthropic und die App der KI Claude.
Diese warmen, erdigen Farbtöne vermitteln nicht nur Seriosität und Professionalität, sondern schaffen auch eine angenehme, einladende Atmosphäre. Die Kombination aus hellen und dunklen Nuancen ermöglicht zudem eine gute Lesbarkeit und sorgt für ausreichend Kontrast bei der Gestaltung von Texten und Elementen.
8. Rabenschwarze Websites
Während in den letzten Jahren schwarze Hintergrundfarben meist leicht heller und oft auch leicht bläulich eingesetzt wurden, sieht man aktuell im Webdesign wieder vermehrt komplett schwarz. Meist wird dazu ein minimalistisches Design verwendet mit System-Schriften. Prominente Beispiele dafür sind OpenAI und xAI.
Woher dieser Trend kommt, ist nicht ganz klar. Ein Argument für die Anwendung schwarzer Hintergrundfarben ist der geringere Energieverbrauch bei Bildschirmen.
9. Extremer Kontrast
Die Website von Lunchbox zeichnet sich durch maximale Schriftgrössen und starke Kontraste zwischen dunklen und hellen Bereichen aus. Dieser Webdesign-Trend macht sich bereits seit einiger Zeit bemerkbar.
In diesem Beispiel kommen zudem auch System-Fonts und Scroll-Animationen zum Einsatz, die wir bereits unter Punkt 2 und 3 aufgelistet haben.
Schlussfolgerung
Die Webdesign-Trends 2025 zeigen eine spannende Entwicklung zwischen Retro-Elementen wie Monospace-Fonts und zukunftsweisenden KI-Technologien. Während einerseits klassische Gestaltungselemente zurückkehren, gewinnen andererseits Themen wie Nachhaltigkeit und Performance zunehmend an Bedeutung, was sich in CO2-reduzierten Websites und der Rückkehr zu System-Fonts widerspiegelt.
Die visuellen Trends bewegen sich dabei zwischen zwei Extremen: Minimalistische, schwarze Designs stehen expressiven Farbverläufen und starken Kontrasten gegenüber. Dies zeigt, dass sich modernes Webdesign 2025 noch stärker an spezifische Zielgruppen und Anwendungsfälle anpassen wird - ohne dabei Performance und Nutzerfreundlichkeit aus den Augen zu verlieren.
Kommentiere diesen Artikel
Weitere Inhalte zu «Webdesign»
- Unterschied zwischen Webdesign und UX Design
- Die Zauberformel für Webdesign
- Webdesign Trends 2024
- Angebot Webdesign