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 15|1 Dokumentation - Julia Deege

Basics Interface 15|1 Dokumentation - Julia Deege

Kurze BeschKurs: „Basics Interface“ SoSe 2015 Lehrender: Prof. Boris Müller

Im Kurs „Basic Interface“ wurden die Themen Screendesign, grafische User-Interface, Visualisierung und Semiotik behandelt. Dabei standen insbesondere konzeptionelle Studien im Mittelpunkt. Weiterhin wurde ein Überblick auf die Geschichte des Interface Designs gegeben, wobei relevante Projekte im Detail diskutiert wurden.

Es gab vier Teilaufgaben für die man jeweils drei Wochen Zeit hatte.

Digitales Buch

Die erste Aufgabe bestand darin, ein analoges Buch in ein digitales Format (1024x768 Pixel (XGA) und 240x320 Pixel (QVGA)) umzuwandeln. Die Screens sollten nicht nur die Inhalte des Buchs wiedergeben, sondern sollten auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können. Wichtig war auch die Lesbarkeit und Klarheit der gewählten Schriftart. Gruppenarbeit mit Jolanta Paliszewska

Wir wählten ein Kinderbuch namens „Gregs Tagebuch“ aus. Zuerst fassten wir alle wichtigen Punkte die wir bei der Umsetztung in die digitale Fassung beachten wollten zusammen. Kinderfreundliches Bedienen, Wiedererkennbarkeit zum Buch, verspielter Lesecharakter. Der Hintergrund des großen Screens (1024x768 Pixel) ist ein Ähnlicher wie auch auf dem Cover des Buches. Die Lesefläche ist rechts platziert, die Illustrationen auf Post-Its unter dem dazugehörigen Abschnitt. An der linken Seite ist ein Kalender, der als Inhaltsverzeichnis dient. Greg schreibt in jedem neuen Kapitel über einen neuen Tag. Falls man an dem Tag zurück möchte wo man aufgehört hat zu lesen nimmt man dann den Kalender zu Hilfe. Dort kann man den makierten Tag wiederfinden und weiterlesen. Die gewählte Schrift heißt Myriad Tilt, sie weist einen kindlichen, verspielten und leichten Charakter auf, ist gut lesbar, und ist als Computerschirft gut geeignet. Für den kleinen Screen (240x320 Pixel) wurde eine andere Lösung gefunden. Man erreicht den Kalender, wie auch den nächsten oder vorherigen Tag über die Navigationsleiste unten.

Kinderbuch_digital1.2.pngKinderbuch_digital1.2.png
Kinderbuch_digital1.1.pngKinderbuch_digital1.1.png
Kinderbuch_digital1.3.pngKinderbuch_digital1.3.png

Kinderbuch_digital2.1.pngKinderbuch_digital2.1.png
Kinderbuch_digital2.2.pngKinderbuch_digital2.2.png
Kinderbuch_digital2.3.pngKinderbuch_digital2.3.png

Klangbilder (Narratives in Time and Space)

Es sollte eine akustische Begebenheit (Gespräch, Klangaufzeichnung, Filmausschnitt, Musik, etc.) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit sollte also für den Betrachter nachvollziehbar sein.

Ich wählte den Track „Hava Nagila“, den ich aus dem Film „Snatch“ kannte und versuchte anfangs die verschiedenen Intrumente, Höhen und Tiefen und Rhythmen zu analysieren, zu filtern und passende visuelle Formen dafür zu finden. Ich beschloss die Aufgabe als Animation mit Adobe After Effects zu lösen.

Ellipse: Klarinette/Bratsche Quadrat: Kontrabass Raute: Tamburin

Graphical User Interface (GUI)

BrainstormApp_Ü bersichtsskizze.jpgBrainstormApp_Ü bersichtsskizze.jpg

Es sollte eine Brainstorm-App für das iPhone realisiert werden. Die App soll also eine Gruppe von Designern / Entwicklern bei der Generierung von Ideen und Entwürfen unterstützen. Die genauen Funktionalitäten konnten in der Konzeptphase entwickelt werden. Das Ganze durfte über das technisch Machbare hinausgehen - der Fokus lag auf der Ausgestaltung des User-Interfaces.

Das Ziel war, einen iOS 8-konformen und gleichzeitig individuellen Entwurf zu erarbeiten. Es sollte die standardisierte iOS 8-GUI eingesetzt werden - mit einer persönlichen Note. Die Entwürfe sollten 375 x 667 Pixel groß sein. Zusätzliche Wireframes sollten den Programmablaufplan verdeutlichen.

Ideenfindung/ Konzept:

Brainstormings und Mindmaps sind oft die ersten Wege zu einer Idee, einem Konzept oder einem Projekt. Beide Kreativitätstechniken leben von dem Zusammentragen möglichst vieler, unterschiedlicher Gedanken und Ideen. Aber wie soll das funktionieren, wenn die Mitdenkenden nicht am gleichen Ort sitzen und wenn die Kreativität durch abstrakte Benutzeroberflächen auch irgendwie eingeschränkt wird?

Als erstes haben wir Research betrieben und uns viele schon vorhandene Brainstorm Apps angeschaut. Unsere Favoriten haben wir uns als App runtergeladen und ausprobiert. Am besten gefiel uns popplet wegen der simplen Handhabung und der Übersichtlichkeit.

IDEALOG ist ein Social-Media-Mindmapping-Tool. die Mindmaps werden online erstellt und sind für Mitglieder live sichtbar. Als Admin erstellt man ein Projektthema (in unserem Beispiel Campus Ambulanz). Es wird eine kurze Beschreibung bzw. Aufgabenstellung verfasst, damit eingeladene Teilnehmer über die Thematik informiert sind. Dazu werden Unterthemen und ihre Labelfarbe festgelegt an denen die Mitglieder nachher weitere Begriffe anknüpfen können, z.B. Technik - blau. Wenn das Projekt erstellt und die Teilnehmer eingeladen werden, kann der Admin weitere Admins bestimmen. Nur Admins dürfen neue Labelfarben erstellen, damit es nicht zu unübersichtlich wird.

Man erstellt einen neuen Container indem man auf einem der Punkte an dem aktiven Container drückt. Es entsteht direkt eine Verbindung zu dem Hauptcontainer und man gelangt in den Bearbeitungsmodus. Nun hat man die Möglichkeiten die Labelfarbe zu bestimmen, einen neuen Begriff, einen Kommentar oder eine Bemerkung hinzuzufügen, und Bilder oder Videos hochzuladen. Wenn man ein Beitrag kommentiert hat, erscheint oben an den Container ein Ausrufezeichen. Sobald ein neuer Container von den Mitgliedern erstellt wurde, macht er sich durch eine pulsierende Animation bemerkbar.

Auf der unteren Navigationsleiste sind zwei Buttons. Auf der linken Seite befindet sich ein Icon für Mitglieder, dort kann man die sich persöhnlich per Anruf oder Nachricht an sie wenden. Auf der rechten Seite kommt man zum Protokoll, hier kann man den Verlauf nachvollziehen und auch eigene Bemerkungen hinzufügen.

StartScreen.pngStartScreen.png
Projects.pngProjects.png
NewProjectEmpty.pngNewProjectEmpty.png
AllContacts.pngAllContacts.png
NewProjectFull.pngNewProjectFull.png
IdealogEinladung.pngIdealogEinladung.png
StartContainer.pngStartContainer.png
NewContainer.pngNewContainer.png
ContainerBearbeitung.pngContainerBearbeitung.png
Labels.pngLabels.png
Kommentar.pngKommentar.png
Images.pngImages.png
Camera.pngCamera.png
ContainerKommentar.pngContainerKommentar.png
Ünersicht.pngÜnersicht.png
ContainerWackelt.pngContainerWackelt.png
Protocol.pngProtocol.png
Members.pngMembers.png

IDEALOS_Übersicht-01.jpgIDEALOS_Übersicht-01.jpg

1000 Worte

Es sollte ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung durfte keinerlei Text enthalten. Der Sachverhalt sollte möglichst deutlich und klar kommuniziert werden.

Der Weg von der Parfumherstellung Ich hab mich gefragt wie eigentlich Parfum hergestellt wird, und weshalb der Preisunterschied zwischen teueren und günstigen Parfums so groß ist. Dieses habe ich herausgefunden und in Piktogrammen übersetzt.

JuliaDeege_Parfüm.pngJuliaDeege_Parfüm.png

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