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

Basic Interface

Im Kurs Basic Interface von Boris Müller ging es um die grundlegenden Fertigkeiten im Umgang mit Abstraktionen, Screen Typografie, einfachen Graphical User Interfaces sowie der Datenvisualisierung. Der Kurs bietet einen perfekten Überblick über das große Themengebiet des Interfacedesign und lädt mit ansprechenden und kompakten Vorträgen dazu ein sich weiter mit dem so unendlich großen Thema zu befassen.

Fraktur mon Amour – Das Digitales Buch

240 x 320 Pixel (QVGA)

Artboard Copy 5.pngArtboard Copy 5.png
Artboard.pngArtboard.png
Artboard Copy 3.pngArtboard Copy 3.png
Artboard Copy 10.pngArtboard Copy 10.png
Artboard Copy 11.pngArtboard Copy 11.png
Artboard Copy 15.pngArtboard Copy 15.png
Artboard Copy 2.pngArtboard Copy 2.png
Artboard Copy 13.pngArtboard Copy 13.png
Artboard Copy 14.pngArtboard Copy 14.png
Artboard Copy 12.pngArtboard Copy 12.png

1024 x 768 Pixel (XGA)

Tablet Copy 9.pngTablet Copy 9.png
Tablet Copy 2.pngTablet Copy 2.png
Tablet Copy 4.pngTablet Copy 4.png
Tablet Copy 5.pngTablet Copy 5.png
Tablet Copy 20.pngTablet Copy 20.png
Tablet Copy 17.pngTablet Copy 17.png
Tablet Copy 12.pngTablet Copy 12.png
Tablet Copy 18.pngTablet Copy 18.png
Tablet Copy 19.pngTablet Copy 19.png
Tablet Copy 6.pngTablet Copy 6.png
Tablet Copy 10.pngTablet Copy 10.png

Eine digitale Version eines Buches zu erstellen klingt vielleicht nicht nach der innovativen UI Challange die man in diesem Kurs vermutet. Allerdings so einfach und langweilig es auch klingen mag, steckt der Täufel doch bei dieser Aufgabe im Detail. Um genau zu sein – im typografischen Detail. Denn wie man mit Schrift in der digitalen Welt umzugehen hat, sodass diese für die verschiedensten Formate auch gut lesbar ist, dass lernt man durch diese Aufgabe sehr gut.

Zusammen mit meiner Teampartnerin Antonia entschieden wir uns für das Buch Fraktur mon Amour – eine typografische Liebeserklärung der ehemaligen FH;P Studentin Judith Schalansky.

Das dies keine einfach Aufgabe werden wird, diesem typograisch exzellent ausgearbeiteten Klassikers, in digitaler Form gerecht zu werden, darüber waren wir uns im Klaren. Gewachsen sind wir aber beide an dieser Aufgabe.

Die Farbgebung wurde an das Buch angepasst. Schwarz und Pink waren also unsere primären Farben. Die Geradlinigkeit und Klarheit der „open sans“ steht im starken Kontrast zur Fraktur und sollte desshalb unsere Copy Schrift werden. Mit verschiedenen Schnitten war es einfach klare Hirarchien zu vermitteln. Als Auszeichnungsschrift wählten wir die imposante „Fette Fraktur“. Kleinere Spielereien wie ein pinkes Initial rundeten den modernen Charakter ab.

Typeland – Graphical User Interface

2_typeland.png2_typeland.png
3_typeland.png3_typeland.png
1_typeland.png1_typeland.png
4_typeland.png4_typeland.png
8_typeland.png8_typeland.png
5_typeland.png5_typeland.png
6_typeland.png6_typeland.png
9_typeland.png9_typeland.png
7_typeland.png7_typeland.png
10_typeland.png10_typeland.png
11_typeland.png11_typeland.png

Die Aufgabe war es eine Inspirations App zu entwickeln, die entweder nach den Human Interface Guidelines von iOS oder den Material Design Guidelines von Android konstruiert wird. Der Prototyp wurde in Sketch gebaut und mit Hilfe der von Apple gestellten iOS UI Templates, konnte man schnell seine Ideen visualisieren.

Die App Typeland soll inspirieren und animieren sich durch einen spielerischen Ansatz mit Typografie auseinander zu setzen. Aufgeteilt ist Typeland in drei Sparten. TYPEland, TYPEmini und TYPElexi.

TYPEland: Hier findet man eine Welt durch die man sich spielerisch durchkämpfen kann. Es geht von Punkt zu Punkt und hinter jedem Feld verbergen sich zu einem bestimmten typografischen Thema Spiele, durch die man den Umgang mit Typografie lernt.

TYPEmini: Minigames lassen die App auch nach vollständigem durchspielen des TYPElands interessant bleiben und so ist sie durch eventuelle Updates skalierbar. 

TYPElexi: Hier kann der Nutzer der App jederzeit rund ums Thema Typografie nachschlagen.

Fiftynine seconds of sound – Klangbild

Jeder im Kurs hatte die Aufgabe eine 60 sekündige Ton Aufnahme zu erstellen. Die Audiodateien wurden anschließend randomisiert. Nicht wissend von wem sie sind oder was diesen Sound erzeugte, sollten wir die Audio-Aufnahme in eine visuelle Form bringen.

Stunden über Stunden verzweifelte ich an dieser Aufgabe. Bis ich endlich eine Bildsprache gefunden hatte die in meinen Augen den Sound anschaulich visualisiert, hat es einige Iterationen und viel Frustration gebraucht. Schlussendlich habe ich jedoch eine Form gefunden die mich zufrieden stellt.

Da der Kurs nur online stattfand und ich dementsprechend die Visualisierung nicht ausdrucken konnte wie ich es eigentlich geplant hatte erstellte ich ein Video.

How to vinyl – 1000 Worte

HowtoBeatmatchpng.pngHowtoBeatmatchpng.png

Wie schafft man es in einer Infografik ohne Worte einen komplexen Sachverhalt anschaulich darzustellen?

Ich entschied mich dazu zeigen zu wollen, wie man mit Vinyl auflegt. Vom Platten auflegen, hin zum Beatmatching, bei dem es darauf ankommt die beiden Tracks in der Geschwindigkeit und in den Phasen aufeinander abzustimmen, hin zum ein und ausfaden.

Fazit

Sehr zu empfehlen für jeden Design Studierenden der FH;P.
Klar strukturierter Zeitplan – sehr interessante Vorträge – klar formuliertes und konstruktives Feedback!

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 20|01

Entstehungszeitraum

Wintersemester 2020 / 2021

Keywords