Basics Interface 11|02 - Philipp Geuder

Aufgabe Gestalte eine digitale Fassung deines Lieblingsbuchs. 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 wichtigsten Kriterien bei der Bearbeitung der Aufgabe. Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung Diese Aufgabe wurde in Zusammenarbeit mit [Philipp Steinacher](http://incom.org/profil/4653 „Philipp Steinacher“) bearbeitet. Zweimal Philipp, ein Projekt? Was soll da noch schief gehn ;)

Beim Buch sind wir uns schnell einig geworden. „HTML5 for Web Designers“ von Jeremy Keith sollte es sein. Das Buch ist durch seine Mischung aus Fließtext, Code-Blöcken und Bildern ein guter Einstieg für's allererste Projekt an der FH (von den Projektwochen abgesehen) gewesen.

Bei der Schriftart waren wir auf der Suche nach einer möglichst großen Familie, die am besten auch einen Monospaced Font beinhaltet, immer natürlich unter dem Gesichtspunkt der guten Lesbarkeit. Fündig sind wir bei der Thesis geworden. In Anlehnung an das Buch, verwendeten wir TheSerif für den Fleißtext und TheSansMono für die Code-Bereiche.

Die Adaption des Konzepts vom Tablet auf die kleine Auflösung ging sehr intuitiv von der Hand. Jedes Element ließ sich fast eins-zu-eins wieder verwenden, wodurch sich eine starke Einheit ergeben hat.

Aufgabe Es soll eine Brainstorm-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designern/ 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 weitestgehend die standardisierte iPhone-GUI eingesetzt werden. Die Entwürfe sollen 320 x 480 Pixel groß sein – ob horizontal oder vertikal spielt dabei keine Rolle.

Umsetzung Bei der Funktion und der Verwendung der App orientierte ich mich sehr stark am traditionellen Brainstorming. Ein Hauptproblem ist häufig, dass über Begriffe diskutiert und Bewertung abgegeben werden, obwohl dies erst hinterher, bei der Verwertung geschehen sollte. Hier sah ich einen entscheidenden Punkt, in dem die App helfen sollte. Dies wird erreicht, in dem sich die Teilnehmer nicht mehr in einem Raum befinden müssen und somit beim Begriffen schreiben nicht mehr gegenseitig beeinflussen. In der App bearbeiten alle Teilnehmer ein gemeinsames Whiteboard, ohne zu wissen, wer welche Begriffe eingegeben hat.

Öffnet man die App, zeigt eine Listenansicht alle aktuellen, zukünftigen und vergangenen Brainstorming-Sessions. Wählt der Nutzer nun eine aktuelle Session aus, kann er sich ein kurzes Video zum Entspannen vom Arbeitsalltag und zur Auflockerung davor ansehen. Anschliessend wird ihm die genaue Beschreibung gezeigt. Nun können auf dem gemeinsamen Whiteboard alle Ideen gesammelt werden. Neue Begriffe können hier hinzugefügt, editiert, gelöscht oder als Zugehörig zu einem bestehenden Überbegriff definiert werden.

Die Gui-Elemente orientieren sich sehr stark am Orignial, wurden jedoch farblich angepasst, um eine gewisse Eigenständigkeit zu erreichen.

Ein Problem ist die Größe der Begriffe auf dem Whiteboard. Für in gutes Brainstorming ist es nötig, dass die Nutzer auf Begriffe anderer aufbauen oder diese weiterspinnen, also Assoziationsketten bilden können. Hierfür muss man alle Begriffe stets im Blick haben. Aus diesem Grund sind die Gui-Elemente in der Whiteboard-Ansicht möglichst klein gehalten, um die Displayfläche am effizientesten auszunutzen. Zwar ist dadurch die Informationsdichte sehr hoch, doch leidet darunter aktuell die Lesbarkeit ungemein. Die Lösung wäre natürlich eine solche App für's iPad oder zumindest mit einer Auflösung von 960x640 zu konzipieren.

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.

Umsetzung Als Ton für diese Aufgabe habe ich eine Szene aus dem Film fight club (englische Fassung) gewählt. Hier will Tyler den Protagonisten dazu bringen, ihm mit der Faust ins Gesicht zu schlagen. Nach anfänglichem Zögern, lässt sich der Protagonist überreden und schlägt zu.

Der Tonausschnitt eignete sich gut, um visualisiert zu werden, da sowohl der Dialog, wie auch eine Vielzahl von unterschiedlichen Hintergrundgeräuschen zu hören sind. Für die Visualisierung verwendete ich ausschließlich Lautmalerei, sowie unterschiedliche Schriftschnitte, um das Hörbare abzubilden. Inspiriert wurde ich dabei von „Pulp Fiction as typograph“. Die einzelnen Geräusche habe ich ähnlich eines Zeitstrahles nach rechts aufgetragen, überlagernde Geräusche rutschten dabei in die nächste Zeile. Die unterschiedlichen Schriftschnitte, Zeichenabstände und Wortabstände gleichen die Lesezeit dem Zeitverlauf innerhalb der Szene an.

Erstaunlich war, wie viele Geräuschquellen man in der Szene findet, die einem beim Film schauen gar nicht auffallen, die aber für die Atmosphäre unerlässlich sind. Die Schwierigkeit bestand sicher darin, jedes einzelne Geräusch auszumachen und dann die englische, lautmalerische Entsprechung zu finden.

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 darauf 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.

Umsetzung Dieses Projekt entstand in Zusammenarbeit mit [Sebastian Prein](http://incom.org/profil/4618 „Sebastian Prein“). Als komplexen Prozess oder Ablauf haben wir uns auf Lachszucht aus Aquakultur geeinigt.

Bei der Darstellung haben wir einen vergleichsweise detailreichen, naturalistischen Stil für die Pictogramme gewählt, um die Veränderungen während der Entwicklung und die Details bei der Verarbeitung klar abzubilden. Beim Hintergrund haben wir die Komplexität dann jedoch deutlich verringert. Dafür hielt hier Farbe Einzug.

Die Zusammenarbeit hat wirklich gut funktioniert und hat Spass gemacht. Auch obwohl wir während des Projekts, als Letztes im Semester, zeitlich etwas unter Druck standen.

Der Kurs hat mir sehr gut gefallen. Kann ihn nur jedem ans Herz legen. Er ist sehr gut strukturiert und die Aufgaben bauen gut auf einander auf. Für die Aufgaben hat man meistens auch genügend Zeit. Das Feedback durch den Kurs und durch Prof. Boris Müller war immer sehr hilfreich und hat mir viel gebracht.

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Basics Interface 11|02 - Philipp Geuder

Ein Projekt von

Fachgruppe

Art des Projekts

Betreuung

Entstehungszeitraum

zusätzliches Material