Aufgabenstellung

Grundlegende Aufgabenstellung des Kurses war es, einen Umgang mit dem Thema Zeit zu finden.

Dieses sehr weit gefasste Themenfeld lässt sich darauf reduzieren Zeit zu messen, darzustellen, zu berechnen oder zu verwalten. Somit sollte ein Artefakt entstehen, welches sich mit einem oder mehreren dieser Aspekte auseinandersetzt.

Idee

Unsere Idee bestand nun darin Zeit darzustellen. Grundlage für unser Konzept bot eine Hausaufgabe, welche zu Beginn des Semesters gestellt wurde. In dieser ging es darum, neue Ziffernblätter für Uhren zu erstellen.

Hier erkannten wir die Vielfalt, in welcher sich unsere Uhrzeit abstrahieren lässt. Gleichzeitig hatten wir die Idee die Uhrzeit nicht als eine Maßeinheit, sondern als einen Datensatz aus aus Sekunden, Minuten und Stunden zu betrachten.

Wir wollten so verschiedene Formen der Visualisierung dieses Datensatzes weiter erforschen und schlussendlich gesammelt auf einer Webseite darstellen.

Prozess

Am Anfang war das große Nichts, der Urknall erfolgte in Form des Einführungsvortrags von Prof. Boris Müller. Anschließend folgte das Chaos. Wir machten uns erst einmal jeder für sich Gedanken. Im Anschluss gab es ein virtuelles Treffen mit Brainstorming zur groben Klassifizierung unserer Verwirrungen. Mit den entstandenen Drafts ging es in die erste Feedbackrunde. Über den neu gewonnen Input wurde iteriert: einige Ideen wurden entsorgt, andere überarbeitet und Neue hinzugenommen. Hierfür nutzten wir eine Mischung aus Mindmaps und Moodboards. Dieser Prozess wurde mit dazwischen liegenden Pausen wiederholt.

Die Zwischenpräsentation des Kurses brachte uns weiteres Feedback, mit dessen Hilfe wir uns auf eine Idee festlegten. In Folge daraus erstellen wir eine Roadmap, für den weiteren Projektverlauf. Die Strategie wurde nicht immer chronologisch abgearbeitet, bot uns aber einen klaren roten Faden.

get inspiration > div joint tooling > init basic infrastructure > first code drafts > feedback > more code drafts > page funktionel draft > course feedback > first code styling > first page styling > page extend funktion > Feedback > div style guide > stress testing code > stress testing page > feedback > final bug fixing code > final bug fixing page > code cleanup > final style adjustation > final presentation > doc code > doc project

Wir verfolgten den Ansatz, dass jeder jeweils an eigenen Visualisierung der Uhrzeit arbeitet. Diese haben wir uns in regelmäßigen Meetings vorgestellt und verbessert.

Wir starteten zunächst mit einfachen Konzepten, doch schnell versuchten wir die Informationstiefe der einzelnen Darstellungen zu erhöhen. Nicht zuletzt, weil das als starkes Feedback während Zwischenpräsentationen innerhalb des Kurses geäußert wurde. So erstellten wir vorerst sechs Einzelvisualisierungen, ohne Rücksicht auf eine einheitliche Designsprache zu nehmen.

Auf Grundlage dieser entwickelten wir schlussendlich neun verschiedene Zeitdarstellungen. Jede Einzelne abstrahiert die Uhrzeit auf unterschiedliche Weise.

Jetzt ging es darum, alle neun Darstellungen auf einer Webseite zusammenzuführen. Dabei war es uns wichtig so viel Platz, wie möglich für die Visualisierungen zur Verfügung zu stellen. Dazu kam uns während des Gestaltungsprozesses die Idee, bei jedem Laden der Webseite eine neue Zeitdarstellung zu zeigen. Zusätzlich sollte es dennoch eine Galeriefunktion geben, mit der sich jede Darstellung auswählen lässt.

Schlussendlich entschieden wir uns in einem langen Prozess für eine aussagekräftige Schrift und ein einheitliches Farbschema. So sollte jede Visualisierung auf einem einheitlichen Grauton gezeigt werden.

Gemeinsames Tooling spielt in Corona Zeiten ein besondere Rolle, da wir Lücken nicht durch persönliche Treffen ausgleichen konnten. Zum Brainstorming und Draften benutzten wir anfangs Miro und später Figma. Um schnell Textnachrichten, links etc. auszutauschen, kam Telegramm zum Einsatz. Für die Versionskontrolle, für den Austausch von Code und als Host der Webseite nutzten wir git mit gitHub als Anbieter. Für Videokonferenzen fiel die Wahl auf Jitsi vom CCC gehostet. Damit auch andere Designer schnell und einfach den Code, unserer Visualisierungen verstehen, haben wir uns auf P5.js verständigt. Die Webseite sollte aus reinem HTML5, CSS3, JS bestehen, am Ende ist noch etwas jQuery hinzugekommen.

Nachdem all das abgeschlossen war wurde die Webseite veröffentlicht.

Link zur Seite: https://zeitmaschine.xyz

Ausblick

Dank dem von uns geschaffenen Developer-Branch besteht eine einfache Möglichkeit weiter an der Sammlung zu arbeiten und weitere Visualisierungsideen auszuprobieren, während eine fertige Version der Webseite auf unter der Domain www.zeitmaschine.xyz existiert. Somit werden wir uns weiter mit der Darstellung und Abstraktion unserer Uhrzeit auseinandersetzen und unsere Zeitmaschine weiterführen. 

Jeglicher Code findet sich in unserem git repository.

Persönliches Fazit

Jendrik

Persönlich bin ich etwas traurig über die Entscheidung zu Telegram, da es faktisch keine Datensicherheit im Standard Modus bietet. Gute Alternativen hierfür sind Matrix oder Signal. Ebenfalls finde ich die AGBs von Miro nicht gerade einladend und werde in Zukunft vermeiden dieses Tool zu benutzen. (Ich habe noch keine Zeit gefunden, die AGBs von Figma durchzulesen.)