Ziel des Projekts
Eigentliches Ziel für dieses Semester war es, unseren bestehenden Wildcamping-Guide zu erweitern. Aufgrund der aktuellen Situation mussten wir aber darauf verzichten und haben uns stattdessen entschieden, unserer Website «henryalongtheroad» ein komplett neues Aussehen zu verpassen. Plan war es, eine Website zu designen und programmieren, welche die folgenden Bausteine enthalten würde:
- Animationsfilm
- Animierte Schweizerkarte
- Detailkarten mit Informationen zu den Parkplätzen
- Einbinden des Roadmovies, welcher bereits im letzten Semester erstellt worden ist
- Informationen zu uns und zum Projekt, mit kleinen Animationen versehen
Planung, Konzept der Website
In einem ersten Schritt brainstormen wir gemeinsam, wie die Website gestalterisch aussehen sollte und auf was wir Wert legen würden. Für uns beide war schnell klar, dass wir eine übersichtliche, klar strukturierte Website haben möchten, die aber durch ihren innovativen und einzigartigen Touch überzeugt. Nach diesem gemeinsamen Konsens setzten wir uns mit dem Aufbau der Page auf Papier auseinander. Danach wurden die Skizzen in digitale Wireframes übertragen. Gute Vorbereitung war für uns ein dringliches Anliegen. Noch bevor wir die erste Linie Code im Editor schrieben, informierten wir uns über Hürden und Problematiken, die sich bei der Umsetzung in eine funktionsfähige Website ergeben können. So fragten wir unter anderem Nick Schneeberger, ob die geplante Navigation auch im Bereich des Möglichen liegen würde oder Nils Solanski, ob ein User mit dem Aufbau der Seite zurechtkommen würde. Ebenfalls planten wir genauestens alle Abstände, Schriftgrössen, Breiten etc.
Design der Website
Entschieden wir uns vergangenes Semester bereits für eine Typografie und ein Farbkonzept, wurden beide Dinge dieses Semester noch einmal komplett verworfen und neu definiert. Aus der Schrift Suisse BP wurde GT Walsheim, aus schwarz-weiss wurden satte Farben. Alle notwendigen Informationen wie Schriftschnitte oder Hex-Werte hielten wir in einem Konzept fest. Aufgrund dieses Entscheides mussten alle bereits bestehenden Elemente wie Parkplatz-PDF’s oder unser Roadmovie neu angepasst werden.
Umsetzung der Website
Animationsfilm
Da es bei «henryalongtheroad» unter anderem darum geht, dass wir die Schweiz in vier Jahreszeiten entdecken, zeigt unser Animationsfilm Henry, wie er durch Sommer, Herbst, Winter und Frühling tuckert. Das Design wurde in Adobe Illustrator entworfen und in Adobe After Effects animiert. Animiert wurden sowohl Henry als auch ein bis zwei Bildelemente pro Jahreszeit. Bewusst entschieden wir uns für unnatürlichere Bewegungen, um dem ganzen Film mehr Witz und Lebendigkeit zu verleihen. Für die Website wurde der Film als MP4 exportiert und eingebunden.
Design der Bildelementen
Alle Bilder, die auf der Website zu sehen sind – sei es im Bereich About oder aber die Schweizerkarten selber – wurden von uns in Adobe Illustrator gezeichnet und für die Website als SVG-Datei bereitgestellt. In diesem Schritt lagen die grössten Herausforderungen wohl darin, den einen perfekten Zeichnungsstil zu finden als auch einen roten Faden über alle Bilder hinweg zu generieren. Nach vielem, vielem Ausprobieren entschieden wir uns für einen leicht kindlicheren, minimalistischen Stil. Gerade bei den Schweizerkarten war es uns wichtig, alle wichtigen Informationen wie Flüsse und Seen darstellen zu können, ohne dabei die Zeichnungen zu überladen.
Programmierung
Damit hier jetzt nicht noch ein kompletter Roman entsteht, führen wir die wichtigsten Schritte von der ersten Linie Code bis zur kompletten Funktionsfähigkeit unserer Website mit Stichworten auf:
- Ordnerstruktur der Website mit einem HTML-File, einem CSS-File und einem Javascript File aufgebaut.
- Struktur im HTML-File aufgebaut, einzelne Bereiche definiert, erste Inhalte wie Animationsfilm, Erde, Bereich Schweizerkarte, Roadmovie, About-Texte, Footer eingefügt.
- Erste CSS Formatierungen vorgenommen.
- Lied «Fingt z Glück eim» von Züri West eingebunden. Ziel war es, das Lied «autoplay» und im Loop während der gesamten Seitennutzung abspielen zu lassen. Bei Bedarf soll ein User die Möglichkeit haben, das Lied muten können.
- Javascript Funktion für das Starten der Musik erstellt. Musik startet automatisch beim Laden der Startseite und stoppt, wenn sich User mit der Maus über dem Roadmovie befindet oder aber den Roadmovie abspielen lässt.
- Bereich Schweizerkarte aufgebaut und Detailseiten erstellt. Je nach Wahl des Users (klick auf einen der dreizehn Parkplätze der Schweizerkarte) öffnet sich eine andere Detailseite mit den entsprechenden Informationen und Karte zum jeweiligen Parkplatz. Insgesamt gibt es 20 Detailseiten. Die Detailseiten werden mit einem eigenen CSS-File formatiert und einem eigenen Javascript-File animiert.
- Roadmovie eingefügt. Einbettung über Youtube-Iframe.
- Bei den drei Informationstexten im Bereich About die Illustrationen als SVG-Dateien eingefügt. Das Einfügen fand mittels «object» statt. Bewusste Entscheidung für SVG-Dateien, damit eine nachträgliche Animation der einzelnen Elemente möglich ist.
- Text und Bilder des Bereichs About formatiert und schliesslich je ein Bildelement mit «animateMotion» oder «animateColor» animiert. Das Licht beim Auto blinkt, die Biene bei unserem Bild fliegt davon, die Glocke der Kuh bewegt sich. Google Chrome unterstützt die Funktion «animateColor» leider nicht.
- Footer mit Verlinkungen zum Instagram-Account und zur E-Mail eingefügt.
- Frühzeitige Mobile-Optimierung: Es wurde ein Screen mit dem Text «please rotate your screen» eingefügt. Screen wird angezeigt, wenn User die Website auf einem mobilen Endgerät im Hochformat aufruft.
- Navigation, bestehend aus drei fixierten Navigationspunkten am rechten Seitenrand, erstellt. Die Schwierigkeit beim Erstellen der Navigation bestand aus der Verlinkung auf IDs weiter unter in index.html. Hat lange Zeit nicht funktioniert, das Problem konnte lange Zeit nicht gelöst werden. Mitstudentin Lea Moser half uns glücklicherweise am Ende dabei, das Problem zu beheben.
- Schweizerkarte als SVG-Datei eingebunden.
- Alle drei Detailkarten bei den entsprechenden Detailseiten auf der linken Seite eingefügt und formatiert.
- Die bereits erstellte onClick-Javascript-Funktion, die bei einem Klick auf ein Parkplatz-Sign die entsprechende Detailseite öffnet, wurde an den entsprechenden Stellen in der Schweizerkarte der Startseite eingefügt.
- Definition / Formatierung des rechten Detailkarten-Bereichs: Formatierung aller Schriften und Informationen, Einbindung des PDF-Download-Links, Einbindung der Parkplatz-Bilder. Damit ein User zwischen Text und Bild hin und her wechseln kann, wurde eine Slideshow erstellt.
- Erstellen / Einfügen aller Animationen der drei Detailkarten. Die Animationen basieren wiederum auf «animateMotion».
- Einfügen eines Infofeldes auf der Schweizerkarte der Startseite. Bei einem Klick auf das Infoschild poppt Text auf, der den User darüber informiert, wie die Karte funktioniert.
- Erstellen / Einfügen / Gestalten der Tooltips für die Schweizerkarte. Bei «hover» auf das gewünschte Parksign wird der Name des entsprechenden Parkplatzes angezeigt.
- Einfügen von Verlinkungen auf der linken Detailseite. Der User soll die Möglichkeit haben, innerhalb der Detailseite zwischen den drei Detailkarten wechseln zu können.
- Gründliche Korrektur der gesamten Website-Texten und PDF’s.
- Einfügen von SEO-Informationen.
- Gesamte Website für einen Screen mit 13-Zoll optimiert.
- Mobile Optimierung: Erstellen einer neuen Burger-Navigation (die bereits bestehende Navigation funktionierte auf dem iPhone nicht), Anpassung der Schriftgrössen, Korrektur der Einbindung des Animationsfilms (das iPhone unterstützte den bestehenden Code nicht), sonstige Formatierungsinformationen.
Fazit
Klar ist es schade, dass wir unsere kleine Reise abblasen, sprich verschieben mussten. Aber - und das muss gesagt sein - wir hatten eine unglaublich lehrreiche Zeit mit dem Aufbau unserer Seite. Wir haben uns an schwierige Sachen herangewagt, sind oftmals angestanden und konnten dann die Probleme mit viel Geduld, nachfragen und googeln lösen. Die Website sieht nun genauso aus, wie wir sie uns zu Beginn vorgestellt haben. Nun hoffen wir doch, dass wir bald schon wieder die Schweiz unsicher machen dürfen und die Website nächstes Semester mit neuem Content bespielen können.
