PAGE online

Michelberger’s Fountain of Youth

D

Bild Michelberger Fountain of Youth

as überhippe Michelberger Hotel in Berlin hat jetzt auch ein Coconut Water herausgebracht: »The Fountain of Youth«. Creative Director Azar Kazimir kreierte eine tropische Story für Webseite und Packaging, in deren Mittelpunkt ein roter Affe steht.

 

 

Das Michelberger Hotel in Berlin Friedrichshain ist weit mehr als ein Designhotel – Veranstaltungsort für Konzerte und Konferenzen, Treffpunkt, Café, Bar und Betreiber einer eigenen »Booze Company«. Und seit neuestem ist Michelberger auch Produzent eines eigenen Coconut Waters: » The Fountain of Youth«. Bislang gab es das Getränk nur im Hotel, jetzt kommt es international auf den Markt.

Creative Director des Michelberger Hotels Azar Kazimir entwickelte für das neue Produkt die Story eines Affen: Die Webseite »MichelbergerMonkey.com« erzählt in Kazimirs bunten, animierten Illustrationen, von diesem Affen, der auf einer tropischen Insel lebt und sich Sorgen übers Altwerden macht. Nach einer abenteuerlichen Reise erlangt er ewige Jugend und Stärke. »Kokosnusswasser ist ein Wellness-Drink und die meisten Marken, die Kokosnusswasser produzieren, positionieren sich neben Sport, Yoga und Ähnlichem.«, sagt Azar Kazimir. »Ich wusste, dass ich die Story des Affen ins Zentrum stellen wollte. Sie sollte ein bisschen wie ein Kinderbuch sein. Also entwarf ich die Zeichnungen und brachte gemeinsam mit Lukas Sommer die Webseite zum Leben.«

Bild Michelberger Fountain of Youth

Bild Michelberger Fountain of Youth

Bilder: Screenshots aus dem Intro

Nach dem animierten Intro gelangt der Besucher auf die Hauptwebseite, auf der sich alle Informationen zum Produkt finden. Hier navigiert man etwas ungewöhnlich – typisch für Michelberger – über eine große Seite, die ebenfalls mit animierten Illustrationen aufgepeppt ist. Verlinkt ist auch der Online-Shop, in dem nicht nur das neue Coconut Water, sondern auch T-Shirts und Caps mit dem roten Affen erhältlich sind. Außerdem Shirts, die sich mit Sprüchen wie »I met Elvis« oder »Born in 1955« auf den Jungbrunnen beziehen.

Für die mobile Version der Webseite entwickelten Kazimir und Sommer eine alternative Geschichte, »The Journey to the Island«, die dem vertikalen Scrollen auf dem Smartphone angepasst ist.

Bild Michelberger Fountain of Youth

Bild: Mockup der mobilen Seite

Gebaut ist die Webseite mit HTML5 und CSS3, die zentralen Animationen sind auf jQuery libraries aufgebaut, wie der Tornado oder das »Affen-Beben«, das mit einem Doppelklick auf den Affen entsteht und seine Superkräfte visualisieren soll. Auch auf der Hauptwebseite sind weitere Funktionen versteckt – klicken Sie mal auf die Gitarre oder die Muschel und beachten Sie den Surfer am unteren Rand der Webseite. »Wir wollten ein Erlebnis für den Nutzer gestalten und ihn dazu animieren, die Webseite zu erkunden.«, sagt Lukas Sommer. Ein integrierter »Store Locator« hilft mit Google Maps API dabei, den nächsten Händler des Produkts zu finden.

Das Coconut Water selbst ist verpackt in ansehnlichen Dosen, die mit der Illustration des bunten Affen, kleinen grünen Palmen, die aus dem Barcode wachsen, und dem Logo in schickem Retro-Font schon fast als Design-Produkt gelten können (Bilder in der Galerie).

Bild Michelberger Fountain of Youth

Bild Michelberger Fountain of Youth

Bilder: Screenshots der Hauptwebseite

 

KR_130207_FoY_logo-scene
Bild: Michelberger
1/9
KR_130207_FoY_design
Bild: Michelberger
2/9
KR_130207_FoY_box
Bild: Michelberger
3/9
KR_130207_FoY_cans-330ml
Bild: Michelberger
4/9
KR_130207_FoY_cans
Bild: Michelberger
5/9
KR_130207_FoY_mobile-site-mockup-1440
Bild: Michelberger
6/9
KR_130207_FoY_zIllu_01
Bild: Michelberger
7/9
KR_130207_FoY_zIllu_02
Bild: Michelberger
8/9
KR_130207_FoY_zIllu_03
Bild: Michelberger
9/9
Produkt: Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Best Practices für Web und Mobile. Coding-Tipps für CSS3. Tools, Bibliotheken und Generatoren fürs Prototyping & Wireframing

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren