5 Franken: Das digitale Kochbuch zum Sparen

Food Lovers aufgepasst! Fein essen, aber sein Portemonnaie vor hohen Rechnungen schonen? Kein Problem – 5 Franken hilft dir dabei.

Obwohl die meisten Studierenden bekanntlich ein knappes Budget haben, fliesst ziemlich viel ihrer Ausgaben in die Lebensmittelkategorie. Wie wär’s jedoch, wenn man sparen könnte und nicht auf feines Essen verzichten müsste?

Die interaktive Website «5 Franken» umfasst nützliche Tipps zum Sparen beim Kauf von Lebensmitteln und bietet verschiedene Rezepte unter CHF 5.– pro Portion an. Sei es ein Bananen-Erdbeer-Smoothie, um den Durst zu löschen oder Mac and Cheese für den grossen Hunger. Die Zubereitungen werden mit Text und Videos beschrieben. Ebenfalls sind in den Videos Detail- und Gesamtkosten aufgelistet.

Ob mit dem Smartphone oder Desktop – das responsive Design überlässt dir die Wahl, wie und wo du die Website nutzen möchtest.

Werfe einen Blick auf «5 Franken» und probiere es selbst aus.

(spu)

Kritik
von Nadine Hauser

I. Idee
Wie bei vielen anderen Mitstudierenden hatte ich vor dem Corona Virus andere Pläne. Mein ursprüngliches Projekt war ein Werbespot für ein Fitnessstudio. Aufgrund der Entscheidungen des Bundesrates wurde das Studio 1 Woche vor den geplanten Dreharbeiten geschlossen. So fiel mein Projekt ins Wasser und ich machte mich auf die Suche nach einem Projekt, welches von A-Z von zu Hause produziert werden kann. Deswegen entschied ich mich für das Erstellen einer Website. Doch warum 5 Franken? Da meine Zielgruppe Mitstudierende sind, wollte ich ein digitales Kochbuch gestalten, welches auf ihr Studentenbudget zugeschnitten ist. Eine Portion unter CHF 5 schien mir plausibel.
Da die Website so multimedial sein sollte wie es nur geht, habe ich mich für die ganze Palette entschieden: Sketchen fürs Design, technische Arbeit und filmisches Gestalten bei den Dreharbeiten, Adobe Lightroom für die Bildbearbeitung, Premiere Pro für die Videos, Illustrator fürs Logo und HTML, CSS, JavaScript für die Website. Kurz zusammengefasst: den Stoff von den ersten 2 Semestern in einem Projekt praktiziert.

II. Video-Produktionen

Planung & Konzeption
Bei der Konzeption habe ich mir vorgenommen ein einheitliches Auftreten zu gestalten. Dementsprechend war es mir wichtig, dass alle Videos gleich aufgebaut sind: identische musikalische Untermalung, Schriftart/-grösse, gleicher Stil und Aufbau. Einzelne Bildeinstellungen habe ich im Voraus geplant. Zum Beispiel war es wichtig, dass es im Bild Platz gab für die Kosteninformationen zu den einzelnen Produkten. Diese genaue Planung hat mir bei der Post-Production sehr geholfen. Für den Hauptteil habe ich mir jedoch den Freiraum gelassen, mit verschiedenen Bildfrequenzen, Einstellungen und Perspektiven zu arbeiten, damit das Video interessant wirkt.

Dreharbeiten
Bei meinem letzten Digezz-Projekt "All About the Presentation" war ich vor und hinter der Kamera. Da die Kontrolle über den Fokus und die Bildeinstellung verloren geht, habe ich mir für dieses Projekt Hilfe geholt. Je nach Situation konnte mir jemand beim Kochen helfen währendem ich mich auf die Dreharbeiten fokussierte. Wegen Corona musste ich mit meinem privaten Equipment zurechtkommen: Ein billiges Stativ, Sony Alpha 6300 und ein Objektiv (18-105mm). Technisch gesehen klappte das gut, doch von der Kreativität her wäre ein Auslegearm hilfreich gewesen für Top Down Aufnahmen (bzw. Vogelperspektive) und eventuell noch ein künstliches Aufhelllicht. Damit das vorhandene Licht richtig genutzt wird, fanden die Dreharbeiten immer um die gleiche Zeit statt.

Post-Production
Überraschenderweise war die Kostenzusammenstellung ziemlich aufwendig. Ich habe mir bei der Konzeption zu wenig Gedanken über Kleinigkeiten gemacht. Zum Beispiel: Wie rechne ich den Preis einer Prise Salz aus? Die Kosten sind leider nicht zu 100 % zuverlässig, da es auch immer darauf ankommt, wo man die Zutaten einkauft. Deswegen habe ich versucht, schweizerische Durchschnittspreise herauszufinden.

III. Website

Design
Für die Designplanung der Website habe ich zum ersten Mal mit Adobe Illustrator Draw gearbeitet. Ich habe mich entschieden die Design-Entwürfe auf dem Tablet zu sketchen statt ein Projekt im Adobe Xd zu erstellen. Denn das Design an sich ist ziemlich minimalistisch und strukturell simpel aufgebaut. Das Endresultat weicht sich jedoch vom Entwurf leicht ab. Beim Programmieren habe ich mich nämlich weiter inspirieren lassen und spontan neue Elemente eingebaut (z. B. die Slideshow auf der Startseite).
Zudem habe ich im Illustrator ein weisses und schwarzes Logo erstellt, damit es auf jeder Hintergrundfarbe ersichtlich ist.

Coding
Zu Beginn des Projektes hatte ich Hemmungen und Respekt vor umfangreichen Codierungen. Doch mit der Zeit konnte ich die Hemmschwelle glücklicherweise überwinden. Das Codieren an sich war zwar zeitaufwendig, doch was noch viel zeitintensiver war: die täglich anfallenden Probleme. Sehr oft stiess ich auf eine Mauer, die mir den Weg versperrte weiterzumachen. (z. B. Probleme mit dem Server oder einfache Verlinkungen, die nicht funktionierten etc.) Wahrscheinlich hatte ich so viele Probleme, weil ich zuvor noch nie eine Website codiert habe, die länger als ein Onepager war. Es war jedoch eine gute Gelegenheit den HTML, CSS und JS Stoff aufzufrischen und zu vertiefen. Zudem habe ich für ein Kontaktformular die Skriptsprache PHP kennengelernt. Schlussendlich musste ich das Formular leider entfernen, da der Server diese Funktion nicht unterstützt.

Ebenfalls wichtig: die Website ist responsive! Diese Codierungen waren aufwendig, da die Desktop-Version eine horizontale Menüleiste beinhaltet und die mobile Ansicht hingegen nur ein interaktives Hamburger-Menü-Icon.

IV. Fazit
Obwohl nicht immer alles auf Anhieb klappte und dementsprechend viel Geduld nötig war, bin ich mit dem Endresultat zufrieden.

Keine Kommentare

Schreibe einen Kommentar