Du willst Design studieren?Bewerbungsschluss zum Sommersemester 2023 ist der 15. November!
Inhalt des Kurses
Web
Rethinking Wikipedia
Wikipedia ist eine der am meisten genutzten Webseiten der Welt und aus unserem Alltag nicht mehr wegzudenken. Im Unterschied zu vielen
anderen Services ist Wikipedia jedoch kein Wirtschaftsunternehmen, sondern ein nichtkommerzielles Open-Source-Projekt, das fast ausschließlich auf der Arbeit von freiwilligen Autoren basiert. Wikipedia wurde 2001 gegründet und hat mittlerweile allen anderen Lexika den Rang abgelaufen. Aktuell gibt es 294 verschiedene Sprachversionen mit fast 50 Millionen Artikeln. Ganz in der Tradition der klassischen Enzyklopädie ist das Wissen der Welt auf Wikipedia gespeichert – und wird laufend aktualisiert und erweitert.
Allerdings hat Wikipedia ein gravierendes Problem: Typografie und Layout sind in die Jahre gekommen, der Leser wird von Textwüsten und ausufernden Linklisten erschlagen. Mit einem Wort: die User Experience lässt deutlich zu wünschen übrig. Und genau dies wird die Projektaufgabe in diesem Semester werden: Wie können spezifische Inhalte übersichtlich strukturiert und formatiert werden? Anhand von frei gewählten Themengebieten werden wir untersuchen, wie Inhalte spannend und effektiv vermittelt werden können. Dazu werden wir unterschiedliche Medien kombinieren: Illustrationen, Diagramme, Animationen, Piktogrammen, Funktionsdarstellungen …
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.
Aufbau der Website
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.
Navigation im Detail
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.
Finales ScreendesignPlakat, Style Guide und Mobilansicht
Hinterlasse einen Kommentar