In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Sustainable Garden
Nachhaltigkeit findet nicht nur im eigenen Haushalt statt. Der Mensch nutzt den Garten, um sich etwas Gutes zu tun - aber gibt er dies auch an die Natur weiter? Wie sieht der Nachhaltige Garten aus? Und was ist zu beachten wenn man den Garten Nachhaltig anlegt?
Dies ist ein Projekt im Bereich Information-Design und soll zur Aufklärung und Darstellung von nachhaltigen Prozessen im Garten führen. Dabei wird der/die Nutzer/in durch eine Web-Story geführt, wobei ihm einzelne Aspekte der Nachhaltigkeit durch eine visuelle Story schrittweise näher gebracht werden sollen.
In erster Linie dient dieses Projekt dem/der Nutzer/in zu zeigen, was man im eigenen Garten beachten sollte, um der Natur etwas Gutes zu tun. Dabei werden dem/der Nutzer/in nicht nur nachhaltige Inhalte vermittelt sondern z.T. auch „wie man einen Garten aufbaut“ und was z.B. unter gängigen Begriffen wie Aussaat zu verstehen ist.
Zunächst habe ich sehr viel recherchiert zum Thema Garten und wie man z.B. den Garten „richtig“ anlegen sollte und habe mein hauptaugenmerkmal zunächst auf Schrebergärten, deren Geschichte und andere Aspekte gesetzt. (Zusehen ist dies auf dem ersten Screenshot, genauer Erkennbar im Miroboard unter „1.0 Allgemeine Recherche zu Mensch und Pflanze“)
Dabei kam ich zu dem Punkt „Nachhaltigkeit im Garten“. Ich habe mich gefragt: „Was bedeutet eigentlich Nachhaltigkeit im Garten? Und reicht es aus einen Garten zu besitzen, um schon etwas Gutes für die Natur zu tun?“
Danach fing ich an, mich sehr stark mit dieser Thematik zu beschäftigen und verglich zahlreiche Quellen, um einen guten Überblick zu behalten.
Meine Recherche war daher sehr breitgefächert, dennoch habe mich hauptsächlich auf den Seiten des BND´s, Bund-Naturschutz und Greenpeace bewegt. Sowie zwei spezielle Bücher die ich unter „Recherche: Nachhaltigkeit im Garten“ schon hinterlegt habe.
Hierfür habe ich vorab die Autoren nochmal anhand der Biografien geprüft und habe herausgefunden, dass diese zum Teil in ihrem Wissengebiet sehr bekannt und renommiert sind.
Informationen zu den Autoren:
Ethnobotaniker Wolf-Dieter Storl: https://www.youtube.com/watch?v=Im472hyq1ig, https://de.wikipedia.org/wiki/Wolf-Dieter_Storl, https://www.ardmediathek.de/swr/video/kaffee-oder-tee/gartensprechstunde-mit-heike-boomgaarden/swr-fernsehen/Y3JpZDovL3N3ci5kZS9hZXgvbzEyMjA5ODg/, https://www.lovelybooks.de/autor/Heike-Boomgaarden/,
Die Links zu meinen Informationen und Quellen sind in meinem Miroboard auf der linken Seite hinterlegt:
https://miro.com/app/board/o9J_ktlBlcM=/
Wieso unterteilte ich die Informationen und entschied ich mich nur für bestimmte Komponenten?
Nachdem ich sehr ausgiebig recherchiert hatte, merkte ich das dieses Thema sehr in Tiefe geht. Daher versuchte ich soweit es geht alle möglichen Inhalte zu sammeln, um eine Einführung in den nachhaltigen Garten zu geben. Daher habe ich das Thema in 4 Punkte gegliedert:
1. Bodenleben aktivieren
2. Wege innerhalb des Gartens
3. Lebensraum schaffen
4. Selbstversorgung
Es gibt natürlich noch zahlreiche weitere Erkenntnisse und Tipps, die man mit der Zeit ergänzen kann, daher ist meine Story auch darauf ausgelegt, dass diese immer wieder erweiterbar und anpassbar ist für weitere Inhalte. Doch dazu ist im Punkt Skizzen/Entwürfe sowie Umsetzung mehr zu sehen.
Nachdem ich Inhaltliche Aspekte meiner Arbeit geklärt hatte, beschäftigte ich mich mit Webflow, wo ich mich hauptsächlich über das Forum und diversen Videos auf Youtube informierte.
Quellen: https://forum.webflow.com/, https://www.youtube.com/channel/UCELSb-IYi_d5rYFOxWeOz5g
Im Kurs entwickelte ich eine Webstory mit Webflow, in welchem der/die Nutzer/Innen die Möglichkeit hat durch eine Story den nachhaltigen Garten besser kennenzulernen. Bevor ich mir jedoch über die Visualisierungsform und den User-Journey Gedanken machte, entwickelte ich zunächst Personas, die für die Benutzung meiner Story relevant sind.
Wer ist meine Zielgruppe?
Generell ist meine Zielgruppe für den nachhaltigen Garten Personengruppen, die bereits einen Garten haben, aber sich mit dieser Thematik noch nicht beschäftigt haben, bzw. wenig Hintergrundwissen besitzen. Aber nicht nur Gartenbesitzer sondern auch Personen, die noch keinen Garten besitzen, aber den Wunsch haben sich einen Garten einzurichten sollten sich mit dieser Thematik beschäftigen.
Warum entschied ich mich für eine Webstory und nicht ein App/Plakat?
Durch meine Recherche merkte ich schnell, dass ich sehr stark in die Informationvisualisierung gehen wollte, da ich zum Teil viele einzelne Inhalte versucht habe miteinander zu verknüpfen und neu darzustellen. Daher erschien mir eine Appanwendung, was ich zunächst in meinem Pitchdesk vor hatte, als nicht mehr notwendig. Hätte ich die einzelnen Komponenten zu einem Spiel dargestellt o. ä. , wäre eine App-Anwendung besser gewesen. Jedoch sind in meiner Webanwendung viele Illustrative-Inhalte zu sehen, die versuchen sollen die Thematik ansprechend darzustellen. Ein Plakat, ist dennoch durch die Visualisierungsform entstanden und dient somit als Teilprojekt.
Aufgrund meiner Vorrecherche, bin ich weg von dem Gedanken nur ein einfaches Informationsplakat zu gestalten, sondern wollte kleine Microinteractions in Form von Lottis und anderen Hervorhebungen darstellen. Ziemlich schnell merkte ich durch meine Recherche, dass ich mit Webflow durch die richtigen Einstellungen, die Geschichte auch auf meinem Handy zeigen kann, da Webflow mehrere Ansichtsmöglichkeiten besitzt. Natürlich ist die Handy-Ansicht sehr klein, jedoch gäbe es die Möglichkeit dies zu nutzen.
Mein Medium?
Mein erster Gedanke war es, dass der Nutzer das Ganze spielerisch erfahren soll. Das End-Medium ließ ich mir im Laufe des Projektes noch offen, daher legte ich meinen Fokus darauf, dass die Story responsive auf jedem Endgerät funktioniert. Schließlich entschied ich mich als finales Medium, für das iPad.
Warum das iPad als Medium?
Da ich parallel im Kurs Ausstellungsdesign an einem Möbelstück arbeitete, merkte ich durch die Entwicklung des Möbels, dass es sich anbietet ein leichtes Medium als Informationsmittel zu verwenden, was nicht zu voluminös wirkt. Dabei war es mir wichtig, das der/die Benutzer/in das Medium in die Hand nehmen kann und gegeben falls scrollen und alles antippen kann. Zwar habe ich mich letztendlich für das Ipad als Endmedium entschieden, jedoch ist meine Seite responsive und somit auf jedem Endgerät, selbst auf dem Smartphone, darstellbar.
Im Folgenden sind die Personas zu sehen, die ich zuvor für mein Projekt erstellt hatte. Sie sollen eine Überblick geben, wer sich mit der Thematik beschäftigen könnte und welche Interessen die Personen besitzen könnten.
Nachdem ich weitestgehend festgelegt hatte wie ich das Thema aufbereiten möchte, habe ich mir neben meines Gestaltungsstil, Gedanken über den User-Journey gemacht. Da ich eine sehr einfache Story hatte die durch das Scrollen mit der Maus oder der Hand zu erfahren ist, stellte ich mir hierbei einige Fragen:
„Versteht der/die Nutzer/in meine Story durch das Scrollen?“
„Wie kann ich dem/der Nutzer/in zeigen welches Element klickbar ist?“
„Weiß er/sie was ihn/sie erwartet wenn er/sie die Elemente anklickt?“
„Weiß der/die Benutzer/in, dass er/sie nach unten scrollen muss?“
Diese Fragestellungen, versuchte ich im Laufe des Projektes durch meinen Gestaltungsweg zu lösen und mit verschiedenen Studien und Prototypen weiter zu entwickeln.
Vorab hatte ich mir jedoch in einem Flussdiagram Gedanken über mögliche Szenarien gemacht. Die beiden Flussdiagramme-Fotos zeigen meine Gedanken zu möglichen Problemen und Lösungen zum User-Flow der Story.
In den zwei darunter zu findenden PDF´s sind jeweils zwei Darstellungswege des fertigen User-Journey sichtbar. Die erste Darstellung bezieht sich nur auf die Pop-Ups und soll darstellen, wenn der Nutzer/die Nutzerin auf ein Element klickt, welches Pop up ihn/sie erwartet wird. Die zweite Darstellung zeigt das fertige User-Journey meiner Story.
Das User-journey meiner Story ist vor allem gut erkennbar, durch die Hervorhebungen der Elemente in meinen Illustrationen, sowie in meinen Texten. Hierfür habe ich verschiedene Varianten angefertigt, die auch bei „6.0 Studien“ nochmal ausführlich erklärt werden.
Wie bereits erwähnt, ließ ich mir relativ bis zum Ende das Medium offen, jedoch hatte ich versucht parallel beide User-Journeys so zu gestalten, dass es dem Nutzer klar zu erkennen gab, wie er die Story zu bedienen hat.
Nachdem ich meine Recherche und meine Ideen weitestgehend abgeschlossen hatte, habe ich mir Gedanken gemacht, wie ich das Ganze visualisieren könnte und was sich für Möglichkeiten anbieten. Dabei habe ich mir zunächst ein Moodboard erstellt und dieses in „Datenvisualisierung und Informationsvisualisierung“ sowie „Anwendungsmöglichkeiten“ dargestellt (Siehe Bild 1).
Schließlich entwarf ich ein weiteres Moodboard, in welchem ich mein Augenmerkmal nur auf die Gestaltung und Visualisierung gesetzt habe (Siehe Bild 2).
Eine gute Visualisierungsform, waren für mich organische, geometrische aber auch 3-Dimensionale Objekte die in Form eines kleinen Gartens oder einem sehr übersichtlichen Plakat dargestellt worden sind.
Da ich nicht einfach nur mit fotografischen Bildern arbeiten wollte, aber die Idee des illustrativen Gartens als treffen empfand, erprobte ich verschiedene Visualisierungformen, die z. T. in meinem Storyboard gut erkennbar sind.
Warum eine illustrierte Version des Gartens?
Durch die illustrativen Elemente in meiner Geschichte, soll dem/der Nutzer/in ein „Naturgarten“ gezeigt werden, den man nicht nur durch einfache Bilder erfahren soll. Vielmehr war es mir wichtig, durch verständliche Darstellungen die Aufmerksamkeit zu generieren und die Story auszubauen. Zudem konnte ich durch die Illustrationen, leichter und schneller Inhalte ergänzen.
Erklärungen zum Storyboard:
Da ich relativ viele Informationen hatte und diese nicht einfach nur wiedergeben wollte, überlegte ich mir eine Geschichte, in welcher der Nutzer schrittweise durch den Garten geführt wird. Meinen Fokus setzte ich dabei auf die „schrittweise“ Entwicklung.
Innerhalb meiner Storyboards ist zu erkennen, dass ich zunächst mit einer sehr reduzierten Variante gearbeitet habe. Diese Variante bezieht sich nur auf eine reine Linienanimation und hätte durch das Scrollen dem Nutzer gezeigt, was es für nachhaltige Komponenten gibt.
Anschließend habe ich versucht, in die drei-dimensionale Ebene zu gehen und arbeitete mit Rasterformen. Wie ich die Story aufgebaut habe, ist in den folgenden PDF´s gut zu erkennen. Dabei habe ich für jeden Gestaltungsstil ein ähnliches Storyboard angefertigt und mir darunter jeweils Notizen vermerkt.
In diesem Sinne, beachtete ich immer die Fragestellung:
„Versteht der Nutzer bzw. eine/ein Außenstehende/r meine Story bzw. meine Inhalte auf der Website?“
Um dies zu beantworten, versuchte ich auch in meinem Storyboard eine geeignete Herleitung zur Thematik zu finden und entschied mich zunächst noch für die Statistik der Garteneinrichtung. In dieser Statistik ist gut zu erkennen, dass zwar schon um die 40-50 % der Kleingärtenbesitzer einen Kompost besitzen, jedoch an ersterer Stelle viele anderen unwichtigere Aspekte stehen. Zu dem stellte ich mir auch in diesem Zusammenhang die Fragen: „Der Garten bietet dem Menschen Erholung, aber tut der Mensch auch etwas Gutes für den Garten?“ „Fördern wir die Artenvielfalt im Garten? Oder achten wir auf ein richtiges Bodengefüge für Bodelebewesen?“
Nachdem ich meine Storyboards ausgearbeitet hatte, starte ich mit der Visualisierungsform des isometrischen Designs, da ich hierfür viel vorgearbeitet hatte und mir zunächst mehr Spielraum mit den Informationen gegeben hat.
Im weiteren Prozess, entwickelte ich ein einheitliches Farbschema (Siehe PDF darunter). Wo ich versuchte innerhalb dieser Farbpalette die Illustrationen anzupassen. Zudem baute ich bei fast allen einen Schatten ein.
Parallel zu meinen Inhalten, baute ich meine Story in Illustrator auf. Hierfür erprobte ich unterschiedliche Darstellungen und experimentierte hierbei nochmal mit Linien.
Im Laufe meines Gestaltungsprozess, merkte ich dass die Linienform wie in meinen Skizzen und Entwürfen als Plakat gut funktioniert, jedoch innerhalb einer Website zu kleinteilig wirkt und meinen Informationen auf einer Website nicht genügend Platz haben könnten. Auch hätte ich probleme bekommen mit der Schrift und manchen Animationen.
Daher entwickelte ich innerhalb meines Projektes, zahlreiche Studien und erprobte kleine gestalterische Prototypen. Dennoch habe ich die Linienvarianten im isometrischen Design nicht komplett verworfen, sondern lediglich dies als Teilprojekt erarbeitet.
Im weiteren Prozess erarbeitete ich jedoch noch eine zweite Variante für meine Website, die in den darauffolgenden Studien gut erkennbar ist. Hierbei arbeitete ich mit versetzten Dreiecken um die schrittweise Entwicklung zu symbolisieren.
Darüber hinaus, habe ich beim Aufbau der Webstory in Webflow, diverse Studien zur Hervorhebung der klickbaren Elemente gestaltet. Dabei bezog ich mich auf die Fragen:
„Wie kann ich dem/der Nutzer/in zeigen, welche Elemente klickbar sind?“ und „Weiß er/sie, was ihn/sie erwartet wenn er/sie die Elemente anklickt?“
Um das Problem zu lösen, probierte ich verschiedene Varianten aus. Im Bild 1, arbeitete ich mit Lotti-Animationen, die dem/der Nutzer/in zeigen sollten, dass er/sie die Illustrationen anklicken kann. Diese Variante fiel jedoch relativ früh aus dem Konzept, da der/die Nutzer/in sonst geblendet wird von zu vielen Händen, die etwas Anklicken möchten. Ganz verworfen, habe ich die Idee dennoch nicht, da sie für den Anfang dem Nutzer gut zeigen kann, was erstmal anklickbar ist.
Eine weitere Variante war es, durch Linienanimationen neben den Illustrationen aufmerksam zu machen, welche Elemente anklickbar sind. Bei vielen Elementen habe ich zudem die Div-Box auf das gesamte Objekte gelegt, z. T. mit der Schrift, sodass der Nutzer sich theoretisch verklicken könnte und dennoch das Pop-Up geöffnet werden kann. Hierfür habe ich Animationen in Webflow getestet, jedoch mich relativ schnell für ein einfaches „Hover“ entschieden, da andere Animationsformen sehr überladen gewirkt haben.
Zudem erprobte ich, wie es wirken könnte, wenn man die Texte schattig hinterlegt. Dies hätte zum Stil gepasst, jedoch war es etwas zu stark in der Story und kam daher auch nicht in Frage.
Andere Hervorhebungen erprobte ich mit der vorgegebenen Farbgestaltung. Da ich in einem sehr einheitlichen Farbstil gearbeitet habe, konnte ich gut die Farbe Rot einsetzen für Hervorhebungen und Auffälligkeiten in den Illustrationen. Dies gab dem/der Nutzer/in nochmals einen Hinweis darauf, dass hier etwas Klickbares zu finden ist. Zudem hatte ich in meinem Plakat z. T. Linien integriert die auf das Element hinweisen. Diese Variante reduzierte ich jedoch auch, da am Anfang die Linien permanent auf das Objekt gezeigt hatten.
Damit der/die Nutzer/in weiß, was er/sie zu dem jeweiligen Pop-up angeklickt hat, habe ich im Anschluss die Illustration mit einer weißen Linie umranden lassen. Somit verliert der/die Betrachter/in den Anschluss der Story nicht.
In der Finalen Version:
Entschied ich mich für eine Hover-Animation mit Webflow und einer weißen Umrandung des Objektes, sowie z. T. die Linien und die weißen, sowie grünen Schriften.
Neben den Hervorhebungen beschäftigte ich mich mit der Frage:
„Weiß der/die Benutzer/in, dass er nach unten scrollen muss?“
Um dieses Problem zu lösen, arbeitete ich auch hier wieder parallel mit unterschiedlichen Wegen. Zum einen entwickelte ich wie bereits erwähnt mit der Darstellung des Hintergrundes. Durch die abgerundeten Dreiecke, die versetzt positioniert worden waren, ergab sich im Gesamtbild ein Weg. Dies war ein Ansatz um dem/der Nutzer/in darzustellen, wie er/sie das Medium zu bedienen hat.
Darüber hinaus, arbeitete ich mit Lotti-Animationen und Scrollbars, die den Ablauf bekräftigen sollten.
Durch die Scrollbar sieht der/die Nutzer/in wie lange die Geschichte noch geht und wie viel Inhalte er von dieser Website noch vor sich hat. Hierbei habe ich einige Tests angefertigt. Zum einen habe ich erprobt wie es wirken könnte wenn ein Tier z.B. eine Ameise die Story entlang läuft. Zudem habe ich auch die Größenverhältnisse ausprobiert und mir die Frage gestellt „Wie groß kann ein Element sein, damit es von der eigentlichen Story nicht ablenkt aber das Ganze gut begleitet?
Anhand der Lotti-Animationen sollte der/die Benutzer/in innerhalb des Weges zu den einzelnen Überpunkten geleitet werden. Zu Beginn meines Projektes arbeitete ich vor allem mit Pfeilen. Dies machte Sinn, wenn man ein Plakat nutzt, jedoch in der Story in Webflow, wirkte dies zu stark überladen. Daher kam ich letztendlich zu dem Entschluss, als Lotti-Animationen die Ameise zu nutzen, die ich zuvor in meiner Scrollbar integriert hatte. Diese sollte die Story nur unterstützen und nicht zu stark davon ablenken. Innerhalb der Geschichte, geht die Ameise durch das scrollen der Maus oder der Hand mit zum nächsten Überpunkt.
Weitere Tests und vorläufige Prototypen bezogen sich auf die Größenverhältnisse auf dem iPad und sind im folgenden Video erkennbar:
(Farben sind hier sehr verfälscht, dies ist wohl ein Fehler in Incom)
©Katharina Müggenburg
Nachdem ich mich für eine geeignete Visualisierungsform und Farbpalette entschieden hatte und mit meinem illustrativen Stil vorerst fertig war, startete ich das Ganze in Webflow nachzubauen. Innerhalb des Prozess, passte ich jedoch einige Elemente an.
Warum Webflow?
Vorab teste ich diverse Webplattformen für meine Story. Unter anderem Pageflow und Adobe Spark. Jedoch hatte ich hier begrenzte Möglichkeiten der Interaktionen. Daher beschäftigte ich mich näher mit Webflow. Vorteile, die für Webflow sprechen, sind vor allem das man anhand eines Baukastensystems sehr simpel Bilder und Animationen einfügen kann.
Warum entschied ich mich endgültig für diese Visualisierungsform?
Da ich zunächst im isometrischen Design arbeitete, merkte ich schnell das in meinem 2. Storyboard die Informationen begrenzt sind und ich sehr reduziert hätte arbeiten müssen. Damit ich mehr Platz für meine Inhalte hatte, entschied ich mich daher zwar z. T. das isometrische Design beizubehalten, jedoch anstatt der Linie den Hintergrund wie einen Weg illustrierte. Durch die breiten „Gänge“ hatte ich somit mehr Platz für die Pop-ups und konnte bei den Informationen nicht sparen.
Der Aufbau:
Im ersten Schritt exportierte ich die einzelnen Objekte, als auch den Hintergrund in meinem Plakat als SVG´s und baute diese in Webflow ein. Hierfür legte ich mir Ebenen an, in welchen ich in DIV_Boxen/Bildern die Elemente hochladen konnte. (Siehe Screenshots)
Erste Probleme in Webflow:
Da ich kein normales Layout einer Website hatte, ergaben sich am Anfang des Projektes kleinere Schwierigkeiten. Jedoch ließen diese sich schnell beheben. Unter anderem verschoben sich die Illustrationen in den DIV-Boxen, somit war das Layout nicht mehr responsive. Dies ließ sich jedoch beheben, in dem ich die DIV-Boxen auf den Wert „Absolut“ stellte.
Somit konnte ich die Website gut nach meinem Geschichte aufbauen und stetig weiterentwickeln.
Innerhalb des Projektes passte ich zahlreiche Illustrationen an und probierte viel aus, was bereits in den Studien und Prototypen zu sehen ist.
Andere Optimierungen waren u.a.:
- alle responsive Elemente anzupassen, da z. T. kleine Fehler passierten
- Illustrationen ergänzt oder ersetzt
- Schriftwahl verändert in den Schriftschnitt Lato Regular, da dies eine
gut leserliche Google Font ist.
- weitere Anpassungen in Form von Zeilenabstand und
Linienanpassungen
- Pop-ups angepasst und Prozesserklärungen visualisiert.
- Durch mein umfassendes Thema habe ich die Story immer wieder er
weitert und mir Gedanken gemacht wie ich Pop-up´s und Inhalte mit-
einander verknüpfe
- Experimentierte mit den Pop-Up-Farbigkeiten, zunächst hatte ich die
Pop ups grün und eckig, jedoch versuchte ich das Ganze zu lockern und
arbeitete mit Farbverläufen. Schließlich entschied ich mich wieder für
den dunkelgrünen Farbton in meiner Farbpalette um in meinem
Farbschmea zu bleiben.
Direkte Animationen in Webflow:
In Webflow habe ich die Div-Boxen immer mit den Interaktionen (Blitzsymbol verknüpft) Hierbei hat man unterschiedliche Möglichkeiten. Man kann zum einen, eine Animation ausführen oder zum anderen eine Aktion starten. Bei den Aktionen konnte man anhand von Vorgaben wie z.B. Hide/Verstecken die Elemente bewegen lassen. Innerhalb meines Projektes habe ich jedoch folgende Animation ausprobiert:
- Knopfanimation (bezieht sich auf die klickende Hand am Anfang)
- „Pop up´s“, sowie „Hidepop“ up und : jedes Pop up hatte die
gleiche Animation (Einblenden und Ausblenden des Pop up´s
beim Klicken)
- Hover on and Hover off-Animation: bezieht sich auf die klickbaren
Elemente, die sich leicht nach oben bewegen
- Die Haupttexte (Aktion) erschienen erst wenn der Benutzer scrollt
(Genauere Ebenen sind auf den Fotos 4 und 5 zu erkennen)
Als ich mit meinen Animationen und meinen Optimierungen weitestgehend fertig war, hatte ich mir nochmals Gedanken gemacht zum Anfang der Story. Zu Beginn wollte ich eine Statistik zur Garteneinrichtung mit einbringen. Dennoch wirkte die bisherigen Umsetzungen für mich zu überladen und ich versuchte dieses Problem anders zu lösen. Entschieden hatte ich mich letzten Endes für nachhaltige Komponenten in Form von Illustrationen, anstatt von beweglichen Balken. In den Bilderserien darunter sind die verschiedenen Platzhalter bis hin zu Endversion sichtbar.
In meiner Story, habe ich nicht nur mit Illustrationen gearbeitet, sondern ich habe auch im Laufe des Prozess mit After Effects Animationen erstellt und in meiner Website integriert.
Um in Webflow Animationen einbauen zu können, musste ich mir hierfür das PlugIn Bodymovin herunterladen. Danach konnte ich relativ schnell meine Illustratordatei in After Effects als Komposition hereinladen und animieren. Da ich mit den Ebenen von Illustrator arbeitete, musste ich zunächst die Ebenen als Form exportieren, um mögliche Fehlerquellen für die Lotti-Animation zu vermeiden. Nach dem Export erhielt ich dann „json“ Dateien, die ich mithilfe von DIV-Boxen/Lotti-Animationen problems in meine Seite einfügen konnte.
Mit After Effects gestaltete ich folgende zwei Animationen, die ich anschließend auf der jeweiligen Ebene integrierte.
Die erste Animation, bezog sich auf die Pflanzengesundheit, wo ich versucht habe meine Inhalte durch die Animationen zu verstärken. Daher betonte ich z.B. dass wenn man synthetische Dünger verwendet, dass die Bodelebewesen aufhören zu laufen und es dem Boden/der Pflanze schadet.
Die zweite Animation bezieht sich vor allem auf Gartengeräte für den Boden, die ich in einer „abstrakten“ Blume mit kleinen Informationen dargestellt habe. Die Auswahl der Gartengeräte bezog sich hierbei auch wieder nur auf Bodengeräte, die für den Anbau und der Pflege bedeutsam sind.
©Katharina Müggenburg
©Katharina Müggenburg
In den folgenden PDF sind zwei Übersichten der gesamten Story zu sehen. Einmal das Teilprojekt Plakat und einmal die fertige Geschichte als reine Illustration.
Die fertige Webstory ist zu finden unter: https://webstorysustainablegarden.webflow.io/
Fazit zum Projekt:
Zu Beginn meines Projektes, habe ich mir als Ziel gesetzt, meine
Kenntnisse im Bereich UX-Design und Information-Design zu vertiefen, da ich im Praktikum leider wenig Erfahrung in dieser Richtung erarbeiten konnte. Trotz anfänglicher Schwierigkeiten in Webflow, hab ich viel dazu lernen können und mein Ziel erreicht, meine Seite responsive und mit Animationen aufzubauen. Auch wenn Corona das Campus-Leben maßgeblich beeinträchtigt hat, konnte ich mir eine strukturierte Arbeitsweise erarbeiten. Dies half mir sehr, mein Projekt bis zum Schluss fertigzustellen. Für meinen Bachelor könnte ich mir ebenfalls vorstellen, auf dem bereits Gelerntem aufzubauen und dies in neuen visuellen Formen zu erweitern.
Meine Recherchequellen/Statistiken, sowie die Gliederung meines Projektes anhand eines Miroboards:
https://miro.com/app/board/o9J_ktlBlcM=/
Innerhalb meiner Recherche, habe ich das Thema „Nachhaltigkeit im Garten, angelehnt an die Permakultur“ in unterschiedliche Kategorien eingeteilt und diese wiederum meist in Möglichkeiten und Vorteile gegliedert. Möglichkeiten habe ich deshalb gewählt, da es verschiedene Umsetzungsvarianten gibt und deshalb erstmal nur ein Anreiz dafür sein soll.
Diese Einteilung habe ich deshalb gewählt, um möglichst schnell ein Verständnis dafür zu bekommen, wieso diese Art der Anwendung vorteilhaft ist für den Naturgarten.
Wie bereits in meinem Pitchdesk erwähnt, ist meine primäre Zielgruppe Garteninteressierte, bzw. aber auch Personen die schon einen Garten besitzen.
Daher habe ich Personas ausgebaut, die zeigen sollen wer dahinter stecken könnte und welche möglichen Interessen die Zielgruppen haben könnten.
Nach meiner umfangreichen Recherche, habe ich mir Gedanken gemacht was ich für Möglichkeiten habe, dies zu visualisieren und ansprechend zu präsentieren.
Festgelegt habe ich mich bisher auf zwei verschiedene Medien, die meine Informationen und Daten vermitteln sollen:
1.0 Appanwendung mit einem QR-Code:
Hier zu könnte ich mir ein „Benutzerhandbuch“ für mehrere Aspekte vorstellen, wie man einen Garten nachhaltig aufbaut. Der Nutzer hat hierbei unterschiedliche Kategorien zur Auswahl für den Aufbau seines Gartens. Diese Anwendung ist gut geeignet um auch von zu Hause aus auf die Daten zuzugreifen, jedoch besteht eine gewisse Hemmschwelle zum Upload einer App. Diese Anwendung würde sich jedoch auf alle Themen zum Nachhaltigen Garten beziehen.
2.0 Webanwendung (eventuell innerhalb des Botanischen Garten):
Um mein Thema einzugrenzen, würde ich mich primär auf den Boden/Wiese festlegen und dabei Möglichkeiten und Unterschiede aufzeigen, weshalb es sehr wichtig ist diesen aufrecht zu erhalten und welche Bedeutung diese Komponenten für den nachhaltigen Garten hat. Daher habe ich das Ganze vorab in Bodenleben aktivieren, Wege innerhalb des Gartens, Pflanzengesundheit, Lebensraum und Selbstversorgung eingeteilt.
Mir geht es weniger um den „Spaß-Garten“ für den Menschen, sondern eher um die Möglichkeit mit einfachen Mitteln die Natur in ihren natürlichen Prozessen zu unterstützen.
Begründung für die Eingrenzung des Themengebietes:
Der Boden bietet die Lebensgrundlage für einen Großteil des Gartens, ist dies nicht gegeben fallen viele wichtige Bestandteile wie Nützlinge etc. weg. Daher ist es vor allem wichtig darzustellen weshalb auch ein Komposthaufen eine wichtige Rolle spielt, der wiederum für ein Hochbeet wichtig ist.
©Katharina Müggenburg
Beschreibung des Moodboards:
Für mein Projekt könnte ich mir eine Kombination aus Datenvisualisierung und Informationsgrafiken vorstellen, welche ich in eine Webstory darstelle.
Warum Webstory?
- Da ich mehr in Informationsvisualisierung gehen möchte, ist die
Appanwendung nicht vorteilhaft, da man innerhalb einer App
Interaktionmöglichkeiten benötigt, die ausschlaggebend für den
Download sind (Bsp: Einrichtungsapps etc.)
- Webflow hat man mehrere Ansichtsmöglichkeiten
- Aufgrund der Informationen möchte ich mich nicht nur auf ein
Informationsplakat beschränken, sondern innerhalb der Webstory
kleine Interaktionen in Form von Mikrointeraktions miteinbauen.
--> so erhält der Nutzer einen spielerischen Einblick in die Welt eines
Gartens, der einem Möglichkeiten aufzeigt wie man Nachhaltig
gärtnern kann und was zu beachten ist.
** ** --> Dabei entscheidet der Nutzer selbst was ihn interessiert
- Bietet einen einheitlichen „Leitfaden“ der sich auf eine Seite bezieht.
- Durch eine Webstory möchte ich vor allem eine schnelle
Informationsvermittlung bieten, in welcher man sehr schnell ein Verständnis/Einführung für den Nachhaltigen Garten hat.
Für die Visualisierungsform könnte ich mir organische, geometrische aber auch 3-Dimensionale Objekte in Stufen oder als einen Kreislauf vorstellen, welche die Informationen vermitteln können. Möglich ist auch, mit Scanogrammen oder mit Animationen zu arbeiten. Hierfür würde ich noch einige Tests anfertigen um zu schauen welches die effektivste Variante ist.
Dabei möchte ich den Fokus auf die „schrittweise“ Entwicklung legen und daher die Webstory wie einen Weg aufbauen.
Um meine Problemstellung „Wie kann man einen Garten nachhaltig aufwerten?“ deutlich zu kommunizieren, habe ich mir zunächst ein Storyboard überlegt.
Das Storytelling der Informationen baut auf meinem Moodboard auf und soll durch ein ansprechende Anordnung, sowie Visualisierung die Thematik heraus arbeiten. Startpunkt ist hierbei die Erkenntnis wie der Deutsche seinen Garten einrichtet. --> und zwar kaum Nachhaltig.
Danach beziehe ich mich auf die eigentliche Story, die beim Boden beginnt und Stück für Stück alle wichtigen Aspekte aufgezeigt, die es braucht um ein Grundverständnis für den Nachhaltigen Garten zu erhalten.
Dabei war es eine Hürde, konkrete Inhalte zu definieren und darauf zu achten was „wichtig“ ist um ein Grundverständnis für den Naturgarten zu erhalten.
Update 12.05.2020:
Nachdem ich grob dargestellt habe wie mein Storytelling aussehen könnte, habe ich zunächst folgende Variante ausgebaut, damit ich einen groben Überblick erhalte wie ich mir die Informationsverteilung auf der Website vorstelle.
Zudem habe ich überlegt welche Informationen ich vorläufig vermitteln möchte:
- Ich möchte durch eine Datenvisualisierung aufmerksam machen, wie
die Einrichtung des Gartens bisher ist und was es noch zu dem Thema
Wissenswertes zu erfahren gibt.
- Informationen zum Boden/Wiese, in welchen ich darauf eingehe wie
ich das Bodenleben aktivieren kann (Kompost, Mulchen,
Gehweggestaltung, wie ist der Kompost aufgebaut, Vorteile etc.)
- Pflanzengesundheit, pflege: Bezieht sich auch auf den Boden/Wiese,
Handarbeit, Düngemittel etc.
- Nutzpflanzen: Primär Mischkulturen, weshalb es sinnvoll ist diese Anzu-
legen, Vorteile und gängige Möglichkeiten, sowie den inneren Aufbau
eines Hochbeetes.
- Eventuell gängige Nützlinge im Garten erwähnen, weshalb diese
wichtig sind und wie diese „gerne“ Leben.
Aufgrund des Workshops zum Thema Prototyping würde ich gerne mehr mit Figma und eventuell Webflow arbeiten. Und innerhalb meines Projektes Mikrointeractions innerhalb der Seite verknüpfen.
Hierzu habe ich mir schon ein paar Tutorials angeschaut, wie man sein Projekt in Figma und Webflow umsetzen kann.
Beim letzten Treffen hatte ich bereits zwei verschiedene
Gestaltungsformen erprobt.
Nun möchte ich jeweils Vor- und Nachteile nennen.
Minimalistische Form:
Vorteile:
- einfache Visualisierungsform
- lässt gestalterischen Spielraum offen, wie der Garten aussehen könnte
- Durch die Scrollfunktion ergeben sich die einzelnen Szenen
- symbolisiert die Vielfalt auf engem Raum -> Wichtigster Grund für die
Permakultur, „Produktivät der Vielfalt steigt auf engstem Raum“
Nachteile:
- Man ist beschränkt auf Linien und somit sind manche Prozesse viel
leicht nicht eindeutig sichtbar
- Bei zulangem Scrollen verliert der Betrachter die Aufmerksamkeit und
bricht eventuell vorher ab, daher ist die Länge der Seite entscheidend.
Isometrisches Design:
Vorteile:
- vermittelt dem Betrachter ein konkretes Bild von einem Naturgarten
- durch die Linie wird der Betrachter schrittweise durch den Garten
geführt
- Ist nicht so schwierig zum umsetzen, wenn man sich von Anfang an ein
richtiges Raster anlegt und überlegt welche Elemente in Frage
kommen würden.
Nachteile:
- Der Betrachter steht in einer Vorgefertigten Welt
- Möglicherweise Probleme bei der Anlegung --> kein übliches Web
sitelayout für eine Webstory
Darüber hinaus, habe ich mich danach mit dem isometrische Design weiter beschäftigt und dieses soweit es geht umgesetzt. Sowie mir Überlegungen gemacht welche Inhalte als Pop up etc. thematisiert werden sollen. Und diese nochmals herausgeschrieben.
©Katharina Müggenburg
**Für die Webstory wäre Adobe Spark eine Möglichkeit, daher habe ich es vorab getestet.
Vorteil:**
- schnelles Einfügen von Bildern
- leichte Bedienung
Nachteil:
- Vorgegeben Templates
- Wenig Möglichkeit selbst zu agieren,
z.B. Texte sind nur oben und unten platzierbar
Bisher habe ich einige Tutorial zu Webflow angeschaut und mir überlegt wie ich gerne das Projekt aufbauen und welche Art der Animationen in Frage kommen würden. Und ob es nach meinen Vorstellungen funktioniert.
Das gute ist, dass sich in Webflow schnell Animationen realisieren lassen. Dafür habe ich in After Effects die Erweiterung „BodyMovin“ installiert, welches es ermöglicht Animationen für html rauszuspeichern.
https://www.youtube.com/watch?v=x_WnypCSOf4
ERSTES PROBLEM BEI DER GESTALTUNG:
Was ich zunächst bei der Isometrischen Darstellung gemerkt habe, ist das diese etwas zu klein wirkt, wenn sich der Garten auf eine Screenseite beschränkt.
LÖSUNG:
Daher habe ich den Garten nach unten ausgebaut und etwas vom Design verändert, somit scrollt der Benutzer nach unten Schritt für Schritt.
©Katharina Müggenburg
Für den voranschreitenden Prozess, habe ich mich zunächst erstmal auf ein Medium als Informationsträger festgelegt. Was natürlich noch variabel gestaltet werden kann, da ich es in Webflow ausarbeiten werde.
Aufgrund unseres weiteren Kurses Austellungsdesign, habe ich mich dafür entschieden innerhalb des Möbelstückes ein Ipad zu integrieren, wo der Nutzer die Möglichkeit hat auf die Informationen zu zugreifen. (Varianten habe ich im Kurs Austellungsdesign erprobt).
Ipad/Tablet deshalb:
- Ist zunächst kabellos und erspart mir den Einbau sämtlicher Kabel eines
Monitors etc.
- Ein Tablet habe ich zu Hause, so kann ich gleich selbst die
Größenverhältnisse testen und abschätzen was funktioniert
- Für den Akku kann man notfalls eine Powerbank einbauen, die im
Möbelstück integriert werden könnte.
Dennoch müsste ich mal schauen ob alles von den Größenverhältnissen passt. Wenn es zu klein wird, müsste ich dies nochmal verändern.
Bisher habe ich meine ausgearbeitete Story in Adobe XD schnell nachgebaut, um nur mal zu sehen ob die Größenverhältnisse passen würden, da ich mein Storytelling bisher in Adobe Illustrator ausgebaut hatte. Orientiert habe ich mich an den Standart Maßen: Breite 1024 px und Länge erstmal variabel gestaltet.
Mein Ziel die Story mit den Inhalten komplett abzuschließen, habe ich noch nicht ganz geschafft, es war doch etwas aufwendiger als geplant.
Dennoch: bin gut voran gekommen, das grobe Gerüst steht!
- Ziel bis zum 9.06.2020: meine Inhalte fertigstellen und in Webflow
aufzubauen und mit Interaktionen/Kleinen-Animationen anfangen
Für das bisherige Storytelling, habe ich mich dennoch erstmal für die
Illustrationsform mit dem breiten Weg entschieden, da ich so flexibel bin mit den Informationsboxen, welche je nach Inhalt viel Platz einnehmen können. Dadurch lässt sich auch die Geschichte etwas deutlicher erklären und denke besser verstehen.
Zur bisherigen Gestaltung habe ich mich vorübergehend auf das Farbschema geeinigt. Zudem habe ich in den Info-Boxen eine guten einheitlichen Stil gefunden und mein erstes Storyboard von der Gestaltungsmöglichkeit (Linienform) mit aufgegriffen.
Ebenso habe ich das Ganze in Adobe XD reingeladen um zu testen, wie das Größenverhältnis zu Schrift ist und wie die Informationsboxen wirken.
©Katharina Müggenburg
Ich habe unterschiedliche Hierachien getestet die in Frage kommen würden für meine Webstory:
- Begleittexte die nur eine Information geben sind grün hinterlegt
- die weißen großen Texte geben mehr Informationen preis, wenn man
diese anklicken möchte --> Hierzu teste ich noch in Webflow Micro
interactions
- Auch eine Möglichkeit: Größere Symbole oder eine andere Farbigkeit.
Da ich mit einer sehr einheitlichen Farbpalette arbeite, stechen
bestimmte Elemente sofort ins Auge (Beispiel bei der Selbstversorgung).
- Buchstaben Großzuschreiben und den Rest in Kleinbuchstaben
©Katharina Müggenburg
Um eine Übersicht zu erhalten welche Informationsblöcke aufblinken sollen, habe ich diese nochmal auf eine extra Seite angelegt und nach Thematik sortiert.
Sowie das Storyboard ohne die Informationsblöcke angelegt.
Nachdem ich meine Story soweit fertig gestellt habe, habe ich nun angefangen das grobe Gerüst aufzubauen.
Dabei habe ich alle Elemente die ich gerne durch kleine Interaktionen hervorheben möchte oder animieren möchte in Ebenen gegliedert. Zudem habe ich es im Queerformat angelegt, was bei meiner Story mehr Sinn macht, da es sonst zu gestaucht wird und zu klein.
Mein bisheriger Stand zeigt nur den groben Aufbau der Illustrationen.
Beobachtungen:
Schnell habe ich gemerkt:
- Pngs sind sehr verschwommen, lieber SVG´s verwenden,
- der Text darf nicht zu klein werden, sonst ist er kaum lesbar.
- Bei der Größe bin ich mir noch unsicher, aktuell habe ich es in 1024 px
angelegt, jedoch wäre 1056 px eine bessere Möglichkeit (Retina Ipad)
- Sind manche Details klar erkennbar?
- Wie groß können die Elemente sein damit man sie noch lesen kann?
- Wo kann ich die Informationsgrafiken mit einbauen, damit es nicht
überladen wirkt?
Ebenso habe ich immer noch Probleme mit den Responsiven Möglichkeiten. Wahrscheinlich muss ich es doch händisch ändern.
Und ich habe Gruppierungen angelegt, anstatt einzelne Divboxen anzulegen. Dies lässt sich am zweiten Screenshot gut erkennen.
Letzte Woche hatte ich meine Seite auf 1024 px angelegt. Nun habe ich mich an der Größe 2048 px x 1536 px orientiert, da mein Endgerät das Ipad aus der 6 Generation ist. Dabei habe ich dieses mal die 1536 px hergenommen und werde dann die finale Version auch noch für die 992 px (vorgefertigtes Maß in Webflow) anpassen.
Zudem habe ich bisher darauf geachtet, dass es responsive wird, jedoch hapert es an den ein oder anderen Stellen noch, da ich nicht ein klassisches Layout besitze. Bin aber an dem Problem dran.
Nachdem ich meine Website aufgebaut habe, habe ich einen kleinen Test der Animationen. Hierbei habe ich die Linienanimationen in After Effects angefertigt mit dem Bodymovin PlugIn heraus gespeichert und dieses dann als Lotti Animation innerhalb einer Div Box angelegt. (Siehe Video)
Diese sind zwar noch nicht perfekt, aber immerhin funktioniert es schonmal.
©Katharina Müggenburg
Endlich habe ich es geschafft, dass die Webstory weitestgehend responsive ist und ich nun nochmal flexibel bin bei meinem Endgerät! Das hat mich zwar einige Nerven gekostet, doch nun weiß ich woran es lag.
Problem:
Da ich keine klassische Website habe, war es etwas schwieriger die Elemente beim Größer und Kleiner werden richtig zu positionieren. Hierbei hatte ich verschiedene Möglichkeiten ausprobiert:
Body bzw. Bildhintergrund auf die Einstellung „Absolut“ und die Elemente „Relativ“ --> hat nicht funktioniert.
oder alle Elemente auf eine bestimmte Größe anzulegen --> müsste alle Elemente händisch ändern, was ziemlich mühsam gewesen wäre.
Lösung:
Bei meiner Illustrierten Webstory habe ich alle einzelnen Elemente in „Div Boxen“ als Bild reingeladen. Dabei müssen die Div-Boxen alle auf die Position „Absolut“ eingestellt sein und die Einheit darf nur über VW geändert werden und nicht über Pixel.
Auch habe ich schon mit kleinen Interactions angefangen, (Siehe Video) dabei habe ich mir auch überlegt das der Nutzer durch eine Hand darauf hingewiesen wird das er auf das Element klicken kann.
©Katharina Müggenburg
Bei meinen ersten Tests haben meine Linienanimation ganz gut geklappt, jedoch habe ich Komplikationen gehabt bei der Animation von anderen Infografiken.
Nach einigen Problemen konnte ich das Problem jedoch fixen und die Animation läuft nun Ganz gut.
PROBLEM:
Illustrator Dateien, die in After Effects importiert werden, sind nicht kompatibel mit dem Bodymovin PlugIn und können Fehldarstellungen zeigen.
LÖSUNG:
Ich habe alle Ebenen in After Effects in Formebenen umgewandelt, was danach funktioniert hat. So musste ich auch Texte etc. umwandeln, damit dies richtig als „json“ Datei exportiert werden kann.
Anmerkung zur Gartengeräte-Illustration:
- da die Blöcke die Wiese symbolisieren sollen und es sich bei den
Gartengeräten nur um Bodengeräte handelt, die primär für den Anbau
verwendet werden, habe ich diese wie eine „abstrakte“ Blume
angeordnet.
Hin und wieder verschiebt sich durch das Einfügen neuer Elemente die Website. Daher passe ich das Ganze gleichzeitig mit an.
Veränderungen:
- zum Teil habe ich die Texte angepasst und neue Illustrationen
eingefügt.
- Einige Animationen sind schon ausgearbeitet auf der Website zu finden
- Austausch Große Linienanimationen, durch einfache reduzierte Linien
ersetzt.
- Ich habe angefangen die ersten Pop up´s zu erstellen
Ich habe die großen Linien erstmal weggelassen, und an der rechten Seite eine Scrollbar integriert mit einer Ameise als Beispiel. Dabei habe ich sie einmal auffälliger positioniert und einmal dezenter.
Bisheriges Fazit:
Die kleinere Ameise in dem weißen Untergrund ist dezenter und ist nur ein Begleiter, was sehr gut ist, da sie nicht von der Hauptstory ablenken soll.
Als weiteren Schritt möchte ich versuchen eine Ameise anstatt der Linie mitgehen zu lassen.
Nach dem letzten Treffen, habe ich überlegt wie ich das Ganze noch hervorheben könnte und habe mich für die Variante entschieden die angeklickten Elemente umranden zu lassen, sobald das Pop-up erscheint. Dies muss ich aber noch in Webflow testen ob das Ganze so funktionieren kann.
Schwierigkeiten bei der Lotti-Animation:
- Durch die Lotti kann ich die Objekte nicht umranden, daher habe ich
gedacht, das ich die Typografie umrande
Und beim „Delete“- Icon habe ich getestet, wie es aussehen könnte. Einmal mit Umrandung oder ohne, der Test oberhalb würde ich in Webflow noch ergänzen.
Fazit beim Delete Icon: Ich habe es extra in das Pop up mit integriert, da man theoretisch auf das Ganze Objekt klicken könnte um zurück zugelangen.
Parallel zu meiner Webstory, steht auch schon mein grobes Modell in Austellungsdesign. Hier sind ein paar Varianten zu sehen, die ich noch ausarbeite.
©Katharina Müggenburg
Im weiteren Schritt habe ich meine Story optimiert.
- Ich habe die Scrollbar neu angelegt, damit der
User sieht wie lange die Story noch geht.
- Die Scrollbar habe ich bewusst als Liniendarstellung gewählt, da sie
nicht ablenken soll und dennoch an der Seite den Nutzer informiert wie
lange die Geschichte noch geht.
- kleine Fehler bei den Lottianimationen gefixet
- Pop up´s mit einer neuen Farbe hereingeladen,
sowie den Zeilenabstand und die Laufweite
korrigiert. (20 Laufweite und 12,5 Abstand)
- Die Animation zur Pflanzenpflege eingefügt
(siehe Webflow)
- Die weißen Linien angepasst, wenn die Pop up´s
dargestellt werden. (einheitliche Strichstärke)
- Fehler bei unterschiedlichen Bildern behoben
- als Font habe ich nun die Google Font „Lato“
gewählt, da sie relativ gut
lesbar ist. Ich habe jedoch den Zeilenabstand und
die Zeilenbreite
etwas angepasst (20 Laufweite und 12,5 Abstand)
- Die Font ist bei allen Pop up´s angewendet
- Ich habe die Statistik wie der Deutsche seinen
Garten einrichtet, integriert zu den jeweiligen
Inhalten (Siehe Bild 1)
- Als Einstieg möchte ich nochmal die
Nachhaltigkeitskomponenten auf
greifen, die nicht nur im Naturgarten bedeutsam
sind, sondern auch im Alltag
- Als „Endszene“ bin ich aktuell noch am überlegen
ob es wirklich notwendig ist.
©Katharina Müggenburg
©Katharina Müggenburg
©Katharina Müggenburg
ich habe den Anfang nochmal in dem Illustrativen Stil geändert, da es besser zum Rest der Story passt. und habe die Wörter gleich mit in der Illustration integriert.
©Katharina Müggenburg
Des weiteren habe ich überall den Komposthaufen integriert, dennoch ist mir das etwas zu viel. Ich habe ihn jetzt nur noch am Ende platziert. Da ich es sonst zu „viel“ in der Story empfinde und die Hauptillustrationen nur auf den grünen Flächen zu sehen sind.
©Katharina Müggenburg
©Katharina Müggenburg
Ein Projekt von
Katharina Müggenburg
Fachgruppe
MediendesignArt des Projekts
Studienarbeit im zweiten Studienabschnitt
Betreuung
Prof. Michael Zöllner
Zugehöriger Workspace
Interaction / Information DesignEntstehungszeitraum
Sommersemester 2020
1 Kommentare
Please login or register to leave feedbackHallo Michael,
du hattest angekündigt, dass du uns noch Feedback zu unseren Projekten geben möchtest. Gerne würde ich wissen, worauf ich im Bachelor noch achten kann und was Positiv/Negativ an meinem Projekt war, um daraus zu lernen
Liebe Grüße,
Katharina