| Friedrich Siever | Webdesign
Die 17 Top Webdesign Trends für 2023
Die Webdesign Trends entwickeln sich stetig weiter und läuten ein neues Zeitalter fürs Web ein. Quasi in allen Dimensionen des Webdesigns gibt es wundervolle Neuerungen zu entdecken. Es ist also höchste Zeit sich mit den aktuellen Trends für 2023 auseinanderzusetzen.
Doch nicht um jeden Trend mitzugehen, sondern um als Unternehmer gezielt Entscheidungen treffen zu können. Wie kann die eigene Marke individuell, authentisch und auf moderne Art positiv repräsentiert werden, um die eigene Zielgruppe heute und morgen zu erreichen? Welche technologischen Trends müssen hierfür berücksichtigt werden, um nachhaltig den Anforderungen der eigenen Besucher nach beindruckenden Weberlebnissen gerecht zu werden?
Wir stellen daher in diesem Artikel die wichtigsten Webdesign Trends 2023 vor. Technologische und ästhetische Trends greifen hierbei ineinander. Wenn Du also ein neues, preisgekröntes Webprojekt initiieren möchtest oder mit einem Redesign Deiner alten Website gezielt neues Leben einhauchen willst, dann ist dieser Artikel für Dich.
1. Glühende und saturierte Farben
Manche Trends kommen von Zeit zu Zeit gerne wieder. Farben gehören hier definitiv dazu. Nicht nur in der Mode, sondern auch im Webdesign. So sind 2023 wieder kräftige Farbenpaletten und Neonfarben als Akzente wie in den 70er Jahren im Trend.
Wir würden allerdings nicht über Design sprechen, wenn diese Farbpaletten nicht wenigstens mit neuen modischen Namen betitelt wären. So sprechen wir heute von „Ecstatic colors“ oder „Acidic hues“.
Starke Kombinationsmöglichkeiten
Keine Sorge, ich möchte mich hier nicht in die Welt der Design Buzzwords verlieren. Dafür aber herausarbeiten, dass insbesondere in Verbindung mit Dark Mode Seiten die Verwendung von kräftigen Farben einen gewaltigen Aufschwung erleben wird.
Aber auch der Webdesign Trends Minimalismus und Gestaltung mit Schrift können mit den starken Farbenpalletten kombiniert werden.
Die Idee hier ist einfach. Unternehmen, die modern und innovativ wirken wollen, verwenden diese Farben, um futuristische Designs zu erschaffen. Nicht selten lässt man sich hierbei von superspektakulären Weltraumaufnahmen der NASA inspirieren.
Insbesondere setzen Pink, Magenta, Türkis, Violett oder kräftige Blautöne im Dark Mode die notwendigen Akzente. Derartige Farbschemata sind für viele technologisch Interessierte Menschen (Coder und mich selbst eingeschlossen) nahezu unwiderstehlich.
2. Animation
Moderne Werbung ohne Animation ist kaum noch denkbar. Natürlich kommt das Element für die klassische Postwurfsendung und Print nicht in Betracht. In allen modernen Formen der Werbung ist ein Ende des Wachstum dieses Trends aber nicht in Sicht. Auf hochwertigen Websites, in mobilen Apps und digitalen Werbeanzeigen sind Animation fast schon ein Muss.
Im übertragenen Sinne vermitteln Animationen Besuchern und Nutzern ein Gefühl von Dynamik. Und in einem sich ohnehin ständig verändernden Umfeld ist dieses zeitgemäß.
Unternehmen geben immer mehr Geld aus, um einzigartige Animationen zu erstellen. Warum machen die das?
Der Wert von Animationen
Animationen können den Benutzer emotional stärker verwickeln als ein einfaches Bild. Das funktioniert allerdings selten mit einem einfachen GIF, was in Endlosschleife abläuft.
Mitunter sehen wir daher eine immer stärkere Tendenz zu Videos. Zusammen mit 3D-Welten und Effekten lassen sich hervorragend vertraut wirkende Designs erstellen. Es geht letztlich um gefühlt begreifbare Gegenstände. Und die sind uns aus unserer bekannten dreidimensionalen Welt bestens vertraut. Da ich gerade an unserem Design-Portfolio arbeite, zeige ich euch mein Trailer-Video hierfür vorab schon mal als kleines Beispiel für Animationen.
Natürlich ist das hier nur ein Vorgeschmack, auf die aktuellen Entwicklungen im Bereich Webvideo. Kombiniert mit modernem JavaScript und WebGL-Technologien lassen sich weitaus attraktivere Integrationen von Bewegtbildern erstellen. Zu denken ist zum Beispiel an WebGL Video Transitions.
Interaktion und Storytelling
Grundsätzlich gilt: Besonders attraktiv sind Animationen im Zusammenspiel mit Interaktivität. CSS und JavaScript Animationen können subtil in die Website eingebaut werden und generieren einzigartige Nutzererlebnisse. Gerade im Webdesign sind die Anwendungsbereiche quasi grenzenlos.
Im Jahr 2023 werden verschiedene Formen der Animation, Deinen Benutzern ermöglichen, tief in Deine Marke abzutauchen. Durch geschicktes Aneinanderreihen von Frames, Elementen und Sequenzen, ergeben sich einzigartige und erlebbare Spielräume im Storytelling.
Einen Überblick über die verschiedenen Animationsarten und Ihre Bedeutung für Deine Website gewinnst Du in unserem Animations-Artikel.
3. Künstliche Intelligenz im Design
Na klar. Künstliche Intelligenz ist extrem gehypt. Aber, wenn man sich näher mit dem Thema beschäftigt, erkennt man die unendlichen Möglichkeiten der Einsatzfelder. Natürlich machen diese auch nicht vor den kreativen Feldern wie und Kunst und Design halt.
Daher ist die Prognose recht eindeutig. Anstatt puristisch auf den Einsatz von künstlicher Intelligenz zu verzichten, werden auch Webdesigner diese Technologien verstärkt einsetzen. Die Gründe hierfür liegen auf der Hand. Es lassen sich perspektivisch schneller bessere Ergebnisse erzielen oder Werke erschaffen, die sich positiv von anderen absetzen.
Beispiele für den Einsatz von künstlicher Intelligenz im Webdesign
Dieser Trend hat bereits begonnen und ich möchte ihn Dir mit zwei Beispielen näherbringen.
Beispiel Nr. 1 ist aus dem Bereich der Farbpaletten und -kombinationen. Tools wie Huemint sind maschinelle Lernsystem zur Generierung von Farben auf der Grundlage des Kontexts.
Die Stärke dieser Systeme besteht darin, dass sie sich auf Auswertungen von durch Menschen erstellte Layouts beziehen und aus diesen lernen. Mittels künstlicher Intelligenz generieren diese Systeme konkrete Vorschläge, welche Farben für den Hintergrund, welche für den Vordergrund und welche für die Akzente bestimmt sind. Auch Gradienten wie im Bild oben zu sehen, können auf diese Weise so erstellt werden. So kannst dass Du direkt einen Eindruck davon erhalten, ob es Dir gefällt oder nicht.
Als zweites Beispiel sei auf die Erstellung von Bildern und sogar Videos anhand Textvorgaben verwiesen. Sowohl der Meta Konzern als auch Google investieren intensiv in Systeme in diesem Bereich. Gerade im Bildbereich sind die Fortschritte beachtlich – wie hier bei Imagen von Google Research.
Dass diese Ergebnisse in Zukunft eine Qualität erreichen, um in hochwertigen Designs eingesetzt zu werden ist eine Frage der Zeit. Im Bereich Medienerstellung für Social Media ist ein weit schnellerer Einsatz zu erwarten.
4. Page Transitions
Auf die herausragende Bedeutung von Animationen habe ich bereits hingewiesen. Ein besonderer Fall, der insbesondere Webentwicklung und Design eng miteinander verbindet, sind Page Transitions. Worum es geht sind die Animation von Übergängen bei der Nutzung interner Links. Wie z.B. Navigationen.
Bei Traditionellen Websites kommt es zu einem Neuladen der einzelnen Webseiten. Das führt zu unerwünschten Unterbrechungen der visuellen Kontinuität. Die besten Websites nutzen deshalb immer häufiger AJAX und PJAX Technologien, um eine flüssige Seitenbenutzung zu gewährleisten und das Markenerlebnis durchgängig zu gewährleisten.
Das hört sich kompliziert an und ist es technologisch auch. Um zu verstehen, was ich meine, lege ich Dir unseren Edeldark Showcase ans Herz. Dort kannst Du Dir die Effekte live ansehen. Wenn Du die Navigation oder die internen Links auf Edeldark benutzt, kommt es zu keinerlei Unterbrechung des Nutzererlebnisses.
Page Transitions für Award-Websites
Hinsichtlich der Page Transitions unterscheiden sich die Meisterwerke der international prämierten Webentwickler und Designer von der durchschnittlichen Business Website im deutschsprachigen Web. Eigentlich gibt es kaum noch ausgezeichnete und preisgekrönte Webdesigns, die keine flüssigen Seitenübergänge (Page Transitions) implementieren. Erwähnt seien hier beispielhaft die Arbeiten von Aristide Benoist oder Homunculus aus Japan.
Unser Fazit: Für hochwertige „high-end“ Websites, sind Page Transitions ein großartiger Trend, mit dem Du Dich von Deinen Konkurrenten absetzen kannst, da echtes App Feeling von nativen Apps aufkommen kann. Sie sind eine ausgezeichnete Möglichkeit um Besuchern anzuzeigen, dass das eigene Unternehmen die technologische Entwicklung und Digitalisierung erfolgreich meistert.
Technologien: Single Page Application Frameworks, PJAX oder AJAX Frameworks wie Highway.js oder Barba.js
5. Intelligente und interaktive Web-Applikationen
Bei diesem Webdesign Trend geht es um mehr als um die bloße Anmutung. Es geht um intelligente Interaktionsmöglichkeiten mit den Besuchern.
Immer mehr Bereiche unseres täglichen Lebens verschieben sich ins Web. Und das ist nicht erst seit Corona so. Daher kommt den Websites zunehmend die Aufgabe zu, diese Bereiche sinnvoll zu organisieren. Kommunikation kann durch Web Apps in intelligenten Interaktionsprozesse strukturiert werden.
Gerade im Business Bereich erkennen die Unternehmen zunehmend, dass Websites weit mehr Design Möglichkeiten bieten als die traditionellen Gestaltungsregeln oder Werbemittel. In diesem Zusammenhang wird auch die künstliche Intelligenz eine immer bedeutendere Rolle spielen. Zunehmend werden intelligente interaktive Apps (Anwendungen) in die Websites integriert.
Planungstool als Web-App
Ein kleines Beispiel für eine solche React-App ist unser interaktives Website Planungs-Tool zur Preisfindung. Der intelligente Fragebogen nutzt eine rekursive Steuerung. Hierdurch werden dem Nutzer sukzessive nur die Fragen gestellt, die auf sein Projekt zutreffen. Ich wünschte mir eine solche Benutzerorientierung auch bei den Papierformularen des Finanzamtes. Aber ich schweife ab. Oder?
Weitere Beispiele sind interaktive Quiz (das ist wohl der korrekte Plural), Umfragen oder Selbsttests. Häufig dienen Sie zur Strukturierung der Kommunikation oder dem Erkennen von Trends in der Zielgruppe. Ein weiterer Vorteil liegt in der Suchmaschinenoptimierung. Derartige Tools erhöhen die Time on Page zum Teil um einen Faktor von 20.
Technologien: Angular, React, Vue, Svelte
6. 3D Design
Reale und virtuelle Welten nähern sich immer mehr einander an und ergänzen sich auf eine harmonische, lustige oder auch mal surreale oder kritische Art und Weise.
3D spielt dabei eine herausragende Rolle. So wundert es nicht, dass sich der 3D Design Trend auch im Jahr 2023 weiter fortsetzen wird. Unterstützt durch die ständige Weiterentwicklung von 3D Modellierungstools wie Blender, Maya oder Cinema 4D sowie modernen Webtechnologie wie WebGL.
Die Fortschritte in der 3D-Technologie ermöglichen zunehmend die Erstellung komplexer und großflächiger 3D Designs. Ideal z.B. für das leichtere und anschaulichere Lernen von Medizin und Maschinenbau. Aber auch im Kleinen, wie der Erstellung von dreidimensionalen Avataren für Web-Apps wie Instagram hat sich dieser Trend manifestiert. Google setzt hier u.a. auf paper art 3d.
Bezüglich hochwertiger und besonderer Websites ist die 3D Trendendwicklung vor allem in zwei Richtungen zu erwarten.
3D Trend Nr. 1
Erstens ermöglichen die verbesserten Technologien in der Medienerstellung die Erstellung ungewöhnlicher und aufsehenerregender Formen und Strukturen. Die sich zunehmend qualitativ natürlichen Strukturen annähern und diese innovativ in vom Menschen erdachte Welten übersetzen.
3D Trend Nr. 2
Zweitens lassen sich durch die verbesserten Browsertechnologien auch 3D Welten erschaffen, die den Benutzern Informationen in dreidimensionalen Welten erlebbar machen. Technologien wie WebGL in Verbindung mit modernen Frontend-Libraries dominieren zunehmend die Awards im Webdesign. Es wundert daher nicht, dass sie besonders oft bei den besten Websites zu finden sind.
Und das aus gutem Grund. Durch die Einführung von 3D-Objekten und Pseudo-3D-Objekten in das Webdesign erhält die Interaktion mit Deiner Marke ein hohes Maß an abstraktem Realismus und eine ganz eigene Schönheit.
7. Gestalten mit Schrift – Interaktive, große Schriften
Zunehmend haben viele preisgekrönte Webdesigner den Wert von großen Schriften bei der Komposition von Websites erkannt. Beliebt sind sie besonders für Überschriften und Zwischenüberschriften, Menu-Punkten und textlichen Highlights. Ganz egal ob es sich hierbei um ein Zitat oder den Elevator Pitch handelt.
Designs, die vorher stark auf die Nutzung von Multimediaelementen setzten, verzichten mehr und mehr auf den Einsatz von Videos und Bildern. An deren Stelle treten zunehmend interaktive Textelemente oder gar komplett textbasierte Layouts.
Typografie als gestalterische Lösung
Dabei geht es nicht darum Textwüsten zu schaffen, sondern Schrift als zentrales, gestalterisches Mittel einzusetzen. So können einzelne Textpassagen oder Wörter gezielt im Webdesign hervorgehoben werden, um die Aufmerksamkeit der Besucher zu wecken und zu binden.
Eine besondere Schriftart kann diesen Effekt noch unterstützen. Doch warum ist das so? Deine Besucher bleiben länger auf der Seite, die sie als hochwertiger betrachten und auf der sie sich unter UI-Gesichtspunkten besser zurechtfinden. Wie hier z.B. in animierter Form bei AEbele Interiors
Dieser Webdesign Trend geht einher mit dem Wunsch nach einer minimalistischen Ästhetik (s. Minimalismus). Er findet sich nicht nur bei hochwertigen Magazinen wieder. Im Gegenteil, es ist ein wunderbarer Ansatz, um sich bereits bei der Websitekonzeption auf die wesentlichen Aussagen zu fokussieren.
Ein Trend für alle?
Der Trend mit Schrift zu gestalten ist allerdings nicht für jede Zielgruppe gleichermaßen geeignet. Er funktioniert besonders gut für Projekte, bei denen der Zielgruppe im Moment des Seitenaufrufs ein gewisses Maß an Rationalität unterstellt werden kann – zum Beispiel bei B2B Websites. Aussagekräftige Worte und interessante Textarrangements können dann mindestens ebenso die Aufmerksamkeit des Besuchers ziehen wie Bilder. Die Kombination mit der Corporate Farbe kann hierbei Akzente setzen wie z.B. bei the human factor.
Im klaren Fokus dieser Layouts steht also die Aussage. Damit sie funktionieren setzen sie sehr hohe Anforderungen an starke Werbetexte und informative Inhalte.
Gestalten mit Schrift und neuen Technologien
Eine weitere Ursache für diesen Design Trend liegt wohl auch im derzeitigen Stand hinsichtlich des Server Side Renderings der wichtigsten Frontend-Frameworks für Websites. Beispielsweise Next.js. Das Frontend – also der für Deine Website-Besucher sichtbare Teil der Website – basiert hierbei auf dem Industriestandard React.js.
Doch trotz Industriestandart und aller großartigen Entwicklungen der letzten Jahre, tuen sich diese Frameworks mit Bildern aktuell noch schwer. Ganz anders sieht es da mit textbasierten Komponenten aus. Hier ist Next.js herausragen und liefert fantastische Vorteile gegenüber normalen Websites in der Entwicklung und Suchmaschinenoptimierung.
Zu guter Letzt ist das Schöne an diesem Trend, dass er auch mit anderen Designansätzen kombiniert werden kann. Zwar kommt er im Rahmen von minimalistischen Designs besonders gut zur Geltung. Eingesetzt für einzelne Wörter oder als animierte Typografie, kann er aber auch sehr gut maximalistischen Designs komplettieren.
8. Scroll Animationen wie Parallax Scrolling
Seit 2021 steigt die Beliebtheit des Webdesign Trends Scroll Animationen stetig und wird 2023 einen neuen Höhepunkt erreichen. Neben dezenten Schriftanimationen stehen dabei im Jahr 2023 vor allem sogenannte Parallax Scrolling Effekte im Mittelpunkt, die den Trend hin zu mehr Tiefe und Dreidimensionalität unterstreichen.
Doch worum geht es hier? Beim Parallax Scrolling spielen Webdesigner mit unterschiedlichen Geschwindigkeiten einzelner Elemente beim Scrollen. So bewegen sich Texte z.B. schneller als Bilder oder ein Bild schneller als ein anderes. Auch kann die Richtung, in die sich die Elemente bewegen, unterschiedlich sein.
Hier ein kleines Beispiel für Scroll Animation 10 Prince Arthur
Verbunden mit dem guten alten Z-Index entstehen so CSS und JavaScript Animationen, die beim Scrollen den Eindruck von natürlicheren und dreidimensionalen digitalen Welten erzeugen. Und dass, obwohl die einzelnen Elemente wie Fotografien oft ganz normal zweidimensional sind.
Scroll Animationen und Scrollytelling
Besonders gut lassen sich mit Scroll Animationen wie Parallax Scrolling und Pin Scrolling Markenerlebnisse vermitteln und Geschichten erzählen. Man spricht in dem Zusammenhang daher auch gerne von Scrollytelling. Dem Erzählen von Geschichten, die durch Scroll Animationen erst Ihre volle Wirkung entfalten. Produkte oder Leistungen die hierdurch in Scene gesetzt werden – wie hier bei Light Art Studios.
Du hast eine Landingpage mit wenigen, aber dafür umso wichtigeren Elemente? Dann lohnt es sich über den Einsatz von Scroll Animationen nachzudenken um Deine Aussagen und Informationen auch visuell und erlebbar aufzuwerten.
Zugute kommt diesen Trend, dass die wichtigsten Javascript Animations Bibliotheken ihn inzwischen aufgreifen und sich neue Lösungswege bieten. Auch gibt es heute bessere Antworten bezüglich der Suchmaschinenoptimierung. Die Skepsis der letzten Jahre aufgrund SEO und Kosten kann somit gemindert werden.
Ganz einfach ist das ganze aus technologischer Sicht allerdings nicht. Solltest Du Deinen Benutzern also ein besonderes Ergebnis aus dieser Richtung gönnen, empfiehlt es sich, dieses im Budget für Deine Website einzuplanen.
9. Verschmelzung von digitalen und Natürlichen Elementen
Die meisten von uns leben spätestens seit Corona in einer digitalen und einer natürlichen Umgebung. Dieser Tatsache wird verstärkt in hochwertigen und modernen Designs aufgegriffen. Nehmen wir als Beispiel die Previews, von Windows 11. Das Hintergrundkonzept wurde von einem Team internationaler Spitzendesigner erarbeitet und nennt sich „Blossom“, was übersetzt so viel wie Blüte heißt.
Bei diesem Trend kommt der Verschmelzung von Mathematik und Natur eine besondere Rolle zu. Beispielsweise finden sich logarithmische Spiralen in Sonnenblumen, der Formgebung von Nautilus-Schalen oder als Wetterphänomene in Tiefdruck-Verwirbelungen.
Konzepte wie der goldene Schnitt nutzen die Konsistenz von Natur und Mathematik in Design und Architektur seit langem. Wirklich neu sind die technischen Mittel der Realisierung in Form von komplexen 3D Modellierungen auf mathematischer Basis. Die interessanten Formen finden zunehmend Einsatz im hochwertigen Webdesign.
Leider haben wir die Rechte von Microsoft für Blossom nicht bekommen, daher hier nun meine eigene Interpretation des Trends als Visualisierung. Die Kombination ermöglicht mit der passenden Software auf kreativer, natürlicher Weise ausdrucksstarke, moderne Designs zu schaffen.
10. Handgezeichnete Illustrationen
Im letzten Jahrzehnt dominierte hinsichtlich der Illustrationen vor allem das Flat Design. Das hatte m.E. vor allem auch den Grund, dass sich diese Form der Illustration vergleichsweise kostengünstig mit Programmen wie Adobe Illustrator oder Affinity Designer erstellen lassen.
Aber Illustrationen haben natürlich noch einen ganz anderen Vorteil. Sie setzen auf die Erkenntnis, dass für moderne Nutzer visuelle Darstellungen anziehender und sprechender sind, als reine Textinhalte.
Da sich heute mit solchen Flat Illustrationen eigentlich niemand mehr absetzen kann, geht der Trend hin zu eher handgezeichneten Illustrationen. Häufig werden diese Illustrationen in schwarz-weiß gehalten und sind im Design eher minimalistisch.
Durch ihren individuellen Touch vermitteln sie das Gefühl von Einzigartigkeit, Dynamik und einer organischen Anmutung. Im high-end Bereich von Websites werden diese Effekte gar durch Animationen verstärkt.
So entstehen teils minimalistische Trickfilme wie hier bei Hello Monday. Das ist natürlich aufwendig und lässt sich nicht in jedem Webprojekt realisieren.
Verständnis und Identifikation
Dennoch führen handgezeichnete Illustrationen die Betrachter und Benutzer näher an die Realität oder zumindest eine vorstellbare Realität. Hierdurch kann die emotionale Distanz zwischen Nutzer und Unternehmen extrem verkürzt werden. Unternehmens und Markenbotschaften lassen sich einfacher kommunizieren, Vertrauen aufbauen und Bindung stärken.
Auch im Sinne der Wiedererkennung und Identifikationen können handgezeichnete Illustrationen starke Mehrwerte bieten.
Insbesondere im angloamerikanischen und asiatischen Raum gibt es hervorragende Beispiele, die auf diesen Stil setzen. Im Deutschland und der Region DACH ist er insbesondere im Business Bereich noch nicht wirklich angekommen.
Handgezeichnet mit den passenden Technologien
Hinsichtlich der Technologien und Erstellung gibt es einige Entwicklungen, die die Kosten für derartige Illustrationen zukünftig senken werden. Denn handgezeichnete Illustrationen bedeuten heute nicht unbedingt, den Bleistift zu zücken. Vielmehr gibt es immer bessere Möglichkeiten im Bereich digital Drawing.
Zu nennen seinen Open Source Zeichenprogramme wie Krita oder auch Oldies wie Photoshop. Die Pixel Engines werden immer besser und die Mehrfachnutzung von Digital Drawings auch im Bereich Social Media machen diesen Ansatz betriebswirtschaftlich zunehmend interessanter.
11. Dark Mode (Verdunkelungs-Modus)
Die großen Player im Internet machen es schon seit längerem vor. Sie bieten den Benutzern die Wahl an, ob sie die Internetpräsenz in einem hellen Mode also mit einem hellen Hintergrund und dunklen Schriften präsentieren oder aber invertiert in einem dunklen Modus.
Moderne Frontendframeworks wie Chakra UI bieten die technologischen Voraussetzungen. Nicht selten werden Design Systeme im hochwertigen Webbereich quasi doppelt in einer Dark Mode und einer Light Mode Variante entwickelt und vorgehalten.
Der letzte technologische Schrei ist es zusätzlich zur manuellen Auswahl, die jeweils regionale Tageszeit beim Benutzer zu berücksichtigen und in den Abendstunden die gesamte Website automatisch im Dark Mode zu präsentieren.
Vorteile vom Dark Mode
Auch wenn es Menschen gibt, die den dunklen Themes nichts abgewinnen können, haben diese Vorteile. Sie führen zu einer geringeren Belastung der Augen, da sich die Helligkeit des Bildschirmes eher an die aktuellen Lichtverhältnisse anpasst.
Und gerade in Zeiten von mobile-first, Nachhaltigkeit und Klimaschutz. Stromverbrauch und Akku-Leistung von Mobilgeräten wird gespart, wenn dunkle Pixel verwendet werden.
Dem Benutzer die Wahl zu lassen ermöglicht Interaktivität mit der Website und ist in jedem Fall eine benutzerfreundliche Erweiterung der eigenen Marken-Darstellung und Individualisierung.
Je nach Kontext ist das Konzept relativ einfach umzusetzen und nicht allzu kostenintensiv. Daher gehen wir davon aus, dass dieser Trend sowohl im App-Umfeld als auch auf Websites weitere Verbreitung finden wird.
Ein Vorreiter für dieses Konzept ist das wundervolle Magazin minimalissimo. Auf dessen Seiten wurde es bereits vor ein paar Jahren umgesetzt und erfreut sich seither großer Beliebtheit.
Weitere Infos, Tipps und Beispiele zu diesem Webdesign Trend findest Du in unserem Artikel „Dark Mode und Schwarz im Website Design„.
Technologien: JavaScript und CSS
12. Glasmorphismus
Die Grundidee vom Glasmorphismus ist eigentlich die gleiche wie bei 3D, Neumorphismus oder auch Googles Material Design. Nur eben auf eine andere Art und Weise. Es geht darum eine gewisse Dimensionalität ins Web zu bringen, um die digitale Welt ein Hauch greifbarer, realer zu machen. Und schließlich auch, um sich so von der Masse der Flat Design Websites abzuheben.
Das Bestreben durch den gezielten Einsatz von Medien und Webtechnologien Dreidimensionalität zu schaffen ist daher nicht neu. Auch der Glaseffekt ist nicht neu. Wie beim Skeumorphismus war Apple hier Vorreiter und hatte ihn bereits in einer frühen Variante für seine ersten Mac OS X Version verwendet.
Nur hieß das damals noch nicht so. Begriff Glasmorphismus stammt von Michael Malewitz und wurde erstmals 2020 benutzt.
Neu am Glasmorphismus ist
…die zunehmende Bedeutung und Verwendung des Begriffes Glasmorphismus.
Noch im letzten Jahr bemerkten wir im Webdesign einen ganz ähnlichen Trend als Frozen Glas Effekt. Insgesamt war der Begriff aber weniger Präzise. Die Effekte beschränken sich keineswegs auf die Anmutung von gefrorenem Glas. Gleichermaßen kommen im Webdesign verstärkt auch abgetönte Scheiben oder andere Glaseffekte der Fragmentierung zum Einsatz.
Während Apple damals noch auf Transparenz gesetzt hat, basiert der Glasmorphismus heute in seiner einfachsten und zugleich häufigsten Fasson auf einen simplen Weichzeichnungseffekt.
Das liegt im Webdesign wohl auch daran, dass die CSS-Filterfunktionen mittlerweile von allen gängigen Browsern unterstützt werden. Die Effekte können somit direkt in die Website integriert werden. Und das ohne gesondert aufwändige halbtransparente Bilder (PNGs) zu laden.
Glasmorphismus und Accessibility
Hinsichtlich Usability und Accessibility erscheint es insbesondere für Menschen mit Sehschwäche fraglich die Abtrennung von Elementen nur auf solche Glas-Effekte zu stützen. Daher werden diese häufig durch mehr oder weniger leichte Ränder oder einen leichten Schatten unterstützt.
Wie stark diese Ränder eingesetzt werden, ist eine Grundsatzentscheidung. Aus rein ästhetischen Gründen sollten diese Ränder und Schatten nur sehr minimal verwendet werden. Aus Sicht der Benutzerfreundlichkeit und Accessibility wäre allerdings ein verstärkter Einsatz geboten. In diesem Spannungsverhältnis liegen schlussendlich auch die Hauptkritikpunkte an diesem Trend begründet. Oder auch: die Herausforderung es bestmöglich umzusetzen.
13. Hamburger Menu für Desktops
Das Hamburger Menu hat sich auf mobilen Endgeräten bereits seit Aufkommen des responsiven Webdesigns durchgesetzt und ist quasi zum Industriestandard avanciert. Doch für den Einsatz auf Desktops gibt es eine anhaltende Diskussion darüber, ob es hierfür auch das richtig ist.
Diese Debatte hat sich eigentlich auch fortgesetzt, seit dem wir im Webdesign verstärkt über Aspekte des UI Designs nachdenken.
Im Wesentlichen wird aus zwei Richtungen argumentiert. Für das Hamburger Menu spricht ein minimalistischer Ansatz und die damit verbundene inhaltliche Fokussierung. Dagegen spricht die sogenannte Usability. Es geht darum, ob interessante Links mit einem oder durch zwei Klicks erreicht werden können.
Hamburger Menu als Kombination
Auch, wenn sich hier die Geister immer noch scheiden, werden wir die Hamburger Menus verstärkt auf Desktops sehen. Sei es nun als „Stand Alone“ Navigationslösung oder in Verbindung mit einer weiteren, sehr aufgeräumten Navigationsleiste zur Abbildung von Sekundärlinks. Hierzu zählen oft Links zum Login, zum Shop oder auch die Sprachwahl wie hier bei TEK TO NIK.
Einen, wie ich finde sehr eleganten Weg der Kombination geht hier Tesla derzeit. Auf das zunächst zusätzlich platzierte Hamburger Icon wird mittlerweile verzichtet. Der Zugang zum interaktiven Toggle Menu wird nun durch das Wort Menu in die normale Seitennavigationsleiste integriert.
Hierdurch bleibt das Design sehr stringent und aufgeräumt, bietet aber die Möglichkeit mit nur einem Klick tiefer in die Markenwelt von Tesla einzusteigen.
Das Hamburger Menu schlicht als Wort Menu darzustellen ist übrigens nur eine der Alternativen zum klassischen Hamburger. Weitere findest Du in unserem Artikel Hamburger Menü – das beliebteste Website Menü im Vergleich
14. Horizontales Scrolling
Als Internetnutzer sind wir es gewohnt, uns vertikal durch Websites zu bewegen. Wir kommen auf eine Webseite. Und wenn wir mehr Inhalte entdecken wollen, bewegen wir uns mit der Computermaus, unserem Trackpad, unserer Tastatur oder via Touch-Display nach unten.
Neuerdings stellen Webdesigner dieses Verhalten in Frage. Horizontales Scrolling kommt zum Einsatz, um Inhalte von Websites zu entdecken.
Zunächst wurde dieses Verhalten auf eher experimentellen Websites implementiert.
Mittlerweile sehen wir es immer häufiger auch auf Agenturseiten und Portfolio-Websites. Ein Vorreiter hierfür ist die Website des Stockholmer Webdesign Studios BJØRK .
Aus Usability-Sicht wirft dieser Trends einige Probleme auf. Diese sind aber nicht unlösbar. An Webdesigner und Webentwickler werden nur höhere Anforderungen gestellt.
Anforderungen an horizontales Scrolling
Horizontale Scroll-Leisten sollten hinsichtlich Funktionalität und Optik ihren vertikalen Gegenspielern in nichts nachstehen. Sie müssen eindeutig erkennbar sein und Design Konsistenz repräsentieren.
Damit horizontales Scrolling für alle Nutzer funktioniert, sollte es nie die einzige Alternative sein, um sich durch Content zu bewegen. Als zusätzliche Möglichkeiten bieten sich zum Beispiel Buttons mit eindeutigen Labeln an.
Konzeptionell muss genau überlegt werden, wo und wofür horizontales Scrolling eingesetzt wird. Für Texte und Inhalte, die die Nutzer unbedingt lesen sollten, bietet es sich weit weniger an als für Bildergalerien und visuelle Inhalte.
15. Überlappende Webdesign-Elemente
Der Trend von modernen Webdesigns geht ganz klar weg vom stringenten Box-Modell und hin zu Webdesign-Elementen, die sich überlappen – gestalterisch und funktional.
So ist es nicht mehr nötig, dass einzelne Website Elemente optisch bestimmten Sektionen zuzuordnen sind und sich untereinander nicht berühren.
Vielmehr treten an der Stelle von Einheitslayouts bei professionellen Websites verschiedene Elemente, Möglichkeiten und Technologien, um ein attraktives und fesselndes Gesamterlebnis zu verwirklichen.
Im Ergebnis werden nicht nur Zusammenhänge durch die Überlappungen verdeutlicht. Es kommt zu einer element- und sektionsübergreifenden User Experience. Dein Markenbild kann so stimmiger und auf eine moderne, dynamische Weise transportiert werden.
Klassische und Teilüberlappungen
Während die klassische Überlappung sich noch eher in einem erkennbaren Rastern bewegt und teilweise schon zu finden ist, werden die sogenannten Teilüberlappungen im Jahr 2023 stärker zum Einsatz kommen.
Hierbei sind bereits heute zwei Formen erkennbar. Nr. 1 ist eine eher abgegrenzte Variante, wie wir sie im Wunderbaren Tycho Konzept von Drew Sulliwan sehen können.
Nr. 2 ist eine dimensional etwas innovativere Variante. Ein innovatives Beispiel hierfür erstelle ich gerade im Rahmen eigenen Webapp und einem Scroll Slider. Der Link folgt, sobald das fertig ist. Versprochen.
Die Idee ist es mit überlappenden Elementen zu spielen. So schweben die Titel nur teilweise über den Hero Images und werden durch Bold Fonts untermauert. Durch eine abgestimmte Animation wird dem Layout vor allem auf großen Monitoren so eine einzigartige Dynamik kreiert. Da das traditionelle Vollbild verkleinert wird, werden hierdurch auch die Megatrends Gestaltung mit Schrift und Minimalismus integriert.
16. Asymmetrische Designs
Zugegeben es gibt schon länger Websites, die asymmetrische Designelemente aufgreifen. Doch passend zum den Design Trend der überlappenden Webdesign Elemente erhält das asymmetrische Webdesign einen richtigen Aufschwung.
Doch warum ist das so? Beide Trends lösen das starre Rasterlayout auf und zielen auf individuelle, starke Webdesigns.
Traditionelle rasterbasierte Designs lassen sich zwar recht günstig auch in responsive Designs verwandeln, letztlich mangelt es ihnen aber in gehörigem Maße an Flexibilität.
Asymmetrische Webdesigns als Lösung
In Summe führt dieses dazu, dass starre Raster gerade für hochwertigen Webdesigns und im Award Bereich an Bedeutung verlieren. Der Vorwurf ist einfach und berechtigt. Zum Teil gleichen sich die Websites in Bezug auf Design zu stark. Mit anderen Worten, jede Website sieht aus wie die andere.
Wenn Du Dich also absetzen willst, solltest Du dem Trend asymmetrischer Designs Deine Aufmerksamkeit widmen. Asymmetrische Webdesigns eignen sich hervorragend dazu faszinierende, spannende und individuelle Websites zu erstellen.
Wenn asymmetrische Designs mit viel Interaktivität verbunden werden, steht einem großartigen Website Projekt eigentlich nichts mehr im Weg. Du erhältst die Gelegenheit Neugierde zu wecken und Deine Marke, Deine Botschaft innovativ zu präsentieren. Letztlich wird der (erste) Eindruck vermittelt, dass trotz Ausgewogenheit alles möglich erscheint.
Aus Sicht des Marketings ist das natürlich mehr als interessant.
Hinsichtlich der Erstellung bleibt festzuhalten, dass diese Seiten ein höheres Maß an Technologie und Aufwand verursachen. Mit Standardwebdesigns durch Baukästen oder Themes ist das nicht zu erreichen. Gleiches gilt für Projekte, die mit engem Budget realisiert werden müssen.
17. Minimalismus und Schlichtheit
Für die einen leben wir in einer viel zu schnelllebigen, ruhelosen Zeit. Für die anderen seit Corona in einer fast surrealen Welt und die Dritten sehen sich den wachsenden Herausforderungen für 2023 entgegen.
Doch egal, was auch immer auf Deine Zielgruppe zustimmt. Als Unternehmer ist es 2023 notwendiger denn je Hindernisse im Bereich der Kundengewinnung und -bindung abzubauen, wenn Du trotz der ökonomischen Großwetterlage Wachstum erzielen willst.
Da unsere Welt geradezu vor Aufregung kreischt, wird es im Jahr 2023 eine praktikable und erfolgreiche Strategie sein, Erlebnisse zu kreieren, die eine gewisse Leichtigkeit und Ruhe ausstrahlen. Erlebnisse, die gut konsumierbar sind.
Minimalismus Ziele
Die Idee ist hierbei, weniger und klar verständliche Botschaften zu präsentieren, die den Nutzer dazu einladen, tiefer einzusteigen.
Diese Botschaften ersetzen komplexe Konversationen und Texte, die den Benutzer mit Informationen überladen. Das Stichwort ist hier Reizüberflutung vermeiden und dem User eine wohlige Ruhepause zu gönnen. Eine Oase für Kunden und Interessenten zu sein und so Kunden zu gewinnen und zu binden.
Die Umsetzung erfolgt im Jahr 2023 durch sanfte Bewegungen und viel Raum für die Inhalte. Weniger Inhalten wird so im Design mehr Bedeutung beigemessen. Typographische und räumliche Verdichtungen werden aufgelöst.
Im Bereich der direkten Konversation werden vor allem auch Formulare vereinfacht. Absprünge werden vermieden, in dem man den Benutzer nicht durch diverse und verwirrende Fragen ablenkt, verwirrt oder gar verliert.
Im Rahmen einer gezielten Kundenführung, werden die Fragen eher über mehrere interaktionsfähige Pages oder Slides verteilt. Vor allem auch die Bedienbarkeit auf mobilen Geräten rückt weiter in den Fokus.
Fazit
Die Webdesign-Trends für das Jahr 2023 sind divers, inspirierend und beeindruckend! Zunehmend verschmelzen Design, Technologie und Graphikdesign zu einer einer Einheit und erhöhen die Vielfalt der Möglichkeiten für beeindruckende Websites. Für konkrete Beispiele und mehr Inspiration empfehle ich Dir unseren aktuellen Beitrag mit den Links zu den schönsten Websites, die weltweit bis heute realisiert wurden.
Wir bei exovia Webdesign Hamburg sind ein kleines aber feines Team aus erfahrenen Webdesignerinnen und Webdesignern. Wir haben Website Kunden in ganz Deutschland und über die Grenzen hinaus. Unsere Aufgabe ist es, für dich da zu sein, wenn Du eine professionelle Website für Dich oder Dein Unternehmen benötigst. Wir beraten Dich gerne, kostenlos und unverbindlich und wir freuen uns auf Dich. Also ruf einfach an oder schreib uns ein paar Zeilen.