Idee
Am Anfang stand die Idee eines Adventskalenders. Online sollte er sein, mit einem neu-anklickbaren Türchen pro Tag. Wir hatten viele Ideen womit wir die Türchen füllen könnten, entschieden uns dann dafür, etwas Humorvolles umzusetzen.
Im Digezz-Artikel soll der Kalender als Motivations-Kalender verkauft werden. In Wirklichkeit handelt es sich aber um einen Gönn-Dir-Kalender. Jeden Tag wird der Leser dazu aufgefordert, sich etwas zu gönnen, es nicht so streng mit sich selbst zu nehmen und die Adventszeit zu geniessen. Sätze, die jeder schon einmal hören wollte, normalerweise aber nie zu hören kriegt. Quasi unser Weihnachtsgeschenk an die Leser. Dazu werden die jeweiligen Aussagen stimmig verbildlicht.
Umsetzung
Text: Ganz bewusst haben wir uns dazu entschieden, alles in Schweizerdeutsch zu halten. Irgendwie fühlen wir uns in dieser Sprache wohler und lustiger. Getextet haben wir gemeinsam oder alleine, im Zug oder in der Schule, wo immer uns gerade wieder etwas in den Sinn gekommen ist.
Grafik: Ganz am Beginn stand das Gestaltungskonzept. Farben, Schriften und Illustrationsstil wurden festgelegt. Wichtige Entscheidungen, die später nicht mehr geändert werden können. Vor allem für die Farbwelt haben wir viele Versionen erstellt, bis wir zufrieden waren.
Für den Gestaltungsstil hatten wir ein Vorbild von einem dänischen Grafiker gefunden. Der Stil hat uns sehr zugesagt, weil er irgendwie alternativ, kindlich, simpel und charmant in einem ist. Er zeichnet sich dadurch aus, dass die Proportionen völlig neu durchgewürfelt werden. Die Köpfe der Menschen sind extrem klein, normale Alltagsgegenstände überdimensional gross. Sich diesen Stil zu verinnerlichen war gar nicht so einfach, wenn man sich sonst gewöhnt ist, möglichst realistisch zu zeichnen.
Dann ging es ans Zeichnen, 24 Bilder und zwei Titelbilder mussten zuerst aufs Papier und dann auf den Bildschirm gebracht werden. Das musste eine Person alleine machen, damit der Stil immer der Gleiche bleibt. Die Digitalisierung wurde im Photoshop mit dem Wacom realisiert.
Web: Der ganze Kalender soll im Web verfügbar sein. Wir haben das als kleine Web-App realisiert. Mit dem Vue CLI 3 haben wir eine PWA erstellt. Der Vorteil dabei ist, die Webseite fühlt sich wie eine kleine App an. Zudem können wir z.B. bei Chrome die Titelleiste anders einfärben (mit dem Manifest der PWA).
In Vue haben wir drei Komponenten (Single-Files-Components) programmiert. Einer ist der ganze Kalender, einer ein Türchen und einer die Modalbox. Diese werden dann mit dem Kommando «npm run build» und mit Webpack zu einer kleinen Webapp zusammengefügt, die man dann hochladen kann.
Die Daten kommen alle aus einer REST-API, die auf unserem Server läuft. Der Vorteil dabei ist, es ist praktisch unmöglich, die zukünftigen Türchen anzuschauen, ohne sich auf dem Server einzuloggen. Zudem sind die Bilder in Ordnern, die mit einem 256bit-Hash benannt sind. Also unmöglich, die Bilder vorher zu erhalten. ? Die Daten aus der Datenbank werden erst beim Modalaufruf gefetched, was evtl zu einer kurzen Ladezeit führt. Dafür lädt der ganze Kalender superschnell.
Die einzelnen Elemente der Webapp haben wir zuerst prototyped. In Codepen.io haben wir z.B. die Animation des Hovers entwickelt. Die Modalboxen sind ebenfalls prototyped worden. (Anmerkung: Die Modalfenster sind nicht selber programmiert, sondern von adeptoas: https://github.com/adeptoas/sweet-modal)
Schwierigkeiten
Schwierigkeiten gab es glücklicherweise nicht besonders viele. Dank einer guten Aufteilung der Aufgaben (wir hatten beide unsere Spezialgebiete) konnten wir sehr gut vorwärtsarbeiten. Nicht zuletzt gab es dann aber doch ein paar Schwierigkeiten:
- Zeit: Wir haben relativ kurzfristig mit der Umsetzung begonnen. Wir hatten auch erst die Idee, als die ersten Adventskalender in den Läden standen. ;)
- Mobile: Auf Safari hatte unsere Webapp immer ein Problem, dass der Hover-Effekt der Törchen nicht zurückging. So sah man das Fenster mit dem Spruch, jedoch immer noch das Törchen im Vordergrund. Schlussendlich behoben wir das Problem, indem die rotateX-Eigenschaft im Mobile herausgenommen wird.
- Grafik: Nicht alle unserer Gönn-Dir-Sprüche waren wirklich visualisierbar. Leider mussten wir ein paar richtig gute Sprüche verwerfen, weil uns keine grafische Umsetzung in den Sinn gekommen ist. z.B: «wenns bim erschte mol nöd funktioniert, funktionierts wohrschinli au bim zweite mol nöd»
Fazit
Bei diesem Projekt schön zu sehen ist, wie sich Multimedia-Produzenten optimal ergänzen können. Eine Idee als gemeinsamer Nenner reicht und schon verläuft ein Projekt wie dieses reibungslos. Die Arbeitsaufteilung in Programmieren und Grafik hat optimal funktioniert. Ausserdem ist es reizvoll, ein Projekt zu gestalten, welches nicht nach einem Mal anschauen wieder uninteressant wird für den Betrachter, sondern über einen ganzen Monat aktuell ist. Wir haben grosse Freude am Endprodukt und werden sicherlich auch selbst jeden Tag im Advent einmal unsere URL aufrufen.
