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

Informationsarchtektur und Visualisierung | Jochen Fuchs

Informationsarchtektur und Visualisierung | Jochen Fuchs

Grundlagen zur Analyse von Informationsaufnahmeprozessen und Strukturierung komplexer Informationszusammenhänge unter didaktischen, logischen und ergonomischen Gesichtspunkten.

01 Referat "Piktogramme"

Piktogramme2.gifPiktogramme2.gif

Aufgabenstellung

IA/IV Spurensuche. Untersucht werden Strukturen von Informationsarchitektur im digitalen Medium. (Beispiel: Sitemap, Matrix, Hyperbolic Tree, Thesaurus...) oder Grundlagen zur Informations- visualisierung. (Semiotik, Wahrnehmungstheorie, Ergonomie, Farblehre, Piktogramme...). Gliedern Sie Ihre Untersuchungen in Recherche, Dokumentation, Analyse und Präsentation als 15-Minute-Report vor dem Semester. Jeder Student erarbeitet ein IA oder IV-Beispiel.

Mein Referat „Piktogramme“ ist als Präsentation und als Druckversion links im Materialorder herunterzuladen.

02 Textvisualisierung

Aufgabenstellung:

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

Lösung:

Ich habe ein 5-kantiges Grundraster entwickelt um welches das Alphabet im Uhrzeigersinn angeordnet ist. Die Vokale befinden sich im Gegensatz zu den Konsonanten jeweils auf einer verlängerten Linie die von einer der 5 Ecken ausgeht.

Durch verbinden der Buchstaben, wobei man nach jedem benutzten Buchstaben ein Kästchen nach außen springt, entwickelt sich ein individuelles und eindeutiges Symbol für das jeweilige Wort.

Entwürfe

entwurftext1.pngentwurftext1.png
entwurftext2.jpgentwurftext2.jpg
entwurftext3.jpgentwurftext3.jpg
entwurftext4.jpgentwurftext4.jpg

Finale Version

1.gif1.gif
2.gif2.gif
3.gif3.gif
4.gif4.gif
5.gif5.gif

03 Matrix

Matrix2.gifMatrix2.gif

Aufgabenstellung:

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

Erweitern Sie die Aufgabe in dem Sie die Darstellungsart in ihrer Abstraktion als Fotografie umsetzen.

Bilder Matrix

m1.gifm1.gif
m2.gifm2.gif
m3.gifm3.gif

Fotomatrix

fotos1.pngfotos1.png

In der Endpräsentation sind alle Fotos nochmals größer zu sehen.

04 Icons

Aufgabenstellung:

Umsetzung einer Funktion (statisch) im Raster in Form eines Icons. Die unten aufgeführten Wortpaare dienen als Grundlage.

ein — aus - standby schnell — langsam groß — klein kurz — lang addieren — subtrahieren laut — leise oben — unten weich — hart rauh — glatt dunkel — hell links — rechts positiv — negativ aktiv - passiv elastisch - starr schwebend - lastend heiss - eisig leer - voll ausgeglichen - spannungsvoll nah - fern anschwellend - abschwellend

Umsetzung der Funktionen (bewegt) im Raster in einem animativen/interaktiven Kontext. Grundelemente sind Pixel.

Zu den Icons http://jochen-fuchs.com/Icons/SEITE.html

05 Suchmaschine

Aufgabenstellung:

Erstellen Sie eine visuelle Abbildung von einer Suchergebnissliste, bsp. Googlesuchergebnisse. Ihre visuelle Abbildung muss verständlich, logisch und lesbar sein. Sie sollte dem User eine Relevanz und Zuordnung der Suchergebnisse vermitteln und die Möglichkeit bieten, eine textliche Ebene zusätzlich abrufen zu können.

Konzept:

Meine Suchmaschine namens „Moviemap“ dreht sich um Filme. Bei Start der Applikation erscheinen als „Begrüßung“ die Filme der Woche (Bild 1). Von hier aus kann man direkt den Trailer oder weitere Informationen über den Film aufrufen (Bild 2). Beim Schließen dieser Fenster kommt man auf die Hauptseite auf der man alle Kinofilme (eventuelle verknüpfung mit imdb.com) als Miniaturen sehen kann, zeitlich von unten nach oben geordnet und farblich in Genres aufgeteilt. Bei mouseover wird das Filmcover angezeigt (Bild 3). Bei einer Suche nach einem Film ohne den ganzen Namen zu wissen werden die möglichen Treffer angezeigt (Bild 4). Wenn man die Miniaturdarstellung anklickt kommt man auf die Infoseite des Filmes in der Hinterfrundfarbe des Genres (Bild 5). Von hier aus hat man einige Möglichkeiten zu weiteren Informationen zu kommen, wie z.B. „Alle Filme des Regisseurs“(Bild 6). Zusätzlich gibt es noch einen Favouritebutton auf den man seine Lieblingsfilme ziehen kann (Herz rechts unten, drag´n´drop) und auf klick kommt man zu all seinen Lieblingsfilmen.

Moviemap

s1.jpgs1.jpg
s2.jpgs2.jpg
s5.jpgs5.jpg
s6.jpgs6.jpg
s8.jpgs8.jpg
s9.jpgs9.jpg

06 Strahlung

Aufgabenstellung:

Führen Sie eine Recherche über Strahlungsarten, ihre Zusammensetzung, Form, Vorkommen... durch.

Wo tritt Strahlung auf: - Sateliten - Radio - Handy - Microwellen - Fernseher - etc.

http://www.quarks.de/elektrosmog/01.htm

Untersuchen Sie Visualisierungsmethoden:

  • Wellenformen (Outlines)
  • Nebel
  • Elektroteilchen

Wählen Sie eine Strahlungsart und ihre Visualisierung und übertragen Sie diese auf eine vorgegebene Bilddatei. Arbeiten Sie mit der Ebenenfunktion.

CERN Teilchenbeschleuniger

cern.jpgcern.jpg
cern2.jpgcern2.jpg
cern4.jpgcern4.jpg

Hier habe ich versucht eine eventuelle Strahlung an dem CERN Teilchenbeschleuniger in der Schweiz darzustellen.

Animierte Strahlung

Hier habe ich am Beispiel des Berliner Fernsehturms am Alexanderplatz Strahlung visualisiert. In der Endpräsentation ist noch eine weitere visualisierung zu sehen.

07 Navigation

Aufgabenstellung

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 nachvollziehbar sein. Der Benutzer könnte die Möglichkeit erhalten, den Ablauf selbst zu beeinflussen und dadurch neue Erfahrungen zu erlangen. Achten Sie bei der Erstellung Ihrer Navigation auf Parameter wie die Lesbarkeit der Schrift, bedingt durch Schriftart und Schriftgrösse. Hierbei sollten Sie auch darauf achten, eine bildschirmadäquate Schrift zu nutzen. Verwenden Sie Farben nur zur Auszeichnung. Beachten Sie die Positionierung der Navigation. Sie sollte immer verfügbar sein, aber nicht zu prägnant gestaltet werden. Legen Sie, falls nötig, Hierarchien fest (Hauptmenüpunkte, Untermenüpunkte, usw.).

Ich habe mich beim gestalten der Navigation an meiner Grundidee der Aufgabe 5 (Moviemap) orientiert, und so das Prinzip der Aufgabe mit den Inhalten aller Aufgaben gefüllt.

Die Endpräsentation ist links im Materialordner zu finden. Zur richtigen Darstellung bitte downloaden und im Flash Player öffnen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Danijela Djokic

Entstehungszeitraum

Sommersemester 2007