Projekt SchnäggWägg – eine Erweiterung von IMIV Physical Computing
Egal ob Gemüsegarten oder Hochbeet: Alle Hobby- und Profigärtner kennen das Schneckenproblem. Und ganz ehrlich? Wer will schon Schneckengift direkt neben seinem guten Salat? Das geht doch noch besser.
zur fertigen Website: https://www.mariareichmuth.ch/schnaeggwaegg/
Im IMIV Physical Computing Projekt bin ich daher auf eine Lösung gestossen, um die Schnecken zu vertreiben oder zumindest ihre Anwesenheit zu dokumentieren. Für Digezz habe ich das Projekt genommen und alles deutlich umfangreicher gemacht. Wie genau, erkläre ich hier.
Vorgaben vs. Umsetzung
Mein Digezz Projekt «SchnäggWägg» überschneidet sich zu einem Grossteil mit den Vorgaben von IMIV. Jedoch gibt es sehr viele «Extrameilen», die ich gegangen bin, die ich ohne Digezz nicht gemacht hätte.
Mehr als nur ein einfacher Onepager
Für die Gestaltung der Website wollte ich die Vorgaben eines simplen «Onepagers», wie uns einige Beispiele von IMIV Projekten aus Vorjahren gezeigt wurden, übersteigen. Also habe ich mich an ein anschauliches Design gesetzt mit mehreren Unterseiten und schönen Animationen.
Um das zu erreichen, habe ich mir mehrere Stile, Farbkonzepte und Seitenstrukturen überlegt und ausprobiert.
Letztes vs. finales Figma
Hier sieht man die verworfene, sowie die übernommene Version meiner Figmas und weiter unten viele Entwürfe und Ideen, die zum grössten Teil ebenfalls verworfen wurden.
Scrollanimation
Eine auf den ersten Blick nach wenig wirkende, aber sehr aufwändige Ergänzung zum IM Projekt war die Scroll-Animation, die abspielt, wenn man die Seite neu startet.
(siehe Website)
Das Ziel war es, im Hintergrund ein automatisch abspielendes Zeitraffer-Video von den Hochbeeten während des Sonnenuntergangs zu machen. Davor soll das Logo gross und eingemittet platziert werden. Wenn man anfängt zu scrollen, sollte das Logo und Video dynamisch schrumpfen und nach oben an den Rand des Viewports wandern. Der Seiteninhalt soll gleichzeitig reinrollen und am unteren Rand des Videos soll ein schwarzer Verlauf platziert werden, um einen ästhetischen Look zu kreieren. Nach dieser Animation soll das Logo aber an Ort und stelle bleiben und erst wieder bei einem Seitenreload zu sehen sein. Um diese Animation genau so hinzubekommen, wie ich es mir vorgestellt hatte und wie sie jetzt auch ist, habe ich viel Zeit und Nerven gebraucht.
(siehe Website)
Homeanzeige, vier Statistikseiten und eine Überseite
Auf meiner SchnäggWägg Seite sind nun auf der Homeseite die aktuellsten Aktivitäten meiner IMIV Sensoren durch die Datenbank eingebettet – diese werden laufend aktualisiert. Wenn man auf diese Details klickt, kommt man zur jeweiligen Einzelauswertung und wenn man auf der Homeseite auf «Statistik» klickt bzw. auf den Unterseiten auf «alle Zonen», dann kommt man zu einer Auswertung, die zusätzlich zu den Auswertungen der jeweiligen Sensoren die drei Zonen miteinander vergleicht und so eine Erfolgsquote erstellt. Auf der Überseite wird noch das Projekt genau beschrieben und das Dokumentationsvideo ist ebenfalls noch dort eingebettet. So konnte ich klar die Vorgaben von IMIV einer Onepager Seite und einer einfacher Darstellung von Chart.js um mehrere, miteinander verknüpfte Unterseiten und einem Vergleich erweitern.
(siehe Website)
Headervideo und Nahaufnahme Schnecken für Zone 2
Um eine anschaulichere und authentischere Website zu gestalten, ist mir die Idee gekommen, Videomaterial von dem «Original-SchnäggWägg-Setup-Garten» zu sammeln. Dafür habe ich mehrere Zeitraffervideos mit meiner Insta 360 X4 Actioncam gemacht. Am besten gefallen hat mir dann der Sonnenuntergang-Zeitraffer, der es sowohl in den Header als auch in mein anderes Digezz-Videoprojekt geschafft hat. Auch von den Schnecken hatte ich versucht, ein Zeitraffer Video über Nacht zu filmen. Jedoch war meine Kamera bzw. meine Skills nicht ausreichend, um in der dunklen Nacht die Schnecken filmisch festzuhalten. Deshalb habe ich dann noch mit einer weiteren, professionellen Filmkamera einige Nahaufnahmen der Schnecken gemacht, die versuchen, über den Elektrozaun zu kriechen.
(siehe Website)
Projektdokumentation mit professionellem Kamerasetup
Anstatt wie in IMIV vorgegeben ein relativ simples, mit dem Handy gefilmtes Video zu machen, habe ich auch die Projektdokumentation von IMIV aufwändiger und anschaulicher gestaltet.
Mit folgendem Kamerasetup habe ich gefilmt:
– Nikon D810 mit AF-S NIKKOR 24–70 mm f/2.8G Objektiv und Stativ
Für Leitinterview und B-Roll
– Rode Wireless Go II (Kabellos mit Sender und Empfänger)
für Interviewton und Umgebungsgeräusche
Und für den Inhalt des Videos habe ich so detailliert wie möglich mein Vorgehen erklärt, ohne zu stark in die Details zu gehen, um die Zeitlimite von drei Minuten in IMIV immer noch einzuhalten.
(siehe Video)
Video: Maria Reichmuth
(abb)
Kritik und Learnings
Rückblickend bin ich mit dem Endresultat meines Digezz-Projekts sehr zufrieden – vor allem was das Styling, die Scrollanimation und die Videoumsetzung betrifft. Ich habe viele Ideen ausprobiert, unzählige Designvarianten entworfen und sehr viel Zeit investiert, um ein Projekt zu realisieren, das deutlich über die Anforderungen von IMIV hinausgeht.
Das wohl wichtigste Learning für mich war bei diesem Projekt das Thema Zeitmanagement. Ich habe so viel Energie in dieses eine, grosse Projekt gesteckt, dass ich zwar beide Module – IMIV und Digezz – damit abgedeckt habe, aber letztlich nur eine einzige Website als sichtbares Ergebnis präsentieren kann. Das wirkt auf den ersten Blick vielleicht wie «nur ein Projekt», obwohl inhaltlich und aufwandstechnisch definitiv zwei dahinterstehen. Für die Zukunft nehme ich mit, dass es hilfreich sein kann, den Output klarer voneinander abzugrenzen – auch wenn die Projekte thematisch verbunden sind.
Trotzdem bin ich sehr stolz auf das Resultat. Ich konnte nicht nur mein technisches Know-how vertiefen, sondern auch meine gestalterischen Fähigkeiten weiterentwickeln. „SchnäggWägg“ ist ein Projekt, das ich mit gutem Gefühl in mein Portfolio aufnehme – anschaulich, eigenständig und mit viel Herzblut umgesetzt. Gerade auch, weil ich das Projekt in beiden Modulen von A bis Z alleine umgesetzt habe.
Was mir gut gelungen ist
Auf das Dokumentationsvideo bin ich besonders stolz – vor allem, weil es neben meinem anderen Digezz Projekt «Permakultur Hof Schnabelsberg» das erste richtige Videoprojekt war, bei dem ich voll und ganz selber entscheiden, umsetzen, freuen und bereuen konnte. Dadurch, dass ich mit dem Permakultur Video ein wenig üben konnte, hatte ich bei dem Videoprojekt die Kameraeinstellungen schon sehr gut im Griff. Gerade auch die Nahaufnahmen der Schnecken haben es mir angetan, weil es mir da gut gelang, mit der Tiefenschärfe zu spielen.
Wo ich noch üben muss
Zwar gefällt mir das Endergebnis der Website extrem gut, jedoch würde ich die Struktur beim nächsten Mal ganz anders aufbauen. So habe ich z.B. eine rückwirkend kompliziert wirkende Mischform aus Inhalten die via Script.js geladen werden und .html Seiten, die darüber aufgerufen werden.Aktuell werden nämlich alle Unterseiten nur via Javascript aufgerufen, was leider zur Folge hat, dass man nicht direkt auf die einzelnen Unterseiten verlinken kann. Nächstes Mal würde ich daher mehr Unterseiten machen und auch das Styling bewusst besser aufteilen. Um die Headeranimation aber so ästhetisch wie möglich zu lassen, habe ich die Struktur nun so belassen, wie sie ist. Dafür habe ich viel über Javascript gelernt.
Fazit
Ich habe viel gelernt, viel Zeit investiert und konnte ein Projekt ganz alleine und Modulübergreifend umsetzten, was mir definitiv einen grossen Fortschritt in den Bereichen IM, Visualisieren und AVE gebracht hat.