Animation

Eine Animation ist das Einfangen sequenzieller, statischer Bilder – Zeichnungen
oder Fotos lebloser Objekte – und das Abspielen dieser in schneller Abfolge, um lebensechte Bewegung zu imitieren.

Für unsere Neugestaltung einer Wikipediaseite wählten wir das Thema Animation, da dieses sehr abwechslungsreich ist. Außerdem bot es sich an, mit grafischen Elementen und Animationssequenzen das visuelle Gesamtbild der Webseite spannender zu gestalten.

Konzept

Informationsarchitektur

Um nicht nur einen Nutzerkontext abzudecken, unterteilten wir die Website in zwei Bereiche:

Eine Hauptseite, unterteilt in verschiedene Unterthemen, ermöglicht dem Nutzer einen schnellen Überblick über das Thema.
Für ausführlichere Informationen zum jeweiligen Unterpunkt gibt es eine Detailansicht. Die farbliche Unterteilung trägt zu eine, freundlicheren Erscheinungsbild bei und zeigt dem Nutzer gleichzeitig, in welchem Unterpunkt er sich gerade befindet.
Die Geschichte der Animation verfügt in der Detailansicht zusätzlich über eine horizontale Navigation in Form einer Tab Bar, um dieses wichtige und große Thema nochmal zu unterteilen.

Navigation

Um dem Nutzer die Orientierung auf der Seite zu erleichtern und den Fortschritt anzuzeigen, entschieden wir uns für ein fixiertes Inhaltsverzeichnis am oberen, rechten Rand. Hier werden nur die Oberthemen angezeigt, wobei der Nutzer mithilfe einer farblichen Markierung immer sieht, wo er sich gerade auf der Seite befindet.

Klickt man auf die Detailansicht, gelangt man auf eine extra Seite, die über das Thema genauer informiert. 

Ein zweites, fixiertes Menü erscheint unterhalb der Hauptnavigation und unterteilt die Seite, wie auch auf der Hauptseite, in ihre Unterthemen.

Designsystem

Um das Thema Animation auch interessant und abwechslungsreich zu gestalten, haben wir uns für große plakative Typografie, Bilder und Animationen entschieden. Für die Überschriften verwendeten wir farblich abgestimmte Animationssequenzen vom Künstler Ori Toor.
Um mehr Dynamik in die Webseite einzubringen, nutzen wir vollflächige Bilder und Überlagerungen.