Mirome EP 0 – Website

Passend zum neusten EP-Release von Mirome «EP 0», habe ich eine kleine, liebevolle Website zur Promotion unseres Musikvideos gebastelt. Somit lässt sich während des Browsens die EP in vollen Zügen geniessen. Voilà.

Bereits im letzten Semester durften wir euch die neuste EP von Mirko präsentieren. Nun habe ich mich dazu entschlossen, zusätzlich noch eine Seite zu coden, um der Welt Mirome, unser Musikvideo selbst, wie auch das Kollektiv hinter der Produktion näherzubringen.

Den Link zur Website findet ihr hier.

(dbo)

Idee

Bereits letztes Semester haben wir das Musikvideo releast, jedoch war der Künstler «Mirome» als solches immer noch sehr anonym. Es gab bereits viel an veröffentlichter Musik, jedoch noch nie Einblicke auf den Menschen hinter der Musik. Auch unser Kollektiv, welches das Video umgesetzt hat, blieb noch ziemlich im Dunklen. Mit diesem Projekt wollte ich nicht nur die neue EP promoten, sondern auch einen ersten, kleinen Einblick auf uns gewähren. Wer wir sind, was wir so machen.

Vorgehen

Die Website als solches ist mit viel Liebe von Hand gecodet. Da ich seit schon einiger Zeit keine Website mehr selbst programmiert habe, waren meine Skills ein wenig eingerostet. Genau deshalb wollte ich mich noch einmal selbst herausfordern, etwas von Grund herauf zu programmieren. Als Grundbausteine habe ich das Framework Bootstrap für ein Responsive Resultat, sowie die jQuery-Library für diversen Javascript verwendet. Das Format eines Parallax One-Pagers hat für mich für dieses Format am meisten Sinn ergeben. Online hatte ich vor kurzer Zeit einige hochinteressante, mächtige Plugins entdeckt, die ich unbedingt selbst austesten wollte. Diese Plugins waren unter anderem für den Slider auf der Startseite und diverse js-Animationen. Davon abgesehen bin ich dem normalen Vorgehen beim Aufbau einer modernen HTML5 Seite gefolgt. Ein klarer und strukturierter Code war mir wichtig.

Hätte man anders machen können

Erst am Ende des Projekts ist mir aufgefallen, dass ich einen Fehler in den Parallax-Layers eingebaut hatte und konnte deshalb keine Animationen auf Elementen der zweiten Seite mehr mit dem «wow.js» Plugin einfügen. Bisher bin ich noch nicht ganz auf die Ursache für den Bug gestossen. Hier muss ich wohl noch ein wenig weiter die Plugins testen und erforschen.

Fazit

Das schlichte und artistische Design ist mir meiner Meinung nach gut gelungen und passt gut mit dem generellen Vibe und Farben der EP und des Künstlers  generell zusammen. Anfangs tat ich mich nach so langer Zeit schwer mit Programmieren und auch das mit den Plugins warm werden, hat lange Zeit gedauert. Der Slider auf der Startseite hat einiges an Zeit in Anspruch genommen und viele Bugs generiert, welche ich nachträglich Schritt für Schritt beheben musste. Auch für die Javascript-Codes musste ich mich wieder ein wenig in die Programmiersprache einlesen, um alles zu verstehen und so umzusetzen, wie ich es mir vorgestellt hatte. Das «animate.js»-Plugin ist ein sehr mächtiges Animationsplugin welches vielseitig eingesetzt werden kann und ich in Zukunft wieder für eine Website verwenden möchte. Das grösste Learning des Projekts ist definitiv die Wichtigkeit eines sauberen Aufbaus des Codes beim kreieren einer Parallax-Seite. Ich hatte zuvor noch nie etwas mit Parallax programmiert und viele der Probleme, denen ich später begegnet bin, gar nicht erst bedacht.