Türkiye

Nicht nur Baklava, Kebab und Döner bietet die Türkei. Heissluftballone, wunderschöne Moscheen und viele Grossstädte erwarten dich in der facettenreichen Türkei.

Tauche ein in einen Sommer in der Türkei. Von Istanbul über Ankara, in die einmaligen Gebirge Kappadokiens, nach Antalya und weiter der Küste entlang.

(sba)

Kritik
von Larissa Renger und Jasmine Zwicki

Die Idee
Der Juli in der Türkei war wundervoll. Da wir ein Fotobuch machen wollten, nahmen wir eine gute Kamera mit. Als wir sahen, wie wundervoll und vielseitig das Land ist, wollten wir dies der Welt zeigen und starteten ein Digezz-Projekt.

Vorbereitung
Zu Beginn teilten wir uns die Aufgaben auf. Jemand war zuständig für die Website und das Design und die andere Person war zuständig für Inhalte, Bilder und Icons.  Es wurde eine grobe Struktur für die Website zurechtgelegt. Wir wussten noch nicht, dass wir die Seite noch mehrmals  anders gestalten werden.

Umsetzung
Zu Beginn mussten wir die Reise aufschreiben und in Etappen aufteilen. Denn nicht überall wo wir übernachtet haben gab es etwas zu sehen. So haben wir uns auf zwölf Ziele festgelegt und zu jedem einen beschreibenden Text geschrieben. Hierfür bedienten wir uns am Reisetagebuch und haben uns bemüht, dass der Leser in die Welt eintauchen kann. Dann kam die grosse Bildauswahl. Da unterwegs die Kamera nicht immer gleich oft eingesetzt wurde, gab es grosse Unterschiede in der Anzahl der Bilder pro Etappe. In Göreme/Kappadokien hatten wir 744 Bilder gemacht, hingegen in Bodrum nur 3. Die Bilder mussten bearbeitet werden, damit alle farblich zueinander passen. In Adobe Bridge wurde eine Auswahl getroffen und diese wurde mit Camera Raw bearbeitet. Zudem wurden alle fürs Web optimiert und auf ein spezielles Format von 1:1.7 zugeschnitten.

In Adobe Illustrator wurden die verschiedenen Icons selber gezeichnet und fürs Web gespeichert.

Um die Seite noch mit Wissenswertem zu erweitern, haben wir eine Auswahl der wichtigsten Essensmöglichkeiten und Spezialitäten der Türkei getroffen und diese mit Icons aufgelistet. Zudem haben wir das wichtigste Vokabular zusammengetragen, damit sich jedermann in der Türkei durchschlagen könnte.

Umsetzung Webseite
Unser Layout sollte ansprechend aussehen und einen Scrollytelling Charakter haben. Wir erstellten ein Farbkonzept und ein Konzept für die Schriften.

Die Website wurde ausnahmsweise ohne Hilfe von Bootstrap erstellt. Dies stellte uns einige Male vor Probleme. Zuerst wollten wir eine animierte Karte einbauen. Wir versuchten tagelang gefundene Codes zu verstehen und diese ins eigene Projekt einzubauen. Nach mehrfachem Scheitern und Überarbeiten der kompletten Website, stellten wir uns die Fragen: «Ist die Animation der Route wirklich notwendig?». Wir waren uns einig, dass es schön gewesen wäre, wenn es funktioniert hätte, haben uns aber dann dafür entschieden die Karte statisch zu machen.

Zu den einzelnen Orten wurden verschiedene Facts eingebaut. Dies stellte sich ein bisschen als Herausforderung dar. Mit Bootstrap wäre dies um einiges einfacher gewesen, doch da wir uns gegen das Framework entschieden haben, wurden die Facts mit Hilfe von Flexboxen umgesetzt. Das Verständnis von Flexboxen war begrenzt, was für uns einen grossen Zeitaufwand bedeutete. Vielfach sah es nicht so aus wie wir es uns vorgestellt haben und die Facts waren nicht richtig responsive.

Ein weiteres Problem stellten die vielen Bilder dar, sie mussten mehrfach neu exportiert werden und waren schlussendlich immer noch sehr gross. Das Problem der langen Ladezeit wurde mit einem «lazyloader» gelöst.

Weitere Schritte waren das Einfügen einer Scrollbar, bei welcher man den Fortschritt auf der Seite sieht, das Einfügen eines Buttons, mit welchem man wieder an den Start der Seite gelangt und das Animieren der einzelnen Objekte beim Scrollen (was leider nicht immer funktioniert).

Mit folgenden Problemen hatten wir zu kämpfen:

  • Responsive Design
  • Weil wir nie zufrieden waren/nicht alles so klappte wie wir wollten, haben wir die Webseite mehrfach komplett neu gestaltet
  • Wir programmierten die Seite ganz ohne Bootstrap
  • Emojis nicht bei allen Browsern gleich dargestellt oder gar nicht dargestellt
  • Passende Emojis zu finden, da die Auswahl nicht so gross war
  • Video wird nicht auf dem Mobile angezeigt
  • Die Icons verhalten sich nicht responsive
  • Viel Bilder bedeuten viel Datenmenge (lange Ladezeit)

Fazit
Durch dieses Projekt haben wir unsere Webentwicklungs-Skills verbessert und angewendet. Auch mit dem Bildbearbeitungsprogramm von Camera Raw haben wir uns auseinandergesetzt, sind nun vertrauter und kennen die Möglichkeiten.

Keine Kommentare

Schreibe einen Kommentar