Idee
Wir studieren seit 2 Jahren hier in Bern und wir kannten bisher nur die Welle 7 am Bahnhof. Sonst nichts. Ziemlich peinlich, nicht? Da wir beide einen langen Heimweg haben (Luzern und Aarau), sind wir jeweils direkt nach dem Unterricht zum Bahnhof gestürmt. Doch so konnte es einfach nicht weiter gehen! Also haben wir uns überlegt, wie wir Digezz und die Stadt Bern miteinander verbinden können. So entstand die Idee einen Bernführer mit einer Karte erstellen - doch zu welchem Thema? Zuerst wollten wir uns auf die Zielgruppe Studenten fixieren und einen Führer für gute Orte zum Chillen, beste Partys und Events, günstigste Restaurants, beste Lernorte oder ähnliches machen. Doch wir entschieden uns dagegen, da wir einen Stadtführer für alle Menschen erstellen wollten. Doch auch hier waren die Möglichkeiten riesig. Beschränken wir uns nur auf Sehenswürdigkeiten? Shopping? Beste Brunchorte? To-Do’s? Events? Nachdem wir uns intensiv mit der Stadt Bern beschäftigt haben, entschieden wir uns, einen Stadtführer zum Thema Bars und Cafés zu erstellen. Doch auch bei der Umsetzung mussten einige Entscheidungen im Vorfeld getroffen werden. Wir jonglierten anfangs noch mit der Idee, eine A-Frame Stadtkarte zu erstellen, um ein Virtual-Reality Erlebnis zu erstellen. Doch nachdem wir uns intensiv mit dem Thema A-Frame beschäftigt hatten, entschlossen wir die Idee zu verwerfen, da A-Frame nicht die perfekte Lösung für unser gewünschtes Endprodukt darstellt und wir beide etwas “motion-sick” sind.
Unser Ziel war es, die gesamte Karte selbst zu illustrieren und interaktiv zu programmieren. Da wir nicht wollten, dass die Karte komplett zugepflastert wird mit Cafés und Bars, haben wir entschieden, zwei Karten zu erstellen. Eine Karte stellt den Tag mit den Cafés dar, die andere die Nacht, in der man verschiedene Bars entdecken kann.
Illustration
Uns war es wichtig, dass die Karte nicht wie die eintönige Google Maps Karte aussieht. Also haben wir die Karte in einem künstlerischen und modernen Stil gezeichnet. Wir entschieden uns gegen Strassennamen, da wir nur die reine Illustration zeigen wollten. Bei der Auswahl der Farben haben wir viel herum getüftelt und schliesslich je ein Styleguide für die Nacht- und Tagkarte erstellt.
Damit man sich auf der Karte besser orientieren kann, haben wir beschlossen, die bekanntesten Sehenswürdigkeiten der Karte hinzuzufügen. Das Zeichnen der verschiedenen Gebäude hat viel Zeit in Anspruch genommen. Wir wollten nicht zu viele Details zeichnen, jedoch musste man das Gebäude trotzdem noch erkennen können. Auch haben wir zuerst die Gebäude in den Originalfarben gezeichnet. Jedoch haben sie dann so sehr langweilig ausgesehen und leider auch nicht zum Farbkonzept gepasst. Also haben wir für die Gebäude eine eigene Farbpallette definiert, sodass sie sich ähneln, herausstechen und zum Gesamtbild passen. Vor allem bei der Nachtkarte hatten wir Probleme, passende Farben für die Gebäude zu finden. Während der Erstellung mussten wir die Farben der Karte aber immer minim anpassen, damit die Karte selbst mit den Gebäuden harmonierte. Für die Café- und Bar-Icons haben wir die Farbe Pink ausgewählt, da sie in beiden Farbkonzepten am besten heraussticht.
Da es in unserer Karte um die Stadt Bern ging, mussten wir uns überlegen, wie das Logo für den Bernführer aussehen könnte. Bei der Illustration erstellten wir für den Bärengraben einen Bären, der uns so gut gefiel, dass wir ihn ins Logo integrierten. Im Hintergrund platzierten wir für die Tagkarte die Sonne und für die Nachtkarte den Mond. Voilà und schon hatten wir das perfekte Logo!
Unser Projektlogo gestaltete sich zuerst etwas schwieriger, da es bei den Hintergrundfarben blau und grün herausstechen sollte. Wir erstellten mehrere Versionen mit verschiedenen Farben und wurden fündig mit der weissen Schrift und dem goldenen Ampersand. Beim User-Testing fanden wir heraus, dass die Zusammenstellung der Wörter etwas unleserlich waren, weshalb wir die einzelnen Wörter etwas mehr voneinander trennten.
Bars & Cafés entdecken
Die Auswahl der verschiedenen Cafés und Bars haben wir mit Hilfe unserer Berner Kollegen getroffen. Wir haben bei unseren Bekannten und Klassenkameraden nachgefragt, was ihnen in Bern am besten gefällt. Danach erhielten wir eine RIESEN Liste mit verschiedenen Lokalen. Bern ist eine grosse Stadt - daher haben wir einen Radius definiert, wo sich die Orte befinden dürfen (vor allem da wir nicht die gesamte Stadt, sondern nur einen bestimmten Teil als Karte wollten). Aus den häufigsten genannte Orte in diesem Umkreis haben wir dann jeweils 10 Lokale herausgesucht.
Und schon konnte der Spass beginnen! Wir haben an sechs Tagen die Lokale besucht, Getränke konsumiert und zum Teil auch gegessen, Fotos geschossen und fleissig Notizen gemacht. Bewertet wurde die Bequemlichkeit, das Ambiente, der Preis und die Angebote. Für uns waren die Besuche ein tolles Erlebnis!
Website
Da wir uns entschieden, die Webseite für unser Projekt selber zu programmieren, sammelten wir zuerst Ideen, wie sie funktionieren und aufgebaut werden könnte. Eins war uns sicher: Im Mittelpunkt sollten die Karten mit den verschiedenen Locations stehen. Zudem wollten wir sie mit interessanten Informationen zu den Bars und Kaffees bereichern.
Die fertig erstellten Karten wurden als SVG-Dateien exportiert und online optimiert. Zuerst versuchten wir sie extern einzubinden, doch nach mehreren Versuchen die CSS-Datei zu referenzieren, gaben wir auf. Deshalb blieb uns nichts anderes übrig, als den ganzen SVG-Code inline im HTML-Dokument abzuspeichern. Der Nachteil war das wir den ganzen Code in der index-Datei hatten und somit diese Datei unübersichtlich wurde. Am SVG-Code selber mussten wir einiges anpassen. Dies war für uns ziemlich herausfordernd, da wir zum ersten Mal mit SVG für eine Webseite arbeiteten. Zuerst einmal brauchten wir beim Hovern eine Infobox, die den Namen des Gebäudes/Bar/Cafés anzeigt. Wir versuchten zuerst selber etwas zu programmieren und gestalten, aber merkten, dass wir nicht den gewünschten Effekt erhielten. Nach langer Recherche und Verzweiflung fanden wir eine Tooltip Library. Wir passten diese auf unsere Wünsche an und betteten sie in den SVG-Code ein. Zusätzlich gaben wir dem Tooltip einen Schatten und liessen seine Farbe bei Hover ändern.
Die Informationen sollten in einem neuen Fenster erscheinen. Dies erreichten wir mit einem Div-Container, der in der Desktop-Version rechts über der Karte erschien. Beim Slider stiessen wir auf ein weiteres Problem. Der Code, den wir übernommen hatten, funktionierte nur mit einem Slider. Da wir mehrere hatten, mussten wir quasi den Javascript-Code umschreiben. Wir recherchierten etwas und fanden mit viel Mühe heraus, wie man einzelne Slider unabhängig voneinander bedienen konnte. Javascript brauchten wir ebenfalls für den Wechsel der Inhalte, sowie für das Öffnen und Schliessen der Infoboxen.
Für das «Bärn»-Feeling beschlossen wir die Sätze “Lust eis ga zieh” und “Lust ga ds käfele” aus dem Bärner Dialekt in die Webseite zu implementieren.
Eine weiterer Punkt, der sehr viel Geduld beanspruchte, war die von uns gewünschten Animationen. Wir fanden heraus, dass man mit SVGs nicht unbedingt mit Javascript animieren muss. Es geht nämlich auch mit CSS und SMIL. (SMIL = ein eigenes Animationsmodell für SVG) Der einzige Haken war, dass IE und Edge SMIL nicht unterstützen. Nach langem Überlegen gewichteten wir IE und Edge als einen eher weniger benutzten Browser und erstellten die Animationselemente im Illustrator. (Ankündigung von Microsoft bezüglich Edge: https://www.heise.de/newsticker/meldung/Offiziell-Microsoft-Edge-nutzt-kuenftig-Chromium-4244958.html)
So entstanden Fledermäuse, Vögel, Tauben, Schwan, Eule, Ruderer, Fuchs, Katze und Maus, die wir mithilfe von SMIL und auch CSS beim Hovern zum Leben erweckten. Schwierigkeiten gab es vor allem beim Rotieren oder Translaten der Elemente. In diesem Zusammenhang hat SVG ein eigenes Gesetz, welcher wir aufgrund der Zeitknappheit nicht zu 100% erlernen und verstehen konnten. Zusätzlich fehlte uns die nötige Kenntnis, um die Animationen zu smoothen (ease, bezier, ease-in-to-out..). Bei einer möglichen Weiterarbeit an Cheers&Chill würden wir noch vertiefter an diese Themen rangehen, da sie uns sehr interessieren und für die Zukunft sicher auch relevant sein werden.
Da uns Mobile ebenfalls wichtig war, passten wir die Webseite mithilfe von Media Queries an. So entstand eine Smartphone- und eine Tabletansicht. Wichtig war ebenfalls, dass man die Karte nicht sah, wenn man das Smartphone in der Porträtansicht hielt. Dann liessen wir eine Information erscheinen, die die Besucher bittet, den Bildschirm zu drehen. Nach der Drehung des Bildschirmes zur Landscapeansicht erhält der Smartphonenutzer quasi die Erscheinung, welche man auch auf dem iPad sieht. Ein Vorteil von SVG ist, dass man sie mobile vergrössern kann, ohne dass das Bild an Qualität verliert. So kann der Nutzer auch kleine Details und Animationen genauer unter die Lupe nehmen. Die Infobox liessen wir die ganze Karte abdecken. Mithilfe eines Close- & Zurückbuttons können die User so wieder zurück zur Map gelangen.
Auf der Smartphone-Seite hatten wir neben der Drehung des Gerätes weitere Probleme: Das iPhone zum Beispiel skalierte immer automatisch die Schriftgrösse nach eigenem empfinden. So erschien der Text anfangs in der richtigen Grösse und nach wenigen Sekunden skalierte er einfach. Mit einem kleinen Code-Absatz konnten wir dieses Problem glücklicherweise beheben.
Wir hatten sehr viele Ideen für die Webseite, mussten uns aber immer wieder selbst an der Nase nehmen. Einige Ideen waren ziemlich komplex, weswegen wir entschieden uns auf die grundlegenden Funktionen zu beschränken. Eine Idee war zum Beispiel auf dem Desktop ein Zoom Tool zu programmieren. Wir lasen uns ins Thema ein, doch empfanden es als sehr schwierig dies mit unserer bestehenden JS-Kenntnis umzusetzen. Im Nachhinein war dies eine gute Entscheidung, da wir sonst noch viel mehr Zeit und Geduld in diese Funktion reingesteckt hätten, obwohl wir am Ende mit der Karte ohne Zoom-Tool zufriedener waren. Zudem kann man SVG-Dateien am Smartphone zoomen, weswegen ein Zoom-Tool nicht nötig war.
Fazit
Uns hat das Projekt unglaublich gut gefallen! Wir haben die Stadt Bern näher kennengelernt und ein paar tolle Bar- und Café-Perlen gefunden. Ausserdem war es schön, Spass und Arbeit miteinander zu verbinden. Wir konnten die verpassten 2 Jahre tatsächlich ein Stück weit wieder aufholen :-) Unser Umfeld hat das Digezz-Projekt regelmässig verfolgt und immer mal wieder nachgefragt, an welchen Orten wir uns nun wieder herumtreiben. Auch haben wir bis jetzt sehr gutes Feedback zur Website erhalten.
Klar - das Projekt hat uns manchmal auch an den Rand der Verzweiflung gebracht. Vor allem beim Programmieren. Es war ziemlich anstrengend: Wir haben fleissig gegoogelt, gepröbelet und uns die Zähne ausgebissen. Wir haben wirklich sehr viel Herzblut in die Website hineingesteckt. Vor allem da wir beide Laien sind, war es nicht immer ganz einfach (wiiiiesooo haben wir keine Mediamatiklehre absolviert?!). Wir haben auch viele Sachen zum aller ersten Mal verwendet, wie zum Beispiel SVG. Zudem haben wir einige User-Testings gemacht, die sehr hilfreich waren - also macht unbedingt User-Testings! Die Mühe hat sich sehr gelohnt! Wir sind wirklich sehr zufrieden mit der Website, obwohl bei der Mobile-Version noch Verbesserungspotential besteht. Das Projekt hat sehr viel Spass gemacht, war aber auch sehr nervenaufreibend und zeitaufwendig. Jedoch könnten wir uns gut vorstellen, das Cheers&Chill Projekt noch auf weitere Städte auszuweiten. Das nächste Digezz-Semester folgt ja bald ;)
