Download als PDF

Rethinking Wikipedia

Google macht es (mal wieder) vor: je nach dem, was man sucht, werden die Ergebnisse unterschiedlich dargestellt. So sehen ein Kinofilm, ein Land oder eine Obstsorte aus.
Die Inhalte bezieht Google häufig von Wikipedia und formatiert diese mit Hilfe von verschiedenen Layoutvorlagen.

Schaut man sich die selben Inhalte jedoch auf Wikipedia an, dann ist das Ergebnis sehr ernüchternd. Alle Inhalte werden im gleichen Layout dargestellt:

– der Kinofilm (Almost Famous)
– das Land (Andorra)
– die Obstsorte (ein Apfel)

Genau wie Google ist Wikipedia ein unentbehrliches Werkzeug und aus unserem Alltag nicht mehr wegzudenken. Im Unterschied zu Google 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.

Wikipedia ist ein einzigartiges und bewundernswertes Projekt. Allerdings sind das Backend und die Organisationsstruktur wesentlich bewundernswerter als das für alle sichtbare Frontend. Um es deutlich zu sagen: das Layout sieht bescheiden aus und hat sich im Lauf der Jahre kaum verändert. Dass es deutlich besser geht beweisen Designstudien, Redesigns und Apps wie V for Wiki.

Aufgabe

Nun ist es eine Sache, Standard-Inhalte wie Texte, Listen oder Bilder-Gallerien mit Hilfe von CSS besser und lesbarer zu formatieren. Wesentlich anspruchsvoller und komplexer wird es, wenn wir uns jenseits solcher »Default-Inhalte« bewegen – und genau dies wird die Projektaufgabe in diesem Semester werden: Wie können spezifische Inhalte ideal strukturiert und formatiert werden? Und zwar mit Hilfe von durchdachten Layoutvorlagen, Algorithmen und Designprinzipen.

Mögliche Themen

Zeit: ein Tag, Jahre oder Jahrhunderte, Biografien, historische Entwicklungen
Karten: Stadt, Land
Verknüpfungen und Hierarchie-Ebenen: Abgeordnete, Parteien und Fraktionen im Europäischen Parlament
Erklärungen: wie funktioniert ein Kugelschreiber? Oder ein Kernfusionsreaktor?

Lehrziel

Der Schwerpunkt des Kurses liegt darin, wie das Potential des Mediums Web ausgeschöpft und für die immersive Vermittlung von Inhalten genutzt werden kann. Ziel ist, jenseits von Standard-Templates zu denken und innovative Formate und Navigationen zu entwickeln, um komplexe Themen spannend zu transportieren und zugänglich zu machen. Dazu entwickeln wir Designsysteme, die modular und flexibel einsetzbar sind, dabei jedoch konsistent und wiedererkennbar bleiben.

Lernergebnis

Die Konzepte werden als interaktive Prototypen umgesetzt. Dafür kommen aktuelle Tools wie Sketch, Figma oder Adobe XD zum Einsatz. Neben einem tieferen Verständnis für den Gestaltungsprozess (Entwicklung von Designsystemen, iteratives Prototyping, Pattern Libraries) und den technischen Zusammenhängen (HTML, CSS, JavaScript, Arbeiten mit Frontend-Developern) stehen vor allem Layout und Typografie sowie Wissensvermittlung in digitalen Medien im Vordergrund.

Ablauf

1. Kurzprojekt

   Dauer ca. 4 Wochen, Gruppenarbeit (2 – 3 StudentInnen)

   • Redesign einer Wikipedia-Seite (ohne Navigation, nur Content)
   • Optimiert für ein bestimmtes Endgerät
   • Parallel dazu: Themenfindung

2. Projektarbeit

   Gruppenarbeit (2 – 3 StudentInnen)

   • Recherche
   • Konzeption / Scribbles
   • Layouts / Dummies
   • Test: unterschiedlicher Content
   • Entwicklung und Definition Design System
   • Prototyp: optimiert für Standard-Laptop (ev. Responsive)
   • Gestaltung Projekt-Plakatserie (2 – 4 DIN A1)

Leistungsnachweis

Analyse, konzeptionelle Entwicklung, gestalterische Ausführung, Qualität der Prototypen, Ergebnisplakate, Präsentation, Dokumentation des Entwurfsprozesses

Intro zum Kurs

History of the World Wide Web