Design-Trends 2024
Wie die Websites von morgen aussehen
Nach dem prägenden Minimalismus der letzten Dekade findet insbesondere die krisengeplagte Gen Z ein Refugium im kitschig-bunten Stil der 2000er Jahre. Dunkle Farbpaletten sind im Kommen und alte Bekannte, wie Farbverläufe und Parallax-Effekte, erleben ein Revival.
Wir stellen zehn Trends vor, die uns im frisch begonnenen Jahr 2024 erwarten.
1. Bento-Design
Der Begriff des Bento Layouts leitet sich von der gleichnamigen japanischen Lunchbox ab. Statt Reis in Bärchenform und frittierte Hähnchenschenkel zu kompartimentieren, werden hier die Inhalte der Website appetitlich in rechteckigen Flächen serviert. Runde Ecken vereinfachen die optische Trennung der geometrischen Formen. Durch unterschiedlich große Flächen kann die visuelle Hierarchie besonders einfach vermittelt werden. Dank der übersichtlichen Aufteilung des Content findet die Nutzer:in sich schnell zurecht und navigiert gezielt zu relevanten Inhalten.
2. Dark Mode
Mehr denn je spielt sich die Nutzung des Internets auf unseren Mobiltelefonen ab. Ob unterwegs, wenn nach 20% der Bahnfahrt der Akku stirbt, oder zu Hause im Bett, wenn das allabendliche Scrolling im Dunkeln unsere Sehkraft strapaziert - weiße Flächen auf dem Smartphone haben ihre Nachteile. Abhilfe schafft hier der Dark Mode. Nicht nur, dass die exzessive Verwendung von Schwarz und Dunkelgrau Akku und Augen schont, das dramatische und elegante Design liegt voll am Puls der Zeit.
3. Y2K-Ästhetik
A propos Zeit - eine Zeitreise macht das Web mit dem Y2K-Trend. Transparente Gameboys, Metalliceffekte, kitschige Icons aus der Ära vor Emoji (man denke an das klassische Smiley), fragwürdige Farbpaletten und pixelige Grafiken prägten die ikonischen Designs der späten 90er und frühen 2000er Jahre. Was für die unschuldige Gen Z noch den Reiz des Neuen hat, löst bei manch anderem ein Gefühl der Nostalgie aus und so liegen diese Gestaltungselemente trotz der drohenden Augenkrebsgefahr wieder voll im Trend.
4. Microinteractions
Microinteractions sind kleine Animationen als Antwort auf Nutzeraktionen. Dabei kann der angewählte Button seine Farbe ändern, die E-Mail bei Swipe zum Bildschirmrand selbigen zwecks Löschung verlassen oder der sich füllende Ladebalken den Fortschritt eines Downloads anzeigen. Subtil bewegte Elemente erregen Aufmerksamkeit, erfreuen den User und geben ihm unmittelbares Feedback zu seiner Handlung. Aber Vorsicht – zu lange und zu häufige Animationen werden schnell als nervig empfunden.
5. Kinetic Typography
Kinetic Typography bezeichnet schlicht bewegten Text. Animationen von Größe, Form oder Platzierung lenken den Fokus auf das typographische Element, das sich typischerweise „above the fold“ – also im Einstiegsbereich der Seite – befindet. So kann im Unterschied zur Animation rein dekorativer Grafiken nicht nur ein ästhetisch interessantes Erscheinungsbild geschaffen, sondern auch wichtige Information gezielt vermittelt werden.
6. Oversized Text
Noch mehr Aufmerksamkeit generieren riesige Schriftgrößen. Bei diesem Trend gilt „bigger is better“. Einfache Schriftarten erzeugen durch die Reduktion auf Linien und Formen ein grafisches Erscheinungsbild. Überdimensionierter Text kann, richtig eingesetzt, laut und dramatisch wirken und dabei gleichzeitig Lesbarkeit und Usability verbessern.
7. Glassmorphism
Bei diesem Trend ist der Name Programm: Elemente sind leicht transparent und durch Weichzeichnungsfilter wirkt der Hintergrund wie durch milchiges Glas betrachtet. Übereinanderliegende Flächen erzeugen eine dreidimensionale Wirkung. Dieses Designprinzip kann mit einem weiteren Trend, den Farbverläufen, kombiniert werden. Mit einer gedeckteren Farbpalette eignet sich der Glassmorphism aber auch für Websites, die ein seriöseres Bild vermitteln sollen.
8. Neomorphism
Ein weiterer Stil, der für moderne Nutzeroberflächen Anwendung findet, heißt Neomorphism. Typisch ist hier der geringe Kontrast. Einfarbige Flächen werden mit Schatteneffekten versehen, die Tiefe suggerieren. UI-Elemente scheinen aus der Bildschirmfläche herauszutreten oder darin zu versinken. Neben einer primären bunten Kontrastfarbe werden gerne helle Grauwerte eingesetzt. So entsteht ein interessantes, aber immer noch minimalistisches Erscheinungsbild. Häufig fallen die kontrastarmen Designs aber in Sachen Barrierefreiheit durch.
9. Gradients
Jeder Trend kommt irgendwann zurück. Anders als die Neon-Leggings der 80er Jahre haben Farbverläufe jedoch guten Grund für ein Comeback. Die Mischung zweier oder mehrerer Farben kann zurückhaltend und seriös oder laut und verspielt wirken, bewirken jedoch immer Tiefe, Textur und Dimension.
10. Parallax
Beim Parallax-Scrolling bewegen sich Hinter- und Vordergrund beim Scrollen unterschiedlich schnell und vermitteln so eine Illusion von Dreidimensionalität. Das Prinzip ist zwar ein alter Hut – moderne Umsetzungen verwenden aber beispielsweise Videomaterial anstatt statischer Grafiken. Der Parallax-Effekt reiht sich somit ein in die Riege bewegungsorientierter Trends.
Fazit
Mit den steigenden Anforderungen an Usability und Accessibility ist die Gestaltung moderner Websites immer auch ein Balanceakt zwischen Ästhetik und Nutzerfreundlichkeit. Die präsentierten Trends suchen dieses Gleichgewicht auf unterschiedliche Weise herzustellen. Einige gewinnen die Aufmerksamkeit der User:innen durch dynamisches Design mit animierten und bewegten Elementen, andere unterstützen das Nutzererlebnis auf subtilere Weise durch die Wahl geeigneter Farbpaletten oder cleverer Anordnung der Inhalte. Richtig revolutionär erscheint allerdings keiner der Ansätze. Aber wer weiß, ob wir im Jahr 2024 nicht noch Innovationen jenseits unserer Prognose erwarten können?
Modernes Design für Ihre Website
Wir entwickeln Konzepte zur Gestaltung von Websites und Webanwendungen. Ein erfahrenes Team aus Mediengestaltern, Konzeptern und Redakteuren zeichnet für die Erarbeitung von Designkonzepten und UI-Komponenten, die Aufbereitung von Medien und Inhalten sowie deren Frontend-Umsetzung in ein responsives Webdesign verantwortlich. Interessiert? Kommen Sie einfach auf uns zu. Wir freuen uns auf Ihre Nachricht.
