Diese 22 Webdesign-Trends für 2022 werden dabei helfen, zu informieren und zu inspirieren, was Menschen fürs Web bauen. Tauche ein.
Ein allgemeiner Trend, den wir für das kommende Jahr sehen, ist ein stärkeres Gefühl von Verspieltheit im Webdesign.
Designer haben begonnen, Websites wie Kunstwerke zu gestalten, Websites als interaktive Projekte und Sites, die einfach existieren, um zu spielen und Spaß zu machen. Das erinnert an die frühen Tage des Webs, als Designer Wege fanden, neue Techniken zu zeigen oder Websites für sich selbst zu erstellen.
Es scheint, als befänden wir uns ein wenig in einer Wiederbelebung des frühen Webs. Das ergibt Sinn. Auch die Mode hat stark aus den späten 90ern und frühen 2000ern entlehnt. Viele von uns haben Zeit zu Hause damit verbracht, träge im Internet zu surfen und nach etwas Unterhaltsamem oder Aufregendem zu suchen – so wie damals, als das Web erstmals aufkam.
Visuell lassen sich Webtrends von dieser Epoche inspirieren. Designer finden Kreativität abseits der stärker fotozentrierten Layouts, die zum Standard geworden sind. Stattdessen finden diese Entwürfe kreative Wege, Typografie, Raster und Linien sowie einfache Navigation zu nutzen. Der aktualisierte Stil mit vielen gedämpften Farben, raffinierten Texturen und Serifenschriften verhindert, dass Websites zu retro wirken.
Auch das Webdesign bewegt sich in die Zukunft mit aufregenden zeitgenössischen Techniken wie erweiterten Interaktionen und Animationen sowie visuellen Effekten wie Glassmorphism und Körnung. Und Designer nutzen No-Code-Tools, um all das schneller und einfacher als je zuvor umzusetzen.
Webdesign-Trends 2022
Hier sind einige der Webdesign-Trends, von denen wir erwarten, dass sie im kommenden Jahr Einfluss haben werden.
1. Mini-Sites zum Vergnügen
Humor kann viele Formen annehmen, und eine Website zu bauen, die ein Lächeln oder Lachen hervorruft, macht immer Freude. Warum also nicht etwas Spaß in dein Projekt bringen?
In den frühen Tagen von Pixar begann das Studio damit, seinen Animatoren Zeit zu geben, neben den Filmen einen Kurzfilm zu machen. Diese Kurzfilme waren ein kreativer Raum für Lockerheit und Verspieltheit ohne den Druck von Langfilmen. Sie führten auch zu neuen Techniken, die das Feld der Animation vorantrieben. Webentwickler entdecken, dass sie Ähnliches mit Websites tun können.
Ein verspieltes Mini-Site-Projekt gibt Designern Zeit, einfach kreativ zu sein, Techniken zu üben und zu experimentieren, und erlaubt es, Designhemmungen fallen zu lassen, ohne die Sorge, in einem professionellen Kontext zu übertreiben. Manchmal ist Schaffen um des Schaffens willen ein großartiger Weg, um aus einer Routine auszubrechen.
Du kannst auf verschiedene Weise experimentieren: mit einer bewusst verspielten UX oder dem absichtlichen Unterlaufen von Erwartungen (achte aber darauf, trotzdem zugänglich zu bauen!). Bringe Humor nicht nur in Texte und Bilder, sondern auch in Navigation, Menüs und Interaktionen. Sei subtil. Lass die Seite seriös wirken, bis sie es nicht mehr ist. Das ist eine Gelegenheit, eine Site zu schaffen, die auf unerwartete Weise funktioniert. Eine Marketingseite im Stil eines Easter Eggs kann für einen professionellen Zweck funktionieren, wenn sie gut umgesetzt ist.
Guns 2 Swords ist ein Mini-Site/Unternehmen, das die Pracht der 80er-Dungeons-&-Dragons-Ästhetik mit einem Hauch von Choose-Your-Own-Adventure kombiniert. Es wurde von MSCHF erstellt – irgendwo zwischen Gonzo-Künstlern und Hype-App-Schöpfern – und war ein echtes Angebot: Besucher konnten ihre Waffen einsenden, damit sie von einem erstklassigen Schmied zu Schwertern umgearbeitet wurden. Wahrhaft episch.
Blue Check Homes verfolgte den gegenteiligen Ansatz und baute eine komplett legitim wirkende Website. Was als Twitter-Scherz von Danielle Baskin begann, könnte sich zu einem echten Mini-Business entwickeln, das „Blue Check“-Anhänger (wie die verifizierten Twitter-Accounts) für die Häuser prominenter Personen verkauft.
2. Webbasierte Schatzsuchen
Website-Strukturen eignen sich überraschend gut für Rätsel und Schatzsuchen. Du kannst Seiten in einer Serie verknüpfen und bestimmte Bereiche mit Passwort schützen, sodass Besucher Antworten eingeben oder Hinweise finden müssen, um die nächste Seite freizuschalten.
Es gibt zahlreiche kreative Möglichkeiten, Hinweise und Lösungen zu verstecken und zu enthüllen. Hier kannst du deine Webdesign-Fähigkeiten nutzen, um ein fesselndes Puzzle zu erstellen.
Einige Ideen für Hinweise:
- Gib ein Wort basierend auf einem Rätsel oder Hinweis vor
- Finde ein verborgenes Wort auf deiner Hauptseite oder auf der Schatzsuche-Seite
- Finde ein verstecktes anklickbares Element auf der Seite
- Zeichne eine Form
- Entschlüssele eine Chiffre
Denk nur daran, deinem Publikum irgendeine Art Hinweis oder Workaround anzubieten, wenn du wirklich möchtest, dass alle bis zum Ende kommen. Eine Schatzsuche kann verwendet werden, um die Einführung eines Produkts zu enthüllen, ein neues Video zu veröffentlichen oder dem Betrachter versteckte Informationen zu liefern.
Die Marketingagentur ThreeSixtyEight erstellte eine Schatzsuche, um ihrem Team den Ort des Firmenretreats zu verraten. Sie schufen eine mysteriöse Stimmung mit Musik und einer Opazitätseinstellung um den Cursor, die Besucher nutzen konnten, um selektive Teile der Seite zu enthüllen, während sie nach Hinweisen suchten.
3. App-ähnliche Erfahrungen
Jeremy Beyt, Mitgründer von ThreeSixtyEight, ist überzeugt, dass diese kleineren, erfahrungszentrierten Sites die Zukunft des Webdesigns sind. Er erklärt: „Eine wirklich ausgeprägte front-end-basierte Web-Erfahrung, aus Sicht des Designs, ist eine völlig neue Art, das Web zu nutzen, die es zuvor nicht gab; es ist eine app-ähnliche Erfahrung. Das ist für mich die Chance im Moment.“ Die Welt ist an Apps gewöhnt, in denen Interaktion, Animation und dynamische Erlebnisse die Norm sind. Der logische nächste Schritt ist, diese Energie auf Websites zu bringen und dort einzigartigere Erlebnisse zu schaffen.
Manche sehen eine Rückkehr zu Zeiten, in denen Sites eigenständig, esoterisch und neugierig waren. Neue Tools zum Website-Bau, wie No-Code, vereinfachen jedoch enorm die Umsetzung dynamischer, interaktionszentrierter Projekte. ThreeSixtyEight hat sogar einen eigenen Schritt im Prozess ergänzt, der sich speziell dem Interaction-Design widmet.
4. One-Page-Websites
Manchmal ist die effektivste Website die mit weniger Komplexität. Wir sehen eine wachsende Beliebtheit von One-Page-Websites, die Menüs und Navigation zugunsten des einfachen Scrollens aufgeben. One-Page-Sites funktionieren am besten, wenn ihr Thema eng gefasst ist, z. B. ein Portfolio oder die Präsentation einer einzelnen Idee.
Solche Sites vermitteln das Gefühl, ein Flugblatt in der Hand zu halten oder ein Poster zu lesen. Alle notwendigen Informationen sind an einem Ort, ohne die Ablenkung durch Navigation oder das Suchen über mehrere Seiten.
Die Website von Indi Harris (gebaut von Jordan Hughes) ist ein digitales Resume. Sie lässt ihr Thema im Mittelpunkt stehen. Dadurch ist es wahrscheinlicher, dass ein zufälliger Besucher das ganze Resume liest, da alles, was er braucht, im Vordergrund ist.
Das Portfolio von Joshua Kaplan ist komplexer, aber ebenso effektiv. Es nutzt eine konsistente Struktur, damit der Betrachter sich nicht verliert, reduziert ablenkende Elemente (kein Hintergrund, große Bilder oder Bewegung) und lässt die Seite mit Linework und einem retro wirkenden Copyright-Symbol nostalgisch erscheinen.
5. Websites mit starkem Ortsbezug
Vielleicht kompensieren wir einfach fehlende Reisen, aber manche Websites haben inzwischen ein stärkeres Gefühl für einen bestimmten Ort. Wir sehen Fotografien von lokalen Schauplätzen auf Homepages und Sektionen, die Städte, Gemeinden und Naturorte hervorheben, in denen die Schöpfer leben.
Das Web kann ein distanzierter Ort sein, bei dem man oft keine Verbindung zum Herkunftsort der Site hat, die man besucht. Eine kleine Anmerkung wie „mit Liebe gemacht in …“ oder ein Bild deines Lieblingsplatzes in der Nähe lässt Besucher sich vorstellen, wo du dich befindest, und schafft eine kleine Verbindung zur realen Welt. Wenn wir weniger reisen, können wir zumindest online Verbindungen über Orte herstellen.
Grace Potter nutzt dieses schöne Ozeanbild als Landingpage, auch wenn es nicht direkt mit ihrer Arbeit verbunden ist. Mit diesem Foto verankert sie ihre Website in ihren neuseeländischen Wurzeln und nimmt den Besucher mit in ihre Welt.
6. Art-Déco-Muster
Wir sind schließlich wieder in den 20ern! Art-Déco-Motive passen gut zu den geometrischen Designs, die in den letzten Jahren im Trend lagen. Obwohl die erste Assoziation von Menschen mit Art Déco vielleicht dekorierte Speakeasy‑Sites und Gatsby‑Hochzeitseinladungen ist, kann es wunderbar minimalistische Designs hervorbringen.
Der diesjährige Trend lässt sich von den klaren Linien, Kurven und den sich wiederholenden grafischen Formen der Art‑Déco‑Illustration und -Architektur inspirieren. Diese Elemente können schöne Logos, Schriftarten, Abstandsmuster, Rahmen und Illustrationen inspirieren. Um in diesem Stil effektiv zu gestalten, ist es hilfreich, die Philosophie hinter der ursprünglichen Art‑Déco‑Bewegung zu verstehen.
Art Déco kombinierte Elemente der natürlichen Welt mit der Modernität der Maschinenära: kühne Linien, Symmetrie, Schlichtheit und die wiederholte Verwendung von Elementen. Schau, wie die Formen dieses Libellenflügels sich in den regelmäßigen Mustern des klassischen Chrysler Buildings im Art‑Déco‑Stil wiederfinden.
Der Illustrationsstil von Alegria, den BUCK für Facebook 2017 entwarf, scheint viele Anleihen an die Art‑Déco‑Darstellung menschlicher Figuren zu nehmen. Die klaren Linien und Kurven, ovalen Gesichter, reduzierten Details und überzogenen Proportionen erinnern an diesen künstlerischen Stil. Vielleicht ist ein neuer modernistischer Figurentyp, wie dieses eindrucksvolle Werk des Illustrators Rodolfo Reyes, eine aktualisierte Version dieses Trends.
7. Weniger Bilder im Hero-Bereich
In diesem Jahr entscheiden sich viele Designer dafür, Hero‑Sektionen und Landingpages mit Design sprechen zu lassen, statt sich auf Fotos oder Illustrationen zu verlassen. Hero‑Bilder erzeugen sofort einen großen visuellen Eindruck, aber manchmal lenkt ein auffälliges Bild zu sehr ab. Das Weglassen kann den Fokus stärker auf Stil und Inhalte legen.
Die vier Seiten von Humain, SVZ, Heyday und RADAR sind unglaublich unterschiedlich, aber jede nutzt Layout, Typografie, Farbe und Form, um eine starke, einzigartige Markenidentität zu kommunizieren. Der Verzicht auf Bilder schafft außerdem etwas Geheimnis und animiert Besucher dazu, zu entdecken, was sich hinter dem Hero‑Bereich verbirgt.
8. Überdimensionierte Typografie
Außergewöhnlich große Typografie ist ein frischer, mutiger Designtend für dieses Jahr. Ab einer gewissen Größe werden Wörter mehr zum grafischen Element als nur Teil des Fließtexts. Diese Technik ist vielseitig und funktioniert gleichermaßen in minimalistischen wie maximalistischen Designs und passt zu unterschiedlichen Stilrichtungen.
Die Filmportfolio‑Website von Eva Habermann (erstellt von Daniel Spatzek) legt großen Text über eine sich drehende Filmrolle. Der Text blockiert teilweise das Bild und weckt die Neugier des Betrachters. Eine zweifarbige Sans‑Serif‑Schrift bietet ausreichend Kontrast, ohne unleserlich oder erdrückend zu wirken.
Das Portfolio von David Calle nutzt große Typografie, um ein schlichtes, ultra‑minimalistisches Design zu schaffen. Der neutrale Hintergrund und die Serifenschrift verbinden sich schön mit einer subtilen Animation beim Scrollen.
9. Interaktive Schriftarten
Einige Designer haben kreative Wege gefunden, Text mit der Maus des Nutzers zu bewegen und zu spielen. Eine einfache Methode, Text interaktiv zu machen, ist ein Hover‑Zustandswechsel wie bei einem Button. Moderne No‑Code‑Plattformen erleichtern inzwischen die Erstellung komplexerer Effekte ohne handgeschriebene Interaktionen. Bei interaktiven Schriftzügen ist jedoch Lesbarkeit wichtig, da manche Nutzer von sich bewegendem Text abgelenkt werden.
Die Website von Dillinger verwendet eine Schrift, die beim Überfahren mit dem Cursor an Gewicht zunimmt. Beachte, dass der sich verdunkelnde Hintergrund die hervorgehobene Schrift besser lesbar macht – ein guter Usability‑Zug. Der übergroße Cursor trägt ebenfalls zur Einbindung bei. Der Designer Tim Ricks stellte eine klonbare Version dieser Seite zur Verfügung, damit jeder sehen kann, wie der Effekt entsteht.
10. Verantwortungsbewusste Bewegungsgestaltung
Wenn wir über Interaktivität sprechen, ist es an der Zeit, über verantwortungsbewusste Bewegungsgestaltung zu sprechen, die sich zum Standard entwickelt. Bewegung ist ein faszinierender Aspekt des Webdesigns, aber es ist leicht, zu übertreiben oder Menschen Schaden zuzufügen, indem man Reisekrankheit (Motion Sickness) auslöst. Motion Sickness ist relativ verbreitet, daher sollten Animationen wie von der Maus ausgelöste Skalierungen, Parallax‑Effekte oder Scrolljacking vermieden werden.
Bewegung kann subtil und verantwortungsvoll eingesetzt werden. Corey Moen, Senior Brand Designer bei Webflow, ging ins Detail, wie man unter Berücksichtigung der „Reduziere Bewegung“-Einstellung auf macOS baut.
Das bedeutet jedoch nicht, dass man Bewegung als Allheilmittel nutzen sollte oder sich damit eine Ausrede verschafft, überall Bewegung einzusetzen. Übermäßige Bewegung führt zu verwirrender UX, schadet vielen Nutzern und ist oft schlicht unnötig.
11. Collage-Illustration
Collage‑artige Grafiken geben Website‑Illustrationen eine haptische Qualität, schaffen mehr Weißraum im Design und erlauben es, Bilder einzubinden, ohne das gesamte Design um eine Fotografie herum aufzubauen. Achte darauf, Formen, Muster und Farben innerhalb einer Collage zu mischen. Du kannst auch einen monochromen Effekt, eine Tönung oder einen Filter auf Fotos anwenden, damit sie sich besser ins Gesamtdesign einfügen.
Die Site von Vanta verwendet collage‑artige Illustrationen auf der Landingpage und im gesamten Site‑Design. Die Bearbeitung ihrer Fotos, sodass sie wie ein Collage‑Element wirken, erlaubt es, Grafiken unregelmäßiger und versetzt zu platzieren und so das Grid aufzubrechen.
12. Abstrakte Illustrationen
Abstrakte Illustrationen mit organischerer Textur und einem Hauch von Handarbeit werden beliebter. Während saubere Vektorillustrationen und niedliche Darstellungen von Menschen und Objekten einige Jahre das Webdesign dominierten, suchen viele nach etwas Natürlicherem und Anspruchsvollerem.
Solche Illustrationen lassen sich mit Tinte und Papier erstellen und scannen oder in Illustrationssoftware anlegen. Der Schlüssel ist, verschiedene Texturen und natürliche Unregelmäßigkeiten wie Aquarell, Tinte, Malerei, Siebdruckeffekte oder Papierstruktur einzubeziehen. Linien können weicher sein und Variation in der Strichstärke aufweisen, wie sie durch Graphit oder Tinte entsteht.
Abstrakt heißt nicht simpel. Diese Blog‑Illustrationen des Designers Adam Ho sind ein perfektes Beispiel. Schau dir die neugierigen Komplexitäten seiner Arbeiten an. Mit ultra‑feinen Linien und grafischen Formen wirken sie wie technische Zeichnungen, ohne ein spezifisches Objekt darzustellen.
13. Verläufe mit Körnung
Verläufe sind bereits populär, aber mit hinzugefügter Körnung entsteht ein ganz anderer Effekt. Ein perfekter Verlauf wirkt elegant und modern, vermittelt ein futuristisches oder glänzendes, technologisches Gefühl. Körnung verankert ein Design, verleiht Textur und lässt es natürlicher wirken.
Je nach Behandlung kann Körnung Film, Fotografie oder Druckmedien nachahmen. Feine Mehrfarbenkörnung kann wie analoger Film wirken, während grobe monochrome Körnung an ein Siebdruck‑Plakat erinnert. Körnung und damit versehene Verläufe können selektiv oder seitenweit verwendet werden, als Vollseitenhintergrund oder innerhalb einzelner Objekte.
Wir haben eine Reihe körniger Verläufe auf der Website der Webflow‑Konferenz 2021 „No‑Code“ verwendet. Die Verläufe kamen in animierter Grafik, Hintergründen und Elementen der Konferenzseite zum Einsatz; wir wählten eine mittlere Körnung, die einen Druckmedien‑Effekt erzeugt.
14. Linework
Ein Trend, der zugleich modern und retro wirkt, ist das Arbeiten mit Linien. Designer können Linien nutzen, um Sektionen, Überschriften, Absätze und Produktgalerien zu umreißen oder ein dynamisches Raster für die gesamte Seite zu schaffen. Füge Strichillustrationen (abstrakt oder repräsentativ) hinzu, um diesen Stil zu verstärken. Bei diesem Design wirkt die Strichstärke am stärksten auf das Endergebnis.
Die Apart Agency‑Website verwendet ultrafeine Linien. Der Effekt ist technisch, scharf und minimalistisch. Die Grafikauswahl und die Farbpalette aus Orange, Schwarz und Taubengrau erinnern an die minimalistische Kunstbewegung der 60er. Auch die horizontale Linienbewegung beim Scrollen ist ein netter Touch.
Auch Breef verwendet feine Linien, kombiniert diese aber mit leichterer Typografie und illustrativen grafischen Elementen. Mit gedämpfter Farbpalette und durchgestrichenen Hover‑Effekten wirkt das Gesamtdesign lässig, wie von erwachsenen Millennials. Die Seite muss viele Informationen vermitteln, und klare Abschnittsaufteilungen, Illustrationen und ein schlichter Hintergrund helfen, den Inhalt hervorzuheben.
CPGD nutzt fette schwarze Linien für einen großartigen grafischen Effekt. Dieses Design wirkt jünger und verspielter. Jede Sektion innerhalb des ausgerichteten Rasters hat eine eigene Farbe, was hilft, Inhalte zu unterscheiden, und die Farbänderung beim Hover leitet den Nutzer.
15. Geteilte Bildschirm‑Websites
Eine interessante Möglichkeit, ein Design aufzubrechen, ist ein geteiltes Bildschirmlayout, das wir in letzter Zeit häufiger beobachten. Das Doppel‑Layout bietet Kontrast, visuelles Interesse und eine natürliche Trennung von Inhalten. Es ist auch eine gute Gelegenheit, mit Farben zu spielen.
var!－būt! – die Festivalwebsite (gebaut von ONEIGHT7) bringt diesem Design eine interessante Wendung mit einem fixierten Footer, sanftem Scrollen und kontrastierenden Scrollrichtungen in der linken und rechten Sektion. Das geteilte Layout fixiert den Betrachter, sodass viel Bewegung eingebaut werden kann, ohne dass er sich verliert.
16. Mehr Glassmorphism
Ein schöner Trend dieses Jahres ist Glassmorphism. Eine Kombination aus Transparenz, Unschärfe und Bewegung lässt Elemente visuell wie Glas wirken. Diese Technik lässt sich in Logos, Illustrationen oder ganzen Sektionen einsetzen.
Der Schlüssel zu diesem Stil ist Diffusion, Reflektion und Schatten, die optische Illusionen erzeugen. Kombiniert mit subtiler Bewegung kann Glassmorphism eine Website dreidimensional erscheinen lassen. Die Verwendung von „milchigem Glas“ innerhalb eines Bildes ermöglicht Transparenz, ohne visuelles Durcheinander zu erzeugen.
Tyler Galpin verwendet Glassmorphism, um ein faszinierendes, bewegtes Logo zu erzeugen.
Stefan Velikov nutzt Glassmorphism in diesem klonbaren Webflow‑Projekt, um die Illustration einer Kreditkarte vom Bildschirm „herauskommen“ zu lassen.
17. Weniger Neumorphism
Neumorphism, eine Neuinterpretation des Skeuomorphismus im Design, ist ein minimalistischer Stil, der 2020 für Apps und Websites populär wurde. Er imitiert modernes Gerätedesign (denk an eine neue Art von Apple‑TV‑Fernbedienung oder einen alten iPod) mit monochromen, niedrig kontrastierenden Elementen, feinen Schatten und dem Verzicht auf scharfe Linien und Kanten. Hier ein Beispiel von Dribbble:
Neumorphism fällt auf, weil es sich von den meisten Webprojekten unterscheidet, aber manchmal sind Standards deshalb Standard, weil sie einfach besser funktionieren. Der Grund, warum wir „weniger Neumorphism“ als Trend gewählt haben, ist einfach: der Stil ist schlecht für die Zugänglichkeit.
Der Mangel an Kontrast und klarer Differenzierung macht Sites in diesem Stil für sehbehinderte Nutzer sehr schwierig zu bedienen, und die in Schatten dargestellten Elemente machen es schwer zu erkennen, welchen Button man drückt. Die CDC gibt die Zahl der Amerikaner mit Sehbehinderung mit über 3,22 Millionen an. Zugängliches Design ist nicht nur für Menschen mit Behinderungen wichtig. Jeder erlebt situative Sehschwierigkeiten – etwa durch blendendes Licht – und Neumorphism ist in solchen Situationen schwer zu lesen.
53 Millionen Menschen allein in den USA leben mit einer Behinderung, und jeder wird irgendwann situative Beeinträchtigungen erfahren. Barrierefreiheit ist weit mehr als ein Trend: sie ist notwendig und sollte bei Webdesign immer eine zentrale Rolle spielen.
18. Inklusive Sprache
Wir haben beobachtet, dass viel mehr Websites in ihren Projekten auf inklusive Inhalte und Sprache achten. Das sollte zur Norm werden und hoffentlich ein dauerhafter Wandel hin zu größerer Sensibilität für die Wirkung von Sprache sein. Inklusivere Texte machen das Web für mehr Menschen einladender und zugänglicher.
Webflow ist unser Referenzpunkt für inklusive Sprache, die wir zur Steuerung aller unserer schriftlichen Inhalte nutzen und öffentlich in unserem Brand‑Designsystem zugänglich gemacht haben. Sprachrichtlinien können eine nützliche Funktion für jede Unternehmenswebsite sein.
Es geht nicht nur darum, was du sagst, sondern auch wie und wo du es sagst. Alt‑Text, gut lesbarer Text (Schrift, Größe und Farbe) und das Vermeiden von text als Bild sind alles Wege, sicherzustellen, dass alle lesen können, was deine Site zu sagen hat, unabhängig von Sprache oder Fähigkeiten.
19. Geschlechtsneutrales Design
Ein weiterer Ansatz, der sich als Standard durchsetzt, ist geschlechtsneutrales Webdesign, das zunehmend universell übernommen wird. Der erste offensichtliche Schritt ist, unnötige geschlechtsspezifische Details wegzulassen, die einst allgegenwärtig waren: übermäßig rosa Pflege‑Websites oder hyper‑männliche Themes mit Feuerwölfen und Messern für Camping‑Ausrüstung. Frauen kaufen Elektrowerkzeuge, Männer kaufen Hautpflege – trotzdem trifft man gesellschaftliche Annahmen schnell unreflektiert.
Es ist mittlerweile Standard, mehr Geschlechtsoptionen und Pronomen in Formularen und Dropdowns anzubieten. 42 Prozent der Amerikaner denken, dass mehr Optionen angeboten werden sollten. Noch besser: Wenn es keinen Grund gibt, solche Felder zu haben, kann man sie ganz weglassen, wie es Snapchat gewählt hat.
Beim Verfassen von Text ist das neue Standard‑Muster, „they“ statt „he or she“ zu wählen, wenn kein Geschlecht angegeben ist. Auch im E‑Commerce werden viele Seiten geschlechtsneutral, indem sie Kleidung nicht mehr strikt nach Geschlecht sortieren oder mehrere Größen‑ und Modellvarianten an verschiedenen Körpern zeigen, um Produkte zugänglicher zu machen.
Vermeide es, Annahmen darüber zu treffen, welche Interessen oder welches Geschlecht deine Nutzer haben könnten. Das Vermeiden solcher Annahmen ist respektvoller und wird von den Besuchern geschätzt.
20. Priorität für Seitenladegeschwindigkeit
Technisch gesehen ist die Seitenladegeschwindigkeit in diesem Jahr eine vorrangige Überlegung für Webentwickler geworden. Googles Algorithmus‑Update 2021 macht Geschwindigkeit wichtiger für SEO. Das spiegelt auch höhere Nutzererwartungen an Performance wider: 53% der Nutzer verlassen eine Seite, wenn das Laden länger als 3 Sekunden dauert. Die Zeiten des geduldigen Wartens auf Ladebildschirme sind vorbei.
Google PageSpeed Insights oder Lighthouse sind Tools, die zur Bewertung der Seitenladeoptimierung genutzt werden können. Es gibt einfache Schritte, die Entwickler (oder ihre Plattform) unternehmen können, um schnelle Ladezeiten sicherzustellen, wie Bildoptimierung und Lazy‑Loading für Offscreen‑Bilder. Auch die Beschränkung der verwendeten Schriftarten hilft. Vermeide außerdem Plattformen, die zu stark auf Plugins angewiesen sind, da das die Performance stark beeinträchtigen kann.
21. Mit dynamischen Inhalten bauen
Dynamische Inhalte erlauben Designern, schneller zu bauen, größere Projekte zu erstellen und mehr Komplexität einzubauen, ohne den Aufwand für Änderungen zu erhöhen. Mehr verfügbare Datenbank‑Tools und No‑Code‑Plattformen bedeuten, dass mehr Menschen Inhalte dynamisch erstellen können, unabhängig von ihrer technischen Erfahrung. Das ist ein viel effizienterer Weg, fürs Web zu bauen, und wird zunehmend übernommen.
Dynamischer Inhalt basiert auf einer Datenbank, die mit wiederholbaren Strukturen verbunden ist. Du kannst die Struktur an einer Stelle ändern und gleichzeitig alle Blog‑Beiträge aktualisieren, ohne jeden einzeln bearbeiten zu müssen. Das ist ideal für Seiten mit ständigem Content‑Wechsel wie E‑Commerce, Blogs, Portfolios, Restaurantmenüs oder Nachrichtenseiten.
Statischer Content wird weiterhin seine Anwendungen haben, aber die Erstellung dynamischer Inhalte setzt sich im Web immer mehr durch.
22. No‑Code für mehr Teams
Wir sehen immer mehr Teams, die No‑Code in ihre Workflows integrieren und von der Geschwindigkeit und Unabhängigkeit profitieren. No‑Code ist zu einer Bewegung geworden, die Citizen Creator ermöglicht, fürs Web zu bauen, ohne Programmierkenntnisse. Wahrscheinlich nutzt dein Team bereits eine Vielzahl von No‑Code‑Tools, um die Arbeit effizienter zu machen.
Für Unternehmen bedeutet das, dass mehr Teams Web‑Ressourcen selbst erstellen können. Personalabteilungen können Trainingsseiten, Ressourcenarchive oder Unternehmensverzeichnisse anlegen. Designteams können funktionale Prototypen oder handgemachte Designsysteme erstellen, auf die jeder im Unternehmen zugreifen kann. Das Marketing kann direkt an den Teilen der Website arbeiten, die Kund:innen ansprechen, oder Microsites für spezielle Kampagnen oder lokale Initiativen erstellen.
Die Unabhängigkeit durch No‑Code eröffnet mehr Möglichkeiten für Innovation und Experimente und hilft Teams, deutlich schneller zu arbeiten. Wir erwarten, dass deutlich mehr Unternehmen No‑Code‑Tools in ihre täglichen Workflows integrieren werden.
Wir sind gespannt, wie sie 2022 umgesetzt werden
Es hat Spaß gemacht, die Sites zu durchstöbern, die diese Liste inspiriert haben. Wir erwarten ein Jahr voller Verspieltheit und kreativer Neuausrichtung, während Designer sich von manchem entfernen, das in den letzten Jahren allgegenwärtig geworden ist. Wir freuen uns darauf, zu sehen, was ihr 2022 fürs Web erschaffen werdet.
