Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Ganz ohne Kaffeesatzleserei: Der Avocode 2016 Web Design Trend Report

    Ganz ohne Kaffeesatzleserei: Der Avocode 2016 Web Design Trend Report

Webdesign wird schlanker und schneller. (Quelle: Shutterstock | Ertellt von: BarsRsind)

Auf der Basis von mehr als einer Million Designs erstellte der Dienstleister Avocode einen Trend-Report, der sich dadurch auszeichnet, dass er allein auf harten Fakten beruht.

Das Wörtchen „Trend” ist eng mit Interpretation und Bewertung verbunden. Denn, was wirklich ein Trend ist und was nur innerhalb einer bestimmten Filterblase als solcher wahrgenommen wird, ist nur schwer voneinander zu trennen. Von daher ist es kein Wunder, dass viele Webentwickler fast schon allergische Reaktionen zeigen, sobald der Begriff fällt.

Der Avocode 2016 Web Design Trend Report ist anders. Er setzt nicht auf die Bewertung einzelner Fachleute, sondern auf die schiere Kraft der Daten. Avocode wertete nach eigenen Angaben insgesamt über 1,1 Millionen Designs aus. Das ist eine Basis, die man sicherlich als aussagefähig bezeichnen darf.

North2 ist eine Duotone-Website aus unserer großen Übersicht zum Thema. (Screenshot: t3n)

Dazu mussten sich die Betreiber von Avocode nicht einmal anstrengen, denn der Dienst ist eine Art maschineller PSD-to-HTML-Konverter. Designer laden ihre Photoshop- oder Sketch-Dateien hoch und Entwickler arbeiten damit dann auf Code-Basis weiter. Neu daran ist im Wesentlichen, dass es sich um einen kollaborativen Prozess handelt. Außerdem kann Avocode nicht nur Webentwickler unterstützen, sondern gibt auch Code für Android- und iOS-Entwickler heraus.

Der Trend-Report selbst ist ebenfalls ein Beispiel für die gelungene Umsetzung etablierter Trends. Es setzt auf Long Scrolling, große Typografie, kräftige Farben, Illustrationen, parallaxe Effekte und viel Whitespace. Damit ist der Trend-Report unter Design-Aspekten mustergültig.

Und das kam bei der Analyse der hochgeladenen Designs heraus:

Photoshop ist nicht mehr der Platzhirsch

In 2016 wurden 59 Prozent der Designs mit Sketch erstellt und nur noch 41 Prozent hatten ihren Ursprung im Photoshop. In 2015 sah dieses Verhältnis noch recht genau umgekehrt aus.

Sketch ist auf dem Vormarsch. (Screenshot: t3n)

Sketchs Symbol-Funktion entwickelt sich zum Design-Standard

Symbole sind, in der Lesart von Sketch, Designelemente, die wiederverwendbar angelegt sind. Es gibt einen Symbolmaster, also ein Element, das das Original bildet. Dieses Element wird dann überall dort hinein verknüpft, wo es benötigt wird, vergleichbar etwa mit einem Textbaustein oder der Library-Funktion in Dreamweaver. Wird nun der Master geändert, ändern sich alle Instanzen mit.

Die Funktion ist so populär, dass sie inzwischen auch von Adobe XD und Affinity Designer geboten wird. In 2016 fand sich in den auf Avocode bereitgestellten Sketch-Designs eine fast um das Achtfache erhöhte Nutzung von Symbolen.

Sketch-Designs zeigen einen schnelleren Fortschritt

Man kann es so oder so sehen - Fakt ist, dass Sketch-Designs im Schnitt 4,5 Mal überarbeitet wurden, bevor es ans Coding ging. Photoshop-Designs wurden nur zweimal geändert, bevor sie in Code gegossen wurden.

Designs mit Sketch entwickeln sich schneller und aktiver. (Screenshot: t3n)

Sind Photoshop-Designer nun einfach präziser beim ersten Aufschlag oder lädt die leichtgewichtigere Lösung von Bohemian Coding einfach eher zu einem flüssigeren Arbeiten mit offenerem Ansatz ein?

Photoshop-Dateien werden immer leichter

Im Vergleich zum Vorjahr reduzierte sich die durchschnittliche Größe einer PSD um zwei Drittel auf durchschnittlich rund neun Megabyte. Offenbar nutzen Designer die intelligenteren Vektorfunktionen im Photoshop nun konsequenter, um das Sharing der Designs zu erleichtern und zu beschleunigen.

Roboto entwickelt sich zum Standard-Font

Roboto, ein Font aus Googles Material Design, ist die mit Abstand meistgenutzte Schriftart in Sketch- und Photoshop-Designs und hat die vormals führende OpenSans abgelöst.

Sketch-Designs werden heller, Photoshop-Designs dunkler

Hier braucht es auch schon fast einen Psychologen zur Erklärung. Tatsache ist, dass in 2016 56 Prozent aller Sketch-Designs mit Whitespace arbeiteten, während es nur 24 Prozent aller Photoshop-Designs taten.

Ist es am Ende so, dass die Sketch-Designer die frischeren, jüngeren Ideen umsetzen, während die Photoshopper eher den gesetzten Designer in seinen späteren Berufsjahren repräsentieren?

Avocode bietet die alternative Erklärung, dass möglicherweise die dominierende Farbe der UI des Tools auf das Design abfärbt. Photoshop hat bekanntlich eine dunkle, Sketch eine helle Benutzeroberfläche.

Die Nutzung unterschiedlicher Füllmethoden sinkt

Füllmethoden erlauben zwei oder mehr Designebenen miteinander zu reagieren. Die Standardeinstellung ist lediglich die, dass eine Ebene, die über einer anderen Ebene liegt, die darunterliegende Ebene verdeckt. Mit Füllmethoden (Blending Modes) lassen sich jedoch auch die beliebten Duotone-Bilder erzeugen.

Die sinkende Verwendung von Blending Modes kann einerseits damit zu tun haben, dass Vektoren keine Füllmethoden benötigen. Andererseits ist es denkbar, dass sich Designer und Developer einander annähern und Designer es dem Entwickler nur noch dann schwer machen wollen, wenn es nicht anders geht. Denn Füllmethoden in Code umzusetzen, ist nicht einfach.

55 Prozent aller Ebenen-Effekte sind verschwunden

Wer kennt sie nicht, die abgeflachten Kanten, Reliefs oder Schlagschatten? Das waren mal trendy Effekte, auf die kaum jemand verzichten wollte. Laut Avocode wiesen noch in 2015 rund 40 Prozent aller Photoshop-Designs Schlagschatten auf. In 2016 waren es weniger als 20 Prozent. Ähnliche Reduzierungen zeigen sich bei Verlaufsfüllungen und Relief-Effekten.

Designs werden einfacher durch gezielten Verzicht. (Screenshot: t3n)

Abgerundete Ecken dominieren nach wie vor

Über 80 Prozent aller Formen in Photoshop- und Sketch-Designs weisen nach wie vor abgerundete Ecken auf. Der Trend schwindet zwar, aber nur sehr langsam. Eine Interpretation dessen könnte sein, dass sich abgerundete Ecken besser in das Bild eines Smartphones, das ebenfalls in aller Regel abgerundete Ecken aufweist, einfügen. Zudem sehen abgerundete Elemente anfassbarer aus und laden eher zum Tappen ein.

Trend-Report 2016, die Insights

Was können wir nun aus dem Trend-Report schließen? Generell beschleunigt sich das Webdesign. Die Tools werden leichtgewichtiger, Boliden sind auf dem Rückzug. Mit dem leichtgewichtigeren Sketch wird wesentlich aktiver designt, bevor das Layout in Code gegossen wird. Im Design wird mehr auf die spätere Entwicklung geachtet. Das erkennen wir an leichter werdenden Dateien, weniger Ebeneneffekten und der geringer werdenden Nutzung von Füllmethoden.

Design ist auf dem Weg zum Minimalismus.

Übrigens: Zu den doch recht knappen Erläuterungen auf der Website zum Trend-Report gibt es ein ergänzendes PDF mit mehr Hintergrundinformationen. Dieses PDF erhaltet ihr, wenn ihr auf den giftgrünen Button mit der Aufschrift „Download Full Report” oben rechts auf der Seite klickt und eine gültige E-Mail-Adresse angebt, an die der Download-Link dann geschickt wird.

Finde einen Job, den du liebst zum Thema Grafikdesign, Mediengestalter

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden