{"id":7123,"date":"2026-06-04T06:39:34","date_gmt":"2026-06-04T06:39:34","guid":{"rendered":"https:\/\/nubusiness.it\/22-webdesign-trends-fur-2022\/"},"modified":"2026-06-04T06:39:34","modified_gmt":"2026-06-04T06:39:34","slug":"22-webdesign-trends-fur-2022","status":"publish","type":"post","link":"https:\/\/nubusiness.it\/de\/22-webdesign-trends-fur-2022\/","title":{"rendered":"22 Webdesign-Trends f\u00fcr 2022"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Diese 22 Webdesign-Trends f\u00fcr 2022 werden dabei helfen, zu informieren und zu inspirieren, was Menschen f\u00fcrs Web bauen. Tauche ein.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein allgemeiner Trend, den wir f\u00fcr das kommende Jahr sehen, ist ein st\u00e4rkeres Gef\u00fchl von Verspieltheit im Webdesign.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Designer haben begonnen, Websites wie Kunstwerke zu gestalten, Websites als interaktive Projekte und Sites, die einfach existieren, um zu spielen und Spa\u00df zu machen. Das erinnert an die fr\u00fchen Tage des Webs, als Designer Wege fanden, neue Techniken zu zeigen oder Websites f\u00fcr sich selbst zu erstellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es scheint, als bef\u00e4nden wir uns ein wenig in einer Wiederbelebung des fr\u00fchen Webs. Das ergibt Sinn. Auch die Mode hat stark aus den sp\u00e4ten 90ern und fr\u00fchen 2000ern entlehnt. Viele von uns haben Zeit zu Hause damit verbracht, tr\u00e4ge im Internet zu surfen und nach etwas Unterhaltsamem oder Aufregendem zu suchen \u2013 so wie damals, als das Web erstmals aufkam.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Visuell lassen sich Webtrends von dieser Epoche inspirieren. Designer finden Kreativit\u00e4t abseits der st\u00e4rker fotozentrierten Layouts, die zum Standard geworden sind. Stattdessen finden diese Entw\u00fcrfe kreative Wege, Typografie, Raster und Linien sowie einfache Navigation zu nutzen. Der aktualisierte Stil mit vielen ged\u00e4mpften Farben, raffinierten Texturen und Serifenschriften verhindert, dass Websites zu retro wirken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auch das Webdesign bewegt sich in die Zukunft mit aufregenden zeitgen\u00f6ssischen Techniken wie erweiterten Interaktionen und Animationen sowie visuellen Effekten wie Glassmorphism und K\u00f6rnung. Und Designer nutzen No-Code-Tools, um all das schneller und einfacher als je zuvor umzusetzen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Webdesign-Trends 2022<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hier sind einige der Webdesign-Trends, von denen wir erwarten, dass sie im kommenden Jahr Einfluss haben werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Mini-Sites zum Vergn\u00fcgen<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Humor kann viele Formen annehmen, und eine Website zu bauen, die ein L\u00e4cheln oder Lachen hervorruft, macht immer Freude. Warum also nicht etwas Spa\u00df in dein Projekt bringen?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In den <a href=\"https:\/\/www.awn.com\/vfxworld\/value-shorts\" target=\"_blank\" rel=\"noreferrer noopener\">fr\u00fchen Tagen von Pixar<\/a> begann das Studio damit, seinen Animatoren Zeit zu geben, neben den Filmen einen <a href=\"https:\/\/www.pixar.com\/theatrical-shorts\" target=\"_blank\" rel=\"noreferrer noopener\">Kurzfilm<\/a> zu machen. Diese Kurzfilme waren ein kreativer Raum f\u00fcr Lockerheit und Verspieltheit ohne den Druck von Langfilmen. Sie f\u00fchrten auch zu neuen Techniken, die das Feld der Animation vorantrieben. Webentwickler entdecken, dass sie \u00c4hnliches mit Websites tun k\u00f6nnen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0a1a0cf73c63bf2b1_cMEwc0EKGit3csPXtxgwX2dl2DbarwRAZSswrIaNCmX_p97q6KrMebE3Zo8b5cRHBGsbQpJrrAWWs6TmJ_zewovdRLLPNbM-vaTm1gSuCX6XOkJECItd67MSkSept5dBFx5aAm1Ms1600-1024x553.jpeg\" alt=\"tendenze del web design\" class=\"wp-image-6113\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0a1a0cf73c63bf2b1_cMEwc0EKGit3csPXtxgwX2dl2DbarwRAZSswrIaNCmX_p97q6KrMebE3Zo8b5cRHBGsbQpJrrAWWs6TmJ_zewovdRLLPNbM-vaTm1gSuCX6XOkJECItd67MSkSept5dBFx5aAm1Ms1600-1024x553.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0a1a0cf73c63bf2b1_cMEwc0EKGit3csPXtxgwX2dl2DbarwRAZSswrIaNCmX_p97q6KrMebE3Zo8b5cRHBGsbQpJrrAWWs6TmJ_zewovdRLLPNbM-vaTm1gSuCX6XOkJECItd67MSkSept5dBFx5aAm1Ms1600-300x162.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0a1a0cf73c63bf2b1_cMEwc0EKGit3csPXtxgwX2dl2DbarwRAZSswrIaNCmX_p97q6KrMebE3Zo8b5cRHBGsbQpJrrAWWs6TmJ_zewovdRLLPNbM-vaTm1gSuCX6XOkJECItd67MSkSept5dBFx5aAm1Ms1600-768x415.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0a1a0cf73c63bf2b1_cMEwc0EKGit3csPXtxgwX2dl2DbarwRAZSswrIaNCmX_p97q6KrMebE3Zo8b5cRHBGsbQpJrrAWWs6TmJ_zewovdRLLPNbM-vaTm1gSuCX6XOkJECItd67MSkSept5dBFx5aAm1Ms1600.jpeg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><a href=\"https:\/\/www.pixar.com\/day-night\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Day &amp; Night<\/em><\/a><em> ,<\/em> ein Pixar-Kurzfilm aus dem Jahr 2010, beeinflusste Animationsans\u00e4tze in Filmen wie <em>Inside Out<\/em> und <em>Soul<\/em>.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ein verspieltes Mini-Site-Projekt gibt Designern Zeit, einfach kreativ zu sein, Techniken zu \u00fcben und zu experimentieren, und erlaubt es, Designhemmungen fallen zu lassen, ohne die Sorge, in einem professionellen Kontext zu \u00fcbertreiben. Manchmal ist Schaffen um des Schaffens willen ein gro\u00dfartiger Weg, um aus einer Routine auszubrechen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Du kannst auf verschiedene Weise experimentieren: mit einer bewusst verspielten UX oder dem absichtlichen Unterlaufen von Erwartungen (achte aber darauf, trotzdem zug\u00e4nglich zu bauen!). Bringe Humor nicht nur in Texte und Bilder, sondern auch in Navigation, Men\u00fcs und Interaktionen. Sei subtil. Lass die Seite seri\u00f6s 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\u00fcr einen professionellen Zweck funktionieren, wenn sie gut umgesetzt ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/guns2swords.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Guns 2 Swords<\/a> ist ein Mini-Site\/Unternehmen, das die Pracht der 80er-Dungeons-&amp;-Dragons-\u00c4sthetik mit einem Hauch von <a href=\"https:\/\/medium.com\/everything-80s\/the-story-behind-the-choose-your-own-adventure-books-be214f3d4bf4\" target=\"_blank\" rel=\"noreferrer noopener\">Choose-Your-Own-Adventure<\/a> kombiniert. Es wurde von <a href=\"https:\/\/mschf.xyz\/\" target=\"_blank\" rel=\"noreferrer noopener\">MSCHF<\/a> erstellt \u2013 irgendwo zwischen Gonzo-K\u00fcnstlern und Hype-App-Sch\u00f6pfern \u2013 und war ein echtes Angebot: Besucher konnten ihre Waffen einsenden, damit sie von einem erstklassigen Schmied zu Schwertern umgearbeitet wurden. Wahrhaft episch.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"797\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0c04f8e784b46c7fa_ywVev9vrQlTzRsEUtESASdEBy5MdomW-HH8JSo0Ti8NIHC3k4ZyxAcjoRsv1jrMkbMcOzvHjo_n-gC3xds2vNL2WHTRNoX9ai490wl6N-3MTholwxIrpcOBTc42QWvXrxxu8a7wcs1600-1024x797.jpeg\" alt=\"\" class=\"wp-image-6114\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0c04f8e784b46c7fa_ywVev9vrQlTzRsEUtESASdEBy5MdomW-HH8JSo0Ti8NIHC3k4ZyxAcjoRsv1jrMkbMcOzvHjo_n-gC3xds2vNL2WHTRNoX9ai490wl6N-3MTholwxIrpcOBTc42QWvXrxxu8a7wcs1600-1024x797.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0c04f8e784b46c7fa_ywVev9vrQlTzRsEUtESASdEBy5MdomW-HH8JSo0Ti8NIHC3k4ZyxAcjoRsv1jrMkbMcOzvHjo_n-gC3xds2vNL2WHTRNoX9ai490wl6N-3MTholwxIrpcOBTc42QWvXrxxu8a7wcs1600-300x234.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0c04f8e784b46c7fa_ywVev9vrQlTzRsEUtESASdEBy5MdomW-HH8JSo0Ti8NIHC3k4ZyxAcjoRsv1jrMkbMcOzvHjo_n-gC3xds2vNL2WHTRNoX9ai490wl6N-3MTholwxIrpcOBTc42QWvXrxxu8a7wcs1600-768x598.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0c04f8e784b46c7fa_ywVev9vrQlTzRsEUtESASdEBy5MdomW-HH8JSo0Ti8NIHC3k4ZyxAcjoRsv1jrMkbMcOzvHjo_n-gC3xds2vNL2WHTRNoX9ai490wl6N-3MTholwxIrpcOBTc42QWvXrxxu8a7wcs1600-1536x1196.jpeg 1536w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de3d0c04f8e784b46c7fa_ywVev9vrQlTzRsEUtESASdEBy5MdomW-HH8JSo0Ti8NIHC3k4ZyxAcjoRsv1jrMkbMcOzvHjo_n-gC3xds2vNL2WHTRNoX9ai490wl6N-3MTholwxIrpcOBTc42QWvXrxxu8a7wcs1600.jpeg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/bluecheckhomes.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blue Check Homes<\/a> verfolgte den gegenteiligen Ansatz und baute eine komplett legitim wirkende Website. Was als <a href=\"https:\/\/twitter.com\/djbaskin\/status\/1355394022362148864\" target=\"_blank\" rel=\"noreferrer noopener\">Twitter-Scherz<\/a> von Danielle Baskin begann, k\u00f6nnte sich zu einem echten Mini-Business entwickeln, das \u201eBlue Check\u201c-Anh\u00e4nger (wie die verifizierten <a href=\"https:\/\/help.twitter.com\/en\/managing-your-account\/about-twitter-verified-accounts\" target=\"_blank\" rel=\"noreferrer noopener\">Twitter-Accounts<\/a>) f\u00fcr die H\u00e4user prominenter Personen verkauft.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de7658663c97747c7690f_blue-check-homes-1024x559.jpeg\" alt=\"\" class=\"wp-image-6115\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de7658663c97747c7690f_blue-check-homes-1024x559.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de7658663c97747c7690f_blue-check-homes-300x164.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de7658663c97747c7690f_blue-check-homes-768x420.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de7658663c97747c7690f_blue-check-homes.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2.<strong> Webbasierte Schatzsuchen<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Website-Strukturen eignen sich \u00fcberraschend gut f\u00fcr R\u00e4tsel und Schatzsuchen. Du kannst Seiten in einer Serie verkn\u00fcpfen und bestimmte Bereiche mit Passwort sch\u00fctzen, sodass Besucher Antworten eingeben oder Hinweise finden m\u00fcssen, um die n\u00e4chste Seite freizuschalten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es gibt zahlreiche kreative M\u00f6glichkeiten, Hinweise und L\u00f6sungen zu verstecken und zu enth\u00fcllen. Hier kannst du deine Webdesign-F\u00e4higkeiten nutzen, um ein fesselndes Puzzle zu erstellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Einige Ideen f\u00fcr Hinweise:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Gib ein Wort basierend auf einem R\u00e4tsel oder Hinweis vor<\/li><li>Finde ein verborgenes Wort auf deiner Hauptseite oder auf der Schatzsuche-Seite<\/li><li>Finde ein verstecktes anklickbares Element auf der Seite<\/li><li>Zeichne eine Form<\/li><li><a href=\"https:\/\/www.cryptogram.org\/resource-area\/cipher-types\/\" target=\"_blank\" rel=\"noreferrer noopener\">Entschl\u00fcssele eine Chiffre<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Denk nur daran, deinem Publikum irgendeine Art Hinweis oder Workaround anzubieten, wenn du wirklich m\u00f6chtest, dass alle bis zum Ende kommen. Eine Schatzsuche kann verwendet werden, um die Einf\u00fchrung eines Produkts zu enth\u00fcllen, ein neues Video zu ver\u00f6ffentlichen oder dem Betrachter versteckte Informationen zu liefern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Marketingagentur <a href=\"https:\/\/threesixtyeight.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">ThreeSixtyEight<\/a> erstellte eine <a href=\"https:\/\/lightthefirewithinus.webflow.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Schatzsuche<\/a>, um ihrem Team den Ort des Firmenretreats zu verraten. Sie schufen eine mysteri\u00f6se Stimmung mit Musik und einer Opazit\u00e4tseinstellung um den Cursor, die Besucher nutzen konnten, um selektive Teile der Seite zu enth\u00fcllen, w\u00e4hrend sie nach Hinweisen suchten.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de844e1d099629df94100_threesixtyeight-scavenger-hunt-site-1024x542.jpeg\" alt=\"\" class=\"wp-image-6117\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de844e1d099629df94100_threesixtyeight-scavenger-hunt-site-1024x542.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de844e1d099629df94100_threesixtyeight-scavenger-hunt-site-300x159.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de844e1d099629df94100_threesixtyeight-scavenger-hunt-site-768x406.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616de844e1d099629df94100_threesixtyeight-scavenger-hunt-site.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3.<strong> App-\u00e4hnliche Erfahrungen<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Jeremy Beyt, Mitgr\u00fcnder von ThreeSixtyEight, ist \u00fcberzeugt, dass diese kleineren, erfahrungszentrierten Sites die Zukunft des Webdesigns sind. Er erkl\u00e4rt: \u201eEine wirklich ausgepr\u00e4gte front-end-basierte Web-Erfahrung, aus Sicht des Designs, ist eine v\u00f6llig neue Art, das Web zu nutzen, die es zuvor nicht gab; es ist eine app-\u00e4hnliche Erfahrung. Das ist f\u00fcr mich die Chance im Moment.\u201c Die Welt ist an Apps gew\u00f6hnt, in denen Interaktion, Animation und dynamische Erlebnisse die Norm sind. Der logische n\u00e4chste Schritt ist, diese Energie auf Websites zu bringen und dort einzigartigere Erlebnisse zu schaffen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Manche sehen eine R\u00fcckkehr zu Zeiten, in denen Sites eigenst\u00e4ndig, 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\u00e4nzt, der sich speziell dem Interaction-Design widmet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. One-Page-Websites<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Manchmal ist die effektivste Website die mit weniger Komplexit\u00e4t. Wir sehen eine wachsende Beliebtheit von One-Page-Websites, die Men\u00fcs 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\u00e4sentation einer einzelnen Idee.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Solche Sites vermitteln das Gef\u00fchl, 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 \u00fcber mehrere Seiten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Website von Indi Harris (gebaut von Jordan Hughes) ist ein digitales Resume. Sie l\u00e4sst ihr Thema im Mittelpunkt stehen. Dadurch ist es wahrscheinlicher, dass ein zuf\u00e4lliger Besucher das ganze Resume liest, da alles, was er braucht, im Vordergrund ist.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"561\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ded7f531c686503c47443_indi-harris-website-1024x561.jpeg\" alt=\"\" class=\"wp-image-6118\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ded7f531c686503c47443_indi-harris-website-1024x561.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ded7f531c686503c47443_indi-harris-website-300x164.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ded7f531c686503c47443_indi-harris-website-768x421.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ded7f531c686503c47443_indi-harris-website.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.joshuakaplan.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Das Portfolio von Joshua Kaplan<\/a> ist komplexer, aber ebenso effektiv. Es nutzt eine konsistente Struktur, damit der Betrachter sich nicht verliert, reduziert ablenkende Elemente (kein Hintergrund, gro\u00dfe Bilder oder Bewegung) und l\u00e4sst die Seite mit Linework und einem retro wirkenden Copyright-Symbol nostalgisch erscheinen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dee4d52cf558f72920706_joshua-kaplan-1024x560.jpeg\" alt=\"\" class=\"wp-image-6119\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dee4d52cf558f72920706_joshua-kaplan-1024x560.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dee4d52cf558f72920706_joshua-kaplan-300x164.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dee4d52cf558f72920706_joshua-kaplan-768x420.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dee4d52cf558f72920706_joshua-kaplan.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Websites mit starkem Ortsbezug<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Vielleicht kompensieren wir einfach fehlende Reisen, aber manche Websites haben inzwischen ein st\u00e4rkeres Gef\u00fchl f\u00fcr einen bestimmten Ort. Wir sehen Fotografien von lokalen Schaupl\u00e4tzen auf Homepages und Sektionen, die St\u00e4dte, Gemeinden und Naturorte hervorheben, in denen die Sch\u00f6pfer leben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 \u201emit Liebe gemacht in \u2026\u201c oder ein Bild deines Lieblingsplatzes in der N\u00e4he l\u00e4sst Besucher sich vorstellen, wo du dich befindest, und schafft eine kleine Verbindung zur realen Welt. Wenn wir weniger reisen, k\u00f6nnen wir zumindest online Verbindungen \u00fcber Orte herstellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grace Potter nutzt dieses sch\u00f6ne Ozeanbild als Landingpage, auch wenn es nicht direkt mit ihrer Arbeit verbunden ist. Mit diesem Foto verankert sie ihre Website in ihren neuseel\u00e4ndischen Wurzeln und nimmt den Besucher mit in ihre Welt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df0b586905129af1f27d2_grace-potter-website-1024x542.jpeg\" alt=\"\" class=\"wp-image-6120\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df0b586905129af1f27d2_grace-potter-website-1024x542.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df0b586905129af1f27d2_grace-potter-website-300x159.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df0b586905129af1f27d2_grace-potter-website-768x407.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df0b586905129af1f27d2_grace-potter-website.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. Art-D\u00e9co-Muster<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wir sind schlie\u00dflich wieder in den 20ern! Art-D\u00e9co-Motive passen gut zu den geometrischen Designs, die in den letzten Jahren im Trend lagen. Obwohl die erste Assoziation von Menschen mit Art D\u00e9co vielleicht dekorierte Speakeasy\u2011Sites und Gatsby\u2011Hochzeitseinladungen ist, kann es wunderbar minimalistische Designs hervorbringen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der diesj\u00e4hrige Trend l\u00e4sst sich von den klaren Linien, Kurven und den sich wiederholenden grafischen Formen der Art\u2011D\u00e9co\u2011Illustration und -Architektur inspirieren. Diese Elemente k\u00f6nnen sch\u00f6ne Logos, Schriftarten, Abstandsmuster, Rahmen und Illustrationen inspirieren. Um in diesem Stil effektiv zu gestalten, ist es hilfreich, die <a href=\"https:\/\/www.art-critique.com\/en\/2020\/02\/art-deco-art-lesson\/\" target=\"_blank\" rel=\"noreferrer noopener\">Philosophie hinter der urspr\u00fcnglichen Art\u2011D\u00e9co\u2011Bewegung<\/a> zu verstehen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Art D\u00e9co kombinierte Elemente der nat\u00fcrlichen Welt mit der Modernit\u00e4t der Maschinen\u00e4ra: k\u00fchne Linien, Symmetrie, Schlichtheit und die wiederholte Verwendung von Elementen. Schau, wie die Formen dieses Libellenfl\u00fcgels sich in den regelm\u00e4\u00dfigen Mustern des klassischen Chrysler Buildings im Art\u2011D\u00e9co\u2011Stil wiederfinden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df1f6976f0a662f1d629a_art-deco-examples-1024x576.jpeg\" alt=\"\" class=\"wp-image-6121\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df1f6976f0a662f1d629a_art-deco-examples-1024x576.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df1f6976f0a662f1d629a_art-deco-examples-300x169.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df1f6976f0a662f1d629a_art-deco-examples-768x432.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df1f6976f0a662f1d629a_art-deco-examples-1536x864.jpeg 1536w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df1f6976f0a662f1d629a_art-deco-examples.jpeg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Der Illustrationsstil von <a href=\"https:\/\/eyeondesign.aiga.org\/dont-worry-these-gangley-armed-cartoons-are-here-to-protect-you-from-big-tech\/\" target=\"_blank\" rel=\"noreferrer noopener\">Alegria<\/a>, den <a href=\"https:\/\/buck.co\/work\/facebook-alegria\" target=\"_blank\" rel=\"noreferrer noopener\">BUCK f\u00fcr Facebook<\/a> 2017 entwarf, scheint viele Anleihen an die Art\u2011D\u00e9co\u2011Darstellung menschlicher Figuren zu nehmen. Die klaren Linien und Kurven, ovalen Gesichter, reduzierten Details und \u00fcberzogenen Proportionen erinnern an diesen k\u00fcnstlerischen Stil. Vielleicht ist ein neuer modernistischer Figurentyp, wie dieses eindrucksvolle Werk des Illustrators <a href=\"https:\/\/rodolforever.myportfolio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Rodolfo Reyes<\/a>, eine aktualisierte Version dieses Trends.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"565\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df37d1d1a50d18954a281_rodolfo-reyes-1024x565.jpeg\" alt=\"\" class=\"wp-image-6122\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df37d1d1a50d18954a281_rodolfo-reyes-1024x565.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df37d1d1a50d18954a281_rodolfo-reyes-300x166.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df37d1d1a50d18954a281_rodolfo-reyes-768x424.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df37d1d1a50d18954a281_rodolfo-reyes.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>7. Weniger Bilder im Hero-Bereich<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Jahr entscheiden sich viele Designer daf\u00fcr, Hero\u2011Sektionen und Landingpages mit Design sprechen zu lassen, statt sich auf Fotos oder Illustrationen zu verlassen. Hero\u2011Bilder erzeugen sofort einen gro\u00dfen visuellen Eindruck, aber manchmal lenkt ein auff\u00e4lliges Bild zu sehr ab. Das Weglassen kann den Fokus st\u00e4rker auf Stil und Inhalte legen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die vier Seiten von <a href=\"https:\/\/webflow.com\/website\/humain-ced623\" target=\"_blank\" rel=\"noreferrer noopener\">Humain<\/a>, <a href=\"https:\/\/webflow.com\/website\/SVZ\" target=\"_blank\" rel=\"noreferrer noopener\">SVZ<\/a>, <a href=\"https:\/\/heyday.xyz\/\" target=\"_blank\" rel=\"noreferrer noopener\">Heyday<\/a> und <a href=\"https:\/\/goradar.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">RADAR<\/a> sind unglaublich unterschiedlich, aber jede nutzt Layout, Typografie, Farbe und Form, um eine starke, einzigartige Markenidentit\u00e4t zu kommunizieren. Der Verzicht auf Bilder schafft au\u00dferdem etwas Geheimnis und animiert Besucher dazu, zu entdecken, was sich hinter dem Hero\u2011Bereich verbirgt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df5b92e3bad095ec091bc_heyday-website-1024x560.jpeg\" alt=\"\" class=\"wp-image-6123\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df5b92e3bad095ec091bc_heyday-website-1024x560.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df5b92e3bad095ec091bc_heyday-website-300x164.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df5b92e3bad095ec091bc_heyday-website-768x420.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df5b92e3bad095ec091bc_heyday-website.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df6e0d50aba2939c77071_radar-website-1024x560.jpeg\" alt=\"\" class=\"wp-image-6124\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df6e0d50aba2939c77071_radar-website-1024x560.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df6e0d50aba2939c77071_radar-website-300x164.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df6e0d50aba2939c77071_radar-website-768x420.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df6e0d50aba2939c77071_radar-website.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df51bd422291cee78bc7a_SVZ-WEBSITE-1024x559.jpeg\" alt=\"\" class=\"wp-image-6125\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df51bd422291cee78bc7a_SVZ-WEBSITE-1024x559.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df51bd422291cee78bc7a_SVZ-WEBSITE-300x164.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df51bd422291cee78bc7a_SVZ-WEBSITE-768x419.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df51bd422291cee78bc7a_SVZ-WEBSITE.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"549\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/615f72b6e46d0ba9f2f6db68_humain-1024x549.jpeg\" alt=\"\" class=\"wp-image-6126\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/615f72b6e46d0ba9f2f6db68_humain-1024x549.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/615f72b6e46d0ba9f2f6db68_humain-300x161.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/615f72b6e46d0ba9f2f6db68_humain-768x412.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/615f72b6e46d0ba9f2f6db68_humain.jpeg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">8. \u00dcberdimensionierte Typografie<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Au\u00dfergew\u00f6hnlich gro\u00dfe Typografie ist ein frischer, mutiger Designtend f\u00fcr dieses Jahr. Ab einer gewissen Gr\u00f6\u00dfe werden W\u00f6rter mehr zum grafischen Element als nur Teil des Flie\u00dftexts. Diese Technik ist vielseitig und funktioniert gleicherma\u00dfen in minimalistischen wie maximalistischen Designs und passt zu unterschiedlichen Stilrichtungen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Filmportfolio\u2011Website von <a href=\"https:\/\/www.eva-habermann.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Eva Habermann<\/a> (erstellt von Daniel Spatzek) legt gro\u00dfen Text \u00fcber eine sich drehende Filmrolle. Der Text blockiert teilweise das Bild und weckt die Neugier des Betrachters. Eine zweifarbige Sans\u2011Serif\u2011Schrift bietet ausreichend Kontrast, ohne unleserlich oder erdr\u00fcckend zu wirken.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"617\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df7e81f8b08196a249f2a_eva-habermann-website-1024x617.jpeg\" alt=\"\" class=\"wp-image-6127\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df7e81f8b08196a249f2a_eva-habermann-website-1024x617.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df7e81f8b08196a249f2a_eva-habermann-website-300x181.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df7e81f8b08196a249f2a_eva-habermann-website-768x463.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df7e81f8b08196a249f2a_eva-habermann-website.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Das Portfolio von David Calle nutzt gro\u00dfe Typografie, um ein schlichtes, ultra\u2011minimalistisches Design zu schaffen. Der neutrale Hintergrund und die Serifenschrift verbinden sich sch\u00f6n mit einer subtilen Animation beim Scrollen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df91e7a08903c29d5d6ea_david-calle-website-1024x612.jpeg\" alt=\"\" class=\"wp-image-6128\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df91e7a08903c29d5d6ea_david-calle-website-1024x612.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df91e7a08903c29d5d6ea_david-calle-website-300x179.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df91e7a08903c29d5d6ea_david-calle-website-768x459.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616df91e7a08903c29d5d6ea_david-calle-website.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>9. Interaktive Schriftarten<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2011Zustandswechsel wie bei einem Button. Moderne No\u2011Code\u2011Plattformen erleichtern inzwischen die Erstellung komplexerer Effekte ohne handgeschriebene Interaktionen. Bei interaktiven Schriftz\u00fcgen ist jedoch Lesbarkeit wichtig, da manche Nutzer von sich bewegendem Text abgelenkt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Website von <a href=\"https:\/\/www.dillinger.tv\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dillinger<\/a> verwendet eine Schrift, die beim \u00dcberfahren mit dem Cursor an Gewicht zunimmt. Beachte, dass der sich verdunkelnde Hintergrund die hervorgehobene Schrift besser lesbar macht \u2013 ein guter Usability\u2011Zug. Der \u00fcbergro\u00dfe Cursor tr\u00e4gt ebenfalls zur Einbindung bei. Der Designer Tim Ricks stellte eine klonbare Version dieser Seite zur Verf\u00fcgung, damit jeder sehen kann, wie der Effekt entsteht.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfb097a08903d25d6f1c5_directors-about-news-website-1024x588.jpeg\" alt=\"\" class=\"wp-image-6129\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfb097a08903d25d6f1c5_directors-about-news-website-1024x588.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfb097a08903d25d6f1c5_directors-about-news-website-300x172.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfb097a08903d25d6f1c5_directors-about-news-website-768x441.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfb097a08903d25d6f1c5_directors-about-news-website.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>10. Verantwortungsbewusste Bewegungsgestaltung<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn wir \u00fcber Interaktivit\u00e4t sprechen, ist es an der Zeit, \u00fcber verantwortungsbewusste Bewegungsgestaltung zu sprechen, die sich zum Standard entwickelt. Bewegung ist ein faszinierender Aspekt des Webdesigns, aber es ist leicht, zu \u00fcbertreiben oder Menschen Schaden zuzuf\u00fcgen, indem man Reisekrankheit (Motion Sickness) ausl\u00f6st. <a href=\"https:\/\/pubmed.ncbi.nlm.nih.gov\/30969528\/\" target=\"_blank\" rel=\"noreferrer noopener\">Motion Sickness<\/a> ist relativ verbreitet, daher sollten Animationen wie von der Maus ausgel\u00f6ste Skalierungen, Parallax\u2011Effekte oder Scrolljacking vermieden werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bewegung kann subtil und verantwortungsvoll eingesetzt werden. Corey Moen, Senior Brand Designer bei Webflow, ging ins Detail, wie man unter Ber\u00fccksichtigung der \u201eReduziere Bewegung\u201c-Einstellung auf macOS baut.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">For those that find delight in the motion:<br><br>1) Frame the full illustration in Figma<br>2) Duplicate frame for each element that will move<br>3) Export frames as SVG <br>4) Absolute position all on top of each other in Webflow<br>5) Move each SVG as desired with IX2 in Webflow<br><br>2\/4 <a href=\"https:\/\/t.co\/TQT2o91JwE\">pic.twitter.com\/TQT2o91JwE<\/a><\/p>&mdash; Corey Moen (@CoreyGMoen) <a href=\"https:\/\/twitter.com\/CoreyGMoen\/status\/1420422318128521220?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">July 28, 2021<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Das bedeutet jedoch nicht, dass man Bewegung als Allheilmittel nutzen sollte oder sich damit eine Ausrede verschafft, \u00fcberall Bewegung einzusetzen. \u00dcberm\u00e4\u00dfige Bewegung f\u00fchrt zu verwirrender UX, schadet vielen Nutzern und ist oft schlicht unn\u00f6tig.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>11. Collage-Illustration<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Collage\u2011artige Grafiken geben Website\u2011Illustrationen eine haptische Qualit\u00e4t, schaffen mehr Wei\u00dfraum 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\u00f6nung oder einen Filter auf Fotos anwenden, damit sie sich besser ins Gesamtdesign einf\u00fcgen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Site von <a href=\"https:\/\/www.vanta.com\/careers\" target=\"_blank\" rel=\"noreferrer noopener\">Vanta<\/a> verwendet collage\u2011artige Illustrationen auf der Landingpage und im gesamten Site\u2011Design. Die Bearbeitung ihrer Fotos, sodass sie wie ein Collage\u2011Element wirken, erlaubt es, Grafiken unregelm\u00e4\u00dfiger und versetzt zu platzieren und so das Grid aufzubrechen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfbe452cf55057897481a_vanta-website-1024x457.jpeg\" alt=\"\" class=\"wp-image-6130\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfbe452cf55057897481a_vanta-website-1024x457.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfbe452cf55057897481a_vanta-website-300x134.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfbe452cf55057897481a_vanta-website-768x342.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfbe452cf55057897481a_vanta-website.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>12. Abstrakte Illustrationen<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Abstrakte Illustrationen mit organischerer Textur und einem Hauch von Handarbeit werden beliebter. W\u00e4hrend saubere Vektorillustrationen und niedliche Darstellungen von Menschen und Objekten einige Jahre das Webdesign dominierten, suchen viele nach etwas Nat\u00fcrlicherem und Anspruchsvollerem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Solche Illustrationen lassen sich mit Tinte und Papier erstellen und scannen oder in Illustrationssoftware anlegen. Der Schl\u00fcssel ist, verschiedene Texturen und nat\u00fcrliche Unregelm\u00e4\u00dfigkeiten wie Aquarell, Tinte, Malerei, Siebdruckeffekte oder Papierstruktur einzubeziehen. Linien k\u00f6nnen weicher sein und Variation in der Strichst\u00e4rke aufweisen, wie sie durch Graphit oder Tinte entsteht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Abstrakt hei\u00dft nicht simpel. Diese <a href=\"https:\/\/dribbble.com\/shots\/13562065-Abstract-Blog-Illustrations-Outtakes\" target=\"_blank\" rel=\"noreferrer noopener\">Blog\u2011Illustrationen<\/a> des Designers <a href=\"https:\/\/www.adamho.com\/backdrop\" target=\"_blank\" rel=\"noreferrer noopener\">Adam Ho<\/a> sind ein perfektes Beispiel. Schau dir die neugierigen Komplexit\u00e4ten seiner Arbeiten an. Mit ultra\u2011feinen Linien und grafischen Formen wirken sie wie technische Zeichnungen, ohne ein spezifisches Objekt darzustellen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfc4cd422297bec7d8504_abstract-illustration-1024x768.jpeg\" alt=\"\" class=\"wp-image-6131\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfc4cd422297bec7d8504_abstract-illustration-1024x768.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfc4cd422297bec7d8504_abstract-illustration-300x225.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfc4cd422297bec7d8504_abstract-illustration-768x576.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616dfc4cd422297bec7d8504_abstract-illustration.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>13. Verl\u00e4ufe mit K\u00f6rnung<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Verl\u00e4ufe sind bereits popul\u00e4r, aber mit hinzugef\u00fcgter K\u00f6rnung entsteht ein ganz anderer Effekt. Ein perfekter Verlauf wirkt elegant und modern, vermittelt ein futuristisches oder gl\u00e4nzendes, technologisches Gef\u00fchl. K\u00f6rnung verankert ein Design, verleiht Textur und l\u00e4sst es nat\u00fcrlicher wirken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je nach Behandlung kann K\u00f6rnung Film, Fotografie oder Druckmedien nachahmen. Feine Mehrfarbenk\u00f6rnung kann wie analoger Film wirken, w\u00e4hrend grobe monochrome K\u00f6rnung an ein Siebdruck\u2011Plakat erinnert. K\u00f6rnung und damit versehene Verl\u00e4ufe k\u00f6nnen selektiv oder seitenweit verwendet werden, als Vollseitenhintergrund oder innerhalb einzelner Objekte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wir haben eine Reihe k\u00f6rniger Verl\u00e4ufe auf der Website der Webflow\u2011Konferenz 2021 \u201eNo\u2011Code\u201c verwendet. Die Verl\u00e4ufe kamen in animierter Grafik, Hintergr\u00fcnden und Elementen der Konferenzseite zum Einsatz; wir w\u00e4hlten eine mittlere K\u00f6rnung, die einen Druckmedien\u2011Effekt erzeugt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed57aab40664adeead2b5_no-code-conf-image-1024x616.jpeg\" alt=\"\" class=\"wp-image-6132\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed57aab40664adeead2b5_no-code-conf-image-1024x616.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed57aab40664adeead2b5_no-code-conf-image-300x181.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed57aab40664adeead2b5_no-code-conf-image-768x462.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed57aab40664adeead2b5_no-code-conf-image.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>14. Linework<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Trend, der zugleich modern und retro wirkt, ist das Arbeiten mit Linien. Designer k\u00f6nnen Linien nutzen, um Sektionen, \u00dcberschriften, Abs\u00e4tze und Produktgalerien zu umrei\u00dfen oder ein dynamisches Raster f\u00fcr die gesamte Seite zu schaffen. F\u00fcge Strichillustrationen (abstrakt oder repr\u00e4sentativ) hinzu, um diesen Stil zu verst\u00e4rken. Bei diesem Design wirkt die Strichst\u00e4rke am st\u00e4rksten auf das Endergebnis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Apart Agency\u2011Website 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed6911085a4cae12b54e2_apart-agency-1024x543.jpeg\" alt=\"\" class=\"wp-image-6133\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed6911085a4cae12b54e2_apart-agency-1024x543.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed6911085a4cae12b54e2_apart-agency-300x159.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed6911085a4cae12b54e2_apart-agency-768x408.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed6911085a4cae12b54e2_apart-agency-1536x815.jpeg 1536w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed6911085a4cae12b54e2_apart-agency.jpeg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.breef.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Auch Breef<\/a> verwendet feine Linien, kombiniert diese aber mit leichterer Typografie und illustrativen grafischen Elementen. Mit ged\u00e4mpfter Farbpalette und durchgestrichenen Hover\u2011Effekten wirkt das Gesamtdesign l\u00e4ssig, wie von erwachsenen Millennials. Die Seite muss viele Informationen vermitteln, und klare Abschnittsaufteilungen, Illustrationen und ein schlichter Hintergrund helfen, den Inhalt hervorzuheben.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed7100ac17475a5c6c14c_breef-1024x543.jpeg\" alt=\"\" class=\"wp-image-6134\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed7100ac17475a5c6c14c_breef-1024x543.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed7100ac17475a5c6c14c_breef-300x159.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed7100ac17475a5c6c14c_breef-768x408.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed7100ac17475a5c6c14c_breef-1536x815.jpeg 1536w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed7100ac17475a5c6c14c_breef.jpeg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.cpgd.xyz\/\" target=\"_blank\" rel=\"noreferrer noopener\">CPGD<\/a> nutzt fette schwarze Linien f\u00fcr einen gro\u00dfartigen grafischen Effekt. Dieses Design wirkt j\u00fcnger und verspielter. Jede Sektion innerhalb des ausgerichteten Rasters hat eine eigene Farbe, was hilft, Inhalte zu unterscheiden, und die Farb\u00e4nderung beim Hover leitet den Nutzer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed93dc5d58858b893e40a_cpgd-1024x542.jpeg\" alt=\"\" class=\"wp-image-6135\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed93dc5d58858b893e40a_cpgd-1024x542.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed93dc5d58858b893e40a_cpgd-300x159.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed93dc5d58858b893e40a_cpgd-768x407.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed93dc5d58858b893e40a_cpgd.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>15. Geteilte Bildschirm\u2011Websites<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Eine interessante M\u00f6glichkeit, ein Design aufzubrechen, ist ein geteiltes Bildschirmlayout, das wir in letzter Zeit h\u00e4ufiger beobachten. Das Doppel\u2011Layout bietet Kontrast, visuelles Interesse und eine nat\u00fcrliche Trennung von Inhalten. Es ist auch eine gute Gelegenheit, mit Farben zu spielen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed9ece0d3811ea6e58f67_var-but-1-1024x542.jpeg\" alt=\"\" class=\"wp-image-6136\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed9ece0d3811ea6e58f67_var-but-1-1024x542.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed9ece0d3811ea6e58f67_var-but-1-300x159.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed9ece0d3811ea6e58f67_var-but-1-768x407.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616ed9ece0d3811ea6e58f67_var-but-1.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">var!\uff0db\u016bt! \u2013 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616eda39ed0a9882cb4b50ec_var-but-2-1024x542.jpeg\" alt=\"\" class=\"wp-image-6137\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616eda39ed0a9882cb4b50ec_var-but-2-1024x542.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616eda39ed0a9882cb4b50ec_var-but-2-300x159.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616eda39ed0a9882cb4b50ec_var-but-2-768x407.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616eda39ed0a9882cb4b50ec_var-but-2.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>16. Mehr Glassmorphism<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ein sch\u00f6ner Trend dieses Jahres ist Glassmorphism. Eine Kombination aus Transparenz, Unsch\u00e4rfe und Bewegung l\u00e4sst Elemente visuell wie Glas wirken. Diese Technik l\u00e4sst sich in Logos, Illustrationen oder ganzen Sektionen einsetzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der Schl\u00fcssel 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 \u201emilchigem Glas\u201c innerhalb eines Bildes erm\u00f6glicht Transparenz, ohne visuelles Durcheinander zu erzeugen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.galp.in\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tyler Galpin<\/a> verwendet Glassmorphism, um ein faszinierendes, bewegtes Logo zu erzeugen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"564\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edac5e7b078225a6e4241_glassmorphism-logo-1024x564.jpeg\" alt=\"\" class=\"wp-image-6138\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edac5e7b078225a6e4241_glassmorphism-logo-1024x564.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edac5e7b078225a6e4241_glassmorphism-logo-300x165.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edac5e7b078225a6e4241_glassmorphism-logo-768x423.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edac5e7b078225a6e4241_glassmorphism-logo-1536x847.jpeg 1536w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edac5e7b078225a6e4241_glassmorphism-logo.jpeg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/webflow.com\/website\/Glass-credit-card-interaction\" target=\"_blank\" rel=\"noreferrer noopener\">Stefan Velikov<\/a> nutzt Glassmorphism in diesem klonbaren Webflow\u2011Projekt, um die Illustration einer Kreditkarte vom Bildschirm \u201eherauskommen\u201c zu lassen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edb2ec2656c6ab11f78c5_glassmorphism-credit-card-1024x559.jpeg\" alt=\"\" class=\"wp-image-6139\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edb2ec2656c6ab11f78c5_glassmorphism-credit-card-1024x559.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edb2ec2656c6ab11f78c5_glassmorphism-credit-card-300x164.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edb2ec2656c6ab11f78c5_glassmorphism-credit-card-768x420.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edb2ec2656c6ab11f78c5_glassmorphism-credit-card.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>17. Weniger Neumorphism<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Neumorphism, eine Neuinterpretation des <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/skeuomorphism\" target=\"_blank\" rel=\"noreferrer noopener\">Skeuomorphismus<\/a> im Design, ist ein minimalistischer Stil, der 2020 f\u00fcr Apps und Websites popul\u00e4r wurde. Er imitiert modernes Ger\u00e4tedesign (denk an eine neue Art von <a href=\"https:\/\/9to5mac.com\/2020\/07\/22\/apple-tv-remote-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apple\u2011TV\u2011Fernbedienung<\/a> oder einen alten <a href=\"https:\/\/arstechnica.com\/gadgets\/2011\/10\/10-years-of-the-ipod-a-design-retrospective\/\" target=\"_blank\" rel=\"noreferrer noopener\">iPod<\/a>) mit monochromen, niedrig kontrastierenden Elementen, feinen Schatten und dem Verzicht auf scharfe Linien und Kanten. <a href=\"https:\/\/dribbble.com\/shots\/9393020-Mi-Remote-Control-Mobile-app\" target=\"_blank\" rel=\"noreferrer noopener\">Hier ein Beispiel von Dribbble<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edbc1c2656c77851fdbf0_neumorphism-1024x768.jpeg\" alt=\"\" class=\"wp-image-6140\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edbc1c2656c77851fdbf0_neumorphism-1024x768.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edbc1c2656c77851fdbf0_neumorphism-300x225.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edbc1c2656c77851fdbf0_neumorphism-768x576.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edbc1c2656c77851fdbf0_neumorphism.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Neumorphism f\u00e4llt auf, weil es sich von den meisten Webprojekten unterscheidet, aber manchmal sind Standards deshalb Standard, weil sie einfach besser funktionieren. Der Grund, warum wir \u201eweniger Neumorphism\u201c als Trend gew\u00e4hlt haben, ist einfach: <a href=\"https:\/\/uxdesign.cc\/lets-talk-neumorphism-and-accessibility-44a48a6ace72\" target=\"_blank\" rel=\"noreferrer noopener\">der Stil ist schlecht f\u00fcr die Zug\u00e4nglichkeit<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der Mangel an Kontrast und klarer Differenzierung macht Sites in diesem Stil f\u00fcr sehbehinderte Nutzer sehr schwierig zu bedienen, und die in Schatten dargestellten Elemente machen es schwer zu erkennen, welchen Button man dr\u00fcckt. Die CDC gibt die Zahl der Amerikaner mit Sehbehinderung mit \u00fcber <a href=\"https:\/\/www.cdc.gov\/visionhealth\/risk\/burden.htm\" target=\"_blank\" rel=\"noreferrer noopener\">3,22 Millionen<\/a> an. Zug\u00e4ngliches Design ist nicht nur f\u00fcr Menschen mit Behinderungen wichtig. Jeder erlebt situative Sehschwierigkeiten \u2013 etwa durch blendendes Licht \u2013 und Neumorphism ist in solchen Situationen schwer zu lesen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.cdc.gov\/media\/releases\/2015\/p0730-us-disability.html\" target=\"_blank\" rel=\"noreferrer noopener\">53 Millionen<\/a> Menschen allein in den USA leben mit einer Behinderung, und jeder wird irgendwann situative Beeintr\u00e4chtigungen erfahren. Barrierefreiheit ist weit mehr als ein Trend: sie ist notwendig und sollte bei Webdesign immer eine zentrale Rolle spielen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>18. Inklusive Sprache<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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\u00f6\u00dferer Sensibilit\u00e4t f\u00fcr die Wirkung von Sprache sein. Inklusivere Texte machen das Web f\u00fcr mehr Menschen einladender und zug\u00e4nglicher.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Webflow ist unser Referenzpunkt f\u00fcr <a href=\"http:\/\/brand-at.webflow.io\/voice-and-tone#inclusive-language\" target=\"_blank\" rel=\"noreferrer noopener\">inklusive Sprache<\/a>, die wir zur Steuerung aller unserer schriftlichen Inhalte nutzen und \u00f6ffentlich in unserem Brand\u2011Designsystem zug\u00e4nglich gemacht haben. Sprachrichtlinien k\u00f6nnen eine n\u00fctzliche Funktion f\u00fcr jede Unternehmenswebsite sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es geht nicht nur darum, was du sagst, sondern auch wie und wo du es sagst. Alt\u2011Text, gut lesbarer Text (Schrift, Gr\u00f6\u00dfe und Farbe) und das Vermeiden von text als Bild sind alles Wege, sicherzustellen, dass alle lesen k\u00f6nnen, was deine Site zu sagen hat, unabh\u00e4ngig von Sprache oder F\u00e4higkeiten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>19. Geschlechtsneutrales Design<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ein weiterer Ansatz, der sich als Standard durchsetzt, ist geschlechtsneutrales Webdesign, das zunehmend universell \u00fcbernommen wird. Der erste offensichtliche Schritt ist, unn\u00f6tige geschlechtsspezifische Details wegzulassen, die einst allgegenw\u00e4rtig waren: \u00fcberm\u00e4\u00dfig rosa Pflege\u2011Websites oder hyper\u2011m\u00e4nnliche Themes mit Feuerw\u00f6lfen und Messern f\u00fcr Camping\u2011Ausr\u00fcstung. Frauen kaufen Elektrowerkzeuge, M\u00e4nner kaufen Hautpflege \u2013 trotzdem trifft man gesellschaftliche Annahmen schnell unreflektiert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es ist mittlerweile Standard, mehr Geschlechtsoptionen und Pronomen in Formularen und Dropdowns anzubieten. <a href=\"https:\/\/www.pewresearch.org\/fact-tank\/2019\/12\/18\/gender-options-on-forms-or-online-profiles\/\" target=\"_blank\" rel=\"noreferrer noopener\">42 Prozent der Amerikaner<\/a> 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 <a href=\"https:\/\/opensenselabs.com\/blog\/articles\/gender-inclusive-web-design\" target=\"_blank\" rel=\"noreferrer noopener\">Snapchat<\/a> gew\u00e4hlt hat.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edc71c23362118c2d56a0_google-gender-neutral-option-1-1024x541.jpeg\" alt=\"\" class=\"wp-image-6141\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edc71c23362118c2d56a0_google-gender-neutral-option-1-1024x541.jpeg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edc71c23362118c2d56a0_google-gender-neutral-option-1-300x158.jpeg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edc71c23362118c2d56a0_google-gender-neutral-option-1-768x406.jpeg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2022\/01\/616edc71c23362118c2d56a0_google-gender-neutral-option-1.jpeg 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Beim Verfassen von Text ist das neue Standard\u2011Muster, \u201ethey\u201c statt \u201ehe or she\u201c zu w\u00e4hlen, wenn kein Geschlecht angegeben ist. Auch im E\u2011Commerce werden viele Seiten geschlechtsneutral, indem sie Kleidung nicht mehr strikt nach Geschlecht sortieren oder mehrere Gr\u00f6\u00dfen\u2011 und Modellvarianten an verschiedenen K\u00f6rpern zeigen, um Produkte zug\u00e4nglicher zu machen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vermeide es, Annahmen dar\u00fcber zu treffen, welche Interessen oder welches Geschlecht deine Nutzer haben k\u00f6nnten. Das Vermeiden solcher Annahmen ist respektvoller und wird von den Besuchern gesch\u00e4tzt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>20. Priorit\u00e4t f\u00fcr Seitenladegeschwindigkeit<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Technisch gesehen ist die Seitenladegeschwindigkeit in diesem Jahr eine vorrangige \u00dcberlegung f\u00fcr Webentwickler geworden. <a href=\"https:\/\/www.forbes.com\/sites\/theyec\/2021\/04\/12\/how-googles-page-experience-update-announcement-can-benefit-search-engine-optimization\/?sh=bd5a9576e110\" target=\"_blank\" rel=\"noreferrer noopener\">Googles Algorithmus\u2011Update 2021<\/a> macht Geschwindigkeit wichtiger f\u00fcr SEO. Das spiegelt auch h\u00f6here Nutzererwartungen an Performance wider: <a href=\"https:\/\/www.blog.google\/products\/admanager\/the-need-for-mobile-speed\/\" target=\"_blank\" rel=\"noreferrer noopener\">53% der Nutzer<\/a> verlassen eine Seite, wenn das Laden l\u00e4nger als 3 Sekunden dauert. Die Zeiten des geduldigen Wartens auf Ladebildschirme sind vorbei.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights<\/a> oder <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a> sind Tools, die zur Bewertung der Seitenladeoptimierung genutzt werden k\u00f6nnen. Es gibt einfache Schritte, die Entwickler (oder ihre Plattform) unternehmen k\u00f6nnen, um schnelle Ladezeiten sicherzustellen, wie Bildoptimierung und Lazy\u2011Loading f\u00fcr Offscreen\u2011Bilder. Auch die Beschr\u00e4nkung der verwendeten Schriftarten hilft. Vermeide au\u00dferdem Plattformen, die zu stark auf Plugins angewiesen sind, da das die Performance stark beeintr\u00e4chtigen kann.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>21. Mit dynamischen Inhalten bauen<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/university.webflow.com\/lesson\/intro-to-dynamic-content\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamische Inhalte<\/a> erlauben Designern, schneller zu bauen, gr\u00f6\u00dfere Projekte zu erstellen und mehr Komplexit\u00e4t einzubauen, ohne den Aufwand f\u00fcr \u00c4nderungen zu erh\u00f6hen. Mehr verf\u00fcgbare Datenbank\u2011Tools und No\u2011Code\u2011Plattformen bedeuten, dass mehr Menschen Inhalte dynamisch erstellen k\u00f6nnen, unabh\u00e4ngig von ihrer technischen Erfahrung. Das ist ein viel effizienterer Weg, f\u00fcrs Web zu bauen, und wird zunehmend \u00fcbernommen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dynamischer Inhalt basiert auf einer Datenbank, die mit wiederholbaren Strukturen verbunden ist. Du kannst die Struktur an einer Stelle \u00e4ndern und gleichzeitig alle Blog\u2011Beitr\u00e4ge aktualisieren, ohne jeden einzeln bearbeiten zu m\u00fcssen. Das ist ideal f\u00fcr Seiten mit st\u00e4ndigem Content\u2011Wechsel wie E\u2011Commerce, Blogs, Portfolios, Restaurantmen\u00fcs oder Nachrichtenseiten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Statischer Content wird weiterhin seine Anwendungen haben, aber die Erstellung dynamischer Inhalte setzt sich im Web immer mehr durch.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>22. No\u2011Code f\u00fcr mehr Teams<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wir sehen immer mehr Teams, die No\u2011Code in ihre Workflows integrieren und von der Geschwindigkeit und Unabh\u00e4ngigkeit profitieren. No\u2011Code ist zu einer Bewegung geworden, die <a href=\"https:\/\/chiefmartec.com\/2020\/11\/martech-2030-trend-1-code-citizen-creators\/\" target=\"_blank\" rel=\"noreferrer noopener\">Citizen Creator<\/a> erm\u00f6glicht, f\u00fcrs Web zu bauen, ohne Programmierkenntnisse. Wahrscheinlich nutzt dein Team bereits eine Vielzahl von No\u2011Code\u2011Tools, um die Arbeit effizienter zu machen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Unternehmen bedeutet das, dass mehr Teams Web\u2011Ressourcen selbst erstellen k\u00f6nnen. Personalabteilungen k\u00f6nnen Trainingsseiten, Ressourcenarchive oder Unternehmensverzeichnisse anlegen. Designteams k\u00f6nnen 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\u00fcr spezielle Kampagnen oder lokale Initiativen erstellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Unabh\u00e4ngigkeit durch No\u2011Code er\u00f6ffnet mehr M\u00f6glichkeiten f\u00fcr Innovation und Experimente und hilft Teams, deutlich schneller zu arbeiten. Wir erwarten, dass deutlich mehr Unternehmen No\u2011Code\u2011Tools in ihre t\u00e4glichen Workflows integrieren werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Wir sind gespannt, wie sie 2022 umgesetzt werden<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es hat Spa\u00df gemacht, die Sites zu durchst\u00f6bern, die diese Liste inspiriert haben. Wir erwarten ein Jahr voller Verspieltheit und kreativer Neuausrichtung, w\u00e4hrend Designer sich von manchem entfernen, das in den letzten Jahren allgegenw\u00e4rtig geworden ist. Wir freuen uns darauf, zu sehen, was ihr 2022 f\u00fcrs Web erschaffen werdet.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diese 22 Webdesign-Trends f\u00fcr 2022 werden dabei helfen, zu informieren und zu inspirieren, was Menschen f\u00fcrs Web bauen. Tauche ein. Ein allgemeiner Trend, den wir f\u00fcr das kommende Jahr sehen, ist ein st\u00e4rkeres Gef\u00fchl von Verspieltheit im Webdesign. Designer haben&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6132,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"class_list":["post-7123","post","type-post","status-publish","format-standard","has-post-thumbnail","category-design"],"_links":{"self":[{"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/posts\/7123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/comments?post=7123"}],"version-history":[{"count":0,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/posts\/7123\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/media\/6132"}],"wp:attachment":[{"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/media?parent=7123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/categories?post=7123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/tags?post=7123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}