{"id":1601,"date":"2016-12-13T08:31:47","date_gmt":"2016-12-13T07:31:47","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=1601"},"modified":"2016-12-13T08:36:16","modified_gmt":"2016-12-13T07:36:16","slug":"webdesign-trends-2017","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/webdesign-trends-2017\/","title":{"rendered":"10 Webdesign Trends, die 2017 sicher kommen werden"},"content":{"rendered":"<p>Das neue Jahr ist nur noch ein paar Wochen entfernt, daher wird es Zeit einen Blick auf die Zukunft des Webdesigns zu werfen.<\/p>\n<p>W\u00e4hrend sich die Technologie weiterentwickelt und immer mehr in jeden Bereich unseres Lebens vordringt, verlangen User mehr und mehr von ihren User-Erfahrungen (UX) im Netz.<\/p>\n<p>Pers\u00f6nlich, interaktiv und relevant sind drei Schlagworte, die User von ihrer UX erwarten.<\/p>\n<p>Was im Prinzip bedeutet, dass Webdesigner nun vor der Herausforderung stehen, eine Webseite zu entwickeln, die w\u00e4hrend des gesamten Prozesses ihre Nutzer versteht und auf sie eingeht.<\/p>\n<p><!--more--><\/p>\n<h2>Was gibt es 2017 Neues?<\/h2>\n<p>Letztes Jahr habe ich \u00fcber\u00a0 <a href=\"http:\/\/usersnap.com\/blog\/web-design-trends-2016\/\"  >7 Trends im Webdesign f\u00fcr 2016<\/a> geschrieben. Mein Artikel erhielt eine Menge Aufmerksamkeit, Kommentare und Fragen. Daher beschlossen wir, nicht nur den Artikel vom Vorjahr zu aktualisieren, sondern Ihnen auch gleich einen neuen zu liefern, vollgepackt mit Einblicken in die neuesten Trends im Webdesign f\u00fcr 2017.<\/p>\n<p>Fangen wir an.<\/p>\n<h2>1. Das Ende des traditionellen Webdesigns<\/h2>\n<p>Das Konzept des Webdesigns im traditionellen Sinn verblasst langsam. Oder wie Eric Meyer in einer k\u00fcrzlichen Ausgabe des Offscreen Magazins sagte, h\u00f6re er auf, sich als Webdesigner zu bezeichnen, und nennt sich jetzt \u201cErfahrungsdesigner\u201d (&#8220;Experience Designer&#8221;).<\/p>\n<p>Traditionelles Webdesign war nichts weiter als der Anzug, den ein Techie trug, um f\u00fcr sein Publikum gut auszusehen.<\/p>\n<p>Aber modernes Webdesign ist mehr als das. Es hat sich in etwas Gr\u00f6\u00dferes verwandelt. Webdesigner (oder Erfahrungsdesigner) sorgen nicht mehr nur daf\u00fcr, dass Webseiten \u201csch\u00f6n aussehen\u201d. Stattdessen m\u00fcssen sie die Erfahrung des Users und deren Geschichten verstehen.<\/p>\n<p>Weiterer empfohlener Artikel: <a href=\"http:\/\/usersnap.com\/de\/blog\/webdesign-erfahrungsdesign\/\"  >Webdesign ist tot. Lang lebe Erfahrungsdesign<\/a>.<\/p>\n<h2>2. Dialogorientiertes UI<\/h2>\n<p>2016 war ein gro\u00dfes Jahr f\u00fcr (Chat-) Bots und dialogorientierte Interfaces. Oder wie es Chris Messina, der Erfinder des Hashtags und ehemaliger Google-Mitarbeiter, ausdr\u00fcckte:<\/p>\n<p><b><i>\u201c2016 wird das Jahr des Handels mit Konversationen.\u201d<\/i><\/b><\/p>\n<p>Chris erw\u00e4hnte in seinem Artikel, dass Menschen durch Chat, Nachrichten und andere nat\u00fcrliche sprachliche Interfaces mit Unternehmen, Diensten und Bots interagieren werden.<\/p>\n<p>W\u00e4hrend Messaging-Plattformen (so wie Slack, Facebook Messenger oder WeChat) an Sozialen Netzwerken und App-Downloads <a href=\"http:\/\/www.businessinsider.com\/the-messaging-app-report-2015-11?IR=T\"  target=\"_blank\"  >vorbeiziehen<\/a>, fangen Firmen an dar\u00fcber nachzudenken, wie sie sich diesen Trend zu Nutze machen k\u00f6nnen.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1608\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-design-trend17-1024x592.png\" alt=\"conversational-ui-design-trend17\" width=\"704\" height=\"407\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-design-trend17-1024x592.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-design-trend17-300x173.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-design-trend17-140x81.png 140w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-design-trend17.png 1100w\" sizes=\"(max-width: 704px) 100vw, 704px\" \/><\/p>\n<p>Deshalb wird das Design von dialogorientierten User-Interfaces 2017 ein immer wichtigeres Thema f\u00fcr die meisten Webdesigner.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1606 size-full\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-2017-trends.png\" alt=\"conversational-ui-2017-trends\" width=\"567\" height=\"320\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-2017-trends.png 567w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-2017-trends-300x169.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/conversational-ui-2017-trends-140x79.png 140w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><\/p>\n<p>Es gibt immer noch viele Fragen, die zu beantworten sind, aber seien Sie sicher: dialogorientierte Interfaces und deren Erfahrungen werden 2017 ein gro\u00dfes Thema.<\/p>\n<h2>3. GIFs &amp; andere Animationen<\/h2>\n<p>Viele Webseiten und Apps nutzen schon seit langem Animationen. Eine neue Entwicklung ist, dass GIFs zum Mainstream werden.<\/p>\n<p>So wie es Ash von Buffer <a href=\"https:\/\/blog.bufferapp.com\/animated-gifs\"  target=\"_blank\"  >ausdr\u00fcckt<\/a>:<\/p>\n<p><b><i>\u201cGIFs sind toll. Und sie sind \u00fcberall.\u201d<\/i><\/b><\/p>\n<p>Jetzt auch in Facebook und Twitter integriert, k\u00f6nnen GIFs auch f\u00fcr Ihr Webdesign genutzt werden.<\/p>\n<p>Aber \u00fcbertreiben Sie es nicht mit ihnen &#8211; sie ziehen schnell alle Aufmerksamkeit des Users auf sich. GIFs erlauben es Ihnen, eine anschauliche Produkterfahrung zu liefern, einen Arbeitsfluss zu erkl\u00e4ren oder einfach einen How-To-Guide f\u00fcr Ihre User bereitzustellen.<\/p>\n<p><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"\/\/giphy.com\/embed\/l396NmcUKUvD0AXXa\" width=\"480\" height=\"275\" frame allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Und mit mehreren Erstellungstools f\u00fcr GIFs (wie Photoshop, Giphy oder record.it) sind Webdesigner in ihrem Designprozess nicht eingeschr\u00e4nkt.<\/p>\n<p>Um es einfach auszudr\u00fccken: Wir bei <a href=\"https:\/\/usersnap.com\"  >Usersnap<\/a> lieben <a href=\"http:\/\/giphy.com\/channel\/usersnap\"  target=\"_blank\"  >GIFs<\/a>.<\/p>\n<h2>4. Die n\u00e4chste Generation des Responsive Designs<\/h2>\n<p>Responsive Design wird weiter dominieren, da es einer der effektivsten Wege ist, eine gute UX zu erreichen.<\/p>\n<p>CSS Media-Queries bieten Webseiten Flexibilit\u00e4t und erlauben es ihnen, sich auf die verschiedenen Ger\u00e4te einzustellen, von denen auf sie zugegriffen wird.<\/p>\n<p>Im April 2016 ver\u00e4nderte Google seinen Ranking-Algorithmus, um Webseiten zu priorisieren, die optimierten Inhalt haben. N\u00e4chstes Jahr werden wir sehen wie Firmen hart daran arbeiten, ihre Google-R\u00e4nge wieder nach vorne zu treiben.<\/p>\n<p>Als Anbieter einer Webseite m\u00fcssen wir jedoch die Situation akzeptieren, dass es hier keinen allgemeinen Ansatz gibt. Ich glaube daran, dass diese Webseiten dadurch, dass sie weniger Optionen und responsive Ansichten anbieten, h\u00f6here Conversion-Raten haben werden.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1604\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/responsinator-mobile-website-testing.png\" alt=\"responsinator-mobile-website-testing\" width=\"700\" height=\"496\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/responsinator-mobile-website-testing.png 700w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/responsinator-mobile-website-testing-300x213.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/responsinator-mobile-website-testing-140x99.png 140w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>5. Minimalistisches Webdesign<\/h2>\n<p><b>Minimalismus<\/b> wird 2017 auf ein neues Level gehoben, sodass User nicht mehr mit einer Homepage begr\u00fc\u00dft werden, sondern mit einer \u201cKarte\u201d.<\/p>\n<p>Dies sind die Einstiegspunkte, die als Zugang zu mehr Informationen dienen. Innerhalb der Webseite selbst k\u00f6nnen mehrere Karten auch dazu benutzt werden, ein Thema visuell anzudeuten und User dazu zu bringen, darauf zu klicken.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1609\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/Netflix-webdesign-trends-1024x660.png\" alt=\"Netflix-webdesign-trends\" width=\"724\" height=\"467\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/Netflix-webdesign-trends-1024x660.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/Netflix-webdesign-trends-300x193.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/Netflix-webdesign-trends-140x90.png 140w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/Netflix-webdesign-trends.png 1100w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><\/p>\n<p>Netflix ist ein Beispiel einer Webseite, die angefangen hat Karten mit gro\u00dfem Erfolg zu verwenden. Die Bilder erkl\u00e4ren mehr \u00fcber die Serie oder den Film als eine kurze Zusammenfassung, und sie brauchen weniger Platz. Dieser Minimalismus wird auch f\u00fcr Men\u00fcs und Navigation gelten, welche beide in Zukunft so einfach wie m\u00f6glich gehalten werden.Im Prinzip wollen Menschen heute einfache, nicht-\u00fcberladene und visuell erkl\u00e4rende Webdesigns.<\/p>\n<h2>6. Visualisierung von Daten<\/h2>\n<p>Daten und Analytics sind heute wichtiger als je zuvor, und gro\u00dfe Marken bieten Ihren Usern eine Chance, die Statistiken selbst zu sehen.<\/p>\n<p>Die Informationen auf visuelle Arten zu pr\u00e4sentieren erh\u00f6ht die Interaktion der User mit diesen Informationen. Das ist besonders n\u00fctzlich, wenn es darum geht die Nutzerverteilung zu verstehen. Farbliche Diagramme wie die, die Sie in Tableau erstellen k\u00f6nnen, sind auff\u00e4llig und ziehen die Aufmerksamkeit der User auf sich.<img decoding=\"async\" class=\"aligncenter wp-image-1610\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/tableau.gif\" alt=\"tableau\" width=\"700\" height=\"467\" \/><\/p>\n<h2>7. Weniger Stock-Fotos, mehr Authentizit\u00e4t<\/h2>\n<p>Das ist ein interessanter Trend im Webdesign, der es Wert ist erw\u00e4hnt zu werden. Es ist ein einfacher aber kurioser Trend.<\/p>\n<p>W\u00e4hrend ich die letzten paar Monate im Netz browste hatte ich das Gef\u00fchl, dass wir einen R\u00fcckgang von Stock-Fotos auf Webseiten sehen. Als Menschen bevorzugen wir individuelle Fotos, die \u00a0wirklich einen Bezug zu der Firma oder dem Gesch\u00e4ft haben, vor Stock Bildern.<\/p>\n<p>Ich habe au\u00dferdem das Gef\u00fchl, dass Webdesigner lieber \u00fcberhaupt kein Bild verwenden w\u00fcrden als ein Stock-Foto.<\/p>\n<p>Fotografie ist eine Kunstform, die in den letzten Jahren vielleicht ein bisschen verloren gegangen ist. Aber 2017 kommt sie zur\u00fcck, und das st\u00e4rker als je zuvor. Das Wichtige, woran Sie sich jedoch erinnern sollten ist, dass Ihre Webseite einen Zweck hat. Und daher muss alles, was sich auf ihr befindet, inklusive der Bilder, ebenfalls einen Zweck erf\u00fcllen.<\/p>\n<p>Bilder Ihrer Mitarbeiter (Meet the Team) sind ebenfalls popul\u00e4r &#8211; geben Sie der Marke ein Gesicht.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1611\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/web-design-trends2017-1-1024x697.png\" alt=\"web-design-trends2017\" width=\"704\" height=\"479\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/web-design-trends2017-1-1024x697.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/web-design-trends2017-1-300x204.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/web-design-trends2017-1-140x95.png 140w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/web-design-trends2017-1.png 1100w\" sizes=\"(max-width: 704px) 100vw, 704px\" \/><\/p>\n<p style=\"text-align: center;\"><i>Screenshot von unseren Freunden von Codeship<\/i><\/p>\n<p>Nicht nur authentische Bilder sind auf dem Vormarsch. Cartoons, Comics und andere Illustrationen sind es ebenfalls. Besonders unter Tech-Gemeinden kann ein Comic ein tolles Format sein, ein bestimmtes Thema zu diskutieren oder etwas im Detail zu erkl\u00e4ren.<\/p>\n<h2>8. Materialdesign<\/h2>\n<p>Materialdesign wurde in den letzten Jahren von Google entwickelt und wird immer weiter in ihren Anwendungen implementiert, einschlie\u00dflich in Gmail, Google Maps, Google Drive und YouTube.<\/p>\n<p>Materialdesign taucht als Suchbegriff seit Anfang 2013 auf, aber wurde erst 2015 zum Mainstream.<\/p>\n<p>Es ist eine Art des Designs, um eine bedeutende und wichtige Hierarchie auf der Seite zu schaffen, den Fokus der User auf verschiedene Bereiche zu lenken, und w\u00e4hrend alledem auf die Aktionen der User zu reagieren. Letzteres nennt sich Material Motion.<\/p>\n<p>Materialdesign nutzt geometrische Formen, um Ihre Seite visuell zu verbessern und Tiefe und Realismus zu schaffen. Es wird auch im Rest des Webs immer popul\u00e4rer dank seines \u201clebenden\u201d Status, seiner Flexibilit\u00e4t und der Kompatibilit\u00e4t mit allen Ger\u00e4ten.<\/p>\n<p>Es gibt eine fortlaufende Diskussion \u00fcber Materialdesign und seine Zukunft.<\/p>\n<p>Um mehr \u00fcber Materialdesign zu lernen, sehen Sie sich Googles Einf\u00fchrung an:<\/p>\n<p><a href=\"https:\/\/material.google.com\/#introduction-principles\"  target=\"_blank\"  >https:\/\/material.google.com\/#introduction-principles<\/a><\/p>\n<h2>9. Long-Scrolling-Webseiten<\/h2>\n<p>Es gibt Vor- und Nachteile von Long-Scrolling-Webseiten. Alles in allem sehen wir mehr und mehr von ihnen, vor allem wegen dem Erfolg von scheinbar endlosen Seiten wie Facebook, Twitter oder Instagram.<\/p>\n<p>Diese drei Seiten erlauben es den Usern, stundenlang zu scrollen und st\u00e4ndig neuen Inhalt zu sehen. Als Mitglieder der menschlichen Rasse sind wir es gewohnt, dass die Action sofort passiert. Viele Seiten schaffen Men\u00fcs und Tabs ab und stellen stattdessen alles auf eine, lange Seite. Diese Seite kann mit Bildern, Typografie und Videos unterteilt werden, um etwas Aufregung zu der Erfahrung hinzuzuf\u00fcgen.<\/p>\n<p>Scrollen Sie lieber weiter.<\/p>\n<p><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"\/\/giphy.com\/embed\/3oEjHSe4OCjZGHlgOs\" width=\"480\" height=\"257\" frame allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Empfohlener Artikel: <a href=\"http:\/\/usersnap.com\/de\/blog\/longscrolling-websites\/\"  >Long Scrolling Websites: Tipps &amp; Best Practices.<\/a><\/p>\n<h2>10. Typografie wird gro\u00df.<\/h2>\n<p>Typografie wird immer gr\u00f6\u00dfer.<\/p>\n<p>2016 sah bereits eine Steigerung von Gr\u00f6\u00dfen und auff\u00e4lligen Designs, und dieser Trend wird so bald nicht aufh\u00f6ren.<\/p>\n<p>Marken werden immer gr\u00f6\u00dfer, auff\u00e4lliger und sogar in Vollbild pr\u00e4sentiert. Dynamische Farben und Texturen werden zu interessanten und lebendigen Fonts hinzugef\u00fcgt, um einen allgemeinen \u201cWow\u201d-Effekt zu erzeugen.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1612\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/typography-web-design-trends-1024x660.png\" alt=\"typography-web-design-trends\" width=\"724\" height=\"467\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/typography-web-design-trends-1024x660.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/typography-web-design-trends-300x193.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/typography-web-design-trends-140x90.png 140w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/12\/typography-web-design-trends.png 1100w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><\/p>\n<p style=\"text-align: center;\">Screenshot von victoryjournal.com<\/p>\n<p>Es scheint, als ob Typografie sowohl f\u00fcr das Erfassen wie auch das Behalten der Aufmerksamkeit des Users gut funktioniert. Gro\u00dfe Typografie kann effektiv genutzt werden, um die Raster aufzubrechen, besonders wenn die Seite eine Long-Scrolling-Seite hat.<\/p>\n<h2>Fazit<\/h2>\n<p>Obwohl wir \u00a0finden, dass alle Dinge auf dieser Liste toll sind, versuchen Sie nicht, jeden dieser Trends auf Ihre Webseite zu packen.<\/p>\n<p>Manche werden f\u00fcr Ihr Unternehmen funktionieren, andere nicht. W\u00e4hlen Sie aus und entscheiden Sie, welche Stile und M\u00f6glichkeiten Ihr Klient braucht und m\u00f6chte. Zu viel auf einmal zu versuchen, wird die UX Ihrer Webseite sofort verschlechtern. Seien Sie also w\u00e4hlerisch, vorsichtig und vor allem kreativ.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das neue Jahr ist nur noch ein paar Wochen entfernt, daher wird es Zeit einen Blick auf die Zukunft des Webdesigns zu werfen. W\u00e4hrend sich die Technologie weiterentwickelt und immer mehr in jeden Bereich unseres Lebens vordringt, verlangen User mehr und mehr von ihren User-Erfahrungen (UX) im Netz. Pers\u00f6nlich, interaktiv und relevant sind drei Schlagworte, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1607,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1601"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1601\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1607"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}