Von Retro-Typografie bis hin zur immer größer werdenden No-Code-Bewegung – es gibt viel, worauf man sich innerhalb des Webdesigns nach der Corona-Zeit freuen kann.

2020 war nicht einfach. Mit Unmengen von Handdesinfektionsmitteln, unangenehmen Zoom-Meetings und der drohenden Angst vor der Ungewissheit fühlen wir uns alle ein wenig unsicher. Trotz der Umstände haben wir alle unser Bestes gegeben, um vorwärts zu kommen. Viele von uns haben sich die Zeit genommen, neue Designfähigkeiten zu erlernen.

Wenn es um Design ging, behielten wir ein Auge auf die nicht enden wollenden Trends im Web. Wir hoffen, dass diese Liste Sie nicht nur inspiriert, sondern auch dazu anregt, das Web auf eine inklusivere und zugänglichere Weise anzugehen.

Die 21 Webdesign-Trends nach der Corona Zeit

Retro-Schriftarten

Retro-Schriften haben die gleiche Ebbe und Flut in ihrer Popularität erlebt und viele Designs mit Vintage-Typografie sind nicht gut gealtert.

Allerdings hat die Throwback-Typografie eine Art Wiederaufleben erlebt. Wir sehen nicht die gleichen müden Schriften. Vielmehr wird durch Stilisierung und ein wenig Kunstfertigkeit neu definiert, was Retro-Schriften sein können. Wir sehen diese Verschmelzung von Alt und Neu auf der Seite für Spotifys Karnevalswerbung. Anstatt altbacken und klischeehaft zu wirken, hauchen sie traditionellen, fetten Schriften mit ein wenig Experimentierfreude neues Leben ein. Dies ist ein gutes Beispiel dafür, wie man traditionelle Schriften nimmt und ihnen einen coolen und modernen Dreh gibt, während die Lesbarkeit erhalten bleibt.

Parallaxe-Scroll-Animationen

Parallaxe-Scroll-Effekte sind seit Jahren ein Trend im Website-Design, und wir hoffen, im Jahr 2021 mehr subtile und kreative Erkundungen dessen zu sehen, was mit Parallaxe erreicht werden kann.

Denken Sie daran, dass zu viel Bewegung in Parallax-Effekten für Menschen mit Gleichgewichtsstörungen schädlich sein kann, da die Illusion von Tiefe und Bewegung Desorientierung und Schwindel hervorrufen kann. Hier sind einige Richtlinien, die immer mehr Designer berücksichtigen, um sicherzustellen, dass sie Parallaxe minimal und ohne Schaden zu verursachen einbauen:

  • Lassen Sie Parallaxen-Effekte nicht von wichtigen Informationen ablenken
  • Beschränken Sie die Anzahl der Parallaxen-Effekte auf ein Minimum
  • Minimieren Sie den Umfang der Parallaxenbewegung innerhalb jeder Instanz
  • Beschränken Sie Parallaxen-Effekte auf einen kleinen Bereich des Bildschirms
  • Fügen Sie eine Option für Benutzer ein, um Parallaxen-Effekte zu deaktivieren

Nächstes Jahr werden wir sehen, wie Parallax Scroll subtil eingesetzt wird, nicht für auffällige Effekte, sondern als Werkzeug, um wichtige Teile des Inhalts zu betonen oder hervorzuheben.

Horizontales Scrollen

Früher als Web-Design-Fauxpas angesehen, erlebt das horizontale Scrollen ein Comeback.

Wir sehen immer mehr Webdesigner, die mit dem horizontalen Scrollen experimentieren. Diejenigen, die es am besten können, brechen das Muster nicht um des Andersseins willen, sondern als praktischen Weg, um sekundäre Informationen nach und nach offenzulegen, wie in einer Bildergalerie.

  • Zwingen Sie Benutzer nicht dazu, durch horizontale Inhalte zu navigieren: Erlauben Sie alternative Wege zur Navigation, wie z. B. Pfeilschaltflächen mit klaren Beschriftungen
  • Verwenden Sie klare visuelle Hinweise, um anzuzeigen, wo der Inhalt horizontal gescrollt wird, und verstecken Sie diese Hinweise nicht hinter Hovern
  • Überlegen Sie, welche Inhalte von einem horizontalen Bildlauf profitieren würden – eine Fotogalerie ist ein guter Kandidat, da ein horizontaler Bildlauf dem Benutzer eine kleine Vorschau zeigt und ihm die Möglichkeit gibt, mehr zu sehen oder auf der Seite weiter nach unten zu gehen
  • Vermeiden Sie horizontales Scrollen für Text, der gelesen werden muss

3D-Visualisierungen überall

Mit dem Aufkommen von Bildschirmen mit höherer Auflösung hat 3D-Design einen langen Weg von den blockigen und abgeschrägten Kanten zurückgelegt. Hochwertige 3D-Grafiken wurden nahtlos in das Webdesign integriert. Anstatt grelle Ablenkungen zu sein, tragen sie zum Gesamterlebnis des Benutzers bei.

3D-Elemente verleihen jeder Webseite ein Gefühl von Einzigartigkeit und Dimensionalität.

Multimedia-Erlebnisse

Seit die meisten Menschen Zugang zu schnelleren Internetgeschwindigkeiten haben, tauchen überall multimediale Web-Erlebnisse auf. Die Kombination von Bild, Text, Video und Audio sorgt für ein reichhaltiges Benutzererlebnis.

Erfolgreiche Designs im Jahr 2021 werden sich bei Multimedia-Erlebnissen zurückhalten:

  • Priorisieren Sie Einfachheit, etwa bei der Kombination von Bewegung und Audio. Zu viel Inhalt kann für Menschen mit kognitiven Störungen ablenkend oder überwältigend sein.
  • Verwenden Sie verschiedene Medienformate mit Bedacht, um die Zugänglichkeit der Inhalte zu maximieren.
  • Fügen Sie Untertitel und Transkripte für alle aufgezeichneten Multimedia-Inhalte hinzu.
  • Fügen Sie Alt-Text für Bilder ein und begleiten Sie komplexe Bilder mit längerem, beschreibendem Text.
  • Stellen Sie sicher, dass der gesamte Text mit HTML erstellt wird und nicht in Bildern gerendert wird.
  • Vermeiden Sie das automatische Abspielen von Videos oder bewegten Inhalten: Stellen Sie stattdessen eine eindeutige „Play“-Schaltfläche bereit, die dem Benutzer die Möglichkeit gibt, den Inhalt abzuspielen und anzuhalten.

Der effektive und barrierefreie Einsatz von Multimedia geht mit der Verantwortung einher, eine Vielzahl von Faktoren zu berücksichtigen. Hier finden Sie weitere Ressourcen zur Barrierefreiheit von Videos.

Augmented Reality (AR)-Erlebnisse

Und bei den Multimedia-Erlebnissen dürfen wir nicht all die erstaunlichen immersiven Erlebnisse mit Augmented Reality (AR) vergessen. AR bedeutet heute mehr als nur die Jagd nach Pokémon auf Ihrem Apple- oder Android-Mobilgerät. Neue Technologien wie die WebXR API und die Software von Wayfair Technologies haben diesen Bereich für fast jeden zugänglich gemacht.

Beispiel: Jeep setzt AR für die Seite „Build & Price a Jeep“ ein. Für diejenigen, die es hassen, einen Fuß in ein Autohaus zu setzen, ist dies eine luftige und druckfreie Erfahrung. Immer mehr Einzelhandels- und E-Commerce-Websites nutzen die Macht von AR, um ihre Produkte zu verkaufen und potenzielle Kunden im Kaufprozess zu unterstützen.

Ein Fokus auf Maserung

Starre Raster und flache Blöcke aus Volltonfarben können einem Webdesign die Persönlichkeit nehmen. Körnige Texturen können ihnen ein natürlicheres Gefühl geben. Lo-Fi-Design-Elemente für ein raueres Benutzererlebnis, das sich natürlicher anfühlt als die glatte Perfektion, die in vielen Webdesigns üblich ist.

Ein Fokus auf gedeckte Farben

Genauso wie Maserungen einem Design ein natürlicheres Gefühl geben können, können es auch gedämpfte Farben.

Zum Beispiel kombiniert man eine neutrale Cremefarbe mit einfachen schwarzen Grafiken für einen ruhigen Effekt.

Auf Vorlieben basierende Designs

Die Webentwicklung hat große Fortschritte bei der Bereitstellung personalisierter Erfahrungen gemacht. Das kann alles sein, von der Umschaltung zwischen Dunkel- und Hellmodus und anderen Möglichkeiten, das Aussehen und die Navigation einer Website zu ändern, bis hin zum Angebot von Inhalten, die auf den eigenen Geschmack zugeschnitten sind.

Neue Designpraktiken und Algorithmen machen das Internet weniger zu einem passiven Nutzererlebnis und mehr zu einem nutzerzentrierten. In Zukunft wird der Fokus noch mehr darauf liegen, die Bedürfnisse, Wünsche und den Geschmack derjenigen zu erfüllen, die durch Websites navigieren.

Gaußscher Weichzeichner

Der Gaußsche Weichzeichner eignet sich sehr gut, um Bilder und Verläufe weich zu zeichnen. Diesen Effekt gibt es schon eine Weile, aber Designer haben ihn an prominenterer Stelle im Webdesign eingesetzt.

Beispiel: Eine angenehme gaußsche Unschärfe der Farbe. Dies verleiht ein atmosphärisches Gefühl und knüpft direkt an das mögliche darauf folgende Foto an.

Wir lieben es zu sehen, wie Dinge, die es schon immer gab, wie z.B. der Gaußsche Weichzeichner, in den Händen von Designern, die sie auf neue und interessante Weise einsetzen, immer beliebter werden.

Scrollytelling

Wir haben einen wachsenden Trend bei Designern beobachtet, die Geschichten durch Web-Erlebnisse erzählen. Hier kommt Scrollytelling ins Spiel – visuelles Storytelling, dass die Geschichte steigert und Sie in die Erzählung einbezieht.

Die besten Anwendungen von Scrollytelling üben sich in Zurückhaltung:

  • Halten Sie die Bewegung in einem kleinen Bereich.
  • Bieten Sie Interaktionen zu den Bedingungen des Benutzers an: Stellen Sie offensichtliche Wiedergabesteuerungen zur Verfügung, um Interaktionen und Bewegungen abzuspielen / anzuhalten / zu stoppen.
  • Stellen Sie sicher, dass alle Scrollytelling-Elemente dazu beitragen, die Geschichte zu unterstreichen, anstatt vom wichtigen Text abzulenken.

Dunkler Modus

Immer mehr Designer setzen auf die Ästhetik des dunklen Modus, wobei Schwarz den perfekten dunklen Hintergrund bietet, um Designelemente auf dem Bildschirm hervorzuheben.

Scheuen Sie sich nicht, im Jahr 2021 bei Ihrer eigenen Designarbeit in die Dunkelheit zu gehen.

Cartoon-Illustrationen

Es ist noch gar nicht so lange her, da bestanden Websites nur aus Text und ein paar Bildern oder Grafiken. Das Webdesign hat sich weiterentwickelt, und die Designer kreieren nun Arbeiten, die mit Menschen auf einer persönlicheren Ebene in Verbindung stehen. Cartoon-Illustrationen haben an Popularität gewonnen, um Websites mit einer gesunden Prise Menschlichkeit zu gestalten.

Es gibt so viele Quellen und Künstler, die fantastische Cartoon-Illustrationen anfertigen. Blush ist eine großartige Plattform, um maßgeschneiderte Charakter-Illustrationen zu finden.

Die Illustrationsplattform von Blush bietet verschiedene anpassbare Charakterillustrationen. Cartoon-Illustrationen bieten so viel in Bezug auf Kreativität und machen eine Marke sympathischer. Wir freuen uns darauf, im kommenden Jahr eine wachsende Anzahl von Charakteren in Web-Designs zu sehen.

Geometrische Raster

Raster sind einfach, aber sehr flexibel in der Art, wie sie in ein Design integriert werden können. Geometrische Raster werden immer beliebter, um ein Layout mit einem sauberen und kühnen Look zu strukturieren. Diese großen, farbigen Quadrate machen Spaß beim Navigieren und sorgen dafür, dass die Aufmerksamkeit erhalten bleibt. Oder die Verwendung von schwarzen Strichen, um verschiedene Inhaltsblöcke zu trennen. Geometrische Raster müssen nicht gleichmäßig angeordnet sein.

Geometrische Raster, die eine solide Struktur und eine unkomplizierte Präsentation bieten, sollten in der Werkzeugkiste eines jeden Webdesigners zu finden sein.

Benutzerdefinierte Cursor

Cursor sind wahrscheinlich einer der am meisten übersehenen Aspekte des Webdesigns, da die meisten von uns sich mit einem einfachen alten Pfeil zufrieden geben. Wenn ein Designer diesen unbedeutenden Teil einer Website in etwas Cooles verwandeln kann, ist das schon eine Leistung. Wir hoffen, dass wir im Jahr 2021 noch mehr originelle Ideen sehen werden, was ein Cursor sein kann.

Scrollende Karten

Wir sind begeistert, dass Scrollkarten zu einem integralen Bestandteil von Designs werden. Egal, ob sie horizontal oder vertikal scrollen, sie bringen Schwung in eine Website und sind eine tolle Möglichkeit, Informationen zu präsentieren.

Karten-Layouts gibt es schon eine ganze Weile, und wir freuen uns, wenn sie in neue Scroll-Richtungen gebracht werden.

Farbloses Design

Sparsames Weiß sorgt für ein sauberes Design, und alle Elemente, die Farbe haben, erhalten noch mehr Aufmerksamkeit.

Selbst so etwas wie ein minimales, schlichtes Design kann mit Mikro-Interaktionen, Animationen und anderen dynamischen Effekten immer noch ein ansprechendes Erlebnis sein.

Audio

Das Anbieten von Audio als integraler Bestandteil eines Designs beseitigt Barrieren für Menschen mit Sehbehinderungen und kommt auch denjenigen zugute, die es vorziehen, einen großen Teil des Textes auf einer Website zu hören,

Die New York Times zum Beispiel leistet fantastische Arbeit bei der Bereitstellung von begleitendem Audio zu einigen ihrer Artikel.

Wir hoffen, dass es in Zukunft mehr Audio-Optionen auf Websites geben wird, die den Menschen die Wahl lassen, wie sie den Inhalt erleben wollen.

Web inspiriert von Print

Mit der digitalen Technologie, die so vieles ersetzt, was einst physische Objekte waren, hat es eine Wiedergeburt alter Medien gegeben. Die Beliebtheit von Vinyl-Alben ist ein Beweis dafür, dass die Menschen etwas erleben wollen, das nicht nur ein Haufen von Nullen und Einsen ist.

Layouts, die ihre Inspiration aus dem Printbereich beziehen, erfüllen den Wunsch der Menschen, sich mit etwas in der realen Welt zu verbinden. Layouts im Stil von Zeitschriften und andere Elemente des traditionellen Grafikdesigns bieten eine Verbindung zum haptischen Erlebnis von Druck auf Papier.

Designsysteme für Konsistenz

Designsysteme sind mächtig. Durch die Verwendung eines CMS zur Erstellung wiederholbarer Layouts und verwandter Sammlungen ist es einfach, Aktualisierungen oder Änderungen vorzunehmen sowie schnell doppelte Websites zu erstellen. Unabhängig davon, ob sie in kleinem oder größerem Maßstab eingesetzt werden, sind sie für jede Organisation bei der Erstellung und Verwaltung ihrer Designs nützlich.

Wir haben auch gesehen, dass es scheinbar wirklich nützliche Apps gibt, die entwickelt wurden, um die Workflows von Designsystemen noch einfacher zu machen. Zeroheight fungiert als zentraler Ort, um Aufgaben zu verwalten und zusammenzuarbeiten. Figma bietet neben Vorlagen auch andere Designsystem-Tools. Und die CMS-Sammlung von Webflow kann ein Designsystem unabhängig von seiner Größe betreiben.

No Code

No Code bedeutet nicht die komplette Abschaffung von Code. Programmierer und Entwickler werden immer wichtig sein. „No Code“ bedeutet, diese Fachgebiete für diejenigen zu öffnen, die sonst davon ausgenommen wären. Es erlaubt jedem, der eine Idee oder eine Vision hat, zu gestalten.

Durch No Code werden Designer zu Front-End-Entwicklern. Schriftsteller können zu Webdesignern werden. Und Kleinunternehmer können in die Welt des E-Commerce einsteigen. Wer auch immer Sie sind, no code befähigt Sie, etwas mehr zu werden. Es beseitigt die Trennlinien zwischen Nicht-Designern, denen, die nur designen, und denen, die Entwickler sind. Es bringt Menschen in Zusammenarbeit zusammen.

Es ist aufregend, die Entwicklung neuer No-Code-Plattformen zu beobachten und zu sehen, wie Designkurse das Thema in ihren Lehrplan aufnehmen. Wir können es kaum erwarten, zu sehen, was mit der No-Code-Bewegung im Jahr 2021 passiert.

Es ist immer wieder spannend zu sehen, wie sich das Webdesign weiter verändert und wie die No-Code-Bewegung weiter an Fahrt gewinnt.