Wer braucht Trends? Das hier läuft wirklich im Design 2017
Das läuft wirklich im Design. (Foto: Shutterstock)

Ist dir schon mal aufgefallen, dass es Trends im Webdesign nur auf der eher mittelfristigen Ebene gibt? Was heute in ist, war es meist gestern schon. Aber was ist in?

Trends im Webdesign sind langlebig

Es sind die meistgelesenen Beiträge in jedem Designmagazin – die Glaskugelblicke auf die Trends der Zukunft. Wenn man sie allerdings mal genauer liest und mit dem Wissen eines aktiven Designers betrachtet, dann fällt auf, dass die vermeintlichen Zukunftstrends selten wirklich neu sind. Oft handelt es sich um schon etablierte Techniken, die sich im besten Falle etwas stärker durchsetzen als bislang. Meist ist es schlicht das „Weiter so!” aus dem letzten Jahr.

Glaubst du nicht? Schau mal in diesen spontan ergoogelten Betrag auf Designrfix. Er behandelt die Trends des Jahres 2014 (!). Und was finden wir? Flat Design, Typografie,Long Scrolling, Mobile First, HTML5, designunterstützter Content, Minimalismus, Whitespace, Videos und Bilder als Hero-Elemente, Farben als Designelemente undStorytelling. Wo sind denn bloß die letzten zwei Jahre hin?

Andererseits ist das nicht weiter verwunderlich. Neue Trends mit echten Innovationen können sich ohnehin erst dann zeigen, wenn die Browserhersteller sich bequemen, bestimmte Features, meinetwegen auch mit Prefix, in ihre Seitenbetrachter zu implementieren. Der Flaschenhals unserer Innovationsmöglichkeiten ist stets der Browser, und wenn nicht der konkrete, dann doch die Vielfalt derer, die es zu unterstützen gilt.

Neue Trends, wenn man sie denn dann überhaupt so nennen will, zeigen sich eher im Detail. Ein paar der Trends, die sich praktisch ausschließlich an Details austoben, sind:

Mikrointeraktionen

Mikrointeraktionen sind die kleinen Bedienelemente, die dafür sorgen, dass etwas überhaupt erst funktioniert. Du drehst den Zündschlüssel um, um dein Auto zu starten. Dabei ist das Drehen des Zündschlüssels die Mikrointeraktion. Ohne das Drehen des Zündschlüssels würde dein Wagen nicht anspringen, wir dürfen also durchaus von einer sehr wichtigen Interaktion sprechen.

Lange Zeit kümmerten sich Webdesigner nur nachlässig um die Gestaltung dieser Elemente. Dann eröffnete Apple die Ära des Skeuomorphismus für die Gestaltung von Benutzeroberflächen. Da Skeuomorphismus darauf abzielt, Elemente aus dem realen Leben in die digitale Welt so zu übertragen, wie sie in echt auch aussehen, sind derartige Darstellungen zwar intuitiv zu bedienen – dennoch sind die Nachteile auf lange Sicht größer als dieser Vorteil.

Switch Animation | Eugene Cheporov

Detailgetreue Nachbildungen limitieren vor allem dein Designkonzept. Außerdem wirken diese Darstellungen schnell langweilig. Verwenden nun viele Designer derlei Elemente, wird das Design beliebig. Vor allem aber kannst du mit den Elementen von gestern nicht das UI der Zukunft erschaffen.

Wo wir gerade von beliebig sprechen: Seit einigen Jahren beobachten wir den Trend, dass sich Websites immer stärker ähneln. Es gab vor ein paar Jahren sogar eine breite Diskussion darüber, ob Webdesign nicht schon als tot zu bezeichnen ist.

Fluid Switch | Leo Zakour

Konstatieren wir, dass diese Annahme richtig ist, kommt gerade den Mikrointeraktionen steigende Bedeutung zu. Denn der komplette Umgang mit deinem Design aus Sicht des Besuchers passiert auf der Basis von vielen Mikrointeraktionen. Je besser diese gestaltet sind, desto flüssiger, nahtloser fühlt sich dein Designprodukt an.

Moderne Mikrointeraktionen sollten auf jeden Fall auch responsiv reagieren. Dazu verwendest du kleine Animationen, die zum einen erklären, was passiert und zum anderen Feedback geben, ob eine Interaktion erfolgreich war oder nicht.

Wir haben hier bei t3n einen Grundlagenartikel zu Mikrointeraktionen.

Funktionale Animationen

Funktionale Animationen unterstützen die Rezeption des eigentlichen Content. So könntest du etwa beim Scrollen einer langen Seite auf eine eingebettete Galerie in der Form hinweisen, dass sich diese beim Scrollen nach rechts und links ausklappt, also statt des mittigen Bildes alleine eine Reihe von drei Bildern zeigt. So wird der Nutzer ohne Umschweife und langes Nachdenken geleitet.

Funktionale Animationen sind aber auch schlicht solche, die über den Zustand eines Vorgangs informieren, etwa den Downloadfortschritt einer Datei oder das Eintreffen neuer E-Mails in deinem Posteingang.

Elastic Progress | Tympanus

Beim Einsatz funktionaler Animationen musst du darauf achten, dass du sie nicht zum Selbstzweck werden lässt. Dieser Wunsch ist verständlich, denn eine schicke Animation sieht nun mal schick aus. Wenn sie aber entbehrlich ist, weil sie den eigentlichen Vorgang nicht unterstützt, lass sie weg. Auch kleine, unnötige Verzögerungen nerven deine Besucher irgendwann.

Das Smashing Magazine hat hier einen Grundlagenartikel zum Thema.

Illustrationen

Wenn du es dir leisten kannst, dann solltest du auf jeden Fall auf diesen Trend setzen. Denn nach Hero-Images und Hero-Videos kommen die Hero-Illustrationen. Mit Illustrationen meine ich natürlich nicht solche, die du dir kostenlos aus einem Vektorgrafikportal ziehst, sondern tatsächlich handgezeichnete, die zu deinem übrigen Design und insbesondere zum Thema der Seite passen. So wie dieses hier:

(Screenshot: education.iceandsky.com)

(Quelle: http://t3n.de/news/webdesign-trends-2017-763609/)