Die Webdesign Trends werden auch in 2016 geprägt sein von einem Mega-Trend, der sich stetig weiter entwickelt – bei den Geräten und im Paradigma: der große Trend zu immer kleineren Internet-tauglichen Geräten. So sind wir in 2015 mit der Lancierung der Apple Watch nun bei den Wearables angekommen: Armbanduhren mit Display, die wie ein Smartphone ein Betriebssystem und diverse Apps haben. Die Ära des Ubiquitous Computing dagegen steht noch ziemlich am Anfang. Aber der Reihe nach:
Responsive Webdesign – evolved
Die Hersteller haben mittlerweile viele hundert verschiedene internettaugliche Gerätemodelle produziert. Seitdem werden immer mehr Websites einem Redesign unterzogen. Auch für Content Management Systeme und Web-Baukästen gibt es eine Vielzahl von Templates, die neuerdings zum überwiegenden Teil auch responsive sind. Damit ist Responsive Design mittlerweile Standard.
Obwohl es für die ganz kleinen Bildschirme der Smart Watches auch Webbrowser gibt, dürfte eine normale Website darauf wohl kaum zu lesen sein – wohl eher eine Anwendung für Häuptling Adlerauge. So bleibt auf diesen kleinen Displays nur Platz für eigens dafür gestaltete Apps.
Auf der anderen Seite der Skala hat der Webdesigner und Webseitenbetreiber schon eher eine Herausforderung. Der Trend geht bei den größeren Geräten – von Smartphones über Tablets und Notebooks bis zu den großen 27-Zoll-Billdschirmen zu hochauflösendem Display, sog. HiDPI. 2012 lancierte Apple sein Retina display, wurde aber schon kurz danach bei den Auflösungen überholt von der Windows-Konkurrenz, z. B. mit dem Toshiba P50T‑B Notebook, das ein 15,6‑Zoll-Display mit einer Auflösung von 3840 x 2160 dpi hat.
Flat Design wird zu Material Design
Nachdem Flat Design am Anfang eine Revolution gegen den Skeoumorphismus war, entwickelt es sich nun evolutionär weiter. Google hat einen umfangreichen StyleGuide vorgelegt, wie es umgesetzt werden sollte und nennt es Material Design. Mit drei Grundprinzipien folgt es einem pragmatischen Realismus: „Materie ist die Metapher“. So sollen Schatten realistisch sein und Bewegungsanimation eine Bedeutung vermitteln. Man spricht auch von „almost flat“ oder Flat 2.0, das lange Schatten, mehr Farben enthält und nicht mehr ganz so konsequent flat ist, aber noch gut zum Minimalismus passt, und so auch besser mit dem Responsive Design vereinbar sei.
In naher Zukunft ist zu erwarten, dass sich Flat Design im Zusammenspiel mit Animationen und Parallax Scrolling zu einem „happy medium“ entwickeln und in Kombination mit prominenten Bildern aus der Skeoumorphismus-Gegenbewegung zu einem eigenen Stil emanzipieren wird. Auch wenn es für kritische Minimalisten den Anschein erweckt, dass Material Design der erste Schritt wieder in Richtung Skeoumorphismus ist, so stellt doch die Darstellung der Z‑Achse mit Hilfe von Schatten eine Notwendigkeit zur Visualisierung auf engem Raum dar.
Card Design
Nachdem 2014 erstmals die mobile Internetnutzung die der Desktop Computer übertroffen hat, wurde Card Design wichtiger denn je. Die Cards sind im Pin‑, Masonry- (Mauer), oder Magazin-Style und haben den Vorteil, dass sie auf allen Geräten funktionieren und intuitiv richtig verstanden werden. Man kann sie auch teilen, insbesondere in Sozialen Medien, und man kann sie auf fast jeden Stil anwenden bzw. anpassen. Allerdings funktioniert das Card Design nicht auf jeder Website. Vorallem ist es schwierig, sie so zu gestalten, dass sie originell sind und gleichzeitig eine leichte Anmutung haben.
Proliferation von UI Mustern
Die wucherartige Vermehrung von User Interface Mustern bezeichnet einen Trend, die schablonenartigen Vorlagen der Gestaltung (sog. Templates) von weit verbreiteten Content Management und Blog Systemen zu verwenden und nur leicht an eigene Bedürfnisse anzupassen. Dadurch sehen viele Websites sehr ähnlich aus, was bei einem WordPress-Anteil von 60 Prozent aller CMS-gestützten Websites nicht verwunderlich ist. Diese Entwicklung hat aber auch den Vorteil, dass sich dadurch Standards besser und schneller etablieren können. So ist z. B. das Hamburger Menu Symbol weitläufig bekannt und erspart auf kleinen Displays das Wort „Menü“.
Originalität
Gegen das Vergessen in der großen Tonne der Einheitsbrei-Websites kann man sich nur stemmen, wenn man origineller als der Wettbewerber ist. Vereinzelt findet man schon länger Websites, die aus einer Kombination von Handzeichnung und Animation bestehen. Beispiele: Mintdesigncompany.
Dramatische Typografie
Die Zeiten von Helvetica, Arial und Times New Roman sind längst vorbei. Eine große Anzahl von frei verfügbaren Webfonts sorgt für mehr Individualität. Mittels neuer Standards werden sie extrem vergrößert, animieren und gedreht. Ein paar Fonts wie z. B. Roboto oder Open Sans haben zwar die Nase vorn, aber hier wird man demnächst sicherlich immer mehr Individualität sehen. Es wird spannend – hoffentlich ohne tödliches Ende.
Immersive (umfassende) Interactionen
Animationen werden deshalb zunehmen, da sie den Nutzer fesseln, aber in der Kombination mit Interaktion sind sie unschlagbar. Umgekehrt ist die Interaktion einfach interessanter, wenn sie von einer ansprechenden Animation begleitet wird. Mit modernsten Technologien (HTML5, CSS3) ergeben sich hier neue Möglichkeiten. Während man früher gern eine Navigation animierte, sieht man darin mehr eine Spielerei, während eine angenehme Animation die Interaktion auf angenehme Art unterstützen soll. So kann der Header beim Scrollen flüssig – ohne zu ruckeln oder springen – verkleinert werden und damit Platz für den Inhalt freigeben. Solche Übergänge (“Transitions”) verbinden die animierten Effekte miteinander und lassen die Nutzung leichter wirken. Auch animierte Webgrafiken unterstützen den Nutzer, komplizierte Sachverhalte schneller zu erfassen, z. B. Statistiken – wie Infografiken in Zeitschriften. (Beispiele psd2html, Gaétan Pautler, HUMAAN) Weblinks: TNW.
Microinteraktionen
Dazu gehören auch die kleinen Apps, die für zusätzliche Funktionalität sorgen, z. B. ein Chat-Modul am unteren Rand, ein Login-Formular oben rechts, Social Media Buttons, Werbung. Diese flexiblen Helfer sind leicht zu implementieren und verbreiten sich daher recht schnell.
Plakative Gestaltung
Mit lebhaften Farben, fesselnder Fotografie, bildschirmfüllenden Hintergründen, besagter “dramatischer” Typografie und besonderer Grafik nutzt man zunehmend den gesamten Raum, um die volle Aufmerksamkeit zu erlangen. Dies entspricht den Entwicklungen in anderen Medien wie Film, Fernsehen, Plakaten etc. Ein Beispiel für besondere Grafik sind zurzeit Low poly. Diese Polygonnetze sind zurzeit recht beliebt, da sie gut zum flat design kombiniert werden können und Hintergründe ergänzen.
Weniger im Trend sind
- Slider, die auch auf Smartphones laufen und unnötigen Datenballast darstellen
- separate Mobile Websites, da sie in Zeiten von Responsive Webdesign überflüssig werden
- Website Apps, die sich downloaden lassen
- zu langes Scrollen ohne Navigationshilfen
- Effekte wie Parallax-Scrolling, sofern es nur Effekthascherei und unnötigen Datenballast darstellen
Fazit
2016 werden die vielen einzelnen Webdesign Trends den engagierteren Website-Betreibern in geschickter Kombination einen Vorsprung verschaffen. Webdesign in 2016 wird also noch minimalistischer und plakativer, aber auch individueller und interaktiver.
Weblinks: 6 Design Trends/AWWWards, Matthew Mombrea/IT-World, David Layton/Datachieve.