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

Grundlagen Visual Interfacedesign WS14/15 Moritz Riedl

Grundlagen Visual Interfacedesign WS14/15 Moritz Riedl

Dokumentation der Semesterbegleitenden Übungen.

1. Grundformen

Die Aufgabe bestand darin, Aufnahmen von Grundformen (Punkt, Linie, Ellipse und Polygon) aus dem „realen“ Umfeld zu Fotografieren.

IMG_0937.jpgIMG_0937.jpg
IMG_0939.jpgIMG_0939.jpg
IMG_0940.jpgIMG_0940.jpg
IMG_0943.jpgIMG_0943.jpg
IMG_0945.jpgIMG_0945.jpg
IMG_0946.JPGIMG_0946.JPG
IMG_0947.jpgIMG_0947.jpg

Für die Aufgabe musste ich mich nicht einmal extra auf die Suche machen, die Bilder sind auf meinem Weg von mir zu meinem Kumpel entstanden. Es war erstaunlich wie oft einem Grundformen im Alltag begegnen.

2. Interface Bedien- Elemente

Taps_Übersicht-02.jpgTaps_Übersicht-02.jpg
Taps_Übersicht-01.jpgTaps_Übersicht-01.jpg
Taps_Übersicht-03.jpgTaps_Übersicht-03.jpg
Taps_Übersicht-04.jpgTaps_Übersicht-04.jpg
Taps_Übersicht-05.jpgTaps_Übersicht-05.jpg

Es ging darum ein typisches Interface Element genauer zu betrachten und verschiedenen Anwendungsbeispiele zu zeigen. Ich habe mich für den TAP entschieden und diverse Lage und Form Beispiele aufgezeigt.

3. Interface Analyse eines Alltagsgerät

GameboyAnalyse.jpgGameboyAnalyse.jpg
GameboyAnalyse2.jpgGameboyAnalyse2.jpg
GameboyAnalyse3.jpgGameboyAnalyse3.jpg
GameboyAnalyse4.jpgGameboyAnalyse4.jpg
GameboyAnalyse5.jpgGameboyAnalyse5.jpg
GameboyAnalyse6.jpgGameboyAnalyse6.jpg
GameboyAnalyse7.jpgGameboyAnalyse7.jpg
GameboyAnalyse8.jpgGameboyAnalyse8.jpg
GameboyAnalyse9.jpgGameboyAnalyse9.jpg

Wir sollten ein Interface analysieren was sowohl über einen Bildschirm wie auch physische Knöpfe verfügt. Nach ausgiebiger Suche die von Scanner über Heizungsthermostat bis zur Mikrowelle verlief, stieß ich letztendlich auf meinen alten GAME BOY mit dem Spielklassiker TETRIS.

4. Informationsarchitektur

Hausaufgabe_Moritz_Riedl_2.jpgHausaufgabe_Moritz_Riedl_2.jpg

Nach der Analyse meines GAME BOY’s stand nun die Visualisierung der Informationsarchitektur an. Da TETRIS nicht allzu komplex ist, entschied ich mich mehr Aufwand in die Gestaltung zu stecken. Die Darstellungsvariante der Isometric Map nach Paul Kahn reizte mich besonders, mit ihr ist es möglich komplexe Informationsstrukturen übersichtlich, verständlich und optisch ansprechend darzustellen. Für die Umsetzung bin ich weg vom Digitalen, zu Stift, Pinsel und Papier.

5. Use Case

UseCase_Interfacedesign-01.pngUseCase_Interfacedesign-01.png

Hier zitiere ich einleitend Wikipedia zur Begriffserklärung use case:

„Ein Anwendungsfall (engl. use case) bündelt alle möglichen Szenarien, die eintreten können, wenn ein Akteur versucht, mit Hilfe des betrachteten Systems ein bestimmtes fachliches Ziel (engl. business goal) zu erreichen. Er beschreibt, was inhaltlich beim Versuch der Zielerreichung passieren kann und abstrahiert von konkreten technischen Lösungen. Das Ergebnis des Anwendungsfalls kann ein Erfolg oder Fehlschlag/Abbruch sein.“

Da TETRIS nur einen Use Case hat und der ist Unterhaltung, wurde mir diese Aufgabe sehr leicht gemacht, ich wollte trotzdem etwas schönes darstellen und so zeigt mein Use Case wie Fred mit Hilfe eines GAME BOY’s unterhalten wird. In dem simplen Ablauf ist die einfache Bedienungsanleitung für einen GAME BOY enthalten.

6. Redesign TETRIS

Tetris_Plakat-02-02.jpgTetris_Plakat-02-02.jpg

Die Abschluss Aufgabe bestand darin den von uns gezeigten Use Case zu überarbeiten. Hier stand ich ein weiteres mal vor einem Problem. Jegliche Änderung von TETRIS würde aus dem Spiel ein anderes machen und wär somit nicht mehr TETRIS.

Das heißt das einzige das ich ändern konnte war die Optik, da mir das aber zu wenig war habe ich mir eine Konzept für eine art Add-on überlegt welche die Spielmechanik beibehält aber dem Spieler ermöglicht ein individuelles Wallpaper zu schaffen.

“Tetris your Pattern” Der Spieler kann zu beginn des Spiels die Form und Farbe seiner sieben TETRIS Steine wählen, hier steht ihm die komplette Palette der visuellen Variablen nach Jacques Bertin zur Auswahl: Helligkeit, Farbe, Form, Größe und Muster. Die Richtung fällt weg da die Steine immer im gleichen Raster fallen. Ist jedem Stein eine Variable plus Farbe zugewiesen kann der Spieler mit dem Spiel beginnen, nun wird jede vervollständigte Reihe nicht nur im Spiel weggelöscht, sondern auch auf dem Wallpaper angeordnet so “erTetrist“ sich der Spieler sein ganz individuelles Wallpaper / Bild, je länger das Spiel dauert um so kleinteiliger wird das Wallpaper, was dazu führt das der Spieler nicht nur nach dem nächsten Highscore jagt sondern auch nach einem besonders kleinteiligen TETRIS Wallpaper.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Constanze Langer

Entstehungszeitraum

Wintersemester 2014 / 2015