- KI Bilder ersetzen Stockphotos
- Das Comeback der Sidebar-Navigation
- Abgerundete Ecken sind wieder angesagt
- Content-Autoren machen Webdesign
- Die Webseiten-Performance verbessert sich
- Der CSS Backdrop-Filter Blur Effekt verbreitet sich
- Webdesign fokussiert sich vermehrt auf die Darstellung von Content
- Viele Cookie-Banner werden wieder entfernt
- Schlussfolgerung
Mit KI erstellte Bilder, Layouts und Logos werden 2024 das Erscheinungsbild von Websites prägen. Sowohl im Guten als auch im Schlechten.
1. KI Bilder ersetzen Stockphotos
KI Bildmaterial verbreitet sich rasend schnell im Internet. Wie sich dieser Trend auf das Webdesign auswirken wird, ist noch schwer zu sagen. Möglicherweise entsteht ein gewisser Überfluss an Wow-Effekt-Bilder mit Fehlern in den Details. Die Kunst bei der Kreation ist es, die KI Bilder natürlich aussehen zu lassen.
Ein guter Fotograf oder Grafiker, mit Wissen im Bereich Gestaltung und Fotografie, wird auch hier wesentlich bessere Ergebnisse erzielen. Bereits sind neue Berufsbezeichnungen entstanden wie der «KI-Artist» – Profis wird es also trotz Künstlicher Intelligenz weiterhin brauchen und sie machen auch hier den entscheidenden Unterschied.
Es gibt auch zwischen den verschiedenen Tools grosse qualitative Unterschiede. Die professionellen Tools sind meist kostenpflichtig und nicht so einfach in der Handhabung.
Die Möglichkeiten sind schier unendlich. Wer die KI-Tools beherrscht, wird zweifellos hervorragendes Bildmaterial kreieren. Man darf also gespannt sein, wie sich Webdesign im Jahr 2024 durch KI Bilder verändern wird.
KI-Bilder auf dieser Website
Hier habe ich letztes Jahr mehr als die Hälfte aller Fotos durch KI generierte Bildern ersetzt und das quadratische Logo in der Mobile-Version mit KI neu erstellt. Auf der Startseite werde ich regelmässig ein zur Jahreszeit passendes KI Bild veröffentlichen.
2. Das Comeback der Sidebar-Navigation
Bei Blogs mit viel Inhalt sieht man vermehrt das Inhaltsverzeichnis mit Jumper-Links auf der linken Seite fixiert. Und auch bei der Google Developer Dokumentation ist die Hauptnavigation in der Sidebar auf der linken Seite platziert.
Vieles spricht dafür, dass Websites mit viel Content vermehrt wieder mit einer vertikalen Navigation auf der linken Seite ausgestattet werden. Bei der Sidebar-Navigation ist der Platz praktisch unbeschränkt und man sieht über den aktiven Navigationspunkt immer den aktuellen Pfad. Auf einen Breadcrumb kann bei dieser Navigation also verzichtet werden.
Studiendaten zur Sidebar-Navigation links
Eine Studie hat ergeben, dass beim Surfen nach einem Unterbruch, die Wiederaufnahmezeit halb so lang war, wenn der Navigationsbalken auf der linken Seite platziert war. Das liegt daran, dass in der rechten Gehirnhälfte die Raumorientierung verarbeitet wird. Befindet sich die Navigation im linken Gesichtsfeld, werden die Informationen direkt in die rechte Hirnhälfte geleitet (kreuzweise), genau da wo sie verarbeitet werden. (Quelle: Good Webration)
3. Abgerundete Ecken sind wieder angesagt
Dieser Trend ist international bereits voll im Gang und wird sich 2024 wahrscheinlich auch in der Schweiz vermehrt zeigen. Auch wenn hier eckige Webdesign sehr beliebt ist.
YouTube hat mit dem Redesign im August 2023 abgerundete Ecken eingeführt. Damit sollte ein weicherer und moderneres Look-and-Feel erzeugt werden. Allerdings waren die Meinungen darüber unter Webdesignern anfangs sehr gespalten und wurden hitzig auf Social Media diskutiert. Mittlerweile sieht man mehr und mehr Websites mit abgerundeten Ecken.
Abgerundete Ecken sind allerdings nicht gleich abgerundete Ecken. Im Jahr 2013 hat Apple mit iOS 7 eine neue Icon-Form eingeführt, die sogenannte «squircles». Eine Mischung aus square (Quadrat) und circle (Kreis). Bei einem Squircle beginnt die Rundung etwas früher als bei einer normalen abgerundete Ecke wo die Rundung einem exakten Viertels-Kreis entspricht. Hier gibt es mehr Informationen zur komplexen Mathematik von Squircle.
Squircles wirken eleganter, weniger nach Massenproduktion und erinnern an Formen der Natur. Die Form kommt auch physisch in zahlreichen Apple und anderen Premium Produkten vor.
Leider lassen sich Squircle noch nicht mit reinem CSS realisieren. Wie man es trotzdem machen kann, beschreibt Pavel Laptev in diesem Blog-Artikel: Squircles on the Web.
4. Content-Autoren machen Webdesign
Die Funktionalität benutzerfreundliche Grafikprogramme wie Sketch und Figma findet immer mehr Einzug in CMS Lösungen und geben Autoren immer mehr gestalterischen Freiraum. Auf sehr einfache Weise kann das gesamte Webdesign einer Seite verändert werden.
Trotz Vorlagen und Schulung kommt es immer öfter vor, dass Content-Autoren die neuen Möglichkeiten nutzen und sich gestalterisch betätigen. Dabei wiederholen sie die gleichen Fehler, welche Webdesigner in den Anfängen des Internets gemacht hatten. Nach dem Motto: Was möglich ist, muss auch gemacht werden.
Die Folge sind uneinheitliche Abstände und Schriften, ungeprüfte Darstellungen auf unterschiedlichen Bildschirmbreiten, unruhiges und chaotisches Design. Insbesondere, wenn mehrere unterschiedliche Autoren daran arbeiten.
7. Die Webseiten-Performance verbessert sich
Erfolgreiche Webprojekte haben fast immer eine extrem gute Webseiten-Performance. Und das ist kein Zufall. Es handelt sich dabei nämlich um den wichtigsten Aspekt vom User Experience (UX).
Bereits im letzten Jahr ist die Nachfrage in meiner Agentur nach PageSpeed Optimierungen stark gestiegen. Und dieser Trend dürfte 2024 weiter zunehmen.
Auch WordPress arbeitet aktuell an der Performance-Optimierung. Mit richtig gebauten FSE-Themes lässt sich bereits heute der maximale PageSpeed Score erreichen.
5. Der CSS Backdrop-Filter Blur Effekt verbreitet sich
Mit CSS kann immer mehr JavaScript Code ersetzt werden. Dank pure CSS kann die Lade-Performance verbesserte und die Komplexität reduziert werden.
Auf eine noch relative unbekannte CSS Funktionen möchte ich kurz eingehen, da sie das Potenzial für einen kleinen Webdesign-Trend hat.
Und zwar geht es um den Backdrop-Filter Blur. Dieser Effekt waren bis jetzt vor allem bei nativen Apps verbreitet und im Trend. Zum Beispiel bei zahlreichen Apple Apps oder auch bei der X App. Dabei bewegt sich der Inhalt beim Scrollen unter die fixierte Navigation und wird leicht abgedeckt und geblurt. Darüber liegende Worte können dank des Blur-Effekts gut gelesen werden.
Dieser Effekt lässt sich auch im Web sehr einfach realisieren und wird von allen aktuellen Browsern unterstützt. Es reicht eine Zeile CSS Code dafür:
8. Webdesign fokussiert sich vermehrt auf die Darstellung von Content
Neue Editoren, wie der Block Editor von WordPress, ermöglichen ein einfaches und effizientes Gestalten von Content. Man wird sich vermehrt auf diesen Teil des Webdesigns konzentrieren, denn er ist entscheidend.
Denn die KI von Google findet und versteht guten Inhalt immer besser. Sie prüft aber auch, wie dieser typografischen und gestalterisch dargestellt wird. Denn Google scannt nicht nur den HTML-Code, sondern prüft auch die gerenderte Darstellung auf unterschiedlichen Geräten. Eine professionelle und nutzerfreundliche Gestaltung des Inhalts wird von Google belohnt.
6. Viele Cookie-Banner werden wieder entfernt
Am 1. September 2023 wurde in der Schweiz das neue Datenschutzgesetz (DSG) eingeführt. Zahlreiche Webseiten-Betreiber haben daraufhin Cookie-Banner in ihre Websites eingebaut.
Was viele nicht wussten – das neue Datenschutzgesetz in der Schweiz kennt gar keine Cookie-Banner Pflicht. Es reicht ein Hinweis über Cookies und die «Opt-out»-Möglichkeit in der Datenschutzerklärung. Diese Tatsache wird sich hoffentlich im Jahr 2024 herumsprechen und die unnötigen Cookie-Banner werden wieder entfernt.
Wer zum Beispiel im Deutschen-Markt aktiv ist und dort Werbung macht, sollte nur da ein Cookie-Banner schalten. Allerdings sind die technischen Anforderungen im DSGVO an ein Cookie-Banner sehr hoch und die Mehrzahl der in der Schweiz verwendeten Cookie-Banner erfüllen diese nicht. Mit diesem Tool kann man prüfen, ob potenzielle Datenschutzverstösse auf einer Website nach DSGVO vorliegen.
Wer sich für das Thema interessiert, dem empfehle ich den Podcast «Datenschutz Plaudereien» von Martin Steiger und Andreas Von Gunten.
Schlussfolgerung
Die grössten sichtbaren Webdesign-Veränderungen im Jahr 2024 werden wahrscheinlich die durch die KI generierten Bilder, Grafiken und Layouts verursachen. In diesem Punkt bin ich mir fast 100 Prozent sicher.
Erfreulich wäre, wenn der eine oder andere Cookie-Banner wieder verschwindet.
Und die weiteren Punkte sind etwas spekulativ. Ende Jahr wird sich zeigen, ob ich recht hatte – oder nicht.