Dokumentation

Idee & Themenfindung

Da das Thema der Infografik frei ausgewählt werden konnte, habe ich mich für das Thema "TBV Lemgo - Handball-Bundesliga 2016/17" entschieden. Ich habe dabei das Thema aus persönlichen Gründen gewählt, da ich einige Zeit in der Nähe des Vereins gewohnt habe und die Spiele regelmäßig besucht habe.

Ziel

Das Ziel dieser Infografik ist, den Verein TBV Lemgo, sowie die Statistiken und den Saisonverlauf in der Bundesligasaison 2016/17 kompakt und visuell interessant darzustellen.

Diagrammtypen

Da es sich bei den Daten, die im Fall der Sportart Handball dargestellt werden können, zumeist um Torquoten oder auch erzielte Tore handelt, habe ich als Diagrammtyp das (Halb-)Kreisdiagramm gewählt. Hier wird das Verhältnis von Toren zu Fehlwürfen am deutlichsten.

Gestaltung & Anordnung

Zur Gestaltung und passenden Anordnung der Infografik, habe ich mein Thema in verschiedene Themenbereiche unterteilt. Hierbei beginnt die Infografik mit einem allgemeinen Teil zum Verein, in welchem der Kader genauer vorgestellt wird. Darauf folgt der nächste Bereich Spielorte, der etwas mehr in die Tiefe geht und schon einige Statistiken aufführt.

Die weiteren Themen gehen dann im Verlauf zum Seitenende immer mehr in die Tiefe. So folgt erst der Saisonverlauf, dann eine Vereinsstatistik bezüglich der erreichten Erfolge, geworfenen Tore und erhaltenen Strafen. Im letzten Teil, wird noch einmal auf die individuellen Statistiken der einzelnen Spieler eingegangen, die durch eine Anordnung untereinander gut miteinander verglichen werden können.

Zur Gestaltung der Infografik, habe ich mich für ein modernes, aufgräumtes Design entschieden, in dem hauptsächlich durch minimale Farbabstufungen zwischen den einzelnen Bereichen entschieden wird.

Hierzu habe ich bewusst eine moderne, gut lesbare Schrift ("Raleway") gewählt, die in der kompletten Infografik zur Übersichtlichkeit auch nur in zwei verschiedenen Schriftschnitten verwendet wird.

Farbgestaltung

Bei der farblichen Gestaltung habe ich mich sehr an den Vereinsfarben des TBV Lemgo orientiert.

Dabei ist der Großteil der Seite in einem reinen weiß, sowie einem sehr hellen Grauton gehalten. Als Akzentfarbe habe ich die Farbe blau gewählt, um damit die zweite Vereinsfarbe aufzugreifen. Das Blau varriert hierbei in verschiedenen Tönen, um auch Unterschiede durch Farben darstellen zu können.

Als Textfarbe habe ich mich für schwarz entschieden, da dies zu einer sehr guten Lesbarkeit führt

Animationen & Animationstechnik

Die javaScript-Animationen, werden inital beim Laden der Seite ausgeführt. Außerdem umfasst die Seite noch weitere hover- sowie click-Animationen, die durch Nutzerbedienung ausgelöst werden.

Als Animationstechniken werden sowohl Animationen durch reines CSS, JQuery als auch durch komplexeres javaScript verwendet.

Eingesetzte Skripte

Folgende Skripte wurden innerhalb der Infografik eingesetzt:

• materialize.css & materialize.js (Bibliothek von Elementen und Funktionen)
• JQuery
• d3.js(Zur Animation von Charts und Diagrammen)
• ainmate.css(Bibliothek mit css-basierten Animationen)

Quellen

Statistiken

• Homepage: TBV Lemgo
• offizielle Statisk der DKB-Handball-Bundesliga 2016/17
• sport.de - Ergebnisse TBV Lemgo
• sport.de - Tabelle Handball-Bundesliga 2016/17

Bilder

• © Paul Cohen
• © Jörg Hagemann