Konzept

Ziel

Das Ziel dieser Infopage ist, die Nutzer grob über die aktuellen Zahlen von aufmerksam zu machen. Außerdem werden auf der Infopage einige Hygienehinweise gezeigt und welche Masken gut schützen.

Idee

Die Idee dahinter ist, auf simpler und cleaner Art und Weise den Nutzer Informationen über die aktuellen Zahlen von Corona zu geben. Kleine interaktive Elemente sollen die Infopage attraktiver machen. Außerdem soll ein Dark Mode vorhanden sein, damit Nutzer auch angenehm die Seite betrachten können ohne, dass sie gleich geblendet werden.

Diagrammtypen

Ich habe als Diagrammtyp den Line Chart verwendet, da er sehr einfach und gut einsehbar darstellt wie sich Corona entwickelt hat. Der Line Chart wird am meisten verwendet und die Nutzer wissen wie sie ihn ablesen.

Gestaltung und Anordnung

Das Layout ist im cleanen schwarz-weiß Style gehalten und soll mit einigen farbigen Elementen, wie z.B. die Icons, ein bisschen Dynamik rein bringen. Die Boxen bei den aktuellen Zahlen sind schlicht weiß mit abgerundeten Ecken und Schlagschatten dazu. Der Style der Boxen ist im Moment weit verbreitet und macht einfach einen cleanen Eindruck. Dazu haben die Boxen noch einen Hover Effekt wo sich die Boxen noch einmal ein bisschen skalieren.

Die Hygieneregeln sollen auch ganz einfach dargestellt werden mit wenig Text aber dafür aussagekräftigen Icons.

Bei der „Mask selection“ möchte ich auf interaktiver Weise den Nutzern zeigen, welchen Masken den besten Schutz bieten. Auch hier habe ich wieder wenig Informationstext verwendet und alles er schnell verständlicher mit den Progress bars gestaltet.

Farbgestaltung und Schriftauswahl

Bei der Schriftfarbe habe ich ein sehr dunkles Grau verwendet, da ich ganz schwarz zu dunkel finde. Es gibt einen Light Mode wo der Hintergrund Weißt und der Text dunkel grau ist und einen Dark Mode wo die Farben einfach umgekehrt sind. Farbige Elemente wie z.B. die Icons, sollen ein bisschen Dynamik rein bringen. Die Schriftart die ich verwende ist Montserrat, da ich sie einfach sehr clean und gut lesbar finde. Bei den Headlines verwende ich Montserrat Bold und bei den normalen Texten verwende ich Montserrat Regular. Die Schrift habe ich mit Google Fonts eingebunden. Ich habe an einigen Stellen weniger Text aber dafür aussagekräftige Icons verwendet.

Animation und Technik

Ich habe leichte slideIn animationen verwendet um die ganze Seite etwas Dynamischer zu gestalten. Außerdem haben einige Elemente einen Hover Effekt, damit der Nutzer ein wenig mit den einzelnen Elementen interagieren kann.

Optional eingesetzte Skripte, Bibliotheken, API

Für die aktuellen Zahlen habe ich die covid19.api verwendet ,da man mit ihr sehr gut aktuelle Zahlen aber auch die Zahlen insgesamt ablesen kann. Für die Slide Animationen benutze ich Scrollreveal.js, eine gute kleine library mit der man einfach diese Slide Animationen erstellen kann. Dazu habe ich noch jquery mit eingebunden damit die Scroll Animationen funktionieren. Im Head Bereich habe ich noch die Font mit Google Fonts und die Icons mit Font Awesome eingebunden. Für das Diagramm benutze ich Chart.js. Eingebunden mit einer JS Datei und über cdn im Body der Index.html. Für den Darkmode benutze ich Darkmode.js.

Reflektion des Arbeitsprozesses

Ich hatte beim Arbeitsprozess keine Schwierigkeiten. Es hat manchmal etwas mit der API nicht geklappt und es kann auch sein, dass Sie manchmal nicht die Zahlen anzeigt aber nach ein paarmal refreshen sollte das wieder gehen. Beim Layout hatte ich am Anfang komplett andere Vorstellungen und habe im nach hinein doch ein eher ein cleanes Layout gemacht. Sonst ist alles so wie ich es mir vorgestellt habe. Beim Darkmode wollte ich erst den Toggle selber programmieren, habe mich aber dann doch für darkmode.js entschieden.