Benötigen Sie eine kleine Inspiration für ihr Webdesign? Hier sind einige der besten Beispiele für Webseiten, die WebGL verwenden, die wir in den letzten Monaten gesehen haben.

A Short Journey.

WebGL-Webseiten

A Short Journey wurde im Sommer 2015 ins Leben gerufen, als das Team von cher ami eine Pause von der Kundenarbeit einlegte, um mit dem 3D-Künstler Benoit Challand zusammenzuarbeiten. Zuerst sollte es ein Kurzfilm sein, aber es wurde zu einer ineraktiven Geschichte über eine Seereise, als das Team erkannte, dass eine Website den Nutzer mehr einbeziehen konnte.

„Wir haben einige Elemente in 3D mit Cinema 4D und andere Elemente in 2D mit Photoshop entworfen. Die Idee war immer, durch die Kombination von moderner Technologie und klassischen Techniken ein frisches Design zu erhalten“, sagt Gründer Jean-Frederic Passaot. „Wir haben jede Szene mit WebGL in 3D nachgebaut und auch wenn es viele knifflige technische Aspekte auf dieser Webseite gibt, war es immer das Ziel, ein schönes Gefühl einer sonnigen Reise zu vermitteln.“

Die Website wurde als Grußkarte für das neue Jahr gestartet, um Kunden an kalten Wintertagen aufzuwärmen. A Short Journey ist ein einfaches, aber schönes Beispiel dafür, wie Interaktivität genutzt werden kann, um ein Erlebnis voranzutreiben.

Brakebills University.

Als NBCUniversal sich an UNIT9 wandte, um ein interaktives zweites Bildschirm-Erlebnis für die neue Syfy-Serie „The Magicians“ zu schaffen, bestand eine der Herausforderungen darin, sich eine magische Lektion für jede Episode auszudenken. Ziel war es, eine Website zu schaffen, die informativer und spielerisch war, aber dennoch viele Herausforderungen und Inhalte bot, die der Nutzer entdecken konnte.

In enger Zusammenarbeit mit Syfy entwickelte das Team von UNIT9 13 Spiele für den Teil „Magic Lessons“ der Website. Diese können auf allen Geräten abgespielt werden und passen sich dem jeweiligen Gerät an.

„Die Herausforderung auf technologischer Seite bestand darin, eigenständige Spiele für die 13 Lektionen zu entwickeln, die jeweils unterschiedliche Technologien erforderten – von AngularJS und WebGL bis hin zu 3D-Animationen“, agt Ligia Stan von UNIT9.

Nachdem jede Episode ausgestrahlt wurde, kann der Benutzer auf die Website zurückkehren und eine andere Lektion nehmen, sowie mehr über die Charaktere erfahren. Das Team musste sicherstellen, dass Code, Kopie und Assets gleichzeitig mit der Ausstrahlung der Episode zugänglich wurden, was bedeutete, einen maßgeschneiderten Weg zu finden, Inhalte jenseits der klassischen CMSs freizugeben. Dies war die größte Herausforderung für das Team, aber das Ergebnis ist eines der besten Beispiele seiner Art.

Histography.

Histography ist das Abschlussprojekt des israelischen Designers und Entwicklers Matan Stauber an der Bezalel Academy of Arts und Design. Die Website zeigt eine interaktive Zeitleiste, die nicht weniger als 14 Milliarden Jahre vom Urknall bis heute umfasst. Es ist eine riesige, interaktive Infografik, die unsere Vorurteile darüber, wie man komplexe Themen vermittelt, in Frage stellt.

Die Zeitleiste der Histography, die Themen von Literatur und Musik über Attentate bis hin zu Erfahrungen und Religion umfasst, lädt uns ein, Ereignisse aus unserer reichen Vergangenheit zu erforschen, die jeweils dynamisch aus Wikipedia stammen und als kleiner schwarzer Punkt auf dem Bildschirm dargestellt werden. Es gibt zwei Modi: die horizontale, von links nach rechts gerichtete Ansicht, die es dem Benutzer ermöglicht, auf einen bestimmten Zeitraum einzugehen oder die helixartige Zeitmaschine, die eine kuratierte Liste von Schlüsselereignissen präsentiert.

Stauber sagt, dass er schon immer von der Idee fasziniert war, die Entwicklung der Geschichte im Laufe der Zeit zu zeigen: „Zeitachsen sind die beliebteste Art, Geschichte zu visualisieren und doch spürte ich, dass sie immer sehr begrenzt waren. Von Anfang an wusste ich, dass ich eine Zeitleiste erstellen wollte, die nicht auf ein Jahr, Jahrzehnt oder einen Zeitraum beschränkt ist. Ich wollte eine Zeitleiste, die die gesamte Geschichte enthält.“

Deutser.

Seiten für professionelle Dienstleistungen stehen vor einer besonderen kommunikativen Herausforderung: Es gibt kein greifbares Objekt, das es zu präsentieren gilt. Bei der Erstellung einer neuen Website für die Unternehmensberatung Deutser musste „We can`t stop Thinking“ herausfinden, wie man eine breite Palette von Dienstleistungen zu einem einzigen, zentralen Nutzen destilliert.

Das Team fasste den Entschluss, sich auf die Idee zu konzentrieren, dass Deutser Klarheit in einer unsicheren Welt schafft. „Die verstreuten Partikel repräsentieren das Chaos – etwas, auf das viele Unternehmen in der heutigen Welt stoßen. Klarheit wird durch die Partikel repräsentiert, die sich zu etwas Bedeutendem verbinden“, erklärt Kreativdirektor Nicholas Scimeca.

Die Metapher ist ähnlich stark wie die Botschaft. Eine weitere Herausforderung war es, sicherzustellen, dass die Erfahrung nahtlos zwischen den Geräten funktioniert, „Die Partikel werden mit Three.js und WebGL-Canvases erstellt, um sie zu vereinfachen. Wir haben ein benutzerdefiniertes Animations- und Warteschlangensystem entwickelt, das uns mehr Kontrolle über Animationen, Übergänge und Bilder pro Sekunde gibt“, fügt Scimeca hinzu.

Google Maps Cube Game.

Das Google Maps-Team hat zusammen mit B-Reel das Google Maps Cube Game entwickelt, bei dem Sie einer kleinen blauen Kugel helfen, durch die Straßen von New York, Tokio, Paris und San Francisco zu navigieren. Während Sie ihre Maus bewegen, dreht sich der Würfel und der Ball rollt die Straßen hinunter, springt von Gebäuden ab und macht sich auf den Weg zum Ziel. Das Spiel Maps Cube nutzt Three.js für eine wunderschöne Darstellung.

Damit haben wir ihnen unsere 5 beliebtesten WebGL-Webseiten präsentiert. Falls Sie noch Fragen oder Anregungen haben, können Sie sich gerne an unsere Fachexperten in unserem Forum wenden.

Vielen Dank für ihren Besuch.