Wie jedes Jahr gibt es natürlich auch 2023 neue Trends in der Welt des Grafik- und Webdesigns. Dabei gibt es zwar durchaus Neues, allerdings zeigt sich auch, dass Retro und Retrofuturismus weiter auf dem Vormarsch sind. Es scheint so, als ob Nostalgie gerade im Bereich Grafik-Design weiterhin eine treibende Kraft ist.
Dabei muss man fairerweise erwähnen, dass alte Stile nicht bloß kopiert, sondern vielmehr neu interpretiert und angepasst werden, nicht zuletzt auch an die Möglichkeiten der immer schneller werdenden Technik. Somit werden zwar durchaus nostalgische Gefühle wach, ohne aber die negativen Seiten alter Designs zu wecken. Gerade im Bereich des Webdesigns wäre dies nicht gerade von Vorteil. Man stelle sich nur einmal ein Pre-Smartphone-Ära-Web-Layout auf modernen Smartphones vor …
Im Bereich Grafik-Design muss man zusätzlich anmerken, dass sich Retro nicht nur auf die 80er Jahre bezieht, die vielen Menschen als Erstes in den Sinn kommen, sondern auf Stile aus den verschiedensten Zeiten. Die Spanne reicht dabei von den 1990ern bis zurück in die 1920er Jahre. Dies führt auch zu einem entscheidenden Effekt: Das meiste kommt einem ungemein vertraut vor. Kein Wunder, wenn man beispielsweise einmal an Retro Lineart denkt, die das Gefühl der 50er und 60er Jahre wach werden lassen und das den meisten aus Cartoons oder Filmen bekannt ist.
Einige prägnante und in unseren Augen interessante Stile haben wir herausgesucht, um die Richtung zu zeigen, in die Grafik- und Webdesign 2023 steuert.
Grafikdesign-Trends 2023
Mystik
Mit gedämpften Farben und dünnen Linien schaffen es diese Grafiken, ein Gefühl der Ruhe und Meditation zu vermitteln, und beschwören fast schon eine Parallelwelt voll mit Magie. Die Designs orientieren sich dabei gerne an der Astrologie und Symboliken der Wahrsagung, zeigen Tiere oder auch geläufige Motive wie die Lotusblume und das Auge der Vorsehung (Allsehendes Auge). Sie regen Betrachter*innen dazu an, etwas Verborgenes hinter den Symbolen zu vermuten. Die meisten werden diesen Stil von Tarot-Karten kennen. Durch ihre eher zurückhaltende Farbpalette und schlichten Linien sind mystische Grafiken besonders angenehm zu betrachten, obgleich sie auch aufmerksame Blicke auf sich ziehen können.
Punk
Nach Zeiten des übermäßig schlichten und sterilen Designs eine willkommene Abwechslung. Unprofessionell, selbst gemacht und vor allem „anti alles“ ist Punk gegen Establishment gerichtet und drückt Revolution und Ungehorsam aus. Dies zeigt sich auch in für diesen Stil typischen Elementen. Ausgeschnittene Bilder, undefinierte Kanten, Kritzeleien und Schriften, die aus den verschiedensten Schriftarten zusammengewürfelt sind, finden sich am häufigsten wieder. Auch wenn die Idee des Punks deutlich älter ist, der Stil, der heutzutage zum Ausdruck kommt, ist meist eine Rückbesinnung auf die 80er Jahre, in denen der Punk große Popularität genoss. Solange es anders ist, ist es gut!
Retro Lineart
Die meisten, die Retro Lineart sehen, denken wahrscheinlich an Fast Food, Drive-in-Kinos und pastellfarbene Autos mit Heckflossen. Der Stil ist leicht mit den 50er Jahren in Verbindung zu setzen, eignet er sich doch hervorragend für Cartoon-Figuren mit gummiartigen Gliedmaßen und lustigen kleinen Illustrationen. Unbeschwertheit und Leichtfüßigkeit sind die prominentesten Gefühle, die beim Betrachten dieses Stils zum Ausdruck kommen. Kombiniert mit aufgeblasenen Schriftzügen wecken sie nostalgische Gefühle und helfen somit ungemein, Vertrauen zu vermitteln.
90er Space Psychedelia
Für Abwechslung im Grafikdesign sorgt auch Space Psychedelia. Im Vordergrund steht dabei, eine Synthese aus Zukunft und Vergangenheit zu schaffen. Konkreter bedeutet dies, dass bei der grafischen Ausarbeitung Techniken der 80er und 90er Jahre zur Anwendung kommen. Ein Beispiel hierfür wären Muster im Memphis-Design, das sich vor allem durch farbenfrohe und abstrakte Formen auszeichnet. Die meisten kennen es wahrscheinlich von alten Bussitzen, denn tatsächlich war dieser Stil hier sehr beliebt. Aber auch Cartoon-Stile fließen gerne mit ein und ergänzen die meist verspielten Farbpaletten. Bei Space Psychedelia kommen neben knalligen allem voran auch Neonfarben zum Einsatz, die den Grafiken den so charakteristischen „Glow“ bescheren.
Die Motive, die bei Space Psychedelia zum Ausdruck kommen, sind hingegen ein Blick in die Zukunft, wenn auch mit aufgesetzter Retro-Brille. So ist, wie es der Name vielleicht schon verrät, das Weltall ein omnipräsentes Thema und bildet fast immer den „Hintergrund“ für die übrigen Komponenten des Motivs. Zusätzlich kommen Elemente aus den dystopischen Vorstellungen des Cyber-Punks ins Spiel. Dies meint im Kontext von Space Psychedelia oft Cyborg-Menschen und futuristische Fahrzeuge, die durch endlose Weiten des Alls schweben. Im Kontrast zu den zahlreichen futuristischen Elementen finden sich aber auch vereinzelt Gegenstände wieder, die aus den 80er Jahren stammen, um die Synthese aus Zukunft und Moderne zu verdeutlichen. Ein Beispiel hierfür wären beispielsweise Boomboxen.
Gemischte Dimension
Das Rezept für gemischte Dimensionen ist relativ einfach erklärt. Reale Motive, meist Menschen bzw. Porträts von Ihnen, werden mit zahlreichen cartoonhaften Kritzeleien verziert. Dabei können lange Wimpern hinzugefügt, die Klamotten der Person können verziert oder es kann für einen Strahl-Effekt gesorgt werden. Wichtig ist nur, dass es Spaß macht! In gewisser Weise lässt sich mit dieser Nachbearbeitung auch ein Wunsch an die Realität ausdrücken. Dinge lassen sich ergänzen oder verändern, ganz so, wie man möchte. Aus diesem Grund lassen sich mit diesem Stil wunderbar Realität und Utopie vereinen und die Unterschiede zwischen diesen beiden betonen.
Webdesign-Trends 2023
Im Webdesign spielen vor allem interaktive und animierte Inhalte wieder eine große Rolle. Durch die stetige Weiterentwicklung mobiler Endgeräte und die immer schnelleren mobilen Internetverbindungen eröffnen sich neue Möglichkeiten für die Vielfalt des Webdesigns. Inzwischen lassen sich problemlos aufwendige Grafiken unterwegs auch auf Einsteigergeräten abrufen. Einige nennenswerte Trends möchten wir auch hier einmal vorstellen.
Animierte Produktenthüllungen
Sie sind zwar keineswegs eine Neuerfindung, doch halten sie immer mehr Einzug auf vielen Shop-Seiten. Animierte Produktenthüllungen sind meist von der Position des Cursors abhängig und werden durch das „Hovern“ über einer Grafik, also das Positionieren des Cursors über einem Element, ohne zu klicken, ausgelöst. So zeigt sich zunächst nur ein Produktbild mit Titel, beim Hovern über diesem Produkt erscheinen allerdings weitere Informationen. Neben den gestalterischen Möglichkeiten fördert diese Technik auch die Reduktion auf das Wesentliche und ermöglicht es, bei mehreren Produkten Übersichtlichkeit zu gewähren.
Gerade beim Design von Shop-Websites ist es ratsam, User*innen nicht zu überfordern, die Frustrationsgrenze ist bei überladenen und unübersichtlichen Produktseiten schnell erreicht! Darüber hinaus lässt sich diese Technik auch auf ganzen Webpages anwenden, wenn beispielsweise eine große Neuentwicklung veröffentlicht wird. Hier sind meist keine Grenzen gesetzt und Webdesigner können sich voll und ganz austoben. Ein gutes Beispiel für diese Technik sind die Produktseiten der neuesten Modelle namhafter Smartphone-Hersteller, allen voran Apple.
Immersive 3D-Welt
Dieser Trend ist wohl eines der besten Beispiele für die immer komplexeren Möglichkeiten des Webdesigns, die mit der stetigen Weiterentwicklung der Technik ermöglicht werden. Durch immersive 3D-Welten sind Websites nicht mehr zweidimensionale Seiten, die wie ein Blatt Papier auf einem Schreibtisch liegen. Vielmehr ähneln sie dadurch Videospielen und deren erkundbaren Welten. Dies soll allerdings nicht bedeuten, dass hiermit nur fiktive Landschaften möglichen sind. Auch Achterbahnfahrten um Produkte sind vorstellbar. Die Möglichkeiten werden meist nur durch die Vorstellungskraft des Designers limitiert. Die Progression in diesen Welten wird durch Scrollen ausgelöst, nur „schiebt“ man nicht die Seite wie gewohnt nach oben, sondern spult die Animation vor oder zurück. Es handelt sich hierbei also nicht nur um aufwendig animierte Filme, sondern auf die Eingabe der User reaktive Designs. So kann bei manchen Beispielen ein User auch auf einzelne Elemente in einem dreidimensionalen Design klicken, um in eine neue Ebene einzutauchen.
Da sie sehr aufwendig zu programmieren sind und manchmal auch nicht der intuitivste Weg, um Informationen zur Verfügung zu stellen, eignen sie sich eher für größere Projekte und State-of-the-Art-Websites. Immersive 3D-Welten eignen sich hervorragend für Storytelling von Produkten oder Marken, wie beispielsweise für einen groß inszenierten Produkt-Launch.
Digitaler Maximalismus
Einen Gegenentwurf zu minimalistischen Webdesigns, die möglichst viel Usability versprechen und die Zeit zur Orientierung auf einer Website verkürzen, stellt digitaler Maximalismus dar. Mehr und noch mehr ist hier der Leitgedanke. Das heißt aber keineswegs, dass unüberlegt Grafiken und Texte in den Raum geworfen werden. Vielmehr bedeutet es, blanke und weiße Elemente eines Designs, wie beispielsweise den Hintergrund, gezielt mit Grafiken oder Animationen auszufüllen. Alles auf einer Website soll mit Grafiken und Designs ausstaffiert sein. Neben großen Texten spielen hier auch kleinere Animationen eine Rolle. Diese mögen zwar ablenkend wirken, allerdings erfüllen sie hiermit auch ihren Zweck. Sie werden eingesetzt, um gerade bei Werbung maximal auffallend zu sein. In der manchmal doch sehr einheitlichen Tristesse des vorgefertigten Webdesigns können solche Seiten aus der Masse herausstechen, gerade wenn die oft mit digitalem Maximalismus einhergehende Verspieltheit zu ihren Produkten passt.
Parallax
Der Parallax-Effekt hat zwar gewisse Ähnlichkeiten mit den bereits erwähnten Animationen, benennt allerdings einen ganz bestimmten Effekt. Statt der üblichen einen Seite, welche sich analog zu einem Blatt Papier hoch und runter „schieben“ lässt, kommen hier mehrere Ebenen ins Spiel, mindestens zwei. So kann im einfachsten Beispiel der Text eine Ebene darstellen und der Hintergrund die zweite. Der Parallax-Effekt bedeutet nun, dass sich diese beiden Ebenen unterschiedlich schnell bewegen, wenn man auf einer Website scrollt. Denkbar ist dieser Effekt natürlich auch mit mehreren Ebenen und wird in der Realität auch meist so umgesetzt. Gerade der Hintergrund wird gerne einmal in mehrere Ebenen aufgeteilt und schafft somit ein immersiveres Erlebnis.
Dieser Effekt eignet sich hervorragend für aufwendiges Storytelling und wird auch meist bei One-Pagern eingesetzt, welche unter anderem die Firmenhistorie oder ein revolutionäres Produkt vorstellen.
Überlappender Text
Zuletzt ist noch überlappender Text als Trend für das neue Jahr zu erwähnen. Es mag zwar im Vergleich zu den bisherigen Design-Trends etwas schlicht wirken, nur Text zu überlappen, allerdings steckt mehr dahinter. Aus dem Neobrutalismus stammender, überlappender Text betrifft meist die Überschriften, welche deutlich vergrößert werden, manchmal fast bis zu Unlesbarkeit. Auch sind Texte nicht mehr immer streng an Raster gebunden und mittig zentriert. Sie „erschlagen“ den Betrachter somit visuell, wenn er die Seite öffnet, und fordern auf, den Text bewusst wahrzunehmen. Oftmals lässt sich auch ein Vergleich zu Covern von Magazinen schließen, die ihren Titel meist groß und über den Rest des Covers überlappend darstellen.
Zu übersehen ist er somit kaum. Selbstverständlich ist aber auch dieser Trend nicht unbedingt für den Alltag geeignet, da er meist die ganze Seite ausfüllt, gerade wenn man eine Website auf einem mobilen Endgerät betrachtet. Usability fällt hier schnell unter den Tisch. Die Kunst es zudem auch, dieses Stilmittel gezielt und mit Augenmaß einzusetzen. Hierzu gehört auch die Wahl einer aussagekräftigen und zu diesem Stil passenden Schriftart. Filigrane Schriftzüge fallen hierbei fast immer aus, da sie in dieser Größe meist nicht mehr lesbar sind.
Quellen:
https://99designs.de/blog/news-trends/webdesign-trends/
https://99designs.de/blog/news-trends/grafikdesign-trends/
Fotos:
Fahner.Design./D. Wolf – fahnerdesign.de
Adobe Stock/Paul Craft – stock.adobe.com
Adobe Stock/AkuAku – stock.adobe.com
Adobe Stock/Travel Drawn – stock.adobe.com