Konzept

Ziel

Diese Webseite hat das Ziel verschiedene Maskenarten so einfach wie möglich darzustellen und zu vergleichen. Der Nutzer soll dadurch bei seiner Maskenauswahl unterstützt werden.

Idee

Auf einfache und fast spielerische Art soll visualisiert werden wie effizient die Masken in Relation zueinander sind. Neben der Effizienz werden auch allgemeine Informationen dargestellt.
Diese Vergleiche sollen dem Nutzer einen schnellen und unkomplizierten Einblick in die Maskenarten geben.

Diagrammtypen

Auf der Webseite gibt es insgesamt 3 Infografiken. Die ersten beiden stehen im direkten Zusammenhang mit dem oben genannten Ziel und der Idee. Das dritte, ein Balkendiagramm, gibt einen einfachen Einblick in die aktuellen internationalen COVID-19 Zahlen.

Die erste Infografik ist ein interaktiver Slider mit integrierten Tooltips. Hier werden die drei Masken "OP-Maske", "Stoffmaske" und "FFP-Maske" bildlich dargestellt.
Die Tooltips geben auf hover weiterführende Informationen wie Material oder die korrekte Nutzung der Maske.

Bei der zweiten Infografik wird die Effizienz der Masken mittels unterschiedlicher Animationen visualisiert. Hier wird zusätzlich zu den oben genannten Masken noch die Option "Keine Maske" angeboten, um die Masken mit dem Normalzustand zu vergleichen.
Unter der Auswahlmöglichkeiten findet die eigentliche Animation statt. Links wird die ausgewählte Maske angezeigt, rechts der Kopf einer Person, die dem Niesenden 1.5 Meter gegenüber steht.
Ist die gewünschte Auswahl getroffen, startet man die Animation – bzw. den Nieser – mit einem Klick auf den Button. Daraufhin erscheinen verschieden große blaue Kreise, die Partikel, welche sich Richtung der gegenüberstehenden Person bewegen.

Gestaltung und Anordnung

Die Webseite teilt sich in vier Sektionen auf: Header, Vorstellung der Masken, Effizienz der Masken und Weltweite COVID-19 Fälle.

Der Header hat auf jedem Bildschirm die volle Breite und Höhe. Das Hintergrundbild ist dadurch immer gut sichtbar. Die nächsten drei Sektionen grenzen sich klar voneinander ab. Oben durch die große Überschrift mit Icon und unten durch einen Schlagschatten.

Grundsätzlich wird auf der Webseite mit viel Weißraum gearbeitet. Dies gibt den Vorteil, dass der Nutzer sich besser auf den Inhalt konzentrieren kann und nicht von unnötigen Gestaltungselementen oder Illustrationen abgelenkt wird.

Farbgestaltung und Schriftauswahl

Als Schriftart wird ausschließlich die "Objektiv" in der Variante "MK1" genutzt. Für Überschriften wird der Schriftschnitt Medium verwendet – für Text Light.
Die Objektiv ist eine serifenlose Schriftart von Dalton Maag. Zugänglich ist sie auf Adobe Fonts und kann privat als auch kommerziell genutzt werden.

Auf der Webseite werden grundsätzlich nur zwei Farben verwendet.
Die H1 in dem Header ist weiß, da das Hintergrundbild abgedunkelt wurde.
Die H3 bis H5, sowie alle Texte sind in einem sehr dunklen Blau gefärbt – #17161A.
Die H2 hat einen grünen Verlauf – #67A148 → #8DC26F. Dieser Verlauf findet sich auch in weiteren Elementen wieder. Zum Beispiel in den Buttons oder Icons. Zusätzlich zu diesem Verlauf werden in dem Balkendiagramm noch unterschiedliche Grüntöne für eine einfachere Anschaulichkeit verwendet.

Animation und Technik

Erste Infografik – Slider

Für die Slidefunktion habe ich eine Javascript Bibliothek namens Splide benutzt. Die Tooltips wurden nur mithilfe von CSS erstellt.

Zweite Infografik – Animation

Für die Animation wurde eine Mischung aus selbst gecodetem Javascript und einer Animations-Bibliothek verwendet.
Die Funktion der Radiobuttons stammt von mir. Die Animation der Partikel wurde mithilfe der Bibliothek Anime JS entwickelt.

Dritte Infografik – Balkendiagramm

Das Balkendiagramm ist ein Produkt aus der API covid19api und der Javascript Bibliothek Chart.js. Von mir stammt das Fetchen der API, sowie die Integration in das Balkendiagramms.

Optional eingesetzte Skripte, Bibliotheken, API

Reflektion des Arbeitsprozesses

Die Ideenfindung und Erstellung eines Layouts war innerhalb von zwei Schultagen ohne große Schwierigkeiten erledigt. Das Finden von geeigneten Bibliotheken und allgemeine Umsetzen hingegen nahm sehr viel Zeit in Anspruch.

Ich persönlich habe ausreichend Erfahrung in HTML und CSS um eine statische Webseite zu kreieren. In Javascript bin ich jedoch kaum geübt, daher habe ich dieses Projekt als Chance gesehen meine Kenntnisse in JS zu verbessern.

Angefangen habe ich bei dem Slider. Eine passende Bibliothek war recht schnell gefunden. Mit Splide.js kann man seinen Slider umfangreich anpassen, auch wenn meiner nur relativ einfach funktionieren sollte. Den Tooltips hatte ich zu Beginn eine Javascript-Funktion hinzugefügt. Auf Klick sollte der Inhalt eines Tooltips erscheinen und auf Klick wieder verschwinden. Später habe ich jedoch aus UX Gründen das JS entfernt und die Tooltips mittels CSS auf Hover ein- und ausblenden lassen.

Die zweite Infografik war von allen drei am aufwändigsten. Geplant war 4 verschiedene Animationen zu erstellen, wobei immer nur eine angezeigt werden sollte. Nach langem herumprobieren am JS-Code und HTML-DOM habe ich es geschafft, dass man mithilfe von Radiobuttons von einer Animation zur anderen wechseln kann.
Für die Animation an sich benötigte ich eine entsprechende Bibliothek. Die war mit Anime.js auch relativ schnell gefunden und eingebunden. Die Dokumentation war nicht sehr detailliert verfasst, trotzdem habe ich es mit ein wenig Eigeninitiative geschafft meine gewünschte Animation zum Laufen zu bringen. Ein Problem hatte ich jedoch auf der mobilen Ansicht, da die Bibliothek nicht sehr mobile-friendly war. Die einzige Option war die Animation herunterzuskalieren. Helfen musste mir dabei ein Arbeitskollege, da meine JS-Kenntnisse nicht ausgereicht haben.

Die letzte Infografik, das Balkendiagramm, besteht aus der API covid19api, der Bibliothek Chart.js und selbst geschriebenem Code.
Das Einbinden der API mittels Fetch-Funktion ging dank des Internets zügig. Was mir Probleme bereitet hat, war die Integration in das Balkendiagramm. Meine Mitschüler konnten mir dabei aber ein paar Tipps geben wodurch am Ende alles so funktionierte wie es sollte.

Im Endeffekt ist die Webseite so geworden wie ich es mir bei der Erstellung des Layouts vorgestellt habe. Die Infografiken übersprangen zwar weit meine Kenntnisse, jetzt kann ich aber sagen, dass es gut war mir etwas höhere Ziele zu geben.
Alles in allem konnte ich durch dieses Projekt meinen Wissensstand in Javascript sehr erweitern.