| | Webdesign

Die 17 Top Webdesign Trends für 2021/2022

Die 15 Top Webdesign Trends für 2021 1

Webdesign Trends ändern sich sehr schnell. Das liegt an den Erwartungen der Nutzer und technologischen Neuerungen. Entsprechend können Unternehmen nur selten jeden dieser Trends aufgreifen.

Auch nicht jeder dieser Trends ist gleichermaßen für jedes Business geeignet oder relevant. Dennoch. Wer im Web Erfolg haben möchte, sollte nicht mit einem angestaubten Webdesign präsent sein.

Kunden besuchen täglich diverse Websites. Deshalb ist es wichtig, mit seiner Webpräsenz positive Aufmerksamkeit auf sich zu ziehen.

Das Ziel: Die Besucher sollen auf der Website bleiben und gerne wiederkommen. Das erreicht man durch eine ansprechend gestaltete und möglichst intuitive Weblösung.

Für Unternehmen gibt es daher zwei Möglichkeiten mit Webdesign die eigenen Ziele erfolgreich im Web zu realisieren:

1. Auf Nummer sicher gehen:

Im Bereich der Webdesign Gestaltung gibt es einige Stil-Richtungen, die sich seit Jahren recht konstant halten. Hierzu gehört zum Beispiel Minimal Design mit der Fokussierung auf das Wesentliche.

2. Trends früh erkennen und für sich nutzen:

Das ist besonders für Unternehmen, die mit eigenen Produkten und Dienstleistungen eigene Trends setzen wichtig. Wenn Du also eine innovative, freiheitsliebende oder entdeckerische Marke hast, sollte Dein Webdesign das widerspiegeln. Gerade dann ist es wichtig die aktuellen Webtrends zu kennen und frühzeitig einzusetzen.

Und schon stellt sich die Frage: Welche spannenden Trends gibt es und vor allem welchen davon sollte man folgen?

Schauen wir uns also einige der führenden Design-Trends, Design-Strömungen und Tendenzen für  die Jahre 2021 / 2022 etwas genauer an. Dieser Artikel stammt im Original aus dem Jahr 2020 und wird seit dem regelmäßig aktualisiert.

1. Farbverläufe und Gradienten

Farbverläufe lösen die soliden Farben aus dem Flat Design ab. Im Design aber auch in der Malerei kann jede einzelne Farbe durch hunderte von Farbtönen und Möglichkeiten abgebildet werden. Im Jahr 2022 werden Webdesigner weiter verstärkt auf Farbverläufe setzen und sich das Spiel mit Farben zu Nutze machen.

Webdesign-Trend - Gradienten Liquid Fluoreszierend

Da liquide Formen ebenfalls im Trend liegen, ergeben sich interessante Kombinationen, die einen surrealen Eindruck von räumlicher Tiefe vermitteln.

In den letzten 2 bis 3 Jahren wurden Farbverläufe immer beliebter und spätestens seit 2019 haben sie den Trend-Status erreicht. Doch warum ist das so?

Nun, es gibt viele gute Gründe Farbgradienten in der Kunst und im Design einzusetzen:

  • Im Hintergrund erzeugen Gradienten visuelles Interesse.
  • Bei richtigem Einsatz lenken sie den Fokus des Betrachters.
  • Das Ausblenden oder Verblassen von Farben wirkt natürlich.
  • Über Bildern ermöglichen sie das Farbschema bzw. die Farbpalette des Unternehmens zu manifestieren.

Oder allgemein ausgedrückt: Farbverläufe bieten jede Menge Raum für Spannung, Kreativität und Individualität in Deinem Design. Durch geschickten Einsatz ermöglichen Gradienten gleichermaßen komplexe, aber auch minimalistische Webdesigns zu realisieren.

Und letztlich vermitteln Farbverläufe ein Gefühl von Dynamik. Sie teilen somit einen guten Teil der Vorteile des Trends Animation, sind aber deutlich einfacher zu realisieren.

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? 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 für 2021 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 im Vollbild Modus als Website-Background. Aber dazu kommen wir etwas später.

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 2022 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. Einzigartigkeit durch Fehler und Mängel

Bitte was? Ja, Du hast richtig gelesen. Auch wenn dieser Trend sicher nicht auf jede Branche und jedes Geschäftsmodell übertragbar ist, so verbirgt sich eine interessante Idee dahinter.

Nicht perfekte, mit der Hand gezeichnete Design Elemente erzeugen positive Emotionen. Letztlich können solche Elemente Deine Website authentisch machen.

Webdesign Trends für 2021 Beispiel Einzigartigkeit durch Fehler

Bereits 2020 lässt sich der Trend erkennen, dass Website User im internationalen Kontext nicht perfekte, exotische oder unprofessionell handgezeichnete Visualisierungen akzeptieren und mögen.

Letztlich gibt dieser Trend die Möglichkeit eine sehr individuelle Markenidentität zu schaffen. Gewissermaßen schwimmt man gegen den Strom von pixelperfekten Designs.

So schön an diesem Trend finden wir, dass er jeden einlädt, etwas Neues, Einzigartiges und Besonderes zu kreieren, um die Aufmerksamkeit der Benutzer auf sich zu ziehen. Es gibt unendlich viele Möglichkeiten den Benutzern zu zeigen, wie exklusiv die eigene Marke ist.

Allerdings sollte auch beim unvollständigem Design darauf geachtet werden, dass die hinter der Website liegende Technik einwandfrei funktioniert und der Stil in sich stimmig ist. Nicht perfekt heißt hier nicht, dass jeglicher Qualitätsanspruch gestrichen ist.

Ganz im Gegenteil. Deine Website wird nur persönlicher – hat Kurven, Kanten und Ecken oder schlichtweg auch einen tollen, einmaligen Charakter. Genau wie die Person, die hinter der Website steht.

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.

Moodboard bright Edeldark Theme

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.

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.

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?

Website Preise Planungstool

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. Eintauchen in 3D Realitäten

Bislang scheiterte die intensive Verbreitung von 3D-Objekten in Webseiten vor allem an 2 Dingen. Erstens die Leistung der Geräte und Browser, zweitens ist die Verwendung von 3D Objekten recht kostenintensiv und stellt an den Designer recht hohe technologische Voraussetzungen.

3D-Objekte werden aber seit langer Zeit für Spiele sowie in der Unterhaltungstechnologie verwendet. Mit der zunehmenden Verarbeitungsleistung von Geräten tauchen 3D-Objekte jetzt auch auf regulären Websites auf. Und das sowohl auf Desktop- als auch auf Mobilversionen. Dennoch ist die gekonnte Verwendung eher selten und daher auf Webseiten etwas ganz Besonderes.

10 Top Webdesign Trends für 2021 - 3d und gradientent

Durch die Einführung von 3D-Objekten und Pseudo-3D-Objekten in das Webdesign erhält die Interaktion mit Ihrer Marke ein hohes Maß an abstraktem Realismus und eine ganz eigene Schönheit.

Es wundert daher auch nicht, dass es 3D gerade auch bei den weltweit besten Websites 2021 finden.

Technologien: WebGL, 3D Software (Blender), JS

7. Gaußscher Weichzeichner und gefrorenes Glas

Angefangen hat mal wieder alles bei Apple. Eine erste Variante von dieser speziellen Kolorierungstechnik gibt es bereits in den ersten Mac OS X Versionen. Allerdings wurde zunächst noch sehr stark auf Transparenzen gesetzt und weniger auf einen Weichzeichner.

Und wie es so häufig der Fall ist. Schon war ein neuer Webdesign-Stil geboren. Zunächst konnte man beobachten, wie immer mehr Seiten den Effekt vor allem für die Navigationsleiste einsetzten, um Inhalte die hinter der Navigation zu liegen als weichgezeichneten Hintergrund zu verwenden.

User Interface mit Gaußschem Weichzeichner / frostigem Glas Effekt

Mittlerweile werden die Flächen, die hinter frostigem Glas auftauchen immer größer und für ein breites Spektrum an Website Elementen eingesetzt.

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.

Insgesamt zielt diese Design Strömung wie auch der Grain-Effekt darauf ab, die Websites natürlicher und haptisch erlebbarer zu machen. Ein sehr praktischer Nebeneffekt ist, dass sich die Kontraste und die Lesbarkeit bei richtigem Einsatz verbessern lassen. Somit kommt auch die Accessibility nicht zu kurz.

Technologien: CSS3, Bildbearbeitungsprogramme

8. Dystopisches Design

Auch kein ganz neuer Trend, aber spätestens seit Corona wieder schwer im Kommen. Natürlich ist das dystopische Design im Hinblick auf die Anwendungsbereiche begrenzt. Aber man sollte es auch nicht unterschätzten.

Eigentlich bedienen sich Schriftsteller und Philosophen der Dystopie seit der industriellen Revolution. Ursprünglich geht es darum, dass die Dystopie ein Werkzeug ist, um unsere soziale und politische Gegenwart und Zukunft zu durchleuchten.

Das Nischenphänomen bespeist eine Multimilliarden schwere Industrie und ist in Bereichen wie Unterhaltung, Klimaschutz und Umwelt, Spielentwicklung und Massenmedien schon lange vertreten.

Dystopisches Webdesign lose Kabel im Weltraum

Aktuell findet man Dystopien im immer stärker werdenden „Markt“ sogenannter „Verschwörungstheorien“, die sich in Krisen oder Umbruchzeiten großer Beliebtheit erfreuen.

Interessant wird es auch, wenn wir dystopisches Design mit anderen Webdesign-Trends kombinieren. Probieren wir das doch mal. Im 3. Abschnitt habe ich über das Webdesign mit Fehlern geschrieben. Das nächste Beispiel kombiniert den Trend mit einer neon-dystopischen Farbpalette (Stichwort: Cyber Punk) auf fluiden, organischen dreidimensionalen Formen und mit Helvetica als Font.

Cyber Punk Webdesign 3D Gradienten organische Formen

In unserem nächsten Artikel verraten wir Dir in Kürze mehr über die Chancen, Risiken und Nebenwirkungen von dystopischem Design.

9. Neumorphismus (Neumorphism)

In Designerkreisen wird seit einiger Zeit der Begriff Neumorphismus diskutiert. Hierbei handelt es sich um ein Kunstwort, das aus den Begriffen „neu“ und „Skeuphomorphismus“ zusammengesetzt ist.

Und genau das spiegelt sich in der Art des Designs wider. Grundsätzlich geht es um sehr weiche Oberflächen, die in ihrer Anmutung häufig an einen extrudierten Kunststoff erinnern.

Die UI Elemente wirken zum Teil als wären sie mit der Oberfläche verbunden oder mit einer Vakuumpumpe aus der Oberfläche herausgesogen. Manchmal schweben Sie auch über der Oberfläche.

Neumorphismus UI Design Konzept

Prinzipiell ist der Designansatz von schwebenden Elementen mit weichen Schatten gar nicht so neu und findet sich bereits in Googles Material Design. Und das ist aus dem Jahr 2014.

Neu ist die deutlich gestiegene Popularität in Designerkreisen und die damit verbundene Häufigkeit der Design Konzepte bei Dribble und Behance. Grundsätzlich gibt es bezüglich Neumorphismus geteilte Meinungen.

Ein Nachteil des Neumorphismus ist, dass Menschen mit Sehschwäche Schwierigkeiten haben die subtile Abgrenzungen der Elemente zu erkennen. Die Accessability (Barrierefreiheit) ist natürlich ein sehr wichtiger Faktor.

Dennoch sehen wir Neumorphismus immer häufiger im UI-Design. Persönlich mag ich die Anmutung. Die Vorteile liegen zum einen allein darin, dass der Trend auf produktiven Websites bisher noch selten zu finden und eher unverbraucht ist. Insbesondere im deutschen Sprachraum.

Guter Neumorphismus ist minimalistisch, klar und aufgeräumt. Gleichzeitig wird die digitale Welt durch die räumliche Wirkung und Schatten mit unserer plastischen und körperhaften Realität verbunden.

Ich gehe davon aus, dass wir diesen Webdesign Trend 2021 verstärkt in digitalen Produkten und auf modernen Websites sehen werden. Und dass sich dieser Trend weiterentwickelt, mit Lösungen, die auch die Barrierefreiheit mit einschließen.

10. Smooth Scrolling und Scroll Animationen

Ein Webdesign Trend, der sich im Jahr 2021 zunehmend auf preisgekrönten Webdesigns findet sind Animationseffekte beim Scrollen vor allem auf Desktop-Geräten. Die Designer spielen zum Beispiel mit Scroll Geschwindigkeiten im Rahmen sogenannter Parallax Effekte oder integrieren ein horizontales Scrollen. Neben interessanten visuellen Effekten eignen sich Scroll Animationen auch für das sogenannte Scrollytelling. Ziel dieser Animationen ist es die Interaktionen mit der Webseite interessanter zu gestalten. Nicht selten auf eine spielerische Weise. Entsprechend eignen sie sich für sogenanntes Infotainment.

Diese Effekte funktionieren in der Umsetzung so, dass das Standard Browser Scrolling durch eine eigene Animation ersetzt wird. Hierbei können Javascript Bibliotheken helfen, wobei die Effekte aus meiner Erfahrung am flüssigsten und besten mit einer nativen Implementation funktionieren. Um butterweiche Animationen zu gewährleisten greift man auf die Verfahren der Linearen Interpolation zurück, die in den Computerwissenschaften häufig einfach LERP genannt werden. Damit ich jetzt hier nicht zu technisch werde, verweise ich für die Umsetzungsdetails auf die Arbeiten des schedischen Frontend Entwicklers Jesper Landberg.

Am besten Du schaust Dir einfach ein Beispiel an. Ein einfache Implementation für Smooth Scrolling und Parallax Effekte in Verbindung mit Big Fonts findest Du auf unserem Werte Show Case. Wenn ich die Zeit finde, werde ich die Website um weitere Scroll Animationen erweitern. Versprochen!

 

11. The dark mode (Verdunkelungs-Modus)

Die großen Player im Internet machen es häufig 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.

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 es bereits vor ein paar Jahren umgesetzt wurde und sich seither großer Beliebtheit erfreut.

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. Fotografie mit Grafikeinlagen

Wenn Du bereit bist, auch mal ein Risiko in Deinem Design einzugehen, findest Du vielleicht Gefallen an diesem Design Trend. Die Idee ist, dass ein handgezeichnetes Element einem Design, welches Fotografie umfasst eine bestimmte Stimmung verleihen kann. Aber auch im umgekehrten Fall kann ein eher illustriertes Design durch Fotos profitieren.

Du siehst, diese Mischtechniken erlauben Dir jede Menge Kreativität und bieten wirklich diverse Möglichkeiten für sehr individuelle Designs, die aus der „Langeweile“ herausragen. Auch hier sind die Einsatzmöglichkeiten sind vielseitig.

Man kann so im Bereich der Produktwerbung eine gewisse Verspieltheit erzeugen. Umgekehrt können die Techniken auch verwendet werden, um Ernsthaftigkeit oder Tiefe in der Bedeutung zu verleihen.

Webdesign Trend Fotografie mit Grafik - Cyborg low poly

Wie wäre es mit etwas 3D? Durch die graphische Darstellung mit wenigen Polygonen (Low-Poly) in Verbindung mit Fotografie kann zum Beispiel das Thema der Digitalisierung aufgegriffen werden. Insbesondere auch das Zusammenspiel zwischen Mensch und Maschine. Aber das ist nur eine (meine) mögliche Interpretation des Trends.

Interessant ist, dass dieser Trend auch in Branchen Einzug erhält, wo man ihn eigentlich nicht erwartet. Ein Beispiel ist (zum Zeitpunkt der Verfassens) die preisgekrönte Website der internationalen Rechtsanwalts- und Notarskanzlei Therrien Couture Joli-Coeur. Hier werden auf der Startseite die einzelnen Rechtsanwälten und Notaren mit einem graphischen Rot verziert bzw. gebrandet.

Auf jeden Fall ist das zwischen der Tristesse der vielen gleichartigen Anwaltskanzlei Websites eine spannende Webdesign Bereicherung.

Alles in allem ermöglicht Dir dieser Mix auf sehr individuelle Weise Deine Markenpersönlichkeit zu transportieren und gezielt Akzente zu setzen. Er erfordert allerdings jede Menge Mut.

Technologien: CSS 3, SVG, GIMP oder PS

13. Isometrisches Design, Opt Art und Animationen

Seit einiger Zeit sind auch sogenannte isometrische Designs im Trend. 2021 wird dieser Trend noch mit Animationen angereichert und als OPT Art realisiert.

Im Kern des isometrischen Designs geht es um die Überwindung von Grenzen und die Schaffung von Dreidimensionalität im zweidimensionalen Raum. Aus Sicht des Designs verschmelzen bei diesem Trend Flat Design und 3D zu etwas neuem, dem isometrischen Design.

Technisch gesehen wird dieser Effekt geschaffen, in dem genau ein 120° Winkel zwischen X, Y, und Z Achse verwendet wird. Die Perspektivlinien bleiben konstant und laufen nicht aufeinander zu. Einen Fluchtpunkt gibt es nicht. Die normale Art wie wir etwas sehen, wird hierdurch aufgehoben.

So entstehen für die Betrachter überraschende, anregende Designs. Interessant kann isometrisches Design gerade auch dann sein, wenn man einerseits räumliche Tiefe will, aber dennoch minimalistisch bleiben möchte.

Ein sehr neuer Trend findet sich zunehmend in hochwertigen und exklusiven Webdesigns. Hier werden isometrische Designs animiert. Hier ein einfaches Beispiel von uns.

Wie Du siehst, können isometrische Designs auch sehr gut als OP Art, kurz für optical art, realisiert werden. Optische Kunst im weiteren Sinne sind sie allemal. Der bei der OP Art erzielte Eindruck von Bewegung wird hier durch die Animation noch verstärkt.

Live Webseiten finden sich im deutschen Sprachraum bisher nicht. Zumindest habe ich leider keine gefunden. Wenn Du eine schöne Website mit diesem Trend hast und hier genannt und verlinkt werden möchtest, schreib uns gerne an.

Beispiele finden sich international im Codex Atlanticus, für Leonardo Da Vinci Fans mehr als empfehlenswert. Sehr niedlich ist das Konzept auch von Google auf yourplanyourplanet umgesetzt.

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 .

Beispiel horizontales Scrolling einer Portfolio Website

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.

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. Künstlerisch aufbereitete Produktfotografien

Die Ära klassischer und realistischer Produktbilder gehört der Vergangenheit an. Vergessen Sie sie und treten Sie einen neuen UI / UX-Designtrend vor – surreale Objektfotos. Jetzt im Jahr 2020 wird erwartet, dass es sich auf den meisten E-Commerce-Plattformen und Online-Shops verbreitet.

Anhänger dieses Trends beschwören eine nahezu hypnotische Wirkung. Aufmerksamkeit wird durch interessante und unwirkliche Elemente präsentiert.

Es geht darum die Fantasie der Besucher anzuregen. Verbraucher werden geradezu gezwungen lange auf einer Website zu verweilen und sollen letztlich die Conversion-Rate erhöhen.

Eine der bekanntesten und wie ich finde perfektesten Umsetzungen dieses Prinzips in der Praxis findest Du bei Gucci Zumi.

16. Realistische Texturen – Videos mit 3D Transition

Der Einsatz von WebGL und 3D Effekten wird gerade auf prämierten Websites immer häufiger. Hiermit kannst Du echte Videos, Animationen aber auch herkömmliche Bilder mit Techniken aus dem 3D Umfeld kombinieren. Diese Techniken finden gerade bei preisgekrönten Websites häufig Anwendung.

Das Video bietet hinsichtlich Framerate und Auflösung natürlich nicht die Qualität einer echten Website. Es  hat auch keine Interaktionsmöglichkeiten. Daher lade ich Dich herzlich ein Dir die Live-Demo anzusehen und ein wenig damit zu spielen. Du findest sie hier:  3D Video-Slider in WordPress. Das ganze ist mit Touch Events für mobile Geräte ausgestattet. Auch mit der Maus kannst Du einfach klicken und über die Videos ziehen (Drag Slide).

Die Integration in ein Content Management System hat den Zweck, dass komplexe Seiten auch von „Nicht-Programmierern“ gepflegt werden können. Das ganze geht dann kinderleicht. Und das Beste ist, dass dabei moderne Frontendtechnologien wie Three.js, Pixi.js oder in meinem Beispiel Curtains.js eingesetzt werden.

Die einzigen Nachteile dieser Technologien können in Ladezeiten (Mobile Netzqualität in Deutschland) und mangelnde Grafikkapazitäten älterer Geräte begründet liegen. Beide Probleme werden sich mit der Zeit auswachsen. Daher werden wir solche Effekte in 2021 verstärkt auf hochwertigen Websites beobachten.

17. Bold Fonts

Wir haben dem Thema einen eigenen Artikel gewidmet und besonders geeignete Google Schriftarten für Überschriften zusammengestellt . Und das war bereits 2018. Es ist somit kein wirklich neuer Trend. Aber gerade weil er sich verfestigt, ist er für modernes Webdesign so interessant. Warum funktioniert das? Die meisten User schenken der Website Überschrift sehr viel Aufmerksamkeit. Ein typisches Beispiel hierfür ist Apple.

Der Trend ist eigentlich schon seit 2021 im Kommen. Auffällig ist, dass die Schriften dabei immer größer werden. Ein Beispiel für die riesigen Schriftgrößen in Verbindung mit einem modernen Webdesign findest Du in unserm Landing-Page Showcase Werte von 2021

Technologien: Webfonts, CSS

Fazit

Die Webdesign-Trends für das Jahr 2021 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.