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-Design WS 07/08 - Dokumentation

Basics Interface-Design WS 07/08 - Dokumentation

Interface Design bedeutet die Gestaltung von Benutzeroberflächen. Dabei steht die Interaktion zwischen Mensch und Computer im Vordergrund. In Betracht dessen, habe ich die vier Kursthemen „Tageszeitung“, „Videorekorder“, „Klangbild“ und „1000 Worte“umgesetzt.

ELQvDRaL.jpgELQvDRaL.jpg

Die Aufgabe

Die Aufgabe Tageszeitung bestand aus der Zerlegung der kleinsten, sinnvollsten Informationseinheiten der Vorderseite und ihre Aufreißer der zugehörigen Seiten. Die Informationen sollten auf einer Auflösung von 240 x 320 Pixel für mobile Geräte und einer Auflösung von 1024 x 768 Pixel für Bildschirme dargestellt werden.

Ich habe den Berliner Kurier gewählt. Diese Zeitung hat ein klares Raster, welches immer wieder durch die Fotografien gebrochen wird. Die Zielgruppe will unterhalten und weniger anspruchsvoll informiert werden, daher kommen viele Farben zur Gestaltung, Farbfotos und unterschiedliche Schriften und Schriftgrößen zum Einsatz.

Mit dieser Zielgruppe vor Augen, gestaltete ich den 240 x 320 Pixel großen Screen. Dieser sollte auf den ersten Blick zeigen, dass es sich um den Berliner Kurier handelt, daher habe ich das Raster, die Farben und verschiedenen Schriftgrößen übernommen. Die Headlines der Aufreißer mussten gekürzt werden und kurze Texte wurden komplett weggelassen. Es ist eine Hauptnavigationsleiste vorhanden, um auf weitere Artikel zu gelangen und über das klicken der Banner gelangt der User auf den dazugehörigen Artikel. Das ganze ist für einen Touchscreen entwickelt worden.

Bei der Umsetzung des Bildschirmes mit einer Auflösung von 1024 x 768 Pixel wollte ich eine andere Gruppe von Lesern erreichen, daher habe ich die Bilder reduziert und die Headlines und Subheadlines mit dem Anfang des Artikels erweitert. Als weiteres nutze ich eine Schrift in zwei Größen, welches die Seite ruhiger erscheinen lässt.

Berliner Kurier

AnalyseAnalyse
BildschirmformatBildschirmformat

ojji9fhx.jpg
ojji9fhx.jpgojji9fhx.jpg

Die Aufgabe

Ohne Knöpfe, Regler und Displays sind technische Geräte kaum vorstellbar. Jedoch sind unsere Möglichkeiten weitaus höher Bedienungsabläufe zu schaffen ohne auf diese Standards zurückzugreifen. So lautete die Aufgabe einen Videorekorder zu konzipieren, welcher möglichst dinghaft sein sollten und auf jegliche Displays und Knöpfe verzichten. Um Ideen zu sammeln schaute ich mich in meinem Haushalt um und fotografierte einige Elektrogeräte.

Eine Videorekorder- Zeitschleife

Ein VCR hat die Funktionen der Wiedergabe, Aufnahme, vorwärts Spulen, rückwärts Spulen und dem Stoppen. Ich nahm den Zugverkehr als Inspiration, wobei ich mich an den vorhanden Abläufen der Bahn orientierte. Eine Ampel diente als Stopp und Startoption, die Schranke war die Pause und schnelleres Vor- und Rückwärtsfahren gleicht dem Spulen. Ich reduzierte meine Idee und hatte für diese Bedienbereiche nur noch eine Bahnschleife, mit zwei Enden, worauf ein Wagon gesetzt wird. Die verschiedenen Wagons sind Sender, wie zum Beispiel Arte. Als weiteres gibt es ein Wagon mit dem man die Filme abspielt, der jeweilige Film wird als Ladung in den Wagon gesetzt.

Wiedergabe Der Wagon mit dem ausgewählten Film wird am linken Ende der Schleife auf die Gleise gesetzt in dem Moment fährt dieser los und spielt den Film ab.

Anhalten

Um die Pausenfunktion zu aktivieren, wird der Film aus dem Wagon geholt und beim erneuten hereinlegen läuft der Film an der zuletzt abgespielten Stelle weiter.

Vorwärts Spulen und rückwärts Spulen eines Films

Der Film kann vor- oder zurückgespult werden, indem mann den Wagon an eine andere Position setzt.

Aufnahme

Bevor ich meine gewünschte Sendung aufzeichnen kann, muss ich erstmal ausrechnen wie viele Stunden bis zum Start noch verbleiben, außer ich möchte in diesem Moment mit der Aufnahme starten. Wenn der Zeitraum zum Beispiel eine Stunde beträgt, lege ich in den linken Kreis 4 Schwellen, da eine Schwelle mit 15 Minuten kodiert wurden. Danach informiere ich mich über die Dauer meiner aufzuzeichnenden Sendung und lege dementsprechend viele Schwellen in den zweiten Kreis hinein. Nun kann ich den Wagon des entsprechenden Senders, in meinem Beispiel wäre das MTV, auf die Gleise setzten. Dieser fährt nun eine Stunde auf dem ersten Kreis und begibt sich dann auf den Zweiten und startet die Aufnahme.

VCR

1a.jpg1a.jpg
2.jpg2.jpg
3.jpg3.jpg
8.jpg8.jpg
4.jpg4.jpg

aI4nGO3i.jpgaI4nGO3i.jpg

Aufgabe

Die Aufgabe war es ein einminuetiges komplexes Geräusch zu visualisieren.

Meine Soundanalyse vollzog ich an dem Stück von „Afrika Bambaataa“ mit dem Titel „Planet Rock“. Ich wählte den Beginn des Tracks, da dieser mit Sprechgesang von Afrika Bambaataa, und einer jubelnden Menge beginnt und der Beat verzögert einsetzt. Der, durch einen Synthesizer erzeugten, metallischen Effekt und Schall im Rap, habe ich durch Zahnräder in Sprechblasenform dargestellt, die den Text beinhalten. Die darunter liegenden Textblasen sind nach außenzugehend spitz, welches die Aufregung des Publikums verdeutlichen soll. Die horizontal verlaufende, leicht wie ein Bogen erscheinende Form startet mit dem Einsatz des Beats und verschmälert sich, da der Ton sehr laut einsetzt und ausklingt. Die Baseline ähnelt einem umgedrehten Tropfen, weil der Ton sich innerhalb seines Auftretens leicht verändert. Im Gesammten ziehen sich die umgedrehten Tropfen durch den Track, wie eine Sprungfeder, da das Element für welches es steht, sehr viel Energie „Sprung“ ausstrahlt und die Baseline in dem kompletten Song nicht aussetzt. Die Sprechblasen, in denen die Texte der Rapper sich befinden, sind unterschiedlich hoch angeordnet, wobei jeder von ihnen einer Zeile zugeordnet ist. Die Blase reicht über beide Zeile, wenn sie beide den gleichen Text rappen. Das Bild ist chronologisch in Leserichtung angelegt.

cWXyiNia.jpgcWXyiNia.jpg

b6OMsRG7.jpg
b6OMsRG7.jpgb6OMsRG7.jpg

Aufgabe

1000 Worte und doch keine Worte. Die Aufgabe bestand darin eine Anleitung oder einen Prozess darzustellen ohne Worte. Also einfach anschauen:

9nbXhgL6.jpg9nbXhgL6.jpg

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

SoSe 07 – WiSe 07 / 08

zusätzliches Material