Liquorigin

War Ernest Hemingway ein Mojito-schlürfender Diabetiker? Was hat ein Pirat mit der Erfindung des Piña Coladas zu tun? Und warum sollte eine klassische Margarita exakt 12 Sekunden lang geschüttelt werden?

Willst du die Antworten erfahren? Dann genehmige dir ein, zwei Cocktails am Bartresen von Liquorigin und stille deinen Wissensdurst. Hier beleuchten wir die Entstehungsmythen rund um neun weltberühmte Cocktails. Jeder Drink entführt dich in eine mit Fakten gespickte Kurzgeschichte und eröffnet dir so eine ganz neue Art der Orientierungslosigkeit. Egal wie viele du konsumierst, unsere Spirituosen bescheren am nächsten Tag garantiert keine Kopfschmerzen. Und statt dein Sichtfeld einzuschränken, erweitern sie sogar deinen Horizont.

Was darf es also für dich sein? Ein eiskalter White Russian oder lieber eine würzige Bloody Mary? Egal wie du dich an der Bar entscheidest, wir stossen schon mal an: PROST!

(sba)

Kritik
von Sharon Rieser, Anina Bruggmann und Maria-Isabel Ochsner

Die Idee
Ursprünglich war das Ziel, einen Adventskalender mit Fakten zu bekannten Drinks zu kreieren. Da uns jedoch schlichtweg die Zeit fehlte, das Ganze vor Anfang Dezember umzusetzen, haben wir uns für eine zeitlich ungebundene Version entschieden.
Liquorigin soll informieren und gleichzeitig unterhalten. Die schlichte Ästhetik der Webpage sowie deren Inhalte sollen den User für kurze Zeit in eine andere Welt eintauchen lassen.

Die Drinks
Nach eingehender Recherche zu den weltbekanntesten Drinks und ihren Ursprungsgeschichten, hat sich jede von uns drei Cocktails ausgesucht:

  • Anina: Cuba Libre, Manhattan, Margarita
  • Mael: Mojito, Sex on the Beach, White Russian
  • Sharon: Bloody Mary, Long Island Iced Tea, Piña Colada

Die ausgewählten Drinks wurden von der jeweiligen Person im Flat-Design-Look mittels Illustrator entworfen. Zudem verfasste jede von uns zu ihren ausgewählten Drinks je einen kurzen Text. Die Gattung dieses Textes wählten wir frei, was dem ganzen Projekt eine spannende Abwechslung verleihen sollte. Die Texte wurden im Radiostudio des Medienhauses in Chur von jeder Autorin selbst gesprochen und mit Hilfe der Anderen aufgenommen. Das anschliessende, ebenso frei gestaltete Sounddesign bot uns die Möglichkeit, aus jeder faktenreichen Geschichte ein fesselndes Hörspiel-Erlebnis zu gestalten.

Die Grafik
Logo
Das Logo designten wir analog eines klassischen Neon-Bar-Schildes. Zunächst suchten wir eine passende Schrift, die danach im Illustrator zurecht gezogen wurde. Für den Neon-Effekt versuchten wir uns an verschiedenen Herangehensweisen in Photoshop. Nach längerem Ausprobieren gelang es uns, einen lesbaren und doch hell leuchtenden Schriftzug zu gestalten.

Barszene
Die Barszene wurde in Illustrator gebaut. Wir haben sie ebenfalls im Flat-Design Style gestaltet.

Die Animationen
Damit während dem Anhören der jeweiligen Cocktail-Geschichte auch visuell etwas geschieht, haben wir den jeweils ausgewählten Cocktail animiert. Hierfür wurden die in Illustrator erstellten Files in After Effects bearbeitet und die einzelnen Elemente der Drinks je nach Inhalt und Sinn in Bewegung gebracht. Anschliessend wurden die einzelnen Dateien ins .mov-Format umgerechnet und in Photoshop zu GIF-Dateien gewandelt, damit sie darauf hin passend in die Website eingebaut werden konnten. Herausforderung bot hier vor allem das Ausspielen der GIFs mit möglichst geringem Qualitätsverlust der Animation und ohne einen zusätzlich weiss-generierten Rand.

Die Website
Für die Website haben wir uns für ein simples Design entschieden. Eine Bar im Hintergrund, drei Drinks auf dem Tresen platziert mit einer Lampe darüber. Durch Anklicken eines Cocktails wird das Bild mit einer Animation ersetzt, der jeweilige Drink wird von der Lampe beleuchtet und das Audio beginnt abzuspielen. Auf beiden Seiten der Drinks gibt es zur Navigation jeweils einen Pfeil. Anstatt die Bilder mit einer Animation zu ersetzen, hätte auch ein Pop-Up mit der Animation erscheinen können. Wir haben uns jedoch dagegen entschieden, da solche Pop-Up’s eher negativ konnotiert sind (Werbeanzeigen ect.)

Eine Herausforderung war die Seite responsive zu gestalten, da das Seitenverhältnis nicht proportional ist. Das Hintergrundbild ist so designt, dass es immer die gesamte Breite des Bildschirms ausfüllt. Um es einfacher zu machen, erstellten wir ein SVG, dadurch konnten die einzelnen Komponenten im Bild direkt angesprochen werden und sie bleiben immer am gleichen Platz. Da der Code eines SVG ziemlich umfassend ist, haben wir zuerst mit einem einfachen Mockup gearbeitet und die einzelnen Interaktionen programmiert, wie Bildroulette, Abspielen des Tons und Lichts. Danach haben wir die richtige Website umgesetzt. Weil die Website responsive sein soll, mussten wir einige Kompromisse eingehen. So zum Beispiel kann nicht direkt zwischen den einzelnen Drinks gewechselt werden. Die Animation des ersten Drinks wird zuerst gestoppt und erst dann kann ein weiter Drink angewählt werden. Grund dafür sind die Animationsvideos, die wir nicht direkt in das SVG einbinden konnten.

Wie bereits oben beschrieben war das Ausspielen der Animationsvideos ohne Qualitätsverlust ein Hindernis. Eine weitere Herangehensweise war hier mit einem Plug-In in After Effects ein animiertes SVG zu erstellen. Das klappte für einen einzigen Drink sehr gut. Doch das Plug-In bot Schwierigkeiten mit mehreren unabhängigen Animationen und einige Funktionen wurden nicht unterstützt, also fiel diese Option weg.

Für die Mobile Version haben wir das Design angepasst, sodass das Hintergrundbild ebenfalls von der Bildschirmgrösse abhängig ist.

Das Fazit
Unserer Meinung nach vermittelt die Website ein stimmiges Ambiente. Die Unterschiedlichkeit der Drinks, sowohl in Design als auch beim Audio verleiht dem Projekt eine erfrischende Abwechslung.

Learnings

  • Vertonen braucht viel Zeit & Geduld
  • Korrektes Auspegeln von Audio
  • GIF-Format für Animationen nicht die qualitativ beste Entscheidung, jedoch für den Aufbau der Website und des Konzept unumgänglich
  • Verschiedene Ausspielmöglichkeiten eines GIFs bzw. anstelle ein animiertes SVG zu verwenden
  • Umgang mit SVG beim Programmieren
  • Responsive Website erstellen mit mehreren, voneinander abhängigen, Inhalten

Keine Kommentare

Schreibe einen Kommentar