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

Dokumentation zum Kurs »Basics Interface« im Sommersemester 2018

Digitales Buch

Im Rahmen der Aufgabe »Digitales Buch« sollte in Zweierteams eine digitale Version eines Buches gestaltet werden. Dabei galt es mindestens zwei horizontale Screens im Format von 1024×768 Pixeln (XGA), sowie mindestens zwei vertikale Screens im Format von 240×320 Pixeln (QVGA) zu entwerfen. Schwerpunkt der Aufgabe war es, die Lesbarkeit und Klarheit in der Darstellung zu gewährleisten.

Ich und meine Projektpartnerin Lea Flemming haben uns für die Bearbeitung der Aufgabe für das Kochbuch »Pesto! Raffiniert & frisch« von Joshua Clever entschieden. Wir wählten für die Umsetzung der Aufgabe ein Kochbuch, da uns die Visualisierung von Rezepten besonders spannend erschien.

Früh entschieden wir uns, in unseren Screens den Bildern des Buches eine besondere Gewichtung einzuräumen um den Charakter eines Kochbuches beizubehalten. Um auch bei der Typografie auf den Charakter eines Kochbuches Rücksicht zu nehmen, entschieden wir uns für die Serifenschrift »Charis SIL.«

002_XGA.png002_XGA.png
004_XGA.png004_XGA.png
003_XGA.png003_XGA.png
001_XGA.png001_XGA.png

Finale Screens im XGA-Format

008B_QVGA.png008B_QVGA.png
008A_QVGA.png008A_QVGA.png
007_QVGA.png007_QVGA.png
005_QVGA.png005_QVGA.png
006_QVGA.png006_QVGA.png

Finale Screens im QVGA-Format

Klangbild

Für die zweite Aufgabe sollte eine akustische Begebenheit in einem Zeitraster visualisiert werden. Die zugrundeliegenden Audio-Dateien wurden zufällig im Kurs verteilt und waren dabei frei für inhaltliche und visuelle Interpretation. Die Wahl des Formates für die Umsetzung des Klangbildes war frei wählbar.

Die von mir zu bearbeitende Audio-Datei »37« zeigt über zwei Minuten eine städtische Geräuschkulisse. Ich habe versucht in meinem Klangbild die verschiedenen hörbaren Geräusche durch das Verwenden von verschiedenen Farben und Formen zu charakterisieren.

Hierbei wählte ich für natürliche Geräusche, in diesem Fall Grillen und Frösche, die Farbe Grün. Die Farbe Blau ist in meinem Klangbild Gesprächen, Gesang und Musik zugeordnet. Rot steht symbolisch für die Geräusche des Straßenverkehrs. Die Dynamik der einzelnen Formen gibt Aufschluss über die Intensität und Aufdringlichkeit der einzelnen Geräusche. Je höher die Form angeordnet ist, desto lauter und vordergründiger das Geräusch. Im Hintergrund ist durchweg ein städtisches Rauschen zu hören, welches in meinem Klangbild durch eine durchgängige Wellenform dargestellt wird.

Klangbild_v1.pngKlangbild_v1.png

Klangbild: Erster Entwurf

Klangbild.pngKlangbild.png

Klangbild: Final

Graphical User Interface

Für die Aufgabe »Graphical User Interface« sollte in Zweierteams eine Inspirations-App gestaltet werden, die Designer*innen bei der Generierung von Ideen, Einfällen und Entwürfen unterstützen soll. Es sollten mindestens vier Screens für ein mobiles Endgerät entworfen werden, die sowohl der üblichen UI-Standards der Human Interface Guidelines (iOS) beziehungsweise des Material Designs (Android) entsprechen, aber trotzdem individuelle Züge im Design aufzeigen. Als Bestandteil der Bearbeitung der Aufgabe sollte ein Programmablaufplan skizziert werden, der die Bewegungspfade durch die App darstellt.

Ich und meine Projektpartnerin Josephine Knoll haben die iOS-App »to·gather« konzipiert, mit der Designer*innen innerhalb von Arbeitsgruppen Ideen zusammentragen und über sie abstimmen können.

Jeder Nutzer kann in der App für jedes seiner Projekte ein Board erstellen und dieses dann verwalten. Nachdem ein Board erstellt wurde, können Teammitglieder eingeladen werden um mit ihnen innerhalb des Boards kollaborativ zu arbeiten.

Innerhalb eines Boards kann jeder Nutzer Inhalte, wie Bilder, Farben, Schriftarten und Links hinzufügen. Für jeden neu an das Board angefügten Inhalt gibt es eine Detailansicht, in der jedes Teammitglied einen Kommentar hinterlassen kann. Des Weiteren kann man in der Detailansicht auch über die Schaltfläche »Approve« seine Zustimmung ausdrücken. Wenn alle Teammitglieder dem Inhalt zugestimmt haben, gilt er als »angenommen« und wird im Board grün markiert. Über die Filterfunktion kann man die Inhalte des Boards unter anderem nach diesem Kriterium filtern. Das Ziel der App ist es, ein interaktives Moodboard zu schaffen, das qualitativ gefilterte Ressourcen für die Umsetzung des Designprojektes enthält.

000_Flowchart.png000_Flowchart.png

Flowchart »to·gather«

009_Aktivitäten.png009_Aktivitäten.png
004_3_Projektseite.png004_3_Projektseite.png
004_2_Projektseite.png004_2_Projektseite.png
004_1_Projektseite.png004_1_Projektseite.png
008_2_Neue-Karte-Farbe.png008_2_Neue-Karte-Farbe.png
005_1_Detailansicht-Link.png005_1_Detailansicht-Link.png
005_2_Detailansicht-Link.png005_2_Detailansicht-Link.png
006_Detailansicht-Farbe.png006_Detailansicht-Farbe.png
007_1_Neue-Karte-Link.png007_1_Neue-Karte-Link.png
007_2_Neue-Karte-Link.png007_2_Neue-Karte-Link.png
008_1_Neue-Karte-Farbe.png008_1_Neue-Karte-Farbe.png
003_2_Neues-Projekt.png003_2_Neues-Projekt.png
003_Projektseite-leer.png003_Projektseite-leer.png
003_1_Neues-Projekt.png003_1_Neues-Projekt.png
002_Projektübersicht.png002_Projektübersicht.png
001_Login.png001_Login.png

Finale Screens

1000 Worte

Im Rahmen der Aufgabe »1000 Worte« sollte ein komplexer Sachverhalt in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung durfte dabei keinen Text enthalten und sollte den Sachverhalt möglichst klar und deutlich kommunizieren.

Ich habe mich dafür entschieden, die Projektmanagementmethode »Scrum« in einem Schaubild zu visualisieren.

Scrum ist ein Vorgehensmodell des agilen Projektmanagements, welches insbesondere bei der agilen Softwareentwicklung angewendet wird. Scrum zielt darauf ab, die Interessen der Anwender und Stakeholder mit den Kapazitäten des Entwicklungsteams miteinander zu vereinbaren. Der Product Owner spielt in diesem Prozess eine besondere Rolle. Er verwaltet durch Kommunikation mit allen beteiligten Parteien das Product Backlog – einer Art Liste mit offenen, auf das Produkt bezogenen Aufgaben, zum Beispiel zu behebende Fehler und neue Features. Des Weiteren bestimmt er auch zusammen mit dem Entwicklungsteam innerhalb eines ein- oder mehrwöchentlichen Planungsmeetings die Aufgaben, die innerhalb des nächsten Sprints (ein- oder mehrwöchentliche Entwicklungsphase) bearbeitet werden sollen. Am Ende jedes Sprints wird innerhalb des Scrum-Teams über die Ergebnisse diskutiert. Sobald eine signifikante Menge an Aufgaben bearbeitet wurde, kann es zu einem Release, also zu einer Auslieferung an die Anwender des Produktes kommen.

In meinem Schaubild habe ich versucht mithilfe von Icons und einfachen grafischen Konstrukten diesen Prozess abzubilden.

1000_Worte_Max-Herrmann.png1000_Worte_Max-Herrmann.png

Fazit

Der Kurs war durch die Vielfältigkeit der Aufgaben und regelmäßigen Feedbackrunden durchweg interessant gestaltet. Die Vorlesungen von Prof. Boris Müller waren sehr aufschlussreich und bereiteten gut auf die jeweilig zu bearbeitende Aufgabe vor. Die Aufgaben zielten dabei jeweils auf einen anderen Aspekt des Interfacedesigns ab, wodurch das inhaltliche Spektrum des Kurses sehr breit gefächert war.

Bei der Aufgabe »Digitales Buch« habe ich persönlich sehr viel über Typografie und die Gestaltung von Screens für kleine Auflösungen gelernt. Sie bot einen gelungenen Einstieg in den Kurs. Am interessantesten fand ich die Aufgabe »Graphical User Interface«, da man bei dieser Aufgabe die meisten Freiheiten bei der Ideenkonzeption hatte. Am schwierigsten empfand ich die Bearbeitung des Klangbilds, da mir die grafische Kodierung von so vielen gleichzeitig auftretenden Geräuschen schwer gefallen ist.

Ich kann den Kurs für Studieren aller Fachrichtungen im Fachbereich Design empfehlen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 18|1

Entstehungszeitraum

Sommersemester 2018

zusätzliches Material