In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Dokumentation zum Kurs »Basics Interface« im Sommersemester 2018
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.«
Finale Screens im XGA-Format
Finale Screens im QVGA-Format
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: Erster Entwurf
Klangbild: Final
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.
Flowchart »to·gather«
Finale Screens
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.
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.