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

Interface Basics 12 02 Kursdokumentation Laura Abbate

Interface Basics 12 02 Kursdokumentation Laura Abbate

Dokumentation der im Kurs »Basics Interface 12|01« entstandenen Arbeiten.

01 Digitales Buch

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 mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 × 768 Pixeln und mindestens zwei vertikale Screens im Format von 240 × 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.

Ergebnis

BI12 pizza2.jpgBI12 pizza2.jpg
BI12 pizza3.jpgBI12 pizza3.jpg
BI12 pizza4.jpgBI12 pizza4.jpg
BI12 pizza5.jpgBI12 pizza5.jpg
BI12 pizza6.jpgBI12 pizza6.jpg
BI12 pizza7.jpgBI12 pizza7.jpg

Diese Aufgabe bereitet ich mit Jasmin Fayad. Wir entschieden uns für eine Pizza-Kochbuch. Unser Wahl fiel somit auf ein Kochbuch. Es war uns wichtig, komplizierte Elemente weg zu lassen und eher auf einer bildlichen Ebene zu arbeiten. Unser Ziel war es, elementare Bestandteile eines Pizzarezeptes visuell hervorzuheben. Also entwickelten wir die Zutaten-Drehscheibe.

Die Zutaten stehen bei uns im Vordergrund! Für den Hintergrund wählten wir schlichtes Weiß um die geschmackvollen Farben der Zutaten zu unterstützen.

Die Navigation beginnt mir einer ersten Bilder Übersicht, sie zeigt die einzelnen Pizzen, die zur Auswahl stehen. Durch das klicken auf eine ausgewählte Pizza erscheint ein grauer Filter über dem Bild und eine nähere Beschreibung wird sichtbar. Wiederholtes Klicken führt einen zu der Anwendung des Rezeptes, das auf der rechten Seite in Textform zu sehen ist. Auf der linken Seite ist ein erscheint ein Zutaten-Drehscheibe. Um einen schnellen Überblick über den Umfang und den Inhalt der Zutaten des Rezeptes zu bekommen. Am rechten Screen-Rand sind zwei angeschnittene Seiten zur näheren Beschreibung. Die graue Seite beinhaltete die Zutaten noch einmal in Schriftform auf einen Überblick zusammengefasst. Diese Seiten sind mit einem Pfeil gekennzeichnet und können je nach belieben in die Bildfläche reingezogen werden.

02 | Graphical User Interface (GUI)

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 × 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmablaufplan (Flowchart) skizziert werden.

Ergebnis

App Systhem 2.jpgApp Systhem 2.jpg

03.png03.png
02.png02.png
01.png01.png
04.png04.png
05.png05.png
06.png06.png
07.png07.png
08.png08.png
09.png09.png
10.png10.png
11.png11.png

Mein Brainstorm App soll eine neue Möglichkeit der Kommunikation sein im mobilen Arbeiten. Ich habe sie Brainmix genannt, weil es ein Mix aus vielen kreativen Gedanken und Ideen ist.

Will man ein neues Brainstorm Thema starten, erstellt man ein so genanntes neues Projekt und läd danach Teilnehmer dazu ein. Haben alle eingeladenen Personen ihre Teilnahme bestätigt, wird das Projekt freigeschaltet. Sobald man Teilnehmer eines neuen Projekts ist, kann man kommentieren und Beiträge hinzufügen oder ergänzen. Nicht nur Kommentare sondern auch Fotomaterial oder Links können hochgeladen werden.

Jeder Teilnehmer der Gruppe wählt sich ein Dreieck aus, das symbolisch für ihn steht, aber nicht unbedingt seine Person bekannt gibt! Dies Anonymität fördert die ungehemmte Ideenfindung.

Möchte man ein schon vorhandenes Projekt kommentieren oder sich eine Überblick verschaffen über die schon vorhandenen Notizen, klickt man das ausgewählte Projekt an, um dann auf die Notizen übersicht des Projektes zu gelangen. Um eine neue Notiz zu erstellen, klickt man „neue Notiz“. Wenn man eine schon vorhandene Notiz kommentieren oder ergänzen möchte, dann klickt man auf die jeweilige Notiz, dabei erscheint ein Screen, der schon erbrachte Beiträge in jeglicher Form zeigt. Will ich in die Diskussion einsteigen wähle ich mir ein noch freies Dreieck aus dabei erscheint im untern linken Bildrand eine Leiste, die das Kommentieren jetzt möglich macht. Möchte man einer hochgeladene Datei, beispielsweise ein Foto genauer Betrachten, klickt man es an dabei verschwinden alle anderen Dreiecke vom Screen und nur das ausgewählte Dreieck ist vergrößert zu erkennen. Je nach der inhaltlichen Nähe positioniere ich mein Dreieck. Die Spitze eine Dreieckes wird Teil eines anderen Dreieckes, das sogenannte Puzzle Prinzip. Durch das Klicken auf „Info“ erhält man zusammengefasste Informationen zum gewählten Projekt.

03 | KlangBilder (Narratives in Time and Space)

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 Bildschirm-orientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.

Ergebnis

 Klangbild Laurajpg Kopie.jpg Klangbild Laurajpg Kopie.jpg

Ich habe mich bei der Klangvisualisierung für eine Szene aus einem Marathon-Lauf entschieden. Die darin vorkommenden Stimmen und Jubelrufen sowie Hintergrund Geräusche habe ich in grafischen Körpern dargestellt. Größe und Umfang der grafischen Körper stehen für Lautstärke und Ausdauer eines Sounds. Die unterschiedlichen Farben sind ein Merkmal der Unterscheidung. Mir war es wichtig, durch verschieden Formen, verschieden Arten von Klängen/Geräuschen zu verkörpern. Spitze Formen Beispielsweise stehen charakteristisch für kurze/prägnante Geräusch.

Das Klangbild ist in einem dem 3D Modeling Programm ALIAS entstanden. Ich wollte eine Art skulpturelle Darstellung von Klang entstehen lassen und bewusst in den 3D Raum eintreten. Form und Ausdehnung von Formen zeigen immer Bewegung, jeder Klang hat eine gewisse Rhythmik oder Dynamik. Bei solchem einem komplexen Vorgang wie einem Marathon Lauf findet einer wahrer Klang-Mix statt, deshalb war dieses ineinander/übereinander gehen ein sehr wichtig Bestandteil der Darstellung.

Diese Aufgabe fordert das eigen Gehör zu Höchstleistungen heraus, gleichzeitig muss man in der Lage sein im Kopf eine klare Struktur zu finden eine Art Raster, um eine komplexen Vorgang in ein Bild zu bringen.

SEHT SELBST!

04 | 1000 Worte

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.

Ergebnis

NikkiKrabben.jpgNikkiKrabben.jpg

Diese Aufgabe bearbeitet ich mit Niki Lambrianidou.

Die Themenfindung am Anfang war schwierig und beanspruchte viel Zeit. Es war Wichtig ein hinreichend Komplexes Thema zu finden, dass die Grundlage bietet es in Bilder zu erklären.

Wir stießen auf die Frage, warum reist unsere Essen mehr als wir? Wir fingen an zu recherieren welchen Weg die Krabbe zurück legt bevor sie auf unserem Teller landet. Stellten uns Fragen zur Finanzierung zur Umweltbelastung und zur Rentabilität. Uns war von Anfang an klar die Paradoxen und Problem sollten in der Grafik vorhanden sein.

Die Grafik sollte den kompletten Weg der Krabbe zeigen, vom Fang bis zum Pullen hin zum Verpacken und schlussendlich zum Vertrieb der Ware. Oben Links auf dem Schiff beginnt die Reise der Krabbe mit dem Fang. Zu sehen sind die einzelnen Arbeitsschritte die ein Fischer auf deinem Kutter zu erledigen hat, damit die Krabbe frisch und genießbar bleibt und anschließend seinen Weg in die Fabrik findet. Dort wird alles gesiebt und ordentlich sortiert, die Krabben werden vom Beifang getrennt. Anschließend werden sie Transportfähig gemacht und mit einem gekühlten Lastern an die Standorte gefahren, an denen sie gepult werden. Ihr Reise führt sie nach Marokko oder ins nicht so weit entfernte Polen. Auch hier werden in der Fabrik einzelne Arbeitsschritte die, die Krabbe jetzt durchlaufen muss, detailliert gezeigt.

Die Unteren Grafiken zeigen die Entfernungen, die dieser Krabben Fang zurücklegen muss, das dabei ausgestoßene Kohlenoxid und die damit verbundene Umweltbelastung. Der mittlere Kasten von den drei, macht noch mal auf grafische Weise die Absurdität deutlich, das dieses Prinzip des Pulen in Polen oder Marokko tatsächlich die preisgünstigste Variante ist.

Fazit

Dieser Kurs hat mir einen guten Überblick über das Thema Interface Design gegeben. Da ich aus dem Produkt Design komme, war es eine wirkliche Erfahrung und Herausforderung für mich. Auch wenn manche Aufgaben anfangs unüberwindbar für mich klangen, war es doch für mich möglich alles zu schaffe. Gute und vor allem konstruktive Kritik und langes Besprechen der einzelnen Thema machte das möglich. Ich habe sehr viel gelernt und bin sehr zufrieden mit dem Ergebnis. Ich finde es klasse, dass es vier verschieden Thema gibt. Das macht alles sehr viel interessanter und bietet auf verschiedenste Art und Weise unterschiedliche Herausforderung. Das strikte Einhalten der Präsentation, sowie den von Anfang an festgelegte Zeitplan habe ich als sehr positiv empfunden. Ja was soll ich noch sagen, weiter so!

Ein Projekt von

Fachgruppe

Sonstiges

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2013