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 12|02 – Jonathan Jonas

Basics Interface 12|02 – Jonathan Jonas

1. Digitales Buch

Aufgabe

Gestalte eine digitale Fassung Deines Lieblingsbuches. 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 vier Screens in zwei verschiedenen Formaten vorgestellt werden - zwei horizontale Screens im Format von 1024 x 768 Pixeln und zwei vertikale Screens im Format von 240 x 320 Pixeln. 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 soll in Zweierteams bearbeitet werden.

Konzept & Umsetzung

Diese Aufgabe bearbeitete ich zusammen mit [Dima Mihnovschi](http://incom.org/profil/4041 „Dima Mihnovschi“). Als Vorlage entschieden wir uns für „Das Begleitbuch“ der dOCUMENTA (13), ein Katalog der Künstler und Ausstellungsorte der dOCUMENTA. Da der Katalog ein wenig unhandlich ist und man relativ lange braucht um die gewünschten Informationen zu finden, eignet sich dieses Buch ideal um die Möglichkeiten eines Digitalen Buchs anzuwenden. Das Buch gliederten wir in drei Ebenen, eine für Information über den Künstler, eine Übersicht der Ausstellungsorte und eine Übersicht der Künstler. Die Ebenen stellen Papierbögen da, die übereinander geschoben werden und bei der großen Variante omnipräsent sind. Der Leser hat jederzeit die Möglichkeit zwischen den Ebenen zu wechseln. Zusätzlich haben wir noch eine Suchfunktion und die eine Sprachumstellung integriert.

seite_01.jpgseite_01.jpg
seite_02.jpgseite_02.jpg
seite_03.jpgseite_03.jpg
seite_04.jpgseite_04.jpg
seite_05.jpgseite_05.jpg
seite_06.jpgseite_06.jpg

1.png1.png
2.png2.png
3.png3.png
4.png4.png
5.png5.png

2. Graphical User Interface (GUI)

Aufgabe

Es soll ein Brainstorm-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designer / Entwicklern bei der Generierung von Ideen unterstützen. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden. Die Applikation kann unter Umständen über das technisch Machbare hinausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr. Das Ziel ist, einen möglichst iPhone-konformen Entwurf zu erarbeiten. Daher soll weitesgehend die standardisierte iPhone-GUI eingesetzt werden. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmablaufplan (Flowchart) skizziert werden.

Konzept & Umsetzung

Bei dieser Aufgabe entschied ich mich für eine eher simple Mind-Map Lösung, damit der Benutzer sich besser auf seine Gedanken konzentrieren kann. Zuerst meldet sich der Benutzer auf den Start Screen an und wird dann zu einer Übersicht weitergeleitet. Diese zeigt ihm seine Brainstorms an und bietet die Möglichkeit neue zu erstellen. Wählt man jetzt einen Brainstorm aus, oder erstellt einen neuen, kommt man zur eigentlichen Brainstorm Ansicht. Hier sieht man eine weiße Hauptwolke mit dem Thema des Brainstorms und kann daraus mit Finger Unterwolken herausziehen. Diese können dann wahlweise per Texteingabe, Spracherkennung oder mithilfe eines Zufallsgenerators, der sich am Übergrifft orientiert, benannt werden. Es besteht zudem die Möglichkeit weitere Personen zu einer Mind-Map einzuladen. In diesem Fall bekommt jeder Teilnehmer eine Farbe zugewiesen und die von ihm erstellten Wolken sind in dieser eingefärbt.

iphone.jpgiphone.jpg

1.png1.png
2.png2.png
3.png3.png
4.png4.png
5.png5.png

Bildschirmfoto 2013-03-18 um 17.18.57.pngBildschirmfoto 2013-03-18 um 17.18.57.png

3. Klangbild

Aufgabe

Es soll eine akustische Begebenheit (kein Musikstück!) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Einzige Einschränkung: es soll keine Bildschirmorientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.

Konzept & Umsetzung

Für mein Klangbild habe ich mich für eine Szene aus dem Dschungel entschieden. Ich habe die einzelnen Geräusche der Tiere analysiert und sie jeweils auf einer radial um einen Mittelpunkt laufenden Zeitachse, ähnlich wie bei einer Lochscheibe, dargestellt. Die Geräusche der Tiere sind je nach ihrer Dauer weiss auf der jeweiligen Spur dargestellt. Zur besseren Orientierung liegen die Spuren mit tieferen Geräuschen weiter Innen.

Bildschirmfoto 2013-03-18 um 17.23.52 Kopie.pngBildschirmfoto 2013-03-18 um 17.23.52 Kopie.png

4. 1000. Worte

Aufgabe

Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung darf keinerlei Text enthalten. Der Sachverhalt soll möglichst deutlich und klar kommuniziert werden. Bei der Auswahl eines Themas sollte drauf geachtet werden, dass das Thema hinreichend komplex ist. Naturwissenschaftliche Themen sind z.B. gut geeignet. Es können aber auch Alltagsthemen genommen werden wie z.B. die Zubereitung eines Essens. Die Aufgabe soll in Zweierteams bearbeitet werden.

Konzept & Umsetzung

Als Thema für diese Aufgabe habe ich mit [Arthur Schiller](http://incom.org/profil/5075 „Arthur Schiller“) den Lebenszyklus von Fröschen gewählt. Der Lebenszyklus wird anhand eines Jahres dargestellt und verläuft radial im Uhrzeigersinn um den Mittelpunkt. Gezeigt werden die Entwicklungstadien des Frosches und alltägliche Ereignisse jener. Die Darstellungen sind detailreich und werden erst beim näheren hinsehen deutlich. Die sich in der Mitte befindende Skala zeigt die Jahreszeit an. Der äussere Ring zeigt die dramatische Reduzierung der Individuen vom Ablaichen(ca. 2500) bis zur Geschlechtsreife(ca. 5).

1000worte.jpg1000worte.jpg

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2012 / 2013