1
DEUTSCHLANDKARTE MIT INFEKTIONSZAHLEN

Deutschland

2
STATUS CORONAIMPFUNGEN

Die Spannung steigt so langsam: Endlich gibt es die ersehnten Impfstoffe, doch bis wir endlich wieder zur „Normalität“ übergehen können, wird es wohl noch eine ganze Weile dauern. Wir halten dich auf dem Laufenden, wie die Impfungen in den Bundesländern voran gehen.

Bundesland Erstimpfung Zweitimpfung
Erstimpfungen
fehlen noch
Zweitimpfungen
fehlen noch
Gesamte Einwohnerzahl:
Datenstand: 09.02.2021, 10:00 Uhr
3
TEST - ERKÄLTUNG, GRIPPE, CORONA?

Die Unterscheidung zwischen den verschiedenen Krankheiten allein anhand der Symptome ist nicht ganz einfach bis unmöglich. Eine Infektion lässt sich nicht mit bloßem Auge erkennen, dafür ist der Krankheitsverlauf zu variabel. Dennoch gibt es bestimmte Anzeichen, die für eine Krankheit zutreffender sind als für andere. Diese Symptome haben wir anhand eines kurzen Quiz einfach für Dich aufbereitet.

Los geht’s!

Achtung: Dieser Test ist keine Garantie dafür, dass das Ergebnis des Tests wirklich stimmt und die jeweilige Krankheit vorliegt. Eine solche medizinische Aussage kann nur dein Arzt nach einer Untersuchung treffen.

Ziel

Als Ziel für das Webseitenprojekt habe ich mir vorgenommen, eine Seite zu gestalten, die modern und trotzdem schlicht ist und auf der sich die Zielgruppe wohl fühlt. Es soll eine Seite werden, auf der man schnell und einfach Infos zu Corona findet und die man gerne regelmäßig besucht. Dafür muss entsprechend die User-Experience durch interessant gestaltete Grafiken und Interaktionen stimmig sein, aber auch die Usability, damit sich die Nutzer:innen gut auf der Seite zurecht finden.

Idee

Als Thema für die Webseite habe ich „Corona und ich“ gewählt. Jugendliche und junge Erwachsene, die Zielgruppe, haben sehr mit dem Virus zu kämpfen. Viele sind Corona täglich ausgesetzt, da sie nicht im Homeoffice arbeiten dürfen und somit ins Büro, zur Schule oder zur Uni fahren müssen. Andere haben psychisch sehr mit den Lockdown-Vorschriften zu kämpfen und möchten gerne in ihr "normales" Leben zurück. Nebenbei kommt die Sorge hinzu, dass der Virus die eigenen Eltern, Großeltern oder auch Freunde treffen könnte, die vielleicht sogar zur Risikogruppe gehören. Generell ist der Wunsch nach einem Ende der Pandemie groß. Jedoch sind Informationen zum Virus, die einen auch wirklich betreffen, nur verstreut im Internet zu finden.
Diese Seite soll eine aktuelle Übersicht zu einigen wichtigen Infos liefern und Fragen klären. So findet man dort neben einer interaktiven Deutschlandkarte, die die Infektionszahlen in den Landkreisen liefert, auch den aktuellen Fortschritt der Impfungen. Außerdem gibt es ein kleines Quiz, welches einem am Ende anhand der vorhandenen Symptome zeigt, wie groß die Wahrscheinlichkeit ist, Corona, Grippe oder eine Erkältung zu haben (oder gesund zu sein).

Diagrammtypen

Grafik 1

Die Infektionszahlen in Deutschland möchte ich möglichst anschaulich und verständlich darstellen, daher habe ich als Grafik eine Karte gewählt. Um einen möglichst genauen Überblick über die unterschiedlich hohen Fallzahlen zu geben, ist die Karte in Landkreise aufgeteilt, die je nach Fallzahlhöhe die Farbe ändern. (Ich habe hierfür als Daten die Fallzahlen je Landkreis pro 100.000 Einwohner gewählt. So sind die Daten trotz unterschiedlich großer Landkreise vergleichbar.)
Zudem ist die Landkarte interaktiv, um genauere Corona-Daten der Landkreise platzsparend und verständlich zu präsentieren (Usability) und gleichzeitig die Informationen interessant zu verpacken (User-Experience). Sobald Nutzer:innen mit der Maus über den gewünschten Landkreis fahren, erscheint ein kleines Fenster, welches genauere Daten zu dem jeweiligen Bereich darstellt. (Folgende Daten werden angezeigt: Fallzahl seit Pandemiebeginn, Neuinfizierte der letzten sieben Tage, die Todeszahlen seit Beginn der Pandemie und Neuinfizierte der letzten sieben Tage pro 100.000 Einwohner.)

Grafik 2

Um den Fortschritt der Coronaimpfungen in Deutschland zu zeigen, habe ich zunächst eine Tabelle eingefügt, welche die Zahlen der Erst- und Zweitimpfungen je Bundesland beinhaltet. In der Tabellenform können Nutzer:innen am einfachsten die klaren Daten zum Impf-Fortschritt der Bundesländer vergleichen. (Leider habe ich als Datengrundlage keine API sondern nur eine Tabelle gefunden, so müssen die Daten händisch aktualisiert werden.)

Da Tabellen jedoch optisch weder interessant noch schön sind, habe ich sie interaktiv nutzbar gemacht und durch ein Balkendiagramm erweitert. Das Diagramm visualisiert, sobald man auf eine Zeile in der Tabelle klickt, wie viel Prozent der Einwohner:innen des Bundeslandes schon geimpft wurden. Dafür habe mit JavasScript eine Funktion geschrieben, die den derzeitigen Fortschritt im Bezug auf die Einwohnerzahl des jeweiligen Bundeslandes ausrechnet. Für das Diagramm werden die Daten der Impfdurchgänge in Prozent umgerechnet und anschließend durch zwei geteilt, da beide Druchgänge erst zusammen 100% ergeben sollen. So ist die Grafik komplett gefüllt, wenn alle Einwohner zwei mal geimpft wurden.
Ich habe als Diagrammart das Balkendiagramm gewählt, weil es die Inhalte sehr schnell verständlich visualisiert. Zudem können Nutzer:innen so auch rein visuell die Unterschiede zwischen den einzelnen Bundesländern erkennen, wenn sie über die Tabelle das gewählte Bundesland wechseln.
Noch (09.02.21) erkennt man im Diagramm nicht viel, da der Fortschritt noch so gering ist. Man sieht bereits Unterschiede unter den Bundesländern, daher ist die Breite des Diagramms ausreichend. Unter dem Balkendiagramm stehen zusätzlich nochmal die Werte, damit sie nicht erst in der Tabelle gesucht werden müssen.

Grafik 3

Es gibt auf mehreren Webseiten eine Tabelle zu den Symptomen von Corona, Grippe und Erkältung. Anhand von Punkten wird die Häufigkeit der Symptome bei den jeweiligen Krankheiten dargestellt.

Diese möchte ich etwas aufwerten und habe daher die Daten in einen kleinen Test verpackt, der die Nutzer:innen durch zehn Fragen führt. Anhand der Antworten wird prozentualisch berechnet, wie groß die Wahrscheinlichkeit ist, die jeweilige Krankheit zu haben oder gesund zu sein. Das Ergebnis wird am Ende des Tests durch Balkendiagramme visuell veranschaulicht.
Auch diese Interaktionen habe ich mit JavaScript ermöglicht. Anhand der Punkte aus der vorgegebenen Tabelle habe ich den Antworten zu jeder Frage eine bestimmte Punktzahl zugeordnet, die am Ende zusammen- und in Prozent umgerechnet wird. Sollte der (fiktive) Kunde diese Grafik so umsetzen wollen, müsste jedoch jemand Fachkundiges nochmal hinzugezogen werden, um weitere Faktoren und Ausnahmen mit aufzunehmen. So funktioniert der Test zwar technisch und meist kommen die Antworten auch grob hin, manchmal sind die Ergebnisse jedoch noch unglaubwürdig.
(Ein Beispiel: Jede "Nein"-Antwort bringt momentan für "Gesund" die größtmögliche Punktzahl, sodass man zu 100% gesund ist, wenn keine der Symptome zutreffen. Jedoch kommt diese Logik nicht mehr hin, wenn man bspw. überall auf "nein" klickt, jedoch Fieber und Husten hat und am Ende ensprechend trotzdem vermutlich gesund ist.)

Gestaltung und Anordnung

Um die Webseite, auf der es an sich insgesamt um recht trockene Zahlen und Fakten geht, von Anfang an aufzulockern und interessant zu machen, habe ich eine zum Thema passende Illustration erstellt, die einen Großteil des Headers darstellt. In dieser schaut eine Person sehr frustriert auf eine Zeitung. Die aus den Infos der Zeitung resultierende Frustration wird anhand weiterer Grafiken erläutert, die mit gestrichelten Linien verbunden sind.
Ich habe zudem ein kleines Logo erstellt. Dieses besteht aus der Wortmarke "Corona und ich" und einer kleinen Bildmarke. Die Bildmarke zeigt eine aus einem Corona-Virus bestehende Glühbirne, die leicht versetzt auf einer Sprechblase platziert ist, die widerum auf das Wort "ich" zeigt. Die Glühbirne stellt den Bezug zu Corona her und die Sprechblase zum restlichen Thema, da "ich" (Wort) nun "die Fakten verstehe" (Corona-Glühbirne). Die leicht versetze Anordnung lässt das Ganze – passend zur Zielgruppe – leicht dynamisch aussehen.
Ein kurzer Einleitungstext dient außerdem zur Einführung ins Thema. Die Bilder und Farben, sowie der eher wenige Text sorgen gleich im Header für einen sehr angenehmen ersten Eindruck, der Vorfreude auf den Rest der Seite macht. Angeordnet sind die beiden Elemente – zumindest in der Desktopansicht – im goldenen Schnitt. Bei den anderen Devices musste diese Anordnung aufgrund der Bildschirmbreite und nötigen Lesbarkeit aufgelöst werden.

Anschließend folgt die Navigation bestehend aus den vorgegebenen Punkten „Infografik“, „Konzept“ und „Quellen“. Der Auftrag gibt vor, dass die Seite ein Onepager ist. Da die Seite jedoch mit sehr viel Inhalt gefüllt werden soll, würden Nutzer:innen schnell auf der Seite untergehen und den Überblick verlieren, wenn alle Inhalte untereinander aufgelistet sind und man nur mit Sprungmarkern arbeitet. Daher habe ich für die Inhalte jedes Navigationspunktes einen Tab erstellt, um die Nutzbarkeit der Seite wesentlich zu erhöhen.
Da die Infografiken der wichtigste Teil der Seite sind, sind hier die Überschriften anders gestaltet als bei den anderen Tabs. (Bei den Infografiken sind sie größer und vor jeder Überschrift ist eine Zahl in einem Kreis.)
Die Elemente der Webseite gehen meist über die gesamte Bildschirmbreite oder sind zentriert. Dies liegt daran, dass ich die Grafiken untereinander angeordnet habe, um sie möglichst groß darzustellen und die Seite klar und einfach aufzubauen. Einzig bei der zweiten Grafik "Status Coronaimpfungen" sind die beiden Elemente Tabelle und Grafik (in der Desktopansicht) nebeneinander angeordnet und füllen jeweils 50% der Bildschirmbreite, um die Tabelle möglichst einfach bedienen und vergleichen zu können. Weitere Bereiche nebeneinander, bspw. im goldenen Schnitt, hätten die Seite unübersichtlich gemacht.

Farbgestaltung und Schriftauswahl

Farbgestaltung

Es soll eine Webseite sein, auf der sich die Zielgruppe wohlfühlt. Aus diesem Grund habe ich einige farbliche Akzente gesetzt, ohne dass die Seite unangenehm bunt wird oder unseriös wirkt. Mit Hilfe von Adobe Color habe ich drei Hauptfarben im geilten Komplementärkontrast ausgewählt. So wirken sie sehr harmonisch zusammen. Da die Zielgruppe keine Kinder sondern Jugendliche und junge Erwachsene sind, sind die Farben nicht grell, sondern leicht gedeckt.
Diese Farben ziehen sich, anfangen mit der Illustration im Header, wie ein roter Faden in den Überschriften und den Grafiken durch die gesamte Webseite.
Von diesen Farben habe ich weitere Farbabstufungen genutzt, bspw. im Header oder auch beim Test. Bei wenigen Ausnahmen habe ich das Rot und Gelb gemischt und die Farbe genutzt, um die Abstufungen in der Deutschlandkarte zu veranschaulichen, bei der Grafik zum Status der Corona-Impfungen oder als Linkfarbe. Einige der Abstufungen zähle ich bei den Farbbeispielen mit auf.
Der helle Hintergrund (weiß und hellgrau) lässt die Seite hell, freundlich und seriös erscheinen. Die beiden Abstufungen kennzeichnen die unterschiedlichen Bereiche. Dies wird nochmal unterstützt durch die Infografik-Überschriften, welche jede eine andere Farbe hat.
Der etwas dunklere Header und Footer rahmen die Seite optisch ein.

Farbe Hexcode Aussehen
Rot #A14742
Gelb #E8B637
Blau #2BA7A8
Weitere Farben
Blau (Abstufung) #235B67
Orange #E57E38

Schriftauswahl

Courier
Verwendung Grund Aussehen
Logo Überschrift Die leichten Serifen lassen die Schrift interessant aussehen. Zudem geben sie der Schrift einen leichten Zeitungscharakter. Dieser passt gut zum Thema der Seite, da sie die aktuellen Infos zu Corona präsentieren soll.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Quicksand
Verwendung Grund Aussehen
Logo Unterüberschrift
Kürzere Texte
Diese Font ist serifenlos, verzichtet beim „u“ sogar auf den Endstrich, und bildet so einen starken Kontrast zur Serifenschrift Courier. Gleichzeitig passen aber die beiden Fonts sehr gut zusammen, da beide runde Enden haben. So wirken sie sehr freundlich und nicht steif wie manch andere Schriftarten und passen somit sehr gut zur Seite und zur Zielgruppe.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Open Sans
Verwendung Grund Aussehen
Längere Texte Eine dritte Schriftart wurde benötigt, da Quicksand bei kürzeren Texten gut zu lesen ist, jedoch bei längeren Fließtexten nicht mehr ideal. Ich habe mich für Open Sans entscheiden, da sie sehr schlicht ist und sehr gut lesbar.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Animation und Technik

Animation

Als Animation habe ich lediglich, um auch diese Anforderung zu erfüllen, einen CSS-Keyframe genutzt, der die Farbe des Play-Buttons beim Test wechseln lässt. So wird die Seite optisch nochmal etwas aufgelockert und der Button lädt mehr zum klicken ein.
Ansonsten habe ich keine Animationen eingefügt, da sie bei meiner Grafikauswahl und den eingesetzten Interaktionen nicht unterstützend, sondern eher störend gewesen wären. Ein Beispiel: Ich hätte bei der zweiten Grafik bei jedem Klick auf die Tabelle die Balken neu füllen lassen können. Dies ist bei dem ersten Klick noch spannend, bei jedem weiteren aber nervig – zumal wenn der Fortschritt langsam größer wird.
Und jede Grafik zieht schon durch die jeweilige Interaktion die Aufmerksamkeit der Nutzer:innen auf sich. Zusätzliche Animationen würden von den Inhalten ablenken und die Nutzer:innen überfordern.

Technik

Im Unterricht haben wir die Karten-Bibliothek jVectorMap ausprobiert. Diese hat jedoch nicht ganz das erfüllt, was ich mir vorgestellt habe – ich wollte gestalterisch mehr ändern können. Daher habe ich auf anderen Seiten wie spiegel.de geschaut, was sie für Karten zur Visualisierung der Corona-Zahlen nutzen. So kam ich zu der Plattform Datawrapper, auf der man Landkarten erstellen, mit Daten füllen (z. B. per API-Einbindung) und sogar farblich bearbeiten kann. Zudem gibt es hier die Möglichkeit, die Karte nicht nur in Bundesländer sondern Landkreise aufzuteilen. Dies ist bei meiner Webseite notwendig, da sie sehr auf die Nutzer:innen ausgerichtet sein soll und Landkreisdaten viel spezifischer und hilfreicher sind. Aus diesen Gründen, habe ich mich dafür entschieden, für die Karte keine Bibliothek zu nutzen sondern diese Plattform. Dabei gab es ein paar Schwierigkeiten, aber durch deren Hilfeseite ließen sich diese gut überwinden.

Als Framework habe ich Bootstrap genutzt. So konnte ich im Umgang damit sicherer werden, was mir später helfen wird, da mein Betrieb dieses Framework nutzt. Gleichzeitig konnte ich natürlich auch die Vorteile eines Frameworks nutzen, mir die Arbeit sehr erleichtert und Zeit gespart haben.

Optional eingesetzte Skripte, Bibliotheken, API

Skripte

JavaScript – für sämtliche Interaktionen aller drei Grafiken. (Unter "Diagrammtypen" beschreibe ich dies genauer.)

Bibliotheken

jQuery – um den JavaScript-Code der drei Grafiken zu unterstüzen.

API

NPGEO Corona – die Daten dieser Seite werden täglich aktualisiert und gelten als seriös, da sie vom RKI sind. Zudem kann man zwischen Bundesländern und Landkreisen auswählen, was ich für meine Grafik brauchte. So konnte ich diese Quelle auch nutzen, um die genauen Bevölkerungszahlen der Bundesländer herauszufinden.

Reflektion des Arbeitsprozesses

Mir hat das Projekt insgesamt viel Spaß gemacht und ich konnte sehr viel daraus lernen. Ich habe das Framework Bootstrap nochmal besser verstanden und fühle mich nun wesentlich sicherer im Umgang damit. Auch von JavaScript kenne ich jetzt einige Grundlagen, da ich mir für die Grafiken sehr viel dazu aneigenen musste. Dafür habe ich mir mehrere Stunden auf Udemy Videos angeschaut oder für explizite Dinge konkret nach Videos oder Webseiten gesucht. Bei dem Quiz hat mir bspw. dieses Tutorial sehr geholfen. Leider kam ich an einigen Stellen trotzdem alleine nicht weiter und habe meinen Kollegen um Hilfe gebeten. Zusammen haben wir die Fehler dann korrigiert oder er konnte mir Tipps geben, wie ich weiter komme.

Zum effektiven Arbeiten hat das Homeschooling sehr positiv beigetragen. Ich konnte so ganz in Ruhe und konzentriert an dem Projekt arbeiten. Aufgrund des großen Umfangs dieser Seite hat die Zeit der Schulstunden jedoch natürlich nicht gereicht und ich habe sehr viel außerhalb der Schulzeit an dem Projekt gearbeitet.

Grafiken (Headergrafik, Logo)

Merle Specht

Infografik 1 – „Deutschlandkarte mit Infektionszahlen“

Infografik 2 – „Status Coronaimpfungen“

Infografik 3 – „Test – Erklärung, Grippe oder Corona?“