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 Interfacedesign

Dieser Kurs dient als Einstieg in den großen Bereich des Interface Designs. Aus diesem Grund habend wir nicht wie sonst üblich eine große Aufgabe bekommen, sondern vier kleiner, für die wir in der Regel 2 bis 3 Wochen Zeit hatten.

1. AUFGABE: DIGITALES BUCH

Digitalisieren sie ein Buch mithilfe der Prototyp Tools Sketch oder auch Adobe XD. Erstellen sie Screens in zwei verschiedenen Größen und Auflösungen, einem kleineren Format und einem Größeren. Legen sie einen Fokus auf die verwendete Schriftart und wie sie im Raum angeordnet ist.

Recherche

Valentin Leiber und ich haben uns für das Buch „The Politics of Design“ von Ruben Pater entschieden. Die Besonderheit an dem Buch, sind die kurzen Einblicke in verschiedene Themenbereiche. Auf fast jeder Seite wird ein neues Thema angesprochen, beziehungsweise nur kurz angerissen. Da Bilder in dem Buch ein wichtiges Element darstellen, wird auf manchen Seiten ganz und gar auf Text verzichtet, oder eben auch nur eine Bildunterschrift dazugesetzt. Wir wollten die Essenz des Buches aufgreifen und die Bilder als klares Designelement verwenden. Beim genaueren Hinsehen sind wir zu einer wichtigen Erkenntnis gekommen, fast jedes Thema beinhaltet ausschließlich zwei Bilder.

Buch Cover klein.jpgBuch Cover klein.jpg

Formsprache

In vielen Screen Designs werden horizontale oder vertikale Linien verwendet, um den Raum klar zu strukturieren, diese Strukturierung ist notwendig, damit der Betrachter klare Sinnabschnitte erkennen kann. Wir entschieden uns auch für eine Linie als Raumtrennung, die jedoch nicht vertikal oder horizontal, sondern diagonal verlaufen sollte. Das Resultat ist ein deutlich dynamischeres und lebendigeres Design. Da sich alle Objekte an der diagonalen Linie orientieren wirkt die Anordnung, trotz der Dynamik im Design, immer noch strukturiert und aufgeräumt.

Wie ich weiter oben schon beschrieben habe, ist uns aufgefallen das fast jedes Thema zwei Bilder beinhaltet, diese Erkenntnis wollten wir nutzen, weshalb wir bei jedem Thema, also jeder Seite, zwei Plätze für Bilder gelassen haben. Die Diagonale dient so als Abtrennung zwischen den Bildern und dem Text. Den Menüreiter mit den Themenbereichen haben wir ebenfalls auf die rechte Seite gesetzt, damit auf der linken Seite nur der Fließtext, sowie die Überschrift steht.

01_START.png01_START.png
03_START 2.png03_START 2.png
Screen 1 Mockup.pngScreen 1 Mockup.png
05_SMALL START.png05_SMALL START.png
06_SMALL PICTURES.png06_SMALL PICTURES.png
07_SMALL MENUE.png07_SMALL MENUE.png

Schrift

Für die Überschriften der einzelnen Themen, haben wir die Futura Bold genommen, da sich eine serifenlose Schrift gut für Headlines eignet. Den Fließtext setzten wir dann in der Serifen Schrift von Google (Roboto Slab). Diese Schrift eignet sich zum einen hervorragend für Fließtext und zum anderen ist sie für Monitore optimiert.

Funktionsweise

Die Vorteile an einem Touchscreen sind klar erkennbar, man kann mit ihm durch einfaches Wischen oder andere Gesten interagieren, was oft intuitiver ist als mit der Maus am Computer. Unser digitales Buch ist also voll von Wischgesten, die es uns ermöglicht haben, viele schöne Funktionen einzubauen. Die Bilder am rechten Bildschirmrand sind ausziehbar wie eine Schublade, in der die Bildunterschriften versteckt sind. Das Menü lässt sich ebenfalls herausziehen, wodurch man zur Themenübersicht gelangt.

02_SWIPE MENÜ.png02_SWIPE MENÜ.png
04_SWIPE PICTURE 2.png04_SWIPE PICTURE 2.png
Screen 2 Mockup.pngScreen 2 Mockup.png

Kennwort: Buch

2. AUFGABE: KLANGBILD

Erstellen sie anhand eines aufgenommenen Geräusches ein Klangbild. Dieses kann sowohl statisch als auch bewegt sein.

Ideenfindung

Die zweite Aufgabe war deutlich freier angelegt als die erste, lediglich die Geräusche wurden mithilfe eines Zufallsverfahren unter den Kursteilnehmer*innen aufgeteilt. Diese Freiheit machte mir anfangs ziemlich zu schaffen, jedoch war zu Beginn schon klar, dass ich eine Animation in After Effects erstellen wollte.

Mir hilft es oft eine Liste zu machen, mit den Sachen die ich gerne in dem Projekt, beziehungsweise der Aufgabe, realisieren will. Mein erster Punkt auf der Liste bezog sich auf den After Effects Kurs, den ich im ersten Semester belegt habe. Ich wollte meine Fähigkeiten ein bisschen erweitern und mit Effekten jeglicher Art herumspielen. Was macht der Effekt Verzerren, oder was ist Rauschen und wie kann ich die Parameter ändern. Der zweite Punkt auf meiner Liste war das Morphen eines Objektes, also wie kann ich mithilfe eines einzigen Objektes verschiedene Sachen darstellen.

Formsprache/Funktionsweise

Die Formsprache meines Klangbildes ergibt sich aus den beiden Punkten meiner kleinen Liste. Ein Ball, der auf und ab schwebt, um die Hintergrundgeräusche darzustellen und sich je nachdem welches Geräusch gerade zu hören ist, in der Form und Beschaffenheit ändert. Besonders gut ist mir das bei den Fahrradklingeln gelungen, hier stimmt zum einen das Timing perfekt, und zum anderen passt die Wellenbewegung sehr gut zum Geräusch.

3. AUFGABE: INSPIRATIONS APP

Recherche

Diese Aufgabe habe ich mit Coline zusammen gemacht.

Coline und ich hatten unterschiedliche Ansätze die Recherche zu beginnen. Ihr erster Schritt war es, im Internet nach bestehenden Inspirations Apps zu suchen und sich anhand der verschiedenen Apps inspirieren zu lassen. Besonders die Internetseite Mix hat es ihr angetan, hier kann man sich verschiedene Topics aussuchen, woraufhin die App dann das Internet durchsucht und Bilder, Artikel oder auch Bücher zu dem Thema findet. Anschließend ist man dazu eingeladen durch diese Auswahl zu „schlendern“ und sich inspirieren zu lassen. Da ich schon relativ schnell eine interessante Idee zu der Bedienung einer Inspirations App hatte, verfolgt ich diese erst einmal und fing an Skizzen sowie erste Entwürfe zu erstellen. Ich wollte eine Inspirations App entwerfen, in der man durch ein 3D Labyrinth läuft und sich so über verschiedene Themen informiert. Anschließend haben wir uns beide zusammengesetzt und relativ schnell gemerkt das unsere beiden Ansätze gut zusammen funktionieren.

1. Entwurf.png1. Entwurf.png
Scan.jpegScan.jpeg

Prototyp

Inspiration durch Gamification, ein einfacher Vorsatz. Inspiration sollte Spaß machen und eine Erfahrung sein, zudem sollte das soeben gesehene, durch eine Assoziation, im Kopf bleiben. Ich selber bin eine Person, die sich bildliche Sachen deutlich besser merken kann als geschriebene Sachen. So kann ich mir zum Beispiel einen kompletten Weg durch die Stadt merken, wenn man mich jedoch fragt durch welche Straßen ich gelaufen bin, kann ich diese Frage nicht beantworten. Und genau dieses Lernsystem sollte sie App beinhalten.

Der Ablauf ist dann wie folgt. Zuerst werden verschiedene Topics aus einem Pool ausgewählt, die App erstellt dann aus der Auswahl ein virtuelles Labyrinth, dass mit verschiedenen Artikeln, Bildern oder auch Büchern bestückt ist. Diese Elemente, hängen dann wie Bilderrahmen an den Wänden und können begutachtet werden. Möchte man zusätzliche Information erlangen, stellt man sich mit Hilfe des Steuerkreuzes direkt davor und tippt mit dem Finger drauf. Wenn der beispielsweise der Artikel interessant war, kann man auf das Plus drücken und den Artikel so zur Bibliothek hinzufügen. Ist man fertig mit dem Labyrinth, oder hat einfach keine Lust mehr, geht man zurück zum Homebildschirm der App. Die gespeicherten Inhalte könne dann jeder Zeit wieder in der Bibliothek aufgerufen werden.

Kennwort: Maze

Topic Screen 1.pngTopic Screen 1.png
Topic Screen 2.pngTopic Screen 2.png
App Logo.jpegApp Logo.jpeg
Maze Screen.pngMaze Screen.png
Maze Screen 1.pngMaze Screen 1.png
Maze Screen2.pngMaze Screen2.png
Library.jpegLibrary.jpeg

Topic Screen 2.pngTopic Screen 2.png
Topic Screen 1.pngTopic Screen 1.png
Maze Screen.pngMaze Screen.png
Roboter Love.pngRoboter Love.png
Food Trends.pngFood Trends.png

Kennwort: Maze

4. AUFGABE: 1000 WÖRTER

Einmal keine Wörter benutzen, war die letzte der Vier Aufgaben. Wir sollten einen komplexen Ablauf nur mit Piktogrammen, oder anderen Formen erläutern, ohne auch nur ein Wort zu verwenden.

Recherche

Zu aller erst habe ich nach einem passenden Thema gesucht, ein Thema das ausreichend komplex ist und mir persönlich gut gefällt. Da ich mich in einem anderen Kurs mit dem Mars und den Firmen, die dort hinwollen beschäftigt habe, fiel die Wahl auf einen Raketenstart im Allgemeinen. Natürlich war es naheliegend sich erstmal mit der Fima auseinanderzusetzen, die den Weltraum für jede Person auf dem Planeten Erde ermöglichen will, SpaceX. Eine Firma, gegründet von Elon Musk, die das Reisen in den Weltraum kosteneffizienter gestalten will und mithilfe von wiederverwendbaren Boostern eine ganz neue Schiene fährt.

Aber wie viel Geld wird den nun wirklich eingespart, wenn man einen Booster nicht nur einmal verwendet, sondern gleich 100 Mal, wie es Elon Musk in der Zukunft anstrebt? 

Um diese Frage zu beantworten habe ich mir verschiedene Raketentypen angesehen und die Kosten bei einem Start miteinander verglichen. Dabei ist mir aufgefallen, dass alle anderen Raketen, wie zum Beispiel die Ariane 5 oder die Atlas 5, nicht nur um ein vielfaches teurer in der Produktion sind, sondern zudem auch noch weniger transportieren können, als die Falcon 9 von SpaceX. Elon Musk, hat mit seiner Firma SpaceX, also tatsächlich momentan die Nase vorn. Es bleibt jedoch abzuwarten, denn mit der Firma Blue Origin hat Elon Musk Konkurrenz bekommen in Form von Jeff Bezos, dem CEO von Amazon.

Raketen Fakten.pdf PDF Raketen Fakten.pdf

Formsprache

Um den technischen Aspekt im Design gut wieder spiegeln zu können, habe ich mich für ein Design entschieden, das an eine technische Zeichnung angelehnt ist. Die Raketen sind anhand der Originale maßstabsgetreu in einer 2D Seitenansicht nachgebaut. Sie bestehen lediglich aus einer Farbe, wobei durch die Konturen die Details und die unterschiedlichen Bauteile dargestellt werden.

Für die Informationen habe ich eine neue Ebene erstellt, die wie beim Material Design von Google durch einen Schlagschatten von dem darunter liegenden Objekt abgehoben wird. So entsteht ein 3D Effekt, der inspiriert ist von übereinander liegenden Papier Blättern. Ich habe viel darüber nachgedacht, wie ich die Tragelast der Raketen darstellen kann. Es sollte ein Objekt sein, dass zum einen Jede*r kennt und zum anderen Jede*r ungefähr sagen kann wie viel es wiegt. Passend zu Elon Musk, habe ich mir ein Auto ausgesucht, genauer gesagt das Model S von Tesla. Dieses ist, wie die Raketen, Maßstabsgetreu nachgebaut und wiegt praktischer weise aufgerundet 2000kg.

Raketen.pdf PDF Raketen.pdf

FAZIT

Mir hat dieser Kurs sehr viel Spaß gemacht, gerade auch weil man so viel Abwechslung mit den Aufgaben hatte. Jede Aufgabe hatte seine Berechtigung und hat uns wieder einen neuen Aspekt des Interface Designs gezeigt. Mir persönlich hat die erste sowie auch die letzte Aufgabe besonders gut gefallen. Dieser Kurs hat mir auf jeden Fall Lust auf mehr Interface Kurse gemacht, ich bin mal gespannt was mich da so in den nächsten Semestern erwartet.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 19|01

Entstehungszeitraum

Sommersemester 2019