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 Interfaces 18/2

Folgende vier Arbeiten sind im Rahmen des Kurses „Basics Interface 18|2“ unter Leitung von Prof. Boris Müller entstanden. Der Kurs hat vor allem die Grundlehre und das Verständniss für Interface Design in den Vordergrund gestellt. Zwischen jeder neuen Aufgabe wurde diese mit einer theoretischen Präsentation eingeführt, darauf folgten die praktischen Phasen.

Digitales Buch

Die erste Aufgabe war auch gleich eine Partneraufgabe um mit den anderen Kommilitonen besser in Kontakt treten zu können. Mein Partner war Jan Lindstedt. Wir sollten ein Buch raussuchen das uns gefällt und dieses in eine digitale Form bringen, dafür hatten wir zwei verschiedene Screen Größen vorgegeben:

Horizontal 1024 x 768 px Vertikal 240 x 320 px

Die Herausforderung lag vor allem bei der Typografie und Anordnung des Inhalts innerhalb der beiden Screens. Zu aller erst haben wir uns auf den Storm Rider Guide geeinigt und die Aufgabe so geteilt das Jan die große Version und ich die kleine mache. Es war für mich eine, zumindest am Anfang, schwierige Aufgabe überhaupt so viel Information innerhalb eines so kleinen Screens zu packen sodass am Ende alles ästhetisch und leserlich passt. Noch dazu kam meine nicht vorhandene Erfahrung mit dem Programm Sketch welches wir zum entwerfen benutzt haben. Im laufe der Aufgabe aber hat es immer mehr spaß gemacht und man ist sehr schnell in die Software rein gekommen.

Durch diese Übung habe ich gelernt wie wichtig Typografie eigentlich ist und wie man Layout innerhalb großen und kleinen Screens sinnvoll anordnen kann.

2 Klein.png2 Klein.png
1 Klein.png1 Klein.png
3 Klein.png3 Klein.png
4 Klein.png4 Klein.png
5 Klein.png5 Klein.png
7 Klein.png7 Klein.png
6 Klein.png6 Klein.png
Country Copy.pngCountry Copy.png
1Titel.png1Titel.png
Region.pngRegion.png
Surf Spot.pngSurf Spot.png

Klangbild

Die zweite Aufgabe war in Einzelarbeit zu bearbeiten, jeder von uns hat eine 30-90 Sekunden lange Tonspur bekommen welche wir frei Visuell wiedergeben sollten. Bei meinem Ton handelte es sich um eine Aufnahme aus einem Park in dem vor allem Vögel, Menschen(Gespräche) und zwei Autos zu hören waren, somit hab ich auch relativ schnell die Entscheidung getroffen nur auf diese drei Tonquellen zu achten. Mein erster Entwurf zeigt zwar schon vieles das ich in der Endgültigen Fassung mit einbringen werde jedoch hat sich die Darstellungsart als zu unpraktisch erwiesen. Die Idee war es die Töne in drei Ebenen übereinander darzustellen, damit sollte auch die Verworrenheit der ganzen Geräusche dargestellt werden. Im Grunde wurde es aber einfach nur unübersichtlich (noch mehr als der ganze Ton)

Klangbild 2.pdf PDF Klangbild 2.pdf

Meine Endgültige Umsetzung war dann ein kurzes Video in welchem ich die selben Formen wie schon in der oberen Darstellung nehme und sie alle über After Effects in drei Phasen übereinander animiere. Da es meine erste Nutzung dieses Programms war, war es für mich eine unglaublich schwierige Angelegenheit. Vor allem die Vögel waren extrem Zeitaufwendig zu animieren, man muss aber auch dazu sagen das es sicherlich einen einfacheren Weg gibt den ich aber zu diesem Zeitpunkt nicht kannte. Im großen und ganzen bin ich mit dem Ergebnis aber trotzdem zufrieden, es wurde noch Kritik zu den Gesprächen geäußert, da man diese evtl. pulsierend statt leicht drehend darstellen sollte.

Graphical User Interface

Die Vorletzte Aufgabe wurde wieder mit einem Partner bearbeitet, meiner war Jendrik Bradaczek. Dabei ging es darum eine Inspirations App für Designer zu entwerfen und zu gestalten. Die Herausforderung lag dabei eigene Ideen und Konzepte in die App mit ein zu bringen und sich trotzdem an den sog. UI Standards zu halten. Unsere erste Idee war es eine Art Projektbezogene MindMap zu entwerfen in welcher von Telefonnummern bis hin zu ganzen Moodboards abgelegt, bearbeitet und kommentiert werden können. Leider mussten wir nach den ersten Entwürfen feststellen das es sich dabei um ein Unterfangen handelt welches wir sehr unterschätzt haben, sowohl vom Arbeitsaufwand her als auch von der Zeit die man dafür investieren müsste. Schließlich haben wir uns dafür entschieden es auf das erstellen und speichern von Moodboards runter zu brechen. Um zu sehen in welchen UI Standards sich die App gut umsetzen lässt hab ich meine Entwürfe im Rahmen von Android und Jendrik seine in denen von Apple erstellt. Da wir beide aber ungleiche Fortschritte in der Umsetzung hatten, haben wir die Android Variante genommen und schließlich auch bei der Präsentation vorgestellt. Mir persönlich hat diese Aufgabe sehr viel spaß gemacht da man, im Gegensatz zu der Klangbild Aufgabe, wieder mehr im direkten Interface Design unterwegs war.

Moodboard Flow2.pdf PDF Moodboard Flow2.pdf

1000 Worte

Die letze Aufgabe, welche wieder in Einzelarbeit ausgeführt werden sollte, behandelte die Visualisierung von Abläufen, Sachverhalten oder Situationen mit einer gewissen Komplexität nur mit Hilfe von Symbolen/Icons/Zeichnungen und ohne Worten. Mein Thema für diese Aufgabe war der Aufbau der Deutschen Mauer. Zu aller erst musste ich eine günstige Perspektive wählen durch welche so viele Details wie nur möglich erkennbar sind, dafür habe ich die Iso-Perspektive gewählt. Zur Recherche habe ich mich in den Aufbau der Mauer rein gelesen und einige kurze Dokumentationen angesehen. Die komplette Umsetzung folgte über Adobe Illustrator. Ich hab darauf geachtet das alle Abläufe die vorkommen in max. 2 runden Fenstern wieder gegeben werden und leicht zu verstehen sind. Um die Optik, trotz der Darstellung eines Ortes an dem mehrere Menschen ihr Leben gelassen haben, weder zu steril noch zu bunt darzustellen hab ich mich für eher dunkle und erdfarbene Töne entscheiden, dazu kamen noch Details wie Schatten hinzu.

Mauer Modell.pngMauer Modell.png

Fazit

Da ich während des Kurses im ersten Semester für ID war, hat der Kurs durch das wissen von Prof. Boris Müller mir einen perfekten Einstieg in die Materien des Studiengangs gegeben. Die Aufgaben waren zum Großteil sehr gute Chancen um ein gewisses Grundverständnis zu erlangen und die Mischung aus Einzel- und Partnerarbeit hat mir gut geholfen sich selbst auch zu fördern. Die Vorlesungen waren jedesmal sehr interessant gestaltet auch wenn es manchmal leider nicht die Zeit gab danach evtl. durch Fragen oder Diskussionen tiefer rein zu kommen, dennoch sehr empfehlenswert. Im großen und ganzen bin ich mit dem Kurs wirklich sehr zufrieden.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 18|2

Entstehungszeitraum

Wintersemester 2018 / 2019