Du willst Design studieren?Bewerbungsschluss zum Wintersemester ist der 15. Mai!
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 …
Innerhalb des Web-Kurses haben wir uns für das Apollo Raumfahrtprogramm entschieden. Dieses Thema fanden wir zum einen interessant und es bestand die Herausforderung , ein geschichtliches Thema interessant aufzubereiten. Als Vorteil sahen wir hierbei, dass das Thema bereits abgeschlossen ist und unsere Wikipedia-Seite hierbei auch lange aktuell wäre.
Konzept
Nach einigen Skizzen und Ideen haben wir uns für einen Onepager als Startseite entschieden. Die allgemeinen Infos des Apollo Programms informiert: Gründung, Erfolge, Missionen, Raumschiff. Im jeweiligen Themenbereich dienen Texte, Bilder und Grafiken als Informationsquelle. Alles ist dabei so einfach wie möglich und nicht zu wissenschaftlich beschrieben. Im Bereich Missionen befindet sich eine Auflistung aller Missionen. Jede einzelne Mission ist klickbar, wodurch man auf detailliertere Missionsseiten gelangt. Hier gibt es die Daten in Steckbriefform, Besatzung, Verlauf er Mission mit Animationen und jeweils eine Besonderheit der Mission.
Umsetzung
Die Umsetzung des Projekts haben wir in Figma erstellt. Es war für uns sehr einfach in der Handhabung, obwohl wir mit Figma noch nicht gearbeitet hatten. Zudem konnten wir super zusammen an einem Dokument arbeiten, was das Arbeiten im Homeoffice immens erleichtert hat.
Als erstes legten wir das Dokument an, welches in ein 12-spaltiges Raster gegliedert wurde. Die Breite des Prototyps haben wir an die Bildschirmbreite eines MacBook Pros angepasst, die Länge variiert je nach Inhaltsmenge.
Screencast Endergebnis
Design
Typografie
Für die Headlines haben wir die Avenir Black gewählt, für Beschriftungen und Fließtext die IBM Plex Sans Medium. Die Headlines sind in 48 Punkt Schriftgröße, der Fließtext in für Web typischen 18 Punkt.
Headlines sind in weiß, um sich vom Fließtext, grau, abzuheben. Zudem haben wir bei wichtigen Elementen unsere rote Highlightfarbe als Schriftfarbe verwendet.
Styleboard Typografie
Animationen
Die Animationen sind direkt aus den Grafiken abgewandelt, d.h. Konturstärke und Formen sind identisch bzw. wiedererkennbar.
Zusätzlich haben wir sie, da sie sich bewegen, für eine bessere „Lesbarkeit“ grau auf den Flächen eingefärbt. Besonders wichtige Elemente, z.B. die Darstellung der Explosion im Servicemodul, sind auch hier wieder mit unserer roten Highlightfarbe dargestellt, um sie optisch klar über den Rest der jeweiligen Grafik zu stellen.
Styleboard Animationen
Interaktive Elemente
Die interaktiven Elemente sind in ihrem Erscheinungsbild an die Grafiken angepasst. Das eine interaktion stattfinden kann, z.B. durch hovern, oder klicken mit dem Cursor, wird durch unsere rote Highlightfarbe angezeigt.
Die Highlightfarbe informiert den Benutzer auch, wo er sich gerade befindet. In der Timeline ist dann der Kreis und die Beschriftung rot.
Hinterlasse einen Kommentar