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 13/01

Dokumentation der Ergebnisse des Kurses Basics Interface SS 13 bei Prof. Boris Müller.

1 | Digitales Buch

Aufgabe 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 x 768 Pixeln und mindestens zwei vertikale Screens im Format von 240 x 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.

Umsetzung Die Bearbeitung der Aufgabe habe ich mit Tatjana Tšernõhh begonnen. Wir entschieden uns für das Buch Schachtel-Mappe-Bucheinband, welches buchbinderische Grundlagen vermittelt.

Aufgrund unterschiedlicher Ansätze, die nicht miteinander vereint werden konnten, beschlossen Tatjana und ich, diese Aufgabe einzeln zu bearbeiten.

Entsprechend der reduziert gehaltenen Gestaltung in dem Buch wählte ich eine ähnliche Anmutung in dem digitalen Buch. Das Farbschema übernahm ich von dem Cover. Da man dieses Buch meist referenzierend liest, stand die Navigation im Vordergrund. Es sollte stets ersichtlich sein, wo man sich in dem Buch befindet sowie eine einfache Navigation in andere Kapitel ermöglichen.

Schachtel-Mappe-Bucheinband_Cover.jpgSchachtel-Mappe-Bucheinband_Cover.jpg
digitales-buch_240x320_1.pngdigitales-buch_240x320_1.png
digitales-buch_240x320_2.pngdigitales-buch_240x320_2.png
digitales-buch_240x320_3.pngdigitales-buch_240x320_3.png
digitales-buch_240x320_4.pngdigitales-buch_240x320_4.png

digitales-buch_1024x768_2.pngdigitales-buch_1024x768_2.png
digitales-buch_1024x768_1.pngdigitales-buch_1024x768_1.png

2 | GUI

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 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 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle.

Umsetzung Meine Idee basiert auf meinem eigenen Brainstorming-Verhalten. Zu einem Thema sammle ich unterschiedliche Medienarten wie z.B. Bilder, Videos, Texte, Audioaufnahmen, die mir als Inspiration dienen können. Die App ermöglicht, sämtliche Gedanken und Inspirationen in einem Pool zu sammeln und diese im Team zu kommentieren. Beim Auffinden von einzelnen Einträgen hilft eine Suche nach Stichworten. Ein Feed im Hauptmenü bildet die aktuellen Aktivitäten in den einzelnen Projekten ab.

4_Ideen.png4_Ideen.png
3_Projektübersicht.png3_Projektübersicht.png
2-1_Neues-Projekt.png2-1_Neues-Projekt.png
2_Projekte.png2_Projekte.png
1-1_Tags.png1-1_Tags.png
1_Main.png1_Main.png
4-1_Kommentieren.png4-1_Kommentieren.png
5_Neue-Idee-1.png5_Neue-Idee-1.png
6_Neue-Idee-3.png6_Neue-Idee-3.png

3 | Klangbild

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

Umsetzung Meine Tonaufnahme entstand an einem der vielen Regentage im Mai. Es sind Regen, einzelne Tropfen, Vogelgezwitscher und Windböen zu hören.

Entsprechend dem repräsentativ schlechtem Wetter im Mai erfolgte die Farbwahl. Um die unterschiedlichen Elemente zu differenzieren, wies ich ihnen Formen zu. Regen sowie Tropfen, die auf Gegenstände prasselten, sind Kreise, Windböen werden durch Balken dargestellt und das Vogelgezwitscher durch die Raute. Die Lautstärke ist an der Waveform orientiert.

klangbild.jpgklangbild.jpg

4 | 1000 Worte

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

Umsetzung Diese Aufgabe ist in Zusammenarbeit mit David Brandau entstanden. Wir entschieden uns, die Entstehung von Honig in einem Schaubild darzustellen, da die Honigproduktion zur Zeit einen Wandel erlebt. In ländlichen Gegenden werden vermehrt Pestizide auf Feldern eingesetzt, die den Lebensraum der Bienen stark einschränken. In Städten hingegen finden die Bienen mehr unbelastete Pflanzen. Allein in Berlin gibt es inzwischen fast 3500 Bienenvölker und die Zahl der Stadtimker ist in den letzten Jahren um 50% gestiegen.

Es werden alle Arbeitsschritte vom Sammeln des Nektars durch die Bienen bis zum abgefüllten Honig beschrieben.

vom nektar zum honig_skizze.pngvom nektar zum honig_skizze.png

honigproduktion_adina_david_1000worte.pnghonigproduktion_adina_david_1000worte.png

Fazit

In dem Kurs wird eine Fülle an Informationen zu den grundlegenden Fragestellungen des Interfacedesigns vermittelt. Aus dem Theorieteil resultierte eine Aufgabe, dessen Umsetzung im Kurs präsentiert und diskutiert wurde. Durch die Interaktion mit den anderen Kursteilnehmern sowie die konstruktive Kritik von Prof. Boris Müller ließen sich erste Ideen konkretisieren und ausbauen.

Für mich ein sehr wertvoller Kurs, in dem man stets gefordert aber auch gefördert wird.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2013