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

Basics Interface 14|2

Eine Zusammenfassung der 4 Teilprojekte Digitales Buch, GUI, Klangbild und 1000 Worte des Kurses Basics Interface

Das Digitale Buch

Aufgabe: Es soll eine digitale Fassung Ihres Lieblingsbuches gestaltet werden. Das Buch kann ein Roman, ein Sach-, Koch- oder Fachbuch, oder auch ein Gedichtband sein. (Keine Comics!) Die digitale Fassung des Buches soll exemplarisch anhand von mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240x320 Pixeln (QVGA). 
Die Screens sollen nicht nur die Inhalte des Buchs wiedergeben, sondern sollen auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können. 
Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe. Die Aufgabe sollte in Zweierteams bearbeitet werden.

Umsetzung: Für die Aufgabe haben wir das Buch Kopfsausen gewählt. Es ist eine recht düster gehaltene Sammlung von Kurzgeschichten. Anfangs war es noch ein wenig schwer unsere Ideen zu vereinen. Wir begannen zuerst damit den kleinen Screen umzusetzen, da uns dessen Umsetzung wegen der geringen Auflösung schwieriger vorkam. Die große Version passten wir dann später an den Stil an.

A0_cover.pngA0_cover.png
A1_Storypage.pngA1_Storypage.png
A2_Merkzettel1-01.pngA2_Merkzettel1-01.png
A2_Merkzettel2-01.pngA2_Merkzettel2-01.png
A3_Reading-01-01.pngA3_Reading-01-01.png
A4_Marker-01.pngA4_Marker-01.png
A5_Navigation1.pngA5_Navigation1.png
A5_Navigation2-01.pngA5_Navigation2-01.png
A6_Inhaltsverzeichnis1-01.pngA6_Inhaltsverzeichnis1-01.png
A6_Inhaltsverzeichnis2-01.pngA6_Inhaltsverzeichnis2-01.png

B0_Cover.pngB0_Cover.png
B1_Storyboard.pngB1_Storyboard.png
B2_Reading.pngB2_Reading.png
B3_Navigation-01.pngB3_Navigation-01.png
B4_Paging-01.pngB4_Paging-01.png
B5_Merkzettel-01.pngB5_Merkzettel-01.png
B6_Navigation.pngB6_Navigation.png
B6_Storyquickview.pngB6_Storyquickview.png

Das Klangbild

Aufgabe: Es soll eine akustische Begebenheit (Gespräch, Klangaufzeichnung, Filmausschnitt, Musik, etc.) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvoll- ziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Die akustische Begebenheit soll aufgezeichnet und auch präsentiert werden und darf nicht länger sein als eine Minute.

Umsetzung: Als Klang wählte ich das Stück „Feathers“ von „Poppy Ackroyd“. Es war schwierig einen interessanten Ausschnitt zu wählen, ohne das Lied abzuschneiden. Die Grundidee war die Zeichenfläche in zwei Diagramme aufzuteilen.
 Auf der einen Hälfte bezeichnete die x-Koordinate die Frequenz in der die Töne eines Instrumentes auftreten, die y-Koordinate die Tonhöhe. Dabei können auch einzelne Instrumente mehrmals auf dem Diagramm auftreten, sofern es unterschiedliche Parameter besitzt. Jedem Instrument wird eine Farbgruppe zugeordnet (Klavier=grün, Streicher=blau).
 Je höher ein Instrument spielt, desto heller wird dieser Farbwert. Das zweite Diagramm zeigt den zeitlichen Ablauf des Stückes. Der Ausschlag (y-Wert) gibt dabei die Lautstärke an, die Zeit ist auf der x-Achse abgebildet. Die Instrumente aus dem ersten Diagramm sollen in das zweite Diagramm einfließen. So tritt zum Beispiel ein Instrument mit einer bestimmten Tonhöhe und einer bestimmten Frequenz zur Zeit x1 in den Fluss des Diagramms ein, und bei x2 wieder aus.

Final3.pngFinal3.png

Tut mir leid, aber da ist gerade mächtig was schief gelaufen. Der Sys Op wird informiert.