Masken –
Was ist wichtig?

Sie wollen wissen, wie Sie Ihre Maske richtig absetzen,
welche Maske Sie nutzen sollten und wie die aktuelle
Coronalage ist? Dann sind Sie hier genau richtig.

germany
0

Todesfälle Deutschland

worldwide
0

Todesfälle weltweit

health
0

Aktuell genesen weltweit

covid
0

Neuinfektionen weltweit

KOSTEN

Anbei ein animiertes Balkendiagramm, welches nach Eu-Ländern die Ausgaben je Einwohner für importiere Coronaschutzmasken im ersten Halbjahr 2020 darstellt. Hierbei hat Luxemburg hingegen allen anderen EU-Ländern eine mehr als doppelt so hohe Ausgabe. Wohingegen Italien die wenigsten Ausgaben für Coronaschutzmasken je Einwohner hat.


Info1 Info1 Info1 Info1 Info1 Info1

KONZEPT

Das folgende Modul führt vom Ziel und der Idee, über die Umsetzung der Techniken, bis zu der Reflektion meines Arbeitsergebnisses und meiner Arbeitsschritte durch mein Konzept und meine Dokumentation des Pandemie-Projekts, mit dem von mir gewählten Überthema „Masken”.

01

Ziel

Mein Ziel ist es, über die allgemeinen Coronazahlen zu informieren und in diesem Zusammenhang die ernste Lage und damit vorhandene Wichtigkeit zum Tragen der Masken aufzuzeigen. Anhand des Livecounters soll die Ernstigkeit der Lage aufgezeigt werden, da man die wahnsinnig hohen tagesaktuellen Fallzahlen direkt am Anfang der Website aufgezeigt bekommt und sich somit im Weiteren über die richtige Verwendung von Masken informieren möchte und weitere Infos rund um das Thema Masken erhält.

02

Idee

Da das Tragen von Masken seit nun fast einem Jahr zu unserem Alltag gehört & aktuell neben dem Abstand halten als einzige Abwehr von COVID19 hilft, möchte ich mit meiner Website über die Dringlichkeit und Notwendigkeit von Masken aufklären. Die Website soll auf eine sanfte Art, welche durch die gewählten Farben und Illustrationen geschaffen wird, über die Ernstigkeit der Lage informieren und zum guten Handeln und Tragen der Masken motivieren, um das COVID19-Virus eindämmen zu können.

03

Diagrammtypen

Meine erste Infografik ist ein Counter, dieser enthält die Einbindung der API, die die aktuellen Coronazahlen aufzeigt. Meine zweite Infografik ist ein Balkendiagramm, welches auffahrende Balken mit aufploppenden Preisen zur Verdeutlichung der Ausgaben für Masken je EU-Land enthält. Meine dritte Infografik ist eine Verlaufsgrafik, welche eine Aufreihung der aufeinanderfolgenden Schritte beinhaltet. Durch Klick auf die Infobuttons erhält der User ein sich öffnendes Popup mit weiteren Informationen.

04

Gestaltung & Anordnung

Eine klare und reduzierte Strukturkierung der Website soll zum Betrachten und zur genaueren Informationsbeschaffung über das Thema anregen. Die reduzierte, cleane Darstellung der Infografiken soll bewirken, dass sie einfach verstanden wird und die wichtigsten Fakten vermittelt werden. Auf einem Blick soll der User die Aussage und Botschaft der Infografiken verstehen können. Hier soll sich vor allem auch die jüngere Zielgruppe abgeholt fühlen, da die reine Betrachtung der grafischen Elemente ausreicht, um jede der Infografiken verstehen zu können. Sollten weitere Informationen erwünscht sein, kann der User mit Klick auf die Infobuttons ein Textfeld öffnen und nähere Informationen erhalten.

05

Farbgestaltung

Die Primarycolors stellen die Pastelltöne mint (#ECF6F5) und flieder (#ECD9FF) dar. Die Farben passen zu den verspielten, modernen Grafiken und geben ein leichtes, fröhliches Bild ab. So sollen auch Kinder und Jugendliche an das Thema herangezogen werden, um auch und vielleicht sogar vor allem ihnen aufzuzeigen, wie wichtig das Tragen der Masken ist, um die Ausbreitung des COVID19-Virus einzudämmen. Die Secondaryfarben sind die Akzentfarben grün (#00BCB6) und braun (#643B2D). Diese werden in den Illustrationen als zusätzliche Kontrastfarben zu den Pastelltönen genutzt. Die graue Textfarbe (#5E5E5E) sorgt für einen guten Kontrast auf dem weißen-, sowie mintfarbenen Hintergrund und sorgen somit für eine gute Lesbarkeit auch für Sehschwächere. Hier ist der Aspekt der Barierrefreiheit zu nennen. Das dunkle grau wirkt softer als schwarz für die Textfarbe und fügt sich umso besser in das Bild zusammen mit den Pastelltönen ein.

06

Animation & Technik

Grundlegend erstellte ich alle statischen Designs in dem Grafikprogramm Figma. Das Logo sowie die Illustrationen aller Infografiken passte ich in Adobe Illustrator an oder erstellte diese selber. Bei den weiteren Umsetzungen der einzelnen Infografiken hatte ich ein unterschiedliches Vorgehen, auf das ich im folgenden genauer eingehen möchte: Infografik 1: Den Corona-Counter mit den aktuellen Corona-Fallzahlen erstellte ich als HTML mit CSS und Javascript. Die CSS passte ich meinem Farb-und Schriftstil an und wählte zu meinem Design passende Icons. Hier findet sich auch die API-Einbindung wieder, welche von der API-Schnittstelle die tagesaktuellen Zahlen zieht. Infografik 2: Das Balkendiagramm habe ich in Animate erstellt. Die einzelnen Elemente exportierte ich aus meiner Figmadatei als PNG- und SVG-Dateien. Diese exportierte ich in die Animatebibliothek und fügte die einzelnen Ebenen ein. Jeder Balken musste als Symbol modifiziert werden, um anschließend ein Bewegungstween erstellen zu können. Die statische Vorlage setzte ich auf die unterste Ebene, um die Positionen bestimmen zu können. Die Startposition aller Balken war auf null. Die Endposition setzte ich pro Balken so ein, dass die Balken sich nacheinander von oben nach unten aufziehen. Die Preise ließ ich anschließend, nachdem der Balken sich komplett aufgezogen hat, aufploppen, indem ich ihnen einen Schlüsselpunkt mit einer höheren Skalierung gab. Infografik 3: Die Infografik, welche über die Entsorgung von Masken informieren soll, erstellte ich in Adobe Animate. Auch hier speicherte ich die erstellen Grafiken aus Adobe Illustrator sowie Figma als SVG- und PNG-Dateien heraus und fügte sie der Animatebibliothek hinzu. Den Pfad importiere ich als Illustratordatei in Animate, um hier später die einzelnen Pfadpunkte zu erhalten, an dem sich der Pfeil ausrichten und langfließen kann. Die Illustrationen wandelte ich in Symbole und anschließend Bewegungs-Tweens um. Nun konnte ich mit Hilfe des Alphakanals mit den Transparenzen arbeiten, sodass es zu den aufeinanderfolgenden Einblendungen kommt. Um den Pfeil entlang des Pfads laufen zu lassen, musste ich, wie bereits erwähnt, die offene AI-Datei in AN importieren. Anschließend wählte ich auf der Zeitachse die Start- und Endposition aus. Nun wählt man im rechten Menü den Haken an, dass der Pfeil entlang des Pfades laufen soll. Da hier die offene AI-Datei hinterlegt ist, erkennt Animate den Pfadweg. Die Popups legte ich zunächst auch in Animate an, da es hier aber beim exportieren der Datei zu Problemen kam, da die Interaktion nicht übernommen wurde, arbeitete ich hier schlussendlich nicht mit Animate. Zur Vervollständigung meines Vorgehens möchte ich aber dennoch meine Arbeit erklären. Die Popups bekamen zusammen mit dem Infobutton eine Ebene. Anchließend gibt man dieser Ebenen eine Zeitschleife, um eine Start-Stopp-Funktion einzufügen. Dies macht man über das Aktionsfenster von Animate. Anschließend gibt man den Popups sowie den Buttons Instanznamen, um die jeweiligen Instanzen ansprechen zu können. Über das Aktionsfenster gibt man dem Popup die Play-Funktion, welche besagt, dass sich das Popup mit Klick auf den Button öffnen soll. Die Interaktion fügte ich mit einer Map ein, welchen ich bestimmte Areas zuwies, damit die Buttons klickbar sind. Dann habe ich einen Observer hinzugefügt, welcher beobachtet, ob sich die Breite und Höhe der Infografik verändert. Wenn er feststellt, dass sich die Größe der Grafik verändert, dann fügt er die Funktion setCirclePositions hinzu. Diese hat default Positionen, welche ich ausgerechnet habe. Hier muss ausgerechnet werden, wieviel Prozent die Breite und Höhe sich im Vergleich zum Original verkleinert hat. Mit diesem Faktor werden dann die neuen X- und Y-Werte für die Kreismitten der Areas berechnet. Damit es zu keinen Überlappungen kommt, werden automatisch auch die Radien der Kreise angepasst, wenn die Grafik sich kleiner skaliert, bei einer anderen Devicegröße.

07

API, Scripte, Bibliotheken

Meine genutzten Scripte Bibliotheken sind der CCS-Keyframe Bootstrap und jquery. Meine API-Einbindung, mit der API-Schnittstelle https://api.covid19api.com/summary, habe ich genutzt, um die aktuellen Fallzahlen von Corona erhalten zu können. Um über die ernste Lage und damit die Wichtigkeit der Masken aufzuzeigen, wollte ich die aktuellen Todesfälle in Deutschland, die aktuellen Todesfälle weltweit, sowie aktuelle Neuinfektionen und Genesungen weltweit aufzeigen, welche diese Schnittstelle beinhaltet. Den Resize Observer habe ich genutzt, damit die klickbare Fläche der Buttons aus meiner Infografik 3 "Maskennutzung" erkannt wird; sobald sich die Größe dessen verändert, sprich im responsiven Verhalten, wenn man die Website zum Beispiel auf dem Handy öffnet.

08

Reflektion des Arbeitsprozesses

Schritt 1: Durch eine Internetrecherche und Anschauen von Tutorials erlernte ich, wie ich animierte und interaktive Infografiken erstellen kann und erschaffte mir somit eine allgemeine Übersicht, welche Möglichkeiten ich zur Umsetzung des Projekts habe, um im Anschluss ein passendes Thema zu finden, mit denen ich meine Ideen umsetzen konnte. Schritt 2: Nun begab ich mich auf die Themenfindung. Hier stellte ich mir die Fragen, welche Themen zu dem Überthema Pandemie passten, wozu es Inhalte und Quellen gibt und zu welchen Ideen ich schlussendlich auch passende Infografiken mit Animation und Interaktion umsetzen konnte. Schritt 3: Besprechung und Freigabe meiner Themenwahl "Masken". Schritt 4: Erstellung der statischen Designs meiner drei Infografiken in dem Grafikprogramm Figma. Schritt 5: Umsetzung der Infografiken in Animate, sowie die HTML/CSS/JS in Sublime Text. Schritt 6: Recherche und Inspirationsbeschaffung zur Websitegestaltung unter Berücksichtigung der Umsetzung mit dem CCS-Keyframe Bootstrap. Hier fragte ich mich vor allem, welche Reihenfolge der Infografiken am meisten Sinn ergibt. Eine besondere Herausforderung stellte ich mir bei der Umsetzung des Konzepts. Hier wollte ich nicht einfach eine Textwüste auf meiner Website haben, da diese über meine gesamte Kontentbreite schwer zu lesen sein würden, durch zu große Augensprünge von rechts, in die nächste Spalte nach links. Ich wollte mein Designkonzept mit den Illustrationen weiterführen und eine zusammenhängende Abfolge meiner Konzeption erstellen, um den Leser durch meinen Arbeitsverlauf zu führen. Unterstützend dazu wählte ich thematisch passende Illustrationen, welche das jeweilige Unterthema grafisch unterstützen. Schritt 7: Parallel zu Schritt 6 fing ich damit an, die Dokumentation zu schreiben. Hiermit wollte ich mir einen Überblick verschaffen, wie umfangreich die Texte jeweils werden, um hierfür eine passende Struktur und Anordnung zu finden. Schritt 8: Sobald meine Ideen und Scribbles standen, setzte ich in dem Grafikprogramm Figma meine Website für Desktop und Mobil um. Schritt 9: Programmierung der Website mit Hilfe von dem CCS-Keyframe Bootstrap. Anschließend prüfen meiner HTML- und CSS-Dateien im Validator mit anschließender Problemlösung aller Fehlermeldungen.

09

Reflektion

Das animieren der Infografiken hat mir sehr viel Spaß gemacht. Das Programm Animate kannte ich bereits in Hinsicht auf HTML5-Werbebanner und lernte im Rahmen des Projektes noch viele neue Tools, die das Programm mit sich bringt, kennen. So lernte ich die Einbindung von Interaktionen kennen und in dessen Zusammenhang das Aktionenfenster von Animte. Außerdem erlernte ich das Zusammenspiel der Ebenen tiefergehend kennen und mir wurde die Bedeutung von Symbole, Instanzen, Movieclips und Schalflächen bewusst. Somit habe ich mich tiefergehend mit dem Programm Animate auseinandergesetzt und gelernt, dass die Adobe-Programme untereinander verknüpfbar sind. So konnte ich hier den AI-Pfad in Animate einbauen, damit Animate diesen Pfad erkennt und den Pfeil automatisch daran entlangfahren lässt. Außerdem habe ich mich umfassend mit den Export- und Veröffentlichungseinstellungen beschäftigt. Hier lernte ich, dass Animate mittlerweile responsive Grafiken herausspeichern kann, was das Arbeiten in vielerlei Hinsicht vereinfachen kann. Allerdings musste ich auch feststellen, dass man zwar als Designer super tolle Grafiken erstellen kann, jedoch hinsichtlich Interaktionen so seine Probleme bekommen kann. Ich wollte an dem Problem festhalten und mich diesem stellen, sodass ich das Gespräch mit mehreren Grafik- sowie Entwicklerkollegen gesucht habe. Nachdem ich allerdings mit insgesamt sieben Kollegen aus den verschiedenen Abteilungen meines Betriebes gesprochen habe und auch etliche Tutorials sowie Internetseiten durchforstet habe, musste leider auch ich feststellen, dass Animate vermutlich nicht für Interaktionen geeignet ist. Demnach entschied ich mich dazu, die animierte Grafik zu nutzen, die Interaktion aber händisch auf der Grafik zu bauen. Ich als reine Designerin in meinem Betrieb, muss offen gestehen, dass mir das designen der Infografiken, sowie der Website deutlich mehr Spaß macht, als die Umsetzung dessen. Über das Thema jedoch habe ich mich sehr gefreut, da ich mein persönliches Steckenpferd mittlerweile in Animationen gefunden habe, diese Arbeit macht mir sehr viel Spaß. Schlussendlich hat mir das Projekt hinsichtlich der kommenden Abschlussprüfung aber nochmal sehr geholfen, da das coden der Website nochmal einiges an Übung gebracht hat und ich fesstellen konnte, dass es mir schon viel leichter fiel, als bei dem vorherigen Projekt.

QUELLEN

Anbei die von mir genutzten Quellen für die jeweiligen Infografiken. Das Akkordeon-Modul ermöglicht eine übersichtliche Auflistung der Quellen.