{"id":5,"date":"2015-12-28T13:52:02","date_gmt":"2015-12-28T12:52:02","guid":{"rendered":"http:\/\/localhost\/aktuelles\/?p=5"},"modified":"2023-01-30T11:23:12","modified_gmt":"2023-01-30T10:23:12","slug":"die-webdesign-trends-2016","status":"publish","type":"post","link":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/webdesign\/die-webdesign-trends-2016\/","title":{"rendered":"Die Webdesign Trends 2016"},"content":{"rendered":"<p>Das Internet und somit auch das Webdesign unterliegt einer st\u00e4ndigen und rasanten Entwicklung. Der <strong>Webdesign Trend<\/strong> von gestern ist heute schon \u00fcberholt und neue Trends entwickeln sich rasch. Im Zuge des Jahreswechsels ist es sicherlich nicht verkehrt, einen <strong>kleinen Ausblick<\/strong> zu riskieren, welche Webdesign Trends sich mittlerweile etabliert haben bzw. uns auch 2016 begleiten werden und welche neuen Entwicklungen auf Webdesigner, Webentwickler und Website-Nutzer im neuen Jahr zukommen.<br \/>\n<!--more--><\/p>\n<h2 class=\"blogdetailseite\">Responsive Webdesign<\/h2>\n<p>Eigentlich mittlerweile kein Trend mehr, sondern fast schon Standard ist die <strong>Umsetzung und Optimierung von Websites f\u00fcr mobile Ger\u00e4te<\/strong> und das ist auch gut so. Der Anteil der Nutzer, die mit Smartphones oder Tablets im Netz unterwegs sind, ist gro\u00df und wird auch weiter steigen. Demnach wird es auch im neuen Jahr weiterhin die Aufgabe von vielen Webdesignern und Webentwicklern sein, Internetseiten <strong>ger\u00e4te\u00fcbergreifend<\/strong> m\u00f6glichst <strong>optimal zu gestalten<\/strong> und <strong>umzusetzen<\/strong>. Mittlerweile ist <a title=\"Wir realisieren responsive Webseiten und unterst\u00fctzen Sie zum Thema Responsive Webdesign und responsive Webprogrammierung\" href=\"https:\/\/www.der-informationsdesigner.de\/leistungen\/responsive-webdesign-allgaeu\/\">Responsive Design<\/a> auch bei Firmen und Website-Betreibern und somit auch im Agentur-Alltag weitestgehend angekommen und hat sich etabliert.<\/p>\n<h2 class=\"blogdetailseite\">Gro\u00dfe Bilder<\/h2>\n<p>Internetseiten m\u00fcssen optisch \u00fcberzeugen und den Besucher ansprechen. Eine einfache und effektive M\u00f6glichkeit bieten dabei <strong>sch\u00f6ne, au\u00dfergew\u00f6hnliche und vor allem gro\u00dfe Bilder<\/strong> (oder auch Videos) im Kopfbereich (als Full-Width-Image) oder auch als Vollbild (Full-Screen-Image). In Kombination mit reduzierten aber suchmaschinenoptimierten bzw. relevanten Texten geht der Trend somit weiterhin in <strong>Richtung Minimalismus<\/strong>. Schnellere Internetverbindungen unterst\u00fctzen diese Entwicklung, ohne das es zu Einschr\u00e4nkungen in der Nutzbarkeit kommt.<\/p>\n<h2 class=\"blogdetailseite\">Flat Design und Material Design<\/h2>\n<h3 class=\"blogdetailseite\">Flat Design<\/h3>\n<p>Flat Design ist sicherlich kein neuer Trend mehr, wird aber auch zuk\u00fcnftig weiterhin Bestand haben und entwickelt sich dar\u00fcber hinaus stetig weiter. Es gilt <strong>&#8222;weniger ist mehr&#8220;<\/strong> und somit der Verzicht auf Schatten, Verl\u00e4ufe und 3D-Effekte. Stattdessen spielen <strong>gro\u00dfe Fl\u00e4chen mit meist intensiven Farben, Icons und pr\u00e4gnante Schriftarten eine Rolle<\/strong>. Weniger Ablenkung und die Entwicklung zur Klarheit die dieser Trend mit sich bringt, ist sicherlich auch auf die stetig steigende Anzahl der mobilen User zur\u00fcckzuf\u00fchren. Flat Design erm\u00f6glicht aufgrund der Einfachheit und Reduziertheit <strong>schnellere Ladezeiten<\/strong>, <strong>erh\u00f6hte Funktionalit\u00e4t<\/strong> und unterst\u00fctzt den <strong>Responsive-Aspekt<\/strong>, da die Anpassung an verschiedene Ger\u00e4te und Bildschirmaufl\u00f6sungen erleichtert wird.<\/p>\n<h3 class=\"blogdetailseite\">Material Design<\/h3>\n<p>Eine Fortf\u00fchrung bzw. Weiterentwicklung des Flat Designs stellt das <strong>Material Design<\/strong> dar, welches oft auch als Flat Design 2.0 bezeichnet wird. Die von Google entwickelte Designsprache (erstmalig bei Google Now im Einsatz) kommt nicht ganz so minimalistisch daher und <em>erlaubt<\/em> auch den Einsatz von Effekten, prim\u00e4r Schatten, um mit <strong>Hilfe von Tiefenwirkung wichtige oder klickbare Bereiche hervorzuheben<\/strong>. Auch der Einsatz von <strong>authentischen Bewegungen mittels Animationen<\/strong> spielt eine gro\u00dfe Rolle im Material Design. Ziel ist es dabei u. a. sinnvolle \u00dcberg\u00e4nge zur Sicherstellung der <strong>visuellen Kontinuit\u00e4t und Hierarchie<\/strong> zu erreichen. Mit dem Einsatz der <strong>dritten Dimension<\/strong> soll eine realistischere Darstellung und somit auch eine aufregendere Experience f\u00fcr den User erreicht werden.<\/p>\n<figure class=\"bild\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2016\/01\/webdesign-trends-material-design.jpg\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2016\/01\/webdesign-trends-material-design.jpg\" alt=\"Material Design als Webdesign-Trend\" \/><\/a><\/figure>\n<p>Weitere tragende Elemente sind aber wie auch beim Flat Design Icons, Schriftarten und gro\u00dfe einfarbige Fl\u00e4chen, die ein hohes Ma\u00df an Funktionalit\u00e4t und Klarheit erm\u00f6glichen sollen. Material Design als Konzept kommt derzeit eher bei Apps zum Einsatz und weniger auf Webseiten, aber das k\u00f6nnte sich zuk\u00fcnftig \u00e4ndern. Definitiv also ein Trend, dessen Entwicklung man im Auge behalten sollte.<\/p>\n<p style=\"padding-bottom: 0; margin-bottom: -1rem;\"><iframe loading=\"lazy\" style=\"min-height: 461px;\" src=\"https:\/\/www.youtube.com\/embed\/Q8TXgCzxEnw\" width=\"100%\" height=\"150\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"wp-caption-text\" style=\"padding-bottom: 4rem;\">Video &#8211; Was ist Material-Design?<\/p>\n<h2 class=\"blogdetailseite\">Boxen \/ Card Design<\/h2>\n<p>Die <em>mundgerechte<\/em> Portionierung von Inhalten in Form von teils unterschiedlich gro\u00dfen Karten oder Boxen, die untereinander oder nebeneinander platziert sein k\u00f6nnen, ist ein weiterer Web Design Trend, der uns auch im neuen Jahr \u00f6fters begegnen wird. Bekannt geworden ist dieses Designkonzept durch das <strong>soziale Bildernetzwerk Pinterest<\/strong> und wird seither von vielen Webdesignern adaptiert und aufgegriffen. Die Karten bzw. Boxen enthalten beispielsweise kurze Texte, ein Bild und \/ oder einige Share-Buttons und erlauben somit f\u00fcr den Nutzer mehrere Themen auf einen Blick wahrzunehmen.<\/p>\n<figure style=\"padding-bottom: 0;\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-card-design.png\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-card-design.png\" alt=\"Beispiel f\u00fcr einen Ghostbutton\" \/><\/a><\/figure><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr das Boxen bzw. Card Design anhand des WordPress-Themes Pinable auf <a href=\"http:\/\/demo.theme-junkie.com\/pinable\/\" target=\"_blank\" rel=\"noopener noreferrer\">Theme-Junkie<\/figcaption><\/a><\/p>\n<p>Vorteilhaft ist die Aufteilung einer Website in solche Inhalts-Container auch im Hinblick auf den Aspekt des <strong>Responsive Webdesigns<\/strong>, da je nach Bildschirmaufl\u00f6sung bzw. Bildschirmgr\u00f6\u00dfe die Container ihre Positionen \u00e4ndern k\u00f6nnen. So werden auf ausreichend gro\u00dfen Bildschirmen die Karten \/ Boxen nebeneinander dargestellt, w\u00e4hrend sie auf dem Smarthphone ganz einfach untereinander angezeigt werden. Das sogenannte <strong>CSS Flexbox-Modell<\/strong> erlaubt eine einfache Umsetzung solcher ger\u00e4te\u00fcbergreifender Boxen-Designs, wird allerdings derzeit noch nicht umfassend bzw. nicht von allen aktuellen Browsern unterst\u00fctzt.<\/p>\n<h3>Ghost-Buttons<\/h3>\n<p>Ein Beispiel f\u00fcr einen einfachen aber effektiven Design-Trend sind die sogenannten <strong>Ghost-Buttons<\/strong>, die mit ihrer reduzierten Gestaltung <strong>ohne Farbe und mit Rahmen<\/strong> trotzdem auffallen und bei sinnvollem Einsatz sich optimal in das Umfeld einf\u00fcgen. Daher sind sie somit auch als <strong>Call-to-Action-Buttons<\/strong> sozusagen mit \u00dcberraschungseffekt nutzbar. Ghost-Buttons sind eine Entwicklung, die sich wohl vor allem aus dem Flat Design mit seinen gro\u00dfen Bilder \/ Videos, der pr\u00e4gnanten Typografie und dem Einsatz starker Farben ergeben hat.<\/p>\n<figure style=\"padding-bottom: 0;\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/09\/webdesign-trends-ghostbutton.png\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/09\/webdesign-trends-ghostbutton.png\" alt=\"Beispiel f\u00fcr einen Ghostbutton\" \/><\/a><\/figure><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr einen Ghostbutton<\/figcaption><h2 class=\"blogdetailseite\">Geschichten erz\u00e4hlen \/ Storytelling<\/h2>\n<p>Ein Trend der sich aus der Verbreitung sogenannter Onepager entwickelt hat, ist das <strong>Storytelling<\/strong>. Inhalte einer Website werden visuell und interaktiv so gestaltet, dass sie eine <strong>Geschichte erz\u00e4hlen<\/strong>, die ihre Besucher begeistert und fast schon nebenbei interessante Informationen zu einem Unternehmen und \/ oder zu Produkten vermittelt. In Verbindung mit dem vermehrten Einsatz von Scrolling wird auf die Aufteilung von Informationen auf Unterseiten verzichtet und stattdessen kompakt Geschichten, Fakten oder Wissen bereitgestellt <strong>ohne den Lesefluss des Users zu st\u00f6ren<\/strong>. Eine nicht ganz einfache Herausforderung f\u00fcr Webdesigner, eine spannende und auf den Punkt erz\u00e4hlte Story zu erz\u00e4hlen bzw. zu gestalten, die sowohl visuell als auch inhaltlich \u00fcberzeugt.<\/p>\n<ul class=\"cta-kontakt hinweis-fuer-links-etc mit-abstand\">\n<li><a title=\"Beispiele f\u00fcr gelungene Webseiten die eine Geschichte erz\u00e4hlen\" href=\"http:\/\/naldzgraphics.net\/inspirations\/25-fascinating-websites-with-captivating-visual-storytelling\/\" target=\"_blank\" rel=\"noopener noreferrer\">Showcase von gelungenen Storytelling-Websites<\/a><\/li>\n<\/ul>\n<h2 class=\"blogdetailseite\">Scrolling<\/h2>\n<p>Der intensive Einsatz von <strong>Scrolling<\/strong> in verschiedenen Formen wird uns wohl auch 2016 erhalten bleiben bzw. sich weiter erh\u00f6hen.<\/p>\n<h3 class=\"blogdetailseite\">Parallax Scrolling<\/h3>\n<p>Da w\u00e4re zum einen das <strong>Parallax Scrolling<\/strong>, bei dem sich <strong>Bilder im Vordergrund schneller bewegen als Hintergrundbilder<\/strong> und somit der <strong>Eindruck von Tiefe<\/strong> entsteht und dar\u00fcber hinaus auch die Nutzer-Interaktion gesteigert werden kann.<\/p>\n<ul class=\"cta-kontakt hinweis-fuer-links-etc\" style=\"margin-bottom: 4rem !important;\">\n<li><a title=\"Showcase gelungener Beispiele mit Parallax-Scrolling\" href=\"http:\/\/www.creativebloq.com\/web-design\/parallax-scrolling-1131762\" target=\"_blank\" rel=\"noopener noreferrer\">Beispiele von Websites mit Parallax-Scrolling<\/a><\/li>\n<\/ul>\n<h3 class=\"blogdetailseite\">Infinite Scrolling<\/h3>\n<p>Zum anderen wird auch das sogenannte <strong>Infinite Scrolling<\/strong>, bei der beim Scrollen <strong>automatisch weitere Inhalte einer Website geladen werden<\/strong>, weiter eine gro\u00dfe Rolle spielen. Diese Form des Scrollings bietet dem Nutzer eine <strong>effiziente M\u00f6glichkeit<\/strong> Informationen zu suchen bzw. zu verarbeiten, ohne durch das Neuladen von Seiten gest\u00f6rt zu werden. Hand in Hand gehend mit der zunehmenden Verbreitung von Websites basierend auf Storytelling, werden Internetuser in Zukunft wohl noch mehr Scrollen.<\/p>\n<h2 class=\"blogdetailseite\">Fixed Navigation<\/h2>\n<p>Ein sinnvoller und wohl mittlerweile relativ etablierter Trend ist der Einsatz von <strong>fixierten Navigationen<\/strong>, also Navigationen die trotz Scrollen an einer bestimmten Position (meist oben) im Browser stehen bleiben. Somit entf\u00e4llt f\u00fcr den User das l\u00e4stige zur\u00fcck scrollen zur Navigation. Fixed Navgations oder auch sticky Navigations sind <strong>besonders benutzerfreundlich<\/strong> und auch Responsive Websites profitieren von diesem Trend, der sich sicherlich auch zuk\u00fcnftig im Netz weiter verbreiten wird. Mittlerweile wird diese Funktionalit\u00e4t auch gerne f\u00fcr andere wichtige Elemente einer Website genutzt, die schnell und einfach erreichbar sein sollen. Auch unsere Website nutzt diese Technik.<\/p>\n<figure style=\"padding-bottom: 0;\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-fixed-navigation.png\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-fixed-navigation.png\" alt=\"Beispiel f\u00fcr Fixed Navigation\" \/><\/a><\/figure><figcaption class=\"wp-caption-text\">Fixed Navigation im Einsatz<\/figcaption><h2 class=\"blogdetailseite\">Micro-Interactions<\/h2>\n<p>Mit Hilfe von <strong>Micro-Interactions<\/strong> kann man Webseiten zus\u00e4tzlich Leben einhauchen und auffallen. Zum Beispiel durch Buttons, die kleinere Aufgaben erf\u00fcllen und sich nur auf einen <strong>einzelnen Anwendungsfall<\/strong> konzentrieren, wie das \u00c4ndern einer Einstellung oder das Nutzen der Suche. Micro-Interactions unterst\u00fctzen den User durch <strong>kleine bzw. sparsam eingesetzte Animationen<\/strong> die Website bzw. die zur Verf\u00fcgung stehenden Interaktionen besser zu verstehen und geben dem Nutzer ein <strong>direktes visuelles Feedback<\/strong> w\u00e4hrend der Bedienung des Interfaces. Dadurch werden Emotionen transportiert und eine <strong>positive User-Experience<\/strong> erzeugt, da der Benutzer das Gef\u00fchl hat, dass die Anwendung gut und leicht zu bedienen ist.<\/p>\n<figure style=\"padding-bottom: 0;\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-microinteractions-phasen.png\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-microinteractions-phasen.png\" alt=\"4 Phasen einer Micro-Interaction\" \/><\/a><\/figure><figcaption class=\"wp-caption-text\">Die 4 Phasen einer Micro-Interaction<\/figcaption>Micro-Interactions sind eine gute M\u00f6glichkeit aus der Masse herauszustechen und gleichzeitig die Usability sowie die User-Experience einer Website zu erh\u00f6hen. Allerdings sollte man nicht \u00fcbertreiben &#8211; auff\u00e4lligere Micro-Interactions wie sie oft f\u00fcr Pop-Ups verwendet werden, die den User zu <strong>bestimmten Interaktionen<\/strong> (wie z. B. Teilnahme an einer Umfrage) animieren, empfinden viele Nutzer eher als st\u00f6rend. Darum ist vorab abzuw\u00e4gen, ob ein Einsatz solcher Micro-Interactions im jeweiligen Anwendungsfall Sinn macht oder eher kontraproduktiv ist. F\u00fcr Webdesigner besteht dar\u00fcber hinaus die Herausforderung Anwendungsszenarien bei denen der Einsatz von Micro-Interactions hilfreich ist zu erkennen und anschlie\u00dfend diese auch <strong>sinnvoll und verst\u00e4ndlich<\/strong> zu visualisieren.<\/p>\n<h5 class=\"blogdetailseite\">Allgemein lassen sich Micro-Interactions folgenderma\u00dfen einsetzen:<\/h5>\n<ul>\n<li>Um einen Status oder ein Feedback von der Anwendung an den User zu kommunizieren<\/li>\n<li>Um das Ergebnis einer Nutzer-Interaktion darzustellen<\/li>\n<li>Um den Nutzer zu helfen bzw. zu unterst\u00fctzen, etwas zu bedienen<\/li>\n<\/ul>\n<h5 class=\"blogdetailseite\">Konkrekte Anwendungsbeispiele sind beispielsweise:<\/h5>\n<ul>\n<li>Ver\u00e4ndern einer Einstellung oder eines Prozesses<\/li>\n<li>Sharen \/ Teilen oder Liken eines Fotos oder Videos auf einer Website<\/li>\n<li>Etwas an- bzw. ausschalten<\/li>\n<\/ul>\n<ul class=\"cta-kontakt hinweis-fuer-links-etc mit-abstand\">\n<li><a title=\"Beispiele f\u00fcr gelungene Micro-Interactions\" href=\"http:\/\/www.webdesignerdepot.com\/2015\/07\/7-secrets-for-enhancing-ux-with-micro-interactions\/\" target=\"_blank\" rel=\"noopener noreferrer\">Einige Beispiele von Micro-Interactions<\/a><\/li>\n<\/ul>\n<h2 class=\"blogdetailseite\">Split-Screen-Layouts<\/h2>\n<p>Ein recht interessanter neuer Trend ist der Einsatz von <strong>separaten Layouts per Split-Screen-Auswahl<\/strong>. Dabei wird die Webseite in <strong>zwei oder mehr vertikale Bereiche<\/strong> aufgeteilt um beispielsweise f\u00fcr verschiedene relevante Produkte oder Dienstleistungen f\u00fcr <strong>unterschiedliche Zielgruppen<\/strong> auch unterschiedliche Layouts anzubieten. Der User kann somit ausw\u00e4hlen, welches Layout er sehen m\u00f6chte. Dar\u00fcber hinaus k\u00f6nnen somit mehrere Elemente gleichwertig beworben und dargestellt werden, anstatt sie untereinander anzeigen und somit gewichten zu m\u00fcssen. Ein einfaches Beispiel ist das Anbieten unterschiedlicher Layouts (und auch Inhalte) in Abh\u00e4ngigkeit des Geschlechts.<\/p>\n<figure style=\"padding-bottom: 0;\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-split-screen-layouts.png\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-split-screen-layouts.png\" alt=\"Beispiel f\u00fcr Split-Screen-Layout\" \/><\/a><\/figure><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr Split-Screen-Layout (entnommen aus der Infografik von <a title=\"Infografik: Webdesign und UX Trends\" href=\"http:\/\/thedeependdesign.com\/2016-web-design-trends-infographic\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Deep End Design<\/a>)<\/figcaption><h2 class=\"blogdetailseite\">Personalisierte Benutzererlebnisse<\/h2>\n<p>Die Benutzerfreundlichkeit einer Website ist ein zentraler Bestandteil beim Thema Webdesign. Eine wichtige M\u00f6glichkeit die Benutzerfreundlichkeit zu erh\u00f6hen ist eine <strong>hohe Relevanz von Inhalten f\u00fcr den einzelnen Website-Besucher<\/strong> zu schaffen. Dies wird erreicht, in dem <strong>individuelle Vorlieben und signifikante Daten<\/strong> (z. B. Geschlecht, Alter, etc.) herangezogen werden und in deren Abh\u00e4ngigkeit dem Besucher jeweils passende Inhalte oder auch eine visuell angepasste Umgebung angeboten wird. Big-Data l\u00e4sst also gr\u00fc\u00dfen. Google praktiziert das schon lange, da im Prinzip nur personalisierte Ergebnisse ausgegeben werden.<\/p>\n<p>Der Trend wird sich aber sicherlich weiter verst\u00e4rken. Netflix beispielsweise zeigt seine Inhalte auf Basis der vom User <strong>definierten Vorlieben bzw. Lieblingsfilme<\/strong> und verfeinert das Ganze immer weiter, je mehr Filme und Serien der Nutzer sich angeschaut hat. Eine klassische Navigationsstruktur gibt es nicht mehr. Diese Vorgehensweise l\u00e4sst sich auch auf andere Szenarien \u00fcbertragen wie z. B. auf Mode-Websites und ist sicherlich einer der spannendsten Trends.<\/p>\n<figure style=\"padding-bottom: 0;\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-personalisierte-benutzererlebnisse.png\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2015\/12\/webdesign-trends-personalisierte-benutzererlebnisse.png\" alt=\"Beispiel f\u00fcr personalisierte Inhalte\" \/><\/a><\/figure><figcaption class=\"wp-caption-text\">Personalisierte Inhalte bei Netflix<\/figcaption><h2 class=\"blogdetailseite\">Call to actions (CTA)<\/h2>\n<p>Handlungsanweisungen auch <strong>Call to actions<\/strong> genannt stellen wichtige Elemente einer Website dar. Demnach werden ihnen auch in Zukunft Webdesigner und Webentwickler die n\u00f6tige Aufmerksamkeit geben (m\u00fcssen). So werden Call to actions oft sticky bzw. fixiert auf der Website platziert sein, damit diese sich im f\u00fcr den User <strong>immer sichtbaren Bereich<\/strong> befinden, z. B. im Header oder Footer. Als eigenst\u00e4ndige und sich abgrenzende Elemente (auch im Responsive Design) platziert wird dabei idealerweise die <strong>Klickrate erh\u00f6ht<\/strong>. Handlungsanweisungen <strong>einspaltig<\/strong> darzustellen, ohne Einschr\u00e4nkungen von Sidebars, etc. wird ebenfalls ein g\u00e4ngige Methode sein, Call to actions auff\u00e4lliger zu pr\u00e4sentieren und die Klickrate zu steigern.<\/p>\n<figure style=\"padding-bottom: 0;\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2016\/01\/webdesign-trends-sticky-call-to-actions.png\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2016\/01\/webdesign-trends-sticky-call-to-actions.png\" alt=\"Beispiel f\u00fcr eine sticky Handlungsanweisung\" \/><\/a><\/figure><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr eine sticky Handlungsanweisung<\/figcaption><h2 class=\"blogdetailseite\">Typografie<\/h2>\n<p>Der Fokus auf die <strong>Typografie<\/strong> im Netz wird auch in Zukunft weiter zunehmen. In den letzten Jahren sind Gott sei Dank die M\u00f6glichkeiten Internetseiten typografisch aufzuwerten und individuell zu gestalten extrem verbessert worden. Dank der kostenlosen Google-Webfonts und einer Vielzahl mittlerweiler existierender (kommerzieller) Anbieter von Web-Schriften ist die Auswahl an Schriften gro\u00df, die das eigene Unternehmen oder Produkt besser unterstreichen als die jahrelang lediglich zur Verf\u00fcgung stehenden Standardschriftarten wie Arial oder Verdana. Typografie wird demnach nicht nur \u00e4sthetisches Beiwerk sein, sondern wie andere visuelle Bestandteile als (alleiniges) <strong>Wiedererkennungsmerkmal f\u00fcr eine Marke bzw. ein Unternehmen<\/strong> fungieren. Und das optimalerweise auf den unterschiedlichsten Marketingkan\u00e4len.<\/p>\n<figure class=\"bild\"><a href=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2016\/01\/webdesign-trends-typografie.png\"><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-content\/uploads\/2016\/01\/webdesign-trends-typografie.png\" alt=\"Webtrends Typografie\" \/><\/a><\/figure>\n<p>Mit der Anzahl der M\u00f6glichkeiten sich typografisch individuell auszudr\u00fccken, wird auch der Trend zunehmen, Internetseiten (fast) <strong>ohne Bilder und rein typografisch<\/strong> zu gestalten. Im Moment liegt zwar der Schwerpunkt darauf, gro\u00dfe Bilder und wenig Text als Gestaltungsmittel einzusetzen, aber es wird sicherlich die einen oder anderen Ans\u00e4tze geben, mittels unterschiedlicher Schriftgr\u00f6\u00dfen \/ Schriftarten oder gezieltem Einsatz von Farben, Webseiten kreativ darzustellen, die auch ohne Bilder interessant sein k\u00f6nnen und dar\u00fcber hinaus gleichzeitig \u00fcbersichtlich sind.<\/p>\n<h2 class=\"blogdetailseite\">Fazit<\/h2>\n<p>Der Gro\u00dfteil der hier aufgef\u00fchrten Trends sind sicherlich nicht neu bzw. begleiten uns zum Teil schon nun einige Zeit. Manche Entwicklungen werden dabei weiter zunehmen bzw. einen <strong>Optimierungsprozess erfahren<\/strong>, andere werden aber auch wieder verschwinden. Der eine oder andere Trend wird ggf. zum Standard werden, wie das immer beliebter werdende <strong>Material Design<\/strong>. Das Web hat in den vergangenen Jahren auf jeden Fall eine <strong>beachtliche Entwicklung<\/strong> vor allem was das Webdesign angeht hinter sich und viele interessante und auch sinnvolle Neuerungen hervorgebracht. Wir d\u00fcrfen gespannt sein, was uns in Zukunft in dieser Richtung noch alles erwarten wird.<\/p>\n<p class=\"cta-kontakt\"><strong>Sie planen einen neuen Internetauftritt oder ben\u00f6tigt Ihre Website ein Redesign?<\/strong> Wir informieren Sie gerne in einem unverbindlichen Erstgespr\u00e4ch \u00fcber die vielf\u00e4ltigen technischen und visuellen M\u00f6glichkeiten.<\/p>\n<p><a class=\"cta-kontakt-button\" title=\"Kontaktaufnahme - Der Informationsdesigner | Internetagentur und Webagentur aus dem Allg\u00e4u\" href=\"https:\/\/www.der-informationsdesigner.de\/kontakt\/index.php\">Kontaktieren Sie uns<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Internet und somit auch das Webdesign unterliegt einer st\u00e4ndigen und rasanten Entwicklung. Der Webdesign Trend von gestern ist heute schon \u00fcberholt und neue Trends entwickeln sich rasch. Im Zuge des Jahreswechsels ist es sicherlich nicht verkehrt, einen kleinen Ausblick zu riskieren, welche Webdesign Trends sich mittlerweile etabliert haben bzw. uns auch 2016 begleiten werden [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3],"tags":[8],"class_list":["post-5","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-webdesign","tag-trends"],"modified_by":"thomas.soyter","_links":{"self":[{"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/posts\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":161,"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/posts\/5\/revisions"}],"predecessor-version":[{"id":2620,"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/posts\/5\/revisions\/2620"}],"wp:attachment":[{"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/media?parent=5"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/categories?post=5"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/wp-json\/wp\/v2\/tags?post=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}