Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

IA / IV WS 10/11 Markus Kerschkewicz

Dokumentation des Kurses Informationsarchitektur und Visualisierung.

Aufgabe 01 - IA/IV Spurensuche.

vasarelytitel.jpgvasarelytitel.jpg

// Halten Sie ein Referat über folgende bekannte Persönlichkeiten. Gliedern Sie Ihre Untersuchungen in Recherche, Dokumentation und Präsentation als 15-Minute-Report vor dem Semester.

Ich hatte mich für Victor Vasarely entschieden. Meine Präsentation bestand nur aus Bilder und Zitate von Vasarely selber. Somit konnte ich sein Leben anhand seines künstlerischen Werdegang beschreiben und gleichzeitig einen persönlichen Eindruck von Vasarely wiedergeben.

Aufgabe 02 - Matrix

matrix.jpgmatrix.jpg

// Erstellen Sie eine 10 x 10 grosse Matrix. Kombinieren Sie die visuellen Variablen der Spalten und Zeilen. Visuelle Variablen: 01 Punkt 02 Linie 03 Kurve 04 Umriss 05 Kontrast 06 Progression 07 Schraffur 08 Struktur 09 Unordnung 10 Prägnanz

Ich habe mich diagonal durch die Matrix gearbeitet und somit immer die „Grundform“ jedes Begriffes geschaffen (Punkt/Punkt,Linie/Linie,...,Schraffur/Schraffur,...). Durch diese Vorgehen hatte ich ein Sortiment an Formen, die ich dann miteinander Kombinieren konnte. Eine ähnliche Vorgehensweise hatte Vasarely auch in seinen „seriellen Bildern“ verwendet.

// Erweitern Sie die Aufgabe in dem Sie die Darstellungsart in ihrer Abstraktion verstärken/abschwächen. Abstraktionsgrad: 01 Fotografie

Ich habe als Ort mein Wohnzimmer gewählt und versucht die jeweiligen Formen der Reihe „Struktur“ wiederzufinden.

Aufgabe 03 - Umgang mit Text

1.jpg1.jpg

// Erstellen Sie Diagramme welche: 03.1 entweder Ihren Umgang mit Text visualisieren oder 03.2 den Inhalt Ihres Textes darstellen zu 03.1 - Sie können, als Beispiel, die Anzahl aller im Text vorkommender Buchstaben in Form einer Datengrafik visualisieren zu 03.2 - Sie können eine Informationsarchitektur erstellen, die in ihrer inhaltlichen Aussage einen Bezug zu Ihrem Thema darstellt. Erstellen Sie Ihre Grafiken in Illustrator. Von Freihand- Illustrationen sollten Sie bitte absehen.

Aus dem spöttischen Gedanken „Was ist mein Umgang mit Text?! Entweder ich lese ihn oder lasse es bleiben!“ entstand die Idee einen Text zu erschaffen, der sich mit der Zeit auflöst. Als Hilfsmittel habe ich dafür Processing verwendet und einen Text „programmiert“, der sich, von oben nach unten, mit der Zeit auflöst. Der Text nimmt einem somit die Entscheidung ab, ob er gelesen wird oder nicht - Denn wenn man es nicht tut, hat man irgendwann auch nichtmehr die Möglichkeit dazu. Das daraus resultierende Bild hat mich noch zu 2 weiteren Interaktionsmöglichkeiten inspiriert. Der Benutzer kommt also auf einen Startscreen und wählt zwischen der zeitlichen Auflösung des Textes, der Auflösung durch das Drücken des jeweilige Buchstabens oder das Markieren Textstellen, die verschwinden sollen.

Aufgabe 04 - Zeitanzeiger

kalender_voll.jpgkalender_voll.jpg

// Erstellen Sie einen Kalender oder eine Zeitanzeige, welche nicht nach den herkömmlichen Prizipien funktioniert. Die Datums- oder Zeitanzeige sollte nach Erlernen des Codes ablesbar sein.

Nachdem ich mich in meinem Referat mit seriellen Bildern und anderen beiden Aufgaben mit Rastern und Matrizen beschäftigt hatte. Kam ich auf die Idee, die restlichen Aufgaben auch mit Hilfe eines Rasters zu lösen. Ich habe dann einen „lebendigen Kalender“ konzipiert. Man hat nicht nur die übersicht über die Tage, sondern erhält sogar noch Einblick in die Uhrzeit. Die Zeit läuft immer ab - somit erkennt man auf den ersten Blick welcher Tag und welche Uhrzeit man gerade hat. Des weiteren lassen sich „kalendertypisch“ Termine eintragen die dann farblich gekennzeichnet werden. Wenn ein Monat vorüber ist, sind die Stunden zwar abgelaufen, die Termine bleiben aber an ihrer jeweiligen Position, somit erhält man noch eine Übersicht über die eigene Terminplanung.

Aufgabe 05 - Stammbaum

lol.jpglol.jpg

Erstellen Sie Ihren Familienstammbaum. Er sollte mindestens 4 Generationen beinhalten und nach neu entwickelten Informationsarchitekturen erstellt sein.

Ich habe ein Raster gewählt welches sich von 1900 bis 2012 streckt. Jedes Kästchen entspricht 2 Jahren. Man erhält bei dieser Form des Stammbaumes einen schnellen Über die jeweiligen Paare und der daraus resultierenden Generation. Außerdem macht es der „symmetrische“ Aufgabe relativ einfach Altersspannen zu vergleichen.

Aufgabe 06 - Navigation

navi.jpgnavi.jpg

// Selektieren Sie Ihre Arbeiten nach ästhetischen, lesbaren und funktionalen Aspekten. Konzipieren und gestalten Sie eine sinnvolle, einfache und themenbezogene Navigation durch Ihre bisher erarbeiteten Ergebnisse. Die Navigation soll für einen Betrachter verständlich und nach- vollziehbar sein. Der Benutzer könnte die Möglichkeit erhalten, den Ablauf selbst zu beeinflussen und dadurch neue Erfahrungen zu erlangen.

Aufgrund der Tatsache das ich jede meiner Aufgaben in einem Raster gelöst habe war für mich relativ klar, das auch die Navigation in dieses Raster integriert werden muss. Dabei ist diese Form der Navigation nicht erwartungskonform, jedoch genau auf meine Arbeiten ausgelegt. Das Raster wird an der linken oberen Ecke mit der Navigation „gefüllt“. Beim Klicken auf die jeweilige Aufgabe animiert sich das Raster in den neuen „State“.

Material

Im Material-Ordner befinden sich eine .zip mit meiner Endpräsentation die alle Aufgabe enthält, sowie eine app für mac, die meine Idee zur Textvisualisierung zeigt. Außerdem ein Link zu einem Prototypen der Navigation.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: DD

Entstehungszeitraum

Wintersemester 2010 / 2011