Coronescape

Beitragsbild CORONESCAPE

2020 – Beginn der Corona-Pandemie. Das Jahr, in dem man sich das Händeschütteln abgewöhnte, Schutzmasken zur neuen Normalität wurden und sich die Reiselust hinten anstellen musste. Ein Versuch, mit einer digitalen Reiseerfahrung die Sehnsucht nach der Ferne zu lindern.

Eine Reise planen und dann monatelang die Vorfreude geniessen. Am Tag der Tage mit dem randvollen Koffer nervös zum Flughafen fahren und dort den Blick sofort auf die Anzeigetafel richten. Dann der Flug und die müde Ankunft an der Wunschdestination. Das Reisen weckt Emotionen und Gefühle, die man durch nichts anderes ersetzen kann.

Natürlich auch nicht, indem man einfach vor dem Monitor sitzt und auf einer Website rumklickt. Um aber die Vorfreude auf bessere Zeiten zu wecken und zumindest eine digitale Flucht vor der Pandemie zu ermöglichen, wurde die Website «Coronescape» ins Leben gerufen. Dafür wurden alte, unprofessionelle Reisevideos «recycelt» und die «Coding-Skills» vertieft.

Versteckte Wasserfälle in den Tiefen des Dschungels, ein traumhafter Sonnenuntergang am Strand oder einfach nur ein gemütliches Bier in einer Kneipe? Du entscheidest, wo es hingeht! Pack deinen virtuellen Koffer und ab damit zum Flughafen!

Hinweis: Die beste Reiseerfahrung erhält am Desktop mit Chrome oder Firefox.

(dbo)

Idee

Da die Corona-Pandemie omnipräsent war im letzten Jahr und auch ich nicht mehr wirklich gereist bin seit dem Jahr 2019 überlegte ich mir, wie man das Thema Reisen mit einem Digezz-Projekt verbinden könnte. Da ich in den Ferien und auf Reisen jeweils relativ viel mit dem Handy gefilmt habe, kam mir die Idee, diese Aufnahmen zu verwerten (Videotrash Recycling) und dann auf einer Website zur Verfügung zu stellen. Die Website sollte eine Art Reiseerfahrung bieten, einigermassen ansprechend und einfach zu bedienen sein. Ausserdem habe ich mir vorgenommen, für Digezz an einem Webprojekt zu arbeiten, um meine Coding-Fähigkeiten damit zu vertiefen. Somit passte alles gut zusammen und ich beschloss, diese Idee umzusetzen.

Vorbereitung

Nun ging es also darum, eine Website zu erstellen, die eine gewisse Reiseerfahrung bieten soll. Mir war schnell klar, dass ich die Seite von Grund auf selbst programmieren wollte und höchstens einige JavaScript-Libraries für Animationen nutzen werde. So erhoffte ich mir einen möglichst hohen Lerneffekt. In einem ersten Schritt überlegte ich mir, wie man so eine Reiseerfahrung schaffen konnte und ziemlich schnell kam mir der Einfall, die Website als digitalen Flughafen zu gestalten, an dem man dann einen Flug wählen und verreisen kann.

Da mir aber der Gedanke allein noch nicht reichte, um mit dem HTML/CSS Konstrukt zu beginnen, kreierte ich zuerst noch einen Prototyp mit Adobe XD. Dieser Zwischenschritt erwies sich als sehr hilfreich, da die Seite nun für mich fassbarer wurde und ich schon erste Feedbacks einholen konnte. Zusätzlich holte ich mir im Web noch ein bisschen Inspiration für gestalterische Elemente und Animationen.

Umsetzung

Meine Seite sollte grundsätzlich für den Desktop optimiert sein, doch dazu später mehr. Da ich dank des Prototyps ungefähr wusste, wie ich meine Seite gestalten wollte, konnte ich die Grundstruktur des HTML-Codes gut davon ableiten und kam relativ gut vorwärts. Als Nächstes fragte ich mich, wie die Seite dynamischer und interessanter werden konnte. Bei der Suche nach Inspiration stiess ich auf Animationen, die mit der «GSAP» Library umgesetzt wurden und ich entschied mich, diese zu verwenden. Das war eine neue Erfahrung für mich, da ich noch nie mit solchen Libraries gearbeitet hatte. Das nahm am Anfang auch einige Zeit in Anspruch, was sich dann aber auszahlte, da ich irgendwann die JavaScript-Befehle gut beherrschte und für weitere Objekte anwenden konnte.

Ein weiterer wichtiger Bestandteil, wenn nicht sogar der Hauptbestandteil der Seite war die «Abflugtafel». Darauf sollten jeweils die verschiedenen Flüge zu den entsprechenden Destinationen aufgelistet sein. Mit einem Klick sollte man so mit dem virtuellen Flieger an den nächsten Ort gelangen. Dann wurde jeweils die Grundstruktur kopiert und für jeden Ort die nötigen Anpassungen im Text, am Hintergrundbild und an der Abflugtafel gemacht. Ich legte Zürich als Ausgangspunkt fest. An den Orten Köln, Sevilla und Bali wurde zusätzlich eine animierte Lupe eingebaut, mit der man auf eine Unterseite kommt. Dort wartet dann jeweils ein eingebettetes YouTube-Video (aus dem anderen Digezz-Projekt) im Vollbild und man kann so die Destination erkunden. Singapur dient hier «nur» als Zwischenflughafen, hätte bei voriger Zeit aber auch noch mit einem Video ergänzt werden können.

Irgendwann kam mir noch die Idee, mit einem Sound-Button ein bisschen Umgebungsgeräusche von einem Flughafen einzubinden, um so die Erfahrung auch noch ins auditive zu bringen. Damit der User auch weiss, worum es geht, wurde die ABOUT-Seite mit den nötigen Informationen und einer «Travel-Map» ins Leben gerufen. Am Schluss gab es dann noch viel Finetuning-Arbeit und mit einer Media-Query wurde die Seite noch möglichst responsive gemacht.

Learnings

Neben der gesammelten Coding-Erfahrung waren meine grössten Learnings folgende:

  • Wenn man beim Coden hartnäckig bleibt, wird man wirklich besser
  • Es muss nicht immer alles perfekt sein, daran verliert man manchmal zu viel Zeit
  • Beim Erstellen der Website schon zu Beginn das responsive Verhalten im Blick haben

Fazit

Die grösste Hürde für mich war es, eine eigene Seite von Anfang bis Ende selbst zu planen und dann auch umzusetzen. Obwohl es zwischendurch wirklich schwierig war, dranzubleiben und mich immer wieder aufs Neue zu motivieren, bin ich sehr dankbar für diese Erfahrung. An dieser Stelle muss ich vielleicht einmal erwähnen, dass das Endprodukt bestimmt alles andere als «Best Practise» ist. Ich habe mit meinen vorhandenen Kenntnissen angefangen und sobald ich ein Problem hatte oder sonst nicht mehr weiterkam, einfach Google gefragt. Deshalb wird der Code nicht perfekt sein, der Lerneffekt dafür umso höher, da ich auch bei manchen Problemen lange angestanden bin und viele Lösungswege ziemlich lang waren. Schlussendlich hat mir das Projekt auch viel Spass gemacht und ich bin im Grossen und Ganzen zufrieden damit.