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 || Alexander Käßner

Dokumentation des Kurses Basics Interface bei Prof. Boris Müller im Sommersemester 2015

1. Digitales Buch

iPad_Air_2_H_SpcGr_sRGB.pngiPad_Air_2_H_SpcGr_sRGB.png

Aufgabe: Es soll eine digitale Fassung Ihres Lieblingsbuches gestaltet werden. 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 minde- stens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240x320 Pixeln (QVGA).

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.

Umsetzung: Die erste Aufgabe habe ich in Zusammenarbeit mit [Justyna Ligocka](https://incom.org/profil/5212 „Profil von Justyna Ligocka“) bearbeitet. Wir entschieden uns beide dafür ein Kochbuch als Ebook zu erstellen. Unsere Wahl war das das Kochbuch Leon: Ingredients & Recipes.

Beim erstellen unseres Designs versuchten wir zwar den Charme eines Kochbuches zu bewahren, jedoch nicht einfach die Seiten aus dem Buch 1 zu 1 digital nachzubilden. Nach einigen Versuchen entschieden wir uns für den etwas rustikaleren Holzhintergrund und ein skeuomorphistisches Design mit mehreren Navigationsebenen.

Wie man auf den Screenshots erkennen lässt, kann man zu beginn Wählen ob man ein spezielles Rezept sucht oder eine Hauptzutat für ein Gericht. So lässt sich z.B. eine Auswahl an Rezepten mit Avocado als Hauptzutat raussuchen.

X_1.pngX_1.png
X_2.pngX_2.png
X_3a.pngX_3a.png
X_3b.pngX_3b.png
X_3c.pngX_3c.png
X_4a.pngX_4a.png
X_4b.pngX_4b.png
X_5a.pngX_5a.png
X_5b.pngX_5b.png

Y_1.pngY_1.png
Y_2.pngY_2.png
Y_3a.pngY_3a.png
Y_3b.pngY_3b.png
Y_3c.pngY_3c.png
Y_4a.pngY_4a.png
Y_4b.pngY_4b.png

Fazit: Die Umsetzung der Tablet Größe funktionierte gut. Hier gab es nur kleinere Ungereimtheiten, wie z.B. das Menü. Das Alphabet im Menü ist etwas wackelig durch die unterschiedlichen Buchstaben Abstände. Das ist in der kleinen Variante schon besser gelungen, wobei es da auch noch nicht perfekt ist. Generell war die kleine Screen Größe problematisch, da ich es nicht gewohnt bin auf einen so kleinen Screen zu designen. Dazu kommt, dass unser Kochbuch von großen Bildern lebt, welche auf dem kleinen Screen so nicht verwendet werden konnten.

2. Klangbild

Klangbild Ausschnitt.pngKlangbild Ausschnitt.png

Aufgabe: Es soll eine akustische Begebenheit (Gespräch, Klangaufzeichnung, Filmausschnitt, Musik, etc.) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvoll- ziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Die akustische Begebenheit soll aufgezeichnet und auch präsentiert werden und darf nicht länger sein als eine Minute.

Skizzen.jpegSkizzen.jpeg

Umsetzung: Das Klangbild erwies sich für mich als relativ schwere Aufgabe. Zu Beginn hatte ich sehr lange gebraucht um einen richtigen Sound zu finden. So startete ich als erstes mit einigen Skizzen als Brainstorming. Für mich war klar, dass es ein Song werden sollte, ich wusste nur noch nicht welcher gut dafür geeignet ist. Nach einiger Zeit hatte ich mir American Idiot von Green Day ausgesucht. Bei diesem Song konnte man die einzelnen Instrumente gut raushören. Nur die extreme Schnelligkeit erwies sich später als ein Problem, da man so sehr schnell die Töne raushören musste.

Nachdem ich die erste Minute des Songs komplett analysiert hatte entschied ich mich für das Dreiecksmuster aus meiner Skizze. Die oberen Dreiecke sind das Becken und die Hi-Hat vom Schlagzeug, die mittlere die Gitarre und die untere die Basedrum und Snare vom Schlagzeug. Die unterschiedlichen Richtungen der Dreiecke bedeuteten die verschiedenen Tonhöhen und die Größe spiegelt die Lautstärke wieder.

Klangbild.pngKlangbild.png

Fazit: Das Dreiecksmuster bietet eine interessante Form und der Song ist gut mit zu verfolgen (auch wenn man dazu sehr schnell sein muss). Der Song an sich ist dafür aber etwas einfach aufgebaut. Wie man in der Übersicht wieder erkennen kann, ist der Song im wesentlichen aus 3 Bausteinen aufgebaut. Alles in allem bin ich aber doch recht zufrieden mit dem Ergebnis.

3. GUI

iPhone-6-Isometric-view-Mockup.pngiPhone-6-Isometric-view-Mockup.png

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 und Entwürfen unterstützen. Die genauen Funktionalitäten kön- nen in der Konzeptphase entwickelt werden.

Die Applikation kann unter Umständen über das technisch Machbare hi- nausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr.

Das Ziel ist, einen iOS 8-konformen und gleichzeitig individuellen Ent- wurf zu erarbeiten. Es soll die standardisierte iOS 8-GUI eingesetzt wer- den - das App soll aber auch eine eigene Note bekommen. Die Entwürfe sollen 375 x 667 PIxel groß sein (für den Entwurf setze ich Punkt=Pixel). Zusätzlich zur GUI soll ein Programmablaufplan (Bewegungspfade durch die App) skizziert werden.

Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung: Die dritte Aufgabe habe ich in Zusammenarbeit mit [Jolanta Paliszewska](https://incom.org/profil/6264 „Profil von Jolanta Paliszewska“) bearbeitet. Beim entwickeln der Grundaufgabe für unsere App entschieden wir uns für eine Designmethode zur Ideen Generierung, die Morphologische Matrix.

Die Morphologische Matrix (auch Morphologischer Kasten genannt) ist eine Methode zur Visualisierung und Neukombination von Eigenschaften. Bestehende Varianten zu festgelegten Parametern werden zu neuen Lösungen kombiniert. Auf diese Weise lassen sich zahlreiche Varianten zu einem eingeschränkten Thema finden. Ursprünglich wird die Morphologische Matrix zur Entwicklung von Produkten oder Services mit neuartigen Funktionen genutzt. Als visuelle, kombinierbare Themenübersicht ist sie auch bei gestalterischen Aufgaben ein wertvolles Werkzeug.

Mit unserer App Matrify erstellt man verschiedene Dokumente in denen man seine Ideen speichern kann. Jedes Dokument spiegelt eine morphologische Matrix wieder. So kann man in jedem Dokument beliebig viele Spalten/Gruppen erstellen. In jeder Gruppe lassen sich Fotos oder selbst gezeichnete Skizzen hinzufügen. Die Skizzen lassen sich mit den App eigenen Tool erstellen.

Zum Auswählen seiner finalen Kombination an Elementen kann man über die, standardmäßig immer integrierte, Favoriten Gruppe seine Komposition zusammenstellen.

Um die Matrix bzw. die fertige Auswahl an Elementen anderweitig zu nutzen, gibt es verschiedene Optionen für den Export.

1_documents.png1_documents.png
1_edit_documents.png1_edit_documents.png
2_empty-matrix.png2_empty-matrix.png
3_matrix.png3_matrix.png
4_edit.png4_edit.png
5_fav_select.png5_fav_select.png
6_fav_result.png6_fav_result.png
7_matrix_share.png7_matrix_share.png
8_add_sketch.png8_add_sketch.png
9_sketch.png9_sketch.png
10_sketch_toolbar.png10_sketch_toolbar.png
overview.pngoverview.png

Fazit: Unsere App bietet eine gute Auswahl an Funktionen die meiner Meinung nach nicht zu überladen sind. Matrify konzentriert sich nur auf das erstellen der morphologischen Matrix mithilfe eines Zeichentools. Etwas problematisch ist jedoch das Bearbeiten von Gruppen einer Matrix. Es ist nicht ganz klar, dass man durch klicken auf den Gruppen Titel im Bearbeiten Modus diesen bearbeiten kann. Im großen und ganzen bin ich aber zufrieden mit unserer Arbeit.

4. 1000 Worte

Alex (final) - 1000 Worte.pdf PDF Alex (final) - 1000 Worte.pdf

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 kommu- niziert 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.

Umsetzung: Nach anfänglichen Schwierigkeiten ein komplexes Thema zu finden entschied ich mich letztlich dafür die Abläufe von Heizung, Frisch- und Abwasser in einem Haus zu erklären. Folgende Farben stehen für die jeweiligen Abläufe: - Braun: Abwasser - Blau: Regenwasser - Grün: Frischwasser - Rot/Hellblau: Heizung

Wichtig anzumerken ist noch, dass das Frischwasser in einem Wasserturm über die Höhe der Häuser gepumpt wird, damit im Haus selbst keine Pumpe nötig ist. Ebenfalls benötigt das Abwasser eine Entlüftung (auf dem Dach), da es sonst durch die Gasbildung „blubbern“ würde. Für Waschmaschinen im Keller muss das Abwasser über die Straßenhöhe gepumpt werden, um ein zurückdrücken des Abwassers bei steigendem Grundwasser zu vermeiden.

Fazit: Durch die späte Erstpräsentation meiner Arbeit konnte ich leider nicht mehr auf die Kritik eingehen. So ist z.B. der Hintergrund etwas zu unruhig, durch die Inhaltlich unnötigen Elemente. Genauso ist Grün nicht die beste Farbwahl für Frischwasser. Als Zusatz hätte man auch noch weitere verschiedene Systeme der Heizung und co. zeigen können. Aber in Anbetracht dessen, dass ich zuvor noch nie eine Art Infografik erstellt habe, bin ich sehr zufrieden mit meiner Arbeit.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 15|1

Entstehungszeitraum

Sommersemester 2015