Die niederländische Webseite Bio-Bak (übersetzt Bio-Mülltonne) ist ein kreatives und künstlerisches Web-Experiment. Es stecken viele neuartige Ideen und Denkansätze in der Webseite, so dass man Webdesign einmal aus einer ganz anderen Perspektive betrachten kann. Und selbst wenn der wilde, illustrative Collagen-Stil sicher nicht jedermanns Sache ist, macht es auf alle Fälle Spaß die Webseite auszuprobieren, und sich von den kreativen Ideen für eigene, zukünftige Web-Projekte inspirieren zu lassen.

Ein kleiner Webseiten-Rundgang

Da der Aufbau der Webseite völlig frei und somit schwer auf einen Blick zu erfassen ist, habe ich die spannendsten Elemente der Webseite hier zusammen gefasst.

1. Die Introseite

Wenn man die Bio-Bak Webseite besucht, wird man zuerst darauf hingewiesen, dass der Inhalt am besten im Vollbildmodus zu betrachten ist.

Bio Bak Webdesign Inspiration

Eine weitere Nachricht empfielt außerdem die Verwendung von Lautsprechern. Gleich auf der Introseite sind wild animierte, gezeichnete Monster zu sehen. Den kreativen Skizzen- und Collagenstil findet man auf der gesamten Webseite wieder.

2. Die Haupt-Navigation mit Ton

An der Seiten-Navigation der Webseite ist vor allem spannend, dass man mit Hilfe von Sprache auf die einzelnen Menü-Punkte navigiert wird. Der verrückte Megafon-Mann erklärt einem alle Menü-Punkte der Webseite in einem lustigen Englisch.

Bio Bak Webdesign Inspiration

Der Mauszeiger ist aus einem Bild einer echten Hand animiert. Die Hand mimt die Symbole eines echten Mauszeigers nach.

3. Aboutseite mit Animationen und Interaktivität

Die T-Rex Collage auf der Aboutseite ist kreativ animiert. Hält man sich eine Weile auf der Aboutseite auf, entdeckt man etliche lustige Animationen.

Bio Bak Webdesign Inspiration

Außerdem kann man den T-Rek mit der Hand-Maus packen und schütteln. Dieser reagiert darauf mit bestimmten Bewegungen. Die Interaktion auf der Seite finde ich besonders kreativ und humorvoll umgesetzt. Es ist ein interessanter Aspekt, dass man als Webseiten-Besucher durch aktives Handeln eine Reaktion hervorrufen kann.

Der Back-to-Home Button der Aboutseite ist ebenfalls mit Hilfe von Ton animiert und weist einen deutlich darauf hin, wie man sich auf der Webseite weiter navigieren kann.

4. Die Kontaktseite

Auf der Kontaktseite von Bio-Bak gibt es ebenfalls jede Menge zu entdecken und auszuprobieren. Interessant ist, dass man das Kontaktformular beschädigen kann (das Eingabefeld fällt dann herunter). Man muss es dann erst mit der Maus-Hand aufheben, und wieder an der richtigen Stelle platzieren.

Bio Bak Webdesign Inspiration

Ebenfalls interessant finde ich, dass man nach Absenden des Formulars mit einer Animation belohnt wird. Dieser spielerische Ansatz und das Belohnungs-Prinzip erinnert stark an ein Computerspiel. Über das Prinzip Inhalte im Web spielerisch zu vermitteln, wird auch im TED-Video »Gaming can make a better world« gesprochen.

5. Jede Menge Kreativität im Bio-Bak

Unter dem Punkt »Explore the Bio-Bak« gibt es eine Toolbox, welche als Navigation dient. Die Toolbox ist animiert und spricht mit dem Besucher.

Bio Bak Webdesign Inspiration

Wie auf einer Spiele-Seite kann man verschiedene Aufgaben erledigen (z.B. Tools zu finden). Die noch fehlenden Tools werden einem jeweils in der Toolbox angezeigt.

Als weitere Hilfestellung zur Navigation auf dem Bildschirm taucht immer wieder eine erklärende Nachricht in der unteren rechten Ecke auf.

Bio Bak Webdesign Inspiration

6. Die Fortbewegung im Bio-Bak

Um die fehlenden Elemente in der Toolbox auf der Seite zu finden, muss man sich mit Hilfe von Drag’n’Drop weiter navigieren. Die Navigation auf der großen Webseite erinnert stark an die Navigation auf Seiten wie Google Maps und Google Earth oder auch an die Arbeitsfläche bei Grafikprogrammen wie Adobe Illustrator.

Der Ansatz eine große Gesamtseite zu gestalten, von der dann je nach Screengröße nur ein kleiner Bereich sichtbar ist, könnte auch ein spannender Ansatz für eine zukünftige, flexiblere Webseitengestaltung sein.

7. Interaktive, spielerische Webseiten-Elemente

Behilflich bei der Suche nach den Toolbox-Tools im Bio-Bak ist ein illustrierter, sprechender Metalldetektor der zu piepsen anfängt, sobald man sich einem Gegenstand nähert.

Bio Bak Webdesign Inspiration

Außerdem gibt es noch jede Menge verrückte Monster auf der Seite zu entdecken, bei Klick oder Drag’n’Drop werden diese animiert.

Bio Bak Webdesign Inspiration

Neben den Monstern gibt es noch etliche weitere Animationen und kleine Spiele zu erkunden. Wenn man beispielsweise eine gefunden Batterie in das Grammophon steckt, fängt ein verrückter kleiner Vogel an, wie wild auf Technomusik zu tanzen.

Bio Bak Webdesign Inspiration

8. Navigation durch Akustik

Die Navigation durch Ton und akustische Signale ist ein weiterer spannender Aspekt, der mir auf der Bio-Bak Seite aufgefallen ist. Geräusche werden je nach Entfernung des Mauszeigers lauter oder leiser. Außerdem wird die Funktion von Buttons jeweils mit Hilfe von Ton erklärt. Wenn man auf diese Weise mit Ton umgeht, könnten sich beispielsweise auch blinde Menschen leicht auf einer Webseite zurechtfinden.

Wie du siehst gibt es wirklich jede Menge auf der Bio-Bak Webseite zu entdecken und auszuprobieren. Dieser kreative, interaktive und offene Ansatz macht die Webseite meiner Ansicht nach sehr modern, und kann somit auch als Denkanstoss und Input für eigene (eventuell auch weniger verrückte) Webseiten-Projekte dienen.

Wie gefallen dir die Ideen auf der Bio-Bak Webseite? Kennst du weitere inspirierende Webseiten, die Webdesign und Webentwicklung einmal anders definieren, und so kreativen Input für Webdesigner geben können? Über dein Feedback und weitere Tipps freue ich mich sehr!