design-festival-bern

Design Festival Bern

Der Webauftritt für den Berner Design Event

  • research, analysis & product strategy
  • ideation
  • digital content strategy
  • interaction & interface design
  • prototyping & testing
  • design system
  • technology & software engineering

Das Design Festival Bern geht in die zweite Runde. Grösser als letztes Mal und mit neuem Branding kommt es daher – da braucht es natürlich auch eine neue Webseite! Im Zentrum steht das neue Key-Visual, der Torus. Da er nicht nur für die unterschiedlichen räumlichen Dimensionen steht, sondern auch für digitale Innovation und Interaktion, soll er auch so visualisiert werden.

Mir war sofort klar, dass der Torus als interaktives Element dargestellt werden sollte. Damit die Besucher ihn im 3D-Raum per Maus, Accelerometer oder Touchscreen beeinflussen können.

Marcel Hadorn - Interaction Concept

Damit haben wir unseren Umsetzer vor die Herausforderung gestellt, das Key-Visual von Kaspar Allenbach interaktiv in der Webseite nachzubauen. Per WebGL und ThreeJS wird der Torus auf der Startseite gerendert und dreht sich fortlaufend. Er ist mit der Maus manipulierbar und reagiert auch auf die Bewegung des Smartphones.

Bemerkenswert ist dabei, dass kein Video oder GIF in die Webseite geladen wird. Der Torus wird direkt im Browser erzeugt. Dies passiert in Echtzeit und wird innerhalb weniger Millisekunden immer wieder neu gerechnet. Und dann kannst du auch noch damit interagieren… wunderbar.

Joel Stüdle - Creative Development

alles was das Design festival bern online sonst so braucht

So wie Kleider angeblich Leute machen, machen Aussteller und Mitwirkende definitiv ein solches Festival aus. Gebührenden Platz bekommen sie in einer Mosaik-Auflistung, was zu einer Vielfalt und dadurch spannender Anordnung von Bildern führt. Dank einer stets zufälligen Reihenfolge ist jeder mal im Rampenlicht. Mit einem einfachen Filter kann man sich eine genauere Übersicht verschaffen.

Damit man sich mit den zahlreichen Locations des Festivals zurechtfindet, kann man eine interaktive Karte konsultieren. Diese ist direkt verknüpft mit Details zu den Orten. Zusätzlich verfügen manche Locations über einen Button, welcher zu den Ausstellern oder Events an diesem Ort führt.

programmübersicht

Für die zeitliche Orientierung ist unsere Programmübersicht da. Während des Design Festival Bern zeigte ein Balken die aktuelle Zeit an der richtigen Position an – so wusste man immer gleich was als nächstes ansteht. Dazu sind die Events in Locations unterteilt, um einen optimalen Überblick zu gewährleisten. Die Eventdaten sind mit den jeweiligen Creatives verknüpft, dies dient nicht nur dem End-User, sondern auch der Person, die diese Events abfüllt. Nichts muss zweimal gemacht werden.

award voting während des festivals

Am Ende des Design Festival Bern sollte der beste Aussteller prämiert werden – auserkoren durch die Besucher! Deswegen wurde eine kleine Voting Page geschaltet, auf der alle Aussteller mit Bild und Location aufgeführt werden. Auch konnte man nach Location filtern! Dann abschicken und hoffen, dass man beim Preisausschreiben gewinnt.

Kunde: kreativBern

Website besuchen
Projekttyp
  • Responsive Website
Technologie
  • Wordpress
  • Atomic Theme
  • jQuery
  • SASS
  • ThreeJS
  • MySQL
  • WebGL