Digitale Medien entwickeln sich rasend schnell und gehören damit zu den kurzlebigsten Produkten, die es gibt. Websites, die heute entstehen, sind spätestens in zwei Jahren schon wieder ein alter Hut. Auch Webdesign-Trends kommen und gehen entsprechend. Sie sind allerdings nicht nur Geschmackssache, sondern reflektieren das Streben danach, die eigene Website von der Masse abzuheben und ihre Aktualität zu unterstreichen – technisch und gestalterisch.

Entweder nutzt die Mehrheit die innovativen Ideen, dann verwandeln sie sich zum Standard – oder sie geraten wieder in Vergessenheit. Webdesigner sollten dabei die kurzlebigen Hypes von den echten Innovationen unterscheiden können, um sich für die Zukunft zu wappnen. Daher hier die Trends, die Webgestalter in diesem Jahr auf jeden Fall im Blick behalten sollten.

Webdesigner können sich nicht allein durch ihre Kreativität leiten lassen. Sie müssen die Umsetzung und die damit verbundene Technik in ihrer Gestaltung berücksichtigen. Schon ein zweispaltiges Layout müssen sie mit kleinen Float-Workarounds lösen. Doch damit dürfte bald Schluss sein, denn Webdesigner können mittlerweile mit Flexboxen jede erdenkliche Layout-Struktur umsetzen.

Besonders der Trend zum Grid-Layout macht die Flexbox beliebt. Eigentlich handelt es sich dabei nur um eine neue Display-Eigenschaft, die Webdesigner als Flex-Container definieren. Alle Kinder-Elemente lassen sich dann über die neuen Flexbox-CSS-Attribute in Containern platzieren. Die Ausrichtung, Reihenfolge oder auch Zentrierung der Elemente ist dabei steuerbar.

Das Online-Game Flexbox Froggy zeigt zum Beispiel, was mit Flexbox möglich ist [1]. Mit dem Flexplorer des amerikanischen Webdesigners Bennet Feely können Gestalter per Klick ihre eigenen Flexbox-Grids erzeugen [2].

Derzeit unterstützen nur aktuelle Browser die Flexbox, sie befindet sich noch im Working-Draft-Status. Somit kann sich die Definition möglicherweise noch ändern. Zudem haben die Browser, die die Flexbox schon unterstützen, zum Teil noch Bugs. 2016 soll die Flexbox noch besser implementiert und hoffentlich als Standard integriert werden.

Websites gewinnen an Dynamik und sind mit Frameworks angereichert – sie enthalten oft mehr JavaScript-Code als HTML-Markup. Somit steigen die Komplexität der hinterlegten Programmierlogik und die notwendigen Ressourcen. Loading-Screens und Intros überbrückten früher oft die Wartezeit, bis große Bilder geladen waren, und waren daher nie ein sonderlich beliebter Webdesign-Trend.

Dennoch spielen sie immer noch eine wichtige Rolle – heute jedoch, um genug Zeit für die Vorbereitung der hinterlegten Web-Applikation zu gewinnen. Dabei kommen sie mehr und mehr zum Einsatz, um einer Website eine gestaltete Einleitung zu geben: Der Nutzer wartet dabei nicht etwa gelangweilt, sondern erhält bereits relevante Informationen – das Intro wird zum eigenständigen Mehrwert und ist nicht mehr störend oder nervig.

Die interaktive Dokumentation „Sons of Gallipoli“ [3] zeigt exemplarisch, wie sich User per Intro auf die interaktive Geschichte vorbereiten lassen – sie erhielt dafür einen der begehrten „Awwwards“ für Design, Kreativität und Innovation im Netz.

Parallel zu den klaren Strukturen und einfachen Elementen des Flat- und Material-Designs gibt es auch den Trend zum Hand-Drawing im Webdesign. Es setzt weniger auf Prinzipien und Konzepte, sondern vielmehr auf die Kreativität, Experimentierfreude und Originalität gezeichneter und illustrierter Elemente.

Schöne Beispiele sind etwa das Online-Portfolio des französischen Webdesigners Guillaume Juvenet [4], das sich aus Linien erst beim Scrollen zeichnet. Die Website „How I fight“, die sich Möglichkeiten widmet, gegen Krebs zu kämpfen [5], zeigt exemplarisch die Bandbreite, die das Hand-Drawn-Design abdeckt: Der Nutzer kann hier eine riesige Leinwand in alle Richtungen durchscrollen, die gespickt ist mit gemalten Illustrationen – von Skizzen und Linien bis hin zu Aquarell-artigen Illustrationen ist im Hand-Drawn-Design alles möglich.

Websites werden damit 2016 definitiv wieder spektakulärer und einfallsreicher. Sicher: Sowohl Flat- als auch Material-Design funktionieren weiterhin, bedienen aber nur noch ihre Zielgruppen. Wer sich von der Masse abheben will, bringt originellere Gestaltungsprinzipien wie etwa kreative Zeichnungen zum Einsatz. Dazu passt auch der folgende Trend der Non-Traditional-Fonts.

Eine ansprechende Webgestaltung braucht natürlich auch ein vernünftiges Schriftbild. Fonts können eine Website prägen, daher ist eine gute Wahl umso wichtiger. Die Zeiten, in denen Webdesigner nur System-Schriften benutzten konnten, liegen zum Glück schon mehrere Jahre zurück.

Über Webfonts lassen sich heute beliebige Fonts einsetzen. Trotzdem haben sich bislang eher wenige Webdesigner wirklich von den gebräuchlichen serifenlosen Schriften für Fließtexte und Menüs verabschiedet, da diese sich leicht lesen lassen.

Jetzt geht der Trend aber zu Non-Traditional-Fonts – also meist speziellen und sehr individuellen Schriften, die nicht nur Serifen, sondern auch viele weitere Verzierungen haben können. Im Prinzip fällt alles unter diese Kategorie, was nicht schon seit mehreren Jahren Verwendung findet.

Oft entwickeln Designer diese Schriften selbst und zeigen damit ihre Handschrift: Schriften aus zusammengelegten Objekten oder sogar Lebensmitteln, wie sie zum Beispiel das Design-Magazin speckyboy.com auflistet [6], sind keine Seltenheit. Insgesamt bilden sich dadurch interessante Schriftbilder, die vor allem neue Retina-Displays wunderbar darstellen können.

Es gibt ein paar Trends, die bereits 2015 zu beobachten waren und uns im kommenden Jahr weiterhin begleiten.

Den klassischen One-Pager gibt es weiterhin, vermehrt aber wohl in abgewandelter Form. Eine neue Darstellungsvariante ist das Page-Carousel – die Navigation einer solchen Seite erinnert stark an ein E-Magazin.

Generell platzieren Webdesigner die Inhalte häufiger horizontal, die Navigation geschieht durch Swipen oder Klicken. Dabei sieht der Besucher der Website die Inhalte immer in der Höhe und Breite vollflächig zum aktuellen Viewport. Mit vertikalem Scrollen springt er zum nächsten Bereich. Umsetzen lässt sich dieses Prinzip beispielsweise mit dem Framework fullPage.js.

Auch der Trend des Scrollytellings, eine Kombination aus Storytelling und Scrolling, bleibt dem Webdesign 2016 erhalten. Diese Adaption ist ausschließlich für das Web geeignet und stützt sich auf das Scrollen. Mit der Scroll-Geschwindigkeit steuert der Webdesigner den Ablauf und die Betrachtung der Inhalte.

Die Inhalte und Informationen müssen dabei auf das Scrollytelling abgestimmt und konzentriert sein. Soll eine Website zu viele Information gleichzeitig vermitteln, ist der Betrachter schnell überfordert und genervt: Meist ist die Seite dann viel zu lang – oder ein Frame enthält mehr Details, als er aufnehmen kann. Auch die Effekte wirken dann eher überladen statt angenehm. Designer sollten sich beim Scrollytelling also auf ein Thema konzentrieren und die Informationsdichte und -menge im Auge behalten – nicht immer ist diese Methode die richtige Wahl.

Ebenfalls angesagt bleiben SVG- und CSS3-Animationen. Damit können Webdesigner schnell, einfach und ressourcensparend hübsche Animationen zaubern – ohne ein weiteres JavaScript-Framework oder Assets, die eine Website verlangsamen. Die Möglichkeiten sind riesig: vom animierten Burger-Menü [7] bis zur CSS-Keyframe-Animation [8].

Das an sich alte und schon mehrfach totgesagte Vektor-Format SVG erhält neuen Zuspruch, da seine Skalierbarkeit heute schon allein für Retina-Displays wichtig ist: Die SVG-Datei berechnet sich immer neu und kann die hochauflösenden Bildschirme somit sauber bedienen. Auch, dass sich hier Pfade mit CSS3 direkt animieren lassen, macht SVG zum Webtrend 2016. Sicher eine Technik, die in den kommenden Jahren noch weiter Fahrt aufnimmt und noch bessere Spezifikationen erhält.

Die Zukunft kann niemand voraussagen. Manchmal sind es nur Spekulationen, oft aber auch Beobachtungen der Vergangenheit und Gegenwart, die auf die Zukunft schließen lassen. Was sich aufgrund der Entwicklungen in 2015 allerdings sagen lässt: Das nächste Jahr bringt starke Gegensätze – wie etwa mit dem Flat-Design auf der einen und dem Hand-Drawn-Design auf der anderen Seite; oder mit Hero-Images auf der einen und hohen Weißanteilen auf der anderen Seite. Das kommende Jahr liefert Webdesignern damit eine riesige Bandbreite der Gestaltungsfreiheiten.

Vergangene Trends wie etwa der Parallax-Effekt sind mittlerweile Standard und erfahren 2016 eher eine funktionale Verbesserung, unter anderem durch die Einführung von Web-Components und die Unterstützung von Frameworks wie AngularJS 2. Für Webdesigner heißt das, dass sie auf mehr Standard-Elemente und Funktionen zugreifen können – gleiche Bedienungsmuster machen das Web transparenter und einfacher zu nutzen.