limonix Online-Shop

Vorbereitungen
Es stand also fest, unser Ziel dieses Semester war es einen eigenen Online-Shop zu programmieren, ganz ohne Template. Bevor wir aber loslegen konnten, stand noch sehr viel Vorbereitung an. Als aller erstes setzten wir uns an einen Businessplan der an das Canvas Business Modell angelehnt ist. Im Unterricht von Marius erschien uns das immer einfacher, aber wir merkten schnell, dass es deutlich mehr Aufwand ist. In unserem Businessplan ermittelten wir vor allem den Verkaufspreis unserer Spielkarten anhand unserer Ausgaben. Parallel zu dem Businessplan erstellten wir ein Dokument mit unserer Corporate Identity. Wir suchten Inspirationen für unser Logo, bestimmten unsere Typografie und unser Wording. Der nächste Schritt war es zu entscheiden, ob wir unsere Website über den Schulserver oder über einen externen Webserver hosten wollen. Wir entschieden uns für den externen Webserver «hosttech» und erstellten eine eigene Domain «limonix.ch». Mit unserer eigenen Domain sieht die Webseite erheblich professioneller aus und wir können auch eigene Mailadressen erstellen. Gleich dazu erstellten wir auch einen Instagram-Account, damit wir den Namen auf sicher haben.

Logo
Natürlich darf bei einer Webseite auch ein Logo nicht fehlen. Wir haben zusammen mehrere Vorschläge für ein Logo skizziert, welche wir dann zusammen besprochen haben. Dabei sind die unterschiedlichsten Varianten entstanden, da jede von uns andere Vorstellungen hatte. Die Version, welche uns am Besten gefiel, wurde dann im Illustrator umgesetzt. Wir haben uns für ein Kreislogo mit unserem Namen limonix in der Mitte entschieden.

Der Schriftzug wurde vektorisiert und dann an den Kreis angepasst, womit es zu einer Form wurde. Für die Punkte auf dem i haben wir unsere Sterne, welche bereits auf den Karten genutzt werden, verwendet. So erscheint auch das Logo im limonix-Design.

Animation/Fotografie
Für unsere Startseite wollten wir eine Animation unserer Karten einbinden. Schnell war klar, dass die Karten im Sinne eines Fächer aufgehen werden. Als Background nutzen wir unsere Sterne und Funken, welche wir animiert haben.

Die Vorlage für die Animation haben wir in Photoshop erstellt und dann im After Effect weiterbearbeitet. Die Erstellung der Vorlage war relativ schnell erstellt. Die Animation in After Effect dauerte länger als gedacht. Wir mussten uns zuerst wieder in After Effect einarbeiten, da der letzte Kontakt mit diesem Programm eine Weile her war. Nach ausgiebiger Recherche und mehreren Anläufen, hat die Animation dann so funktioniert wie gewünscht.

limonix Schrift
Angelehnt an One-Line: Wir haben entschieden, für limonix.ch eine eigene Schrift zu kreiren. Dabei sind wir auf unsere Spielkarten eingegangen und haben versucht, den One-Line-Style mit einfliessen zu lassen. Beim Design waren wir uns schnell einig. Etwas länger hat die manuelle Anpassung der Grundlinie und der Laufweite gedauert. Hierbei mussten wir alles einzeln – sprich jeden einzelnen Buchstaben – einpassen.

Die fertige ttf-Datei unserer limonix-Font haben wir zum Schluss auf den Server geladen und ins CSS eingebunden. Der Upload hat uns viel Ausprobieren und Herumtesten beschert. Als Plan B hätten wir ein Bild der Worte mit unserer Schriftart auf der Seite eingebettet, jedoch haben wir es kurz vor dem Ausrasten geschafft.

Programmieren
Ganz oder gar nicht. Wir setzen unsere Website ohne WordPress, nur mit HTML, CSS, Javascript und PHP um. Für dieses Vorhaben erstellten wir mehrere Wireframes von der Website, welche wir mehrmals Überarbeiteten. Über das finale Wireframe legten wir dann ein Grid. Mit diesem als Vorlage wagten wir uns dann ans Programmieren. Nach einigen gescheiterten Versuchen unsere Website mit dem Grid auszurichten und lehrreichen Coachings, wechselten wir dann doch zu Flexboxen. Auch mit den Flexboxen hatten wir Startschwierigkeiten, da wir alle drei erst im Studium mit dem Programmieren in Kontakt kamen und uns definitiv noch nicht zu den Profis zählen. Nach einem Wochenende mit stundenlangem programmieren, trafen wir uns erneut zu einem Coaching. Diesmal jedoch für ein ausführlicheres Programmier-Coaching in Zürich vor Ort.

Nach dem Coaching haben wir unser Wireframe erneut in Sections und Divs in Divs und noch mehr Divs unterteilt. Mit dieser Vorlage wagten wir es erneut in den Code. Unsere Webseite wurde in dieser Zeit schon mindestens drei Mal komplett von Grund auf neu programmiert. Aber wie wir in den Interaktiven Medien lernen, sollen wir unsere Fehler feiern und unsere Erfolge noch mehr. Endlich nahm unsere Webseite die Form an, welche wir uns vorgestellt haben.

Nur schon das HTML und CSS gut und strukturiert aufzubauen und zu verstehen kostete uns sehr viel Zeit. Die Recherche und das Verstehen von dem Code war unser neuer treuer Begleiter. Natürlich kamen wir aber auch an Javascript und PHP nicht vorbei.

Als wir für unsere Website Ideen suchten und sie skizzierten, hatten wir auch Elemente bei welchen wir nicht um JavaScript herumgekommen sind. Jedoch hielt sich das Verständnis von JavaScript bei uns sehr in Grenzen. Nach vielen kläglichen Versuchen unsere Regeln mittels eines Hovers darzustellen, vereinbarten wir ein Coaching. Dieses Coaching hat uns sehr geholfen und wir konnten dank der Starthilfe direkt weiterarbeiten. Mit unserem Freund und Helfer Google funktioniert der Hover nun nicht nur in eine Richtung sondern auch wieder zurück. Im völligen JavaScript-Fieber haben wir auch unsere Crew-Bilder mittels Hover erweitert, bei dem selber gezeichnete One-Line-Bilder erscheinen. Einer unserer grössten Erfolge zum Schluss ist die Sticky-Navigation, welche wir auch mit JavaScript lösen konnten.

Auch wenn wir dieses Semester im Webtech Backendtechnologien und PHP  durchgenommen haben, hat uns das Kontaktformular sehr viel Nerven gekostet – und Glühwein. Das Formular haben wir step-by-step erarbeitet, und viele Erklärungen im Internet und auf Youtube angeschaut. Wir haben zusätzlich, nebst dem HTML-File ein index.php in unserer Ordnerstruktur untergebracht. Um dies miteinander zu Verknüpfen wollten wir noch ein htaccess-File integrieren, jedoch war hier leider Schicht im Schacht. Das hat nach ewigem rumprobieren, googeln und ausprobieren leider nicht funktioniert. Später haben wir festgestellt, dass wir banalerweise alles (HTML und PHP) nur im index.php unterbringen müssen. Schlussendlich – gegen drei Uhr Morgens – hat es endlich funktioniert! Nun sind wir bereit für alle kommenden Bestellungen. Durch das Kontaktformular haben wir nun eine bessere Übersicht über die Backendtechnologien, wie auch PHP.

Fazit
Im gesamten Prozess hatten wir unglaublich viele Aha-Momente, Höhen, Tiefen und vor allem eine Menge Learnings. Auch wenn wir bereits seit 1,5 Jahren im Studium programmieren, haben wir erst durch dieses praktische Projekt unser Verständnis vertieft.

Gute Vorbereitung ist das A und O – vor allem wenn mehrere Personen an einer einzigen Website programmieren. Eine weitere sehr wichtige Erkenntnis: Zuerst verstehen und dann kopieren. Man kann Code kopieren, muss aber unbedingt wissen wofür er da ist. Wir verbrachten sehr viel Zeit damit, uns an das Programmieren zu gewöhnen und gut zusammenzuarbeiten.

Auch das gesamte Design inklusive Logo und Animation nahm mehr Zeit in Anspruch als gedacht. Dabei konnten wir unsere Illustrator, Procreate, After Effects und Photoshop Skills verbessern.

Wir trafen uns wöchentlich für lange und intensive limonix-Sessions. Wir kamen bei diesem Projekt definitiv an unsere Grenzen und hatten zwischenzeitlich etwas Bammel, dass wir es nicht schaffen werden. Umso stolzer sind wir jetzt! Unsere Website ist fertig und einsatzbereit, nun kann der Verkauf bald starten!

Im nächsten Semester wollen wir uns voll und ganz dem Marketing hingeben.