Es kommt nicht jedes Jahr vor, dass wir wirklich große Veränderungen erwarten. Angesichts der schnellen Entwicklung der Technik in den letzten Jahren sind wir sicher, dass sich die großen Webdesign-Trends 2016 darauf konzentrieren werden zu reifen und diese Entwicklungen auszuweiten.  

Flat Design wird mehr Textur bekommen, das “Kinoerlebnis” wird sich weiter verbreitet und die Verwendung von JavaScript Librarys ein größeres Experimentieren ermöglichen. Die wachsende Beliebtheit von WebGL und Virtual Reality wird mit Sicherheit Websites, wie wir sie kennen, umgestalten und Platz für neue und aufregende interaktive Möglichkeiten schaffen.

In diesem Artikel werden wir 11 der größten Webdesign-Trends, die wir dieses Jahr erwarten, analysieren.

1. WebGL (Web Graphics Library)

In Bezug auf neuere Entwicklungen gibt es einen bemerkenswerten neuen Stern am Himmel: WebGL (Web Graphics Library). Diese Technologie treibt einige der erstaunlichsten Websites, die in letzter Zeit erstellt wurden, an.

Einfach gesagt ist WebGL eine Methode interaktive, 3D und 2D Grafiken ohne Plugin innerhalb eines Browsers mit Hardwarebeschleunigung zu rendern.

Interaktive 3D WebGL-Anwendung

eyes_nasa_gov_curiosity

WebGL war eine große Sache während der SIGGRAPH-Konferenz 2015. Die komplette eineinhalbstündige Präsentation zu 3D Grafiken und WebGL kann man hier bei YouTube schauen. In dem Video stellt die NASA ihre Webanwendung “Experience Curiosity” vor, welche den dritten Jahrestag der Landung des Curiosity Rover auf dem Mars markiert. Es erlaubt den Besuchern, einen 3D NASA-Rover auf der Oberfläche des Mars zu erleben und seinen Roboterarm zu bedienen.

Um diese Website zu erstellen, wurden Blend4Web (online, interaktive 3D-Visualisierung) und Blender (3D-Modelling und Animation-Suite) verwendet.

beloola_com_

Beloola ist das erste komplett webbasierte soziale Netzwerk, das als umfassende 3D-Welt entworfen wurde. Es ähnelt Linden Labs “Second Life”, benötigt aber bis auf einen Browser keine spezielle Software.

3D WebGL „Video“

angrywifegame_com

Eine weitere Kostprobe von 3D in WebGL bietet die „Angry Wife” Spiel-Promo. Auf den ersten Blick sieht es wie ein Video aus, aber das ist es nicht. Tatsächlich ist es eine 3D-Szene, die mithilfe der three.js JavaScript Library in eine Webseite verwandelt wurde.

sbs_com_au_theboat

Australiens SBS TV hat Nam Les Geschichte über die Flucht aus Vietnam, “The Boat”, übernommen und daraus mit WebGL eine interaktive Video-Story gemacht. Das preisgekrönte Projekt ist in Kapitel unterteilt mit atemberaubenden Animationen und handgezeichneten Illustrationen. Genau wie im vorangegangenen Beispiel kommt auch hier die three.js Library zum Einsatz.

because_recollection_com

Because Recollection” ist eine „interaktive Reise durch 10 Jahre Musik“. Erstellt wurde es mit PIXI, als eine Reihe von Clips mit interaktiven Elementen – viel klicken, greifen und halten – um die Nutzerbindung zu erhöhen.

Datenvisualisierung mit WebGL

histography_io

Histography veranschaulicht historische Ereignisse, die auf Wikipedia vermerkt sind auf einem interaktiven Zeitstrahl. Es mag nicht sonderlich interessant klingen, aber erlebe es selbst und vielleicht wirst du überrascht sein, wie sich eine solch unübersichtliche Menge an Daten einwandfrei in eine einfache, spannende und responsive Oberfläche verwandelt. Es ist sowohl im Sinne von Größe als auch Geschwindigkeit responsiv.

britishmuseum_withgoogle_com

Eine ähnliche Idee wurde auf eine ganz andere Art bei der British Museum Collection umgesetzt. The Museum of the World – das Ergebnis einer Partnerschaft zwischen dem British Museum und dem Google Cultural Institute – zeigt Objekte der British Museum Collection quer durch Zeit und Raum innerhalb einer 3D, WebGL angetriebenen Oberfläche.

Man kann über die Z- oder Y-Achse in der Zeit navigieren, und durch die X-Achse auf Kontinenten. Das Menü ermöglicht es, Schlagworte einzuschalten, um Objekte nach Themen zu gruppieren (wie zum Beispiel „Handel und Konflikt“).   

WebGL-basierte 2D-Animation

nouvelles

Die Seite „Nouvelle Ecritures“ von FranceTV ist ein erstaunliches Beispiel einer 2D WebGL Animation innerhalb eines Browsers. Sie vermittelt den Eindruck, eine illustrierte, vertikale Schriftrolle zu lesen, indem sie die Pixi.js JavaScript Library verwendet.

Vom technischen Standpunkt aus gesehen könnte man es als eine durchlaufende 2D Animation, die innerhalb des Browsers in einen Pseudo-3D-Raum gerendert wird, beschreiben. Ziemlich spektakuläres Zeug.

2. VR (Virtuelle Realität)

Virtuelle Realität (VR) ist eine ähnliche Technologie, von der erwartet wird, die Gadget-Welt 2016 zu erschüttern. Und schon bald wird es womöglich noch interessanter.

Hast du von Google Cardboard gehört? Mit einem Android-Telefon und einem Stück Pappe kannst du dein eigenes hausgemachtes VR-Erlebnis schaffen. Google ergänzt das Ökosystem der selbstgemachten VR durch Cardboard Camera, eine Android-App, welche VR-Fotos schießt – eines der App-Highlights des „The Guardian“ im Januar 2016.

Wenn du ein noch besseres VR-Erlebnis möchtest, kannst du das Rift VR Set von Oculus vorbestellen. Ein Produkt mit einem Preis irgendwo zwischen Google Cardboard und Oculus, ist das Samsung VR GEAR.

Doch spielt das für Webdesign eine Rolle? Noch nicht, aber schau dir die WebVR Initiative (eine JavaScript API die Zugriff auf VR-Geräte ermöglicht) an, um einen Eindruck davon zu bekommen, in welche Richtung sich diese Technologie entwickelt. Funktionierende Beispiele findet man beim Mozilla VR-Team, dessen Ziel es ist, „dabei zu helfen, dem offenen Web leistungsstarke virtuelle Realität zu bringen“.

VR Video

catchthedragon_nl

Ein großartiges Beispiel der aufkommenden Technologie ist das Promo-Video für Peugeots 208, welches sowohl VR (für Google Cardboard) als auch eine 360-Grad-Video-Option auf seiner Seite bietet. Beide Versionen sind komplett interaktiv und, wenn man ein Gerät mit Gyroskop verwendet, muss man im wahrsten Sinne des Wortes seinen Kopf hin und her drehen, um „den Drachen zu fangen“.

3. Partikelsysteme

www_deutser_com

Partikelsysteme wurden in der 3D-Grafik seit den frühen 80ern genutzt, um ungleichmäßige Arten von Naturphänomenen wie Nebel, Rauch, Feuer, Wasser, Gras und Wolken nachzubilden. Heute, mit WebGL-Programmierung, beginnt man damit, Partikel zu verwenden, um visuelle Ideen auf Webseiten zu übertragen.

Die Deutser Website ist ein schönes Beispiel. Sieh dir an, wie die Partikel zerspringen und sich wieder in cleveren Formen und Symbolen zusammensetzen und dabei auf deine Bewegungen mit der Maus reagieren. Das Ergebnis ist angenehm hypnotisch.

4. 360-Grad-Panorama als Website

rainforest_arkivert_no

Regnskogfondets Rainforest nutzt nicht einfach nur ein einfaches Panoramabild. Es nimmt dich tief mit in den Dschungel mit 360° Ansichten, bei jedem Schritt, den du machst.

Das Interessanteste an der Rainforest Seite ist nicht nur das Verwenden von Vollbild-Panoramen oder der schönen 3D-Landschaft, sondern die Art und Weise, wie sie die Navigationselemente in das 360°-Erlebnis integriert haben.

5. Vollbild-Videostorys mit interaktiven Szenen und Elementen

christmas_express

Milkas Christmas Express Website nutzt ebenfalls die Idee der Vollbild-Video-Geschichte, aber soweit ich weiß, hat das nichts mit WebGL zu tun.

Die Seite führt dich durch das Erlebnis, einen Weihnachtsbrief zu verschicken, benötigt 10 Minuten um eine einfache E-Mail zu erstellen und noch mal 24 Stunden für die Lieferung. Dadurch, dass du dazu gezwungen bist, den Brief mit einem animierten Stift zu schreiben, bist du dazu angehalten, dich wirklich mit diesem Prozess auseinanderzusetzen und die Weihnachtsatmosphäre zu spüren. Sämtliche Details sind perfekt; selbst die Stiftanimation folgt präzise den Buchstabenformen.

6. Animierte Geschichten

Eine Idee durch eine animierte Geschichte zu verdeutlichen, ist nichts Neues, dennoch ist es ein Trend, der sich kontinuierlich weiterentwickelt. Das Interessante daran ist, dass seine Umsetzung nicht nur mit visuellen oder technischen Aspekten zusammenhängt.

Die animierte Geschichte benötigt mehr als ein Design und einen Entwickler. Es braucht Mut, um weit über Firmenklischees hinauszugehen, und großartige Werbetexte. Dies ist ein nicht sonderlich weit verbreitetes Gut und deshalb stechen Websites, die es erfolgreich einsetzen, in der Welt des Webdesigns auch besonders hervor.

annualreport2015_danishcrown_dk1

Der Jahresbericht 2014/15 des weltweiten Lebensmittelproduzenten Danish Crown ist alles andere als nur langweilige Diagramme und Tabellen. Die Seite spricht den Leser durch schnörkellose Texte und auffallende Bildsprache an. Sie haben es gewagt, abstrakten Humor und einen kitschigen, illustrativen Stil zu verwenden, um ihre Investoren anzusprechen.

Neben dem Bildmaterial ist der Text erfrischend, direkt und natürlich. Wie das Unternehmen erklärt, „Es ist nicht der Versuch, clever zu wirken. Es ist keine Vision oder Mission oder irgendwas in dieser Fachsprache. Es hat nichts mit unseren Grundwerten zu tun – Respekt zu zeigen und voranzugehen. Denn natürlich tun wir das. Respekt zeigen und vorangehen.“

worldseasiestdecision_org1

Diese Art des Geschichtenerzählens ist unter nicht staatlichen Organisationen weit verbreitet. Die Seite von The Climate Reality Project, „World’s Easiest Decision“, ist ein interaktives Comicbuch über den Klimawandel. Sie erzählt die Geschichte durch alberne Ja- oder Nein-Fragen, die eine Handvoll frecher Antworten auslösen, und man wird aufgefordert, sich entweder einen Film anzuschauen oder eine Petition zu unterzeichnen.

In diesem Beispiel können wir ebenfalls beobachten, wie Flat Design erfolgreich mit Texturen vereint wurde.

7. Lineare Navigation

Noch vor einigen Jahren setzten Designer und Entwickler alles daran, lineare Navigation zu vermeiden. Es ging immer nur um Menüs und Klickpfade. Dann tauchten die Onepager auf und blieben für immer bei uns. Heutzutage ist es beinahe unvorstellbar, dass scrollende Websites mal als etwas Schlechtes betrachtet wurden. (Ja wurde es, von vielen Designern, Kunden, Entwicklern – und man hört noch immer vom „above the fold“-Mythos).

Allerdings suchen wir hier nicht nach den besten Onepagern des Jahres. Lass uns versuchen, einige der neuen und innovativen Wege zu finden, auf denen Designer lineare Navigation für Webseiten kreieren.

julienbelmonte_com

Die Website von Regisseur Julien Belmonte dreht sich rund um Filme – von daher ist es eine hervorragende Idee, auch die Seitennavigation darauf aufzubauen. Ein Film nach dem anderen wird von links nach rechts in einer horizontalen Bewegung durch eine verstellbare rote, dünne Linie, die an eine Zeitleiste erinnert, hervorgehoben.

Darüber hinaus gibt es so gut wie keine Navigation. Der Text in der „About“ Spalte ist nicht scrollbar und erzeugt die Atmosphäre eines Filmabspanns.

francescobertelli_com

Francesco Bertelli hat eine innovative Herangehensweise für seinen Online-Lebenslauf gewählt. Seine Verwendung eines interaktiven Kalenders ist ein schöner und effektiver Weg, jemandem seine berufliche Entwicklung zu zeigen.   

Die Navigation zwingt Besucher dazu, sich nur auf eine Sache zu konzentrieren, indem sie ein Ereignis auf 100% des Bildschirms ausbreitet. Gleichzeitig bleibt sie schnell und einfach zu navigieren und streicht hilfreicherweise die Daten aus, die man sich bereits angesehen hat.

8. Screen-after-Screen-Navigation

Diese Art der Navigation wird bereits seit einiger Zeit verwendet. In dem Artikel zu Web-Trends 2013 auf unserem amerikanischen Blog war Bagigia ein Beispiel der „Screen-after-Screen“- oder „vor/zurück“-Navigation. Herkömmliche Bücher haben uns an die page-after-page-Navigation gewöhnt, von daher ist es nur selbstverständlich, immer mehr Seiten zu sehen, die diese Idee wiederverwenden.

imperiali_geneve_com

„Manufacturer of Masterpieces“ von Imperiali Geneve nutzt eine ähnliche Herangehensweise wie Francesco Bertelli, indem sie die Aufmerksamkeit des Nutzers auf jeden einzelnen Bildschirm lenken, und so ihre Geschichte erzählen.

Sie nutzen Slide-in und Slide-out Navigation, um Anfang und Ende jedes Bildschirms zu markieren. Auf diese Art ähnelt es eher den Überblendungen eines Films als denen einer Onepager-Website.

vangogh

Noch deutlicher kann man dieses Navigationsmuster auf der Website des Van Gogh Museums in Amsterdam sehen. Die aktuelle bzw. Gesamtzahl der Seiten und Pfeile gepaart mit den gleitenden Übergängen zwischen den Seiten vermitteln einem das Gefühl, ein herkömmliches Buch zu lesen.

Das Verlangen nach einem Kontrollniveau, welches ein Designer in traditionellen Medien ausüben konnte, wird mehr und mehr sichtbar. Nach welchem Webdesign-Trend sollte man als nächstes Ausschau halten? Eine selbsterstellte, feste Begrenzung oder Umrandung um eine Seite herum ist ein jahrhundertealtes Konzept, welches mit Sicherheit bald erneuert wird.

9. Gerahmte Seiten

Studien haben gezeigt, dass dieser Trend beliebter wird, als wir es ursprünglich dachten. Ähnliche Ideen im Webdesign haben sich seit einiger Zeit entwickelt, doch nie zuvor wurde es auf eine so perfektionistische und geschmackvolle Weise umgesetzt.

branch

PNCs Ginger Bread Branch ist eine Website, die der ersten lebensgroßen Bank aus Lebkuchen gewidmet ist. Es ist ebenfalls ein Hilfsmittel für Pädagogen, um über die Wirtschaft zu lehren. Die Seite verwendet nicht nur einen Rahmen innerhalb des Browsers, sondern nutzt ebenfalls ein After-Screen-Navigationsmuster.

wloks_com1

Wloks Website verkauft grafische Werte auf eine schicke und einzigartige Weise. Anstelle einer durch Archivbilder geprägten E-Commerce-Oberfläche bietet diese Seite einen Stil, der den Look eines klassischen gedruckten Katalogs und Trompe-l’œil-Gemäldes hervorruft, mit Rahmen und Menüelementen, die in den Ecken des Bildschirms platziert sind.

34_ge_en

Beer 34 haben einen Weg gefunden, das Bildschirmlayout bei jeder Auflösung zu beeinflussen, indem sie sich von Infografiken und Storytelling inspirieren lassen haben. Gleichzeitig bewahrt die Seite das Erscheinungsbild eines alten Etiketts. Mit relativ einfachen Mitteln gemacht ist es eines der liebenswürdigsten Beispiele in dieser Reihe.

10. Entdecken der CSS-Transformation

stand4humanrights_com_wall

Stand4HumanRights bittet dich, der Bewegung beizutreten, indem du dein Bild zu einer Social Wall, welche aussieht wie eine riesige gebogene Oberfläche, hinzufügst und es dann in den sozialen Netzwerken teilst. Angetrieben durch CSS-Transformationen ist diese ziehbare „Social Wall“ ein einzigartiges Erlebnis – benötigt aber eine Menge Rechenleistung und reagiert nicht so schnell, wie man es erwarten würde.

species_in_pieces.com1_

Species in Pieces nutzt CSS-Animationen, um eine interaktive Onlineausstellung zu kreieren, die 30 gefährdete Arten der ganzen Welt unter die Lupe nimmt. Es spielt mit der Metapher, dass seine Überlebenden wortwörtlich „zerstückelt“ sind, die Animationen zersplittern und setzen sich dann wieder zusammen, um die jeweilige Tierart zu formen.

11. SVG Animation

halo_halo

Eigentlich scheint es recht seltsam, dass es nur so wenige Seiten gibt, welche die klassische, beständige Scalable-Vector-Graphics-Technologie (SVG) für interessantere Dinge verwenden, als Auflösung, unabhängige Icons, Logos oder Schriftarten. Holo Halo ist hier eine Ausnahme und eine Inspiration für Webdesigner weltweit – und zeigt, was man mit SVG alles machen kann.

Zusammenfassung

Es gibt keinen Zweifel daran, dass der größte Webdesign-Trend 2016 WebGL in all seinen Varianten ist – interaktive Videos, Spiele, Animationen und Datenvisualisierung. Virtuelle Realität wird als das nächste große Ding gesehen – allerdings hängt es sehr von der Anbindung der VR-Geräte ab.

Ein weiterer allgemeiner Trend ist die Betonung von natürlichen Medien. Dies bezieht sich auf handgezeichnete, gemalte und gescannte Elemente – manchmal gepaart mit dem höchsten Level technischer Verfestigung, wie in dem Beispiel von „The Boat“. Dieser Trend hat allerdings auch die Tendenz, Webseiten gedruckten Büchern, Magazinen, Etiketten, Postern und Comic Büchern ähneln zu lassen. Dies wird durch das Nutzen von page-by-page-Navigation, das Verwenden von Rahmen und – allgemein gesagt –  dem Versuch, Bildschirme mehr wie „eine Seite“ anstatt eines „Fensters“ zu behandeln, erreicht.

Wenn du es nun geschafft hast, dich durch diesen langen Artikel zu kämpfen, ist hier ein kleiner Bonus für dich. Fahre einen Delahaye 165, um ihn vor dem Vergessen zu retten:

timeshift165_com

Lies hier einige unserer vergangenen Webdesign-Artikel: