Geschützt: Lieber süss oder salzig? Todo sabor – Brasil Food

Gestaltung Logo und Visitenkarte

Die Namensfindung war bereits eine Knacknuss. Nach einer sehr langen Brainstorming-Session und intensiver Recherche, ob der gewünschte Name bereits besteht, haben wir uns für «Todo sabor» entschieden. Auch die Gestaltung des Logos war nicht einfach: Welche Schriftart soll verwendet werden? Sollen Bilder der Produkte darauf erscheinen? Muss man den Namen mit einem Zusatz ergänzen, damit klar wird, um welche Spezialitäten es sich handelt? Durch die verschiedenen Überarbeitungen (Farbe, Ausrichtung, Schrift etc.) entwickelten sich im Laufe der Zeit diverse Logo-Versionen. Im ständigen Kontakt mit meiner Tante entstand am Schluss das finale Logo.

Bei der Visitenkarte habe ich diverse Ideen ausprobiert. Entstanden sind zwei Visitenkarten, die nun beide im Einsatz sind. Bei der Gestaltung und Umsetzung der Logo- und Visitenkarten-Designs habe ich die Adobe Palette genutzt.

Planung und Umsetzung Website

Zu Beginn habe ich eine Domain gekauft und einen passenden Host gesucht. Dabei hat sich Hostpoint als geeigneten Host herauskristallisiert. Die Planung und Umsetzung der Website war im allgemeinen sehr zeitintensiv.

Wireframe

Um mir einen Überblick zu verschaffen, habe ich mir zuerst überlegt, aus welchen Inhalten die Website bestehen soll. Für mich war schnell klar, dass ich zwei Überblicksseiten haben werden («Süss» und «Salzig»), unter denen die verschiedenen Kategorien bzw. Produkte auffindbar sind. Für die Überblicksseite und die Produktseite habe ich dann ein Wireframe erstellt. Für mich war dieses Wireframe sehr wertvoll, da ich es im späteren Verlauf bei der Umsetzung immer wieder hervorgeholt habe. Da ich mir keine Vorgedanken bezüglich der Farb- und Schriftwahl mittels Mockups gemacht habe, bin ich dort bei der Umsetzung vermehrt gestolpert und musste vieles wieder anpassen. Auch jetzt bin ich noch nicht komplett zufrieden mit der Farbwahl. Bei einem nächsten Projekt würde ich definitiv ein Mockup erstellen, da es bei der Umsetzung viel Zeit und Nerven spart.

CMS

Für die Umsetzung habe ich mich zuerst online erkundigt, was es für Möglichkeiten gibt, um eine Website und vor allem einen Webshop zu erstellen. Ich wusste, dass ich ein einfaches CMS brauche, damit ich die Bewirtschaftung später auch meiner Tante übergeben kann.

Zuerst habe ich die Website mit Grav umgesetzt. Allerdings war diese Entscheidung ein Schnellschuss. Bei der Umsetzung begegneten mir einige grosse Hindernisse. Nach vielen Erklärungsvideos von verschiedenen CMS Tools habe ich mich dazu entschieden, die Website mithilfe von WordPress zu erstellen. Diese CMS hatte ich bereits während meiner Lehre kennengelernt und war damit etwas vertraut. Eigentlich wollte ich meine bisherigen Umsetzungen transferieren, doch bei der Installation von WordPress wurden die gesamten Dateien überschrieben. Frustriert startete ich von vorne.

Umsetzung

Mit WordPress konnte ich sehr einfach die einzelnen Seiten im Stil meines Wireframes umsetzen. Da ich mich noch nicht sehr gut im PHP auskenne, habe ich ein Template ausgesucht, dass sich leicht mittels CSS anpassen lässt. Ich habe stetig Verbesserungen und Anpassungen im Verlaufe vom Projekt gemacht. Doch die meisten grauen Haare habe ich beim Herausfinden, wie ich am besten den Webshop integrieren soll, erhalten. Ich hatte davor noch nie einen eigenen Webshop erstellt und wusste nicht, wie ich starten soll. Schliesslich bin ich bei meiner online Recherche immer wieder auf das Plugin Woocommerce gestossen. Nach reichlichen Erklärungsvideos konnte ich mich langsam in dieses Plugin hineinfinden und dort leicht die einzelnen Produkte hinzufügen.

Google war mein bester Freund: Es gab immer wieder Probleme, die ich dank grösserer Suche im Internet früher oder später lösen konnte. Beispiele hierfür wären die Untertitel bei den Produkten, die Produktkarussells sowie die allgemeine Auflistung der Produkte. Bei mir hat es nie funktioniert, dass die Untertitel auch bei den Produktkarussellen erscheinen. Nach intensivem Pröbeln konnte ich das Problem kurz vor der Abgabe lösen. Auch die Versendung der Mails (z.B. Bestellbestätigung) hat mir Bauchschmerzen beschert und mich viel Zeit gekostet. Ich wusste nicht, dass man ein Plugin dafür braucht, damit die Mails versendet werden können. Ich bin der Person immer noch dankbar, die mich drauf aufmerksam gemacht hat. Allerdings gibt es weiterhin Probleme, die ich bis jetzt noch nicht lösen konnte. Zum Beispiel sind die Warenkorb-Buttons bei den Produkten auf einer unterschiedlichen Höhe.

Dieses Projekt hat sich über das gesamte Semester hinweggestreckt. Da ich neben Digezz auch noch andere Abgaben hatte, gab es auch Phasen mit grösseren Unterbrüchen, wo ich nicht an der Website gearbeitet habe. Dies hatte den Vorteil hatte, dass ich ein Problem anders angegangen bin als im Vorhinein. Allerdings musste ich mich auch immer wieder neu in die Plugins hineindenken und herausfinden, was meine letzten Schritte waren bzw. welche offenen Tasks bestehen.

Bildbearbeitung

Die gesamte Bildbearbeitung war mühsam, da ich leider viel von Hand freistellen musste. Die Fotos habe ich von meiner Tante erhalten. Allerdings wäre es im Nachhinein besser gewesen, wenn sie die Bilder in einer kleinen Fotobox oder vor einer weissen Wand erstellt hätte, damit das Freistellen einfacher gelingt. Bei der nächsten Fotoshooting-Session werden wir dies definitiv beachten.

Ende? Nein!

Die Website ist noch nicht ganz fertig. Die einzelnen Produkttexte sind noch Dummytexte und müssen noch mit meiner Tante abgesprochen werden. Auch die Texte in den Mails sind noch nicht endgültig. Zudem ist die Website noch nicht Mobile optimiert. Ich möchte auch ein Teil der Bilder neu erstellen und ersetzen, da diese nicht immer optimal waren und auch die Designs sich etwas verändert haben. Hier wird noch einiges an Arbeit auf uns zukommen, aber ich freue mich darauf.

Fazit

Das Projekt «Todo sabor» war sehr anspruchsvoll und hat sehr viel Zeit (sowie Nerven) gekostet. Allerdings habe ich bei der Planung und Umsetzung unglaublich viel gelernt. Meine gesammelten Learnings werden bei einem nächsten Projekt sehr nützlich für mich sein.