Coffee Guide Bern

Mit meinem Lieblingsgetränk in meiner Lieblingsstadt

Ich bin eine Kaffee-Liebhaberin. Der Duft, der Geschmack, die Farbe – einfach perfekt. In meiner Heimatstadt Bern gibt es viele wunderbare Kaffees, die nicht nur tollen Kaffee anbieten, sondern auch gemütlich sind und Platz für eine kleine Auszeit bieten. Gerne erzähle ich euch etwas über meine Top 10 der Berner Kaffees. Schaut auf meiner Website vorbei!

 

(bae)

Kritik
von Célina Rohrbach

Idee
Die Idee für den Coffee Guide entstand aus dem Projekt aus Mediengestaltung II. Wir hatten den Auftrag, ein Erscheinungsbild für einen fiktiven Club oder ein fiktives Museum zu gestalten. Das Ganze sollte in einem Zusammenhang mit der Stadt Bern stehen. Ich habe mich für ein Kaffee Museum in Bern entschieden und eine Website, einen Flyer sowie Kaffeeverpackungen gestaltet. Der Flyer stellte einen Coffee Guide auf Papier dar, der einige Kaffees der Stadt Bern vorstellt und kurz beschreibt. Nachdem das Gestaltungsprojekt abgeschlossen war, habe ich mich dazu entschieden, den Coffee Guide als Website im Rahmen von Digezz umzusetzen.

Konzept
Bevor ich mit der Umsetzung meines Projekts begann, habe ich mir überlegt, wie ich den Coffee Guide gestalten möchte. Relativ schnell war mir klar, dass ich ihn nicht in Papierform, sondern in Form einer Website machen möchte, damit der Guide für jedermann zugänglich wird.

Ich habe mich entschieden, auf der Website meine Top 10 der Berner Kaffees näher vorzustellen und meine persönliche Meinung zum Kaffee einzubringen. Die folgenden zehn Kaffees habe ich im Vorfeld definiert:

  • Adrianos Bar & Café
  • Colonial Bar
  • Einstein café & bel étage
  • Rösterei, Kaffee und Bar
  • Caffè Bar Sattler
  • Apfelgold
  • wartsaal | kaffee bar bücher
  • Lehrerzimmer
  • Ô Capitaine
  • Florian Caffè & Bar

Ich habe mir zudem überlegt, welches Framework ich für die Website verwenden möchte. Ich habe mich entschieden, mit w3schools zu arbeiten und habe ein w3.css Template ausgesucht, welches ich anschliessend individuell anpassen konnte.

Umsetzung
Nachdem das Konzept feststand, begann ich mit der Umsetzung meines Coffee Guides. Ich begann damit, jedes Kaffee einzeln zu besuchen, mich über die wichtigsten Eigenschaften zu informieren und Fotos zu machen. Die Textbeiträge zu den jeweiligen Kaffees verfasste ich oft direkt vor Ort, sodass ich meine Eindrücke möglichst realitätsnah einbringen konnte.

Die Fotos bearbeitete ich schliesslich alle mit «Adobe Lightroom». Ich kreierte einen eigenen Effekt, den ich auf alle Fotos anwenden konnte. Mir war wichtig, dass die Erscheinung auf der Website einheitlich wird.

Nachdem die Fotos bearbeitet und die Texte verfasst waren, begann ich mit der Programmierung der Website. Ich habe mich für das w3.css Template «Gourmet Catering» entschieden. Als Entwicklungsumgebung bzw. Code Editor verwendete ich «Adobe Brackets», da wir dieses Tool bereits in Interaktive Medien I kennengelernt und verwendet haben. Ich legte mir zu Beginn eine geeignete Ordnerstruktur an und speicherte die notwendigen Bilder und CSS Dateien darin ab. Zudem bereitete ich eine Excel Tabelle vor, in der ich die eingesetzten Classes, ID's und die weiteren Elemente beschrieb und deklarierte. Dies soll dem Verständnis dienen und Anpassungen zu einem späteren Zeitpunkt möglich machen.

Als die Vorbereitung abgeschlossen war, legte ich die einzelnen HTML- und CSS-Files an und stellte eine korrekte Verlinkung sicher. Der Coffee Guide soll in Deutsch und Englisch verfügbar sein und wird auf einem Onepager dargestellt. Die einzelnen Navigationspunkte am oberen Seitenrand verlinken auf die Bereiche weiter unten. Ich übernahm den Aufbau der Seite aus dem Template und passte ihn individuell auf mein Projekt an. Als die Version für den Desktop fertiggestellt war, kontrollierte ich die Anwendung der einzelnen Breakpoints auf dem Smartphone und passte das Nötige an.

Nach einigen Testläufen und Anpassungen war die Seite schliesslich fertig.

Erkenntnisse / Learnings
Die Verwendung des Frameworks von w3.css hat mir sehr geholfen und hat Vieles vereinfacht. Mir war wichtig, dass ich die einzelnen Bestandteile des Codes verstehe und ich war froh, dass ich dafür genügend Zeit eingerechnet habe. Im Vergleich zur manuellen Programmierung einer Webseite kam ich mit dem Template deutlich schneller voran. In der Anpassung des Codes war ich allerdings nicht immer so flexibel. Ich verbrachte oft viel Zeit damit, die Definition im vorgefertigten CSS zu finden, um schliesslich einige Anpassungen vorzunehmen.

Fazit
Ich bin mit dem Projekt und dem Endprodukt insgesamt sehr zufrieden. Die Fehler und Probleme, die während der Programmierung aufgetaucht sind, konnten bis zum Schluss alle erfolgreich behoben werden. Ich konnte sehr viel lernen und mich weiterentwickeln.

Keine Kommentare

Schreibe einen Kommentar