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 20|01

Basics Interface - ein interaktiver Grundlagenkurs mit hohem Praxisanteil.

In vier praktischen Übungen setzten wir uns mit den zentralen Themen des Interface Designs auseinander. Bei den einzelnen Aufgaben stand jeweils eines der Themen im Fokus: Screen-Design, grafische User-Interfaces, Visualisierung oder Semiotik.

Die ersten beiden Übungen sollten wir im Zweier-Team gestalten, die letzten beiden alleine. Pro Aufgabe hatten wir drei bis vier Wochen Zeit. Wöchentlich wurden die Arbeitsphasen im Videocall vorgestellt und diskutiert.

Thematische Vorlesungen zu den einzelnen Schwerpunkten standen als Videovorlesung zur Verfügung.

1. Digitales Buch „Der Selbstversorger Balkon“

Aufgabe:

Wir sollten ein Buch auswählen und dieses samt Navigationskonzept in eine digitale Fassung bringen. Das digitale Buch sollte exemplarisch anhand von mindestens vier Screens in zwei verschiedenen Formaten wiedergegeben werden – mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln und mindestens zwei vertikale Screens im Format von 240x320 Pixeln.

Idee: 

Lockdown und Frühlingsanfang – die Wahl fiel schnell auf das Buch „Der Selbstversorger Balkon“. Das Buch gibt Einsteigern einen guten Überblick was, wie und wann auf dem Balkon gepflanzt werden kann. Geeigneten Arten und Sorten werden mit Nährwert und Vitamingehalt beschrieben.

Während die Gliederung des Buches sehr logisch und klar ist, wirkte das Layout hingegen veraltet. Das Buch wurde bereits 2012 veröffentlicht.

Mit meiner Teampartnerin Laura Link entschieden wir das Screen-Design modern, ruhig und klar zu gestalten. Bei der Umsetzung lösten wir uns komplett von der Farb- und Typografiewelt des Buches. Konnten aber die Inhalte der einzelnen Kapitel und die Gliederung gut digital adaptieren.

Laura und ich haben unsere Ideen in kurzen Zoom-Sessions ausgetauscht. Jede arbeitete im nächsten Schritt Entwürfe einzeln aus, die wir dann wieder diskutierten. Elemente die wir beide gut fanden, übernahmen wir dann ins Design. Der Workflow war dadurch sehr effektiv und kreativ.

Das Feedback durch die Kursteilnehmenden und Prof. Müller hat uns in jeder Session sehr gut getan. So bekamen wir Klarheit an einigen Stellen und wussten in welche Richtung wir weiter arbeiten müssen – Stichwort: Kill your darlings.

Während wir bei dem ersten Entwurf zu viele Design-Ideen hatten, könnten wir uns bei der Weiterentwicklung auf einige Elemente fokussieren und diese konsequent durchspielen.

Nachdem wir unsere Design-Richtung und die einzelnen Elemente klar ausgearbeitet hatten, konnten wir beide Formate gut gestalten.

Umsetzung 

1024 x 768 px (XGA)

240 x 320 px (QVGA)

Digitale Tools: Zoom, Dropbox, Figma, Photoshop

2. Graphical User Interface (GUI) "All about the stitch"

Aufgabe: 

Wir sollten eine Inspirationsapp im Zweierteam entwerfen. Die App sollte Designer*innen helfen, Ideen zu entwickeln, unterstützen oder inspirieren. Die üblichen UI-Standards (iOS oder Android / Material Design) mussten beim Design der App befolgt werden. Ein Flowdiagramm sollte die Bewegungspfade durch die App veranschaulichen.

Idee: 

Museen, Nachhaltigkeit, Kultur – schlussendlich wurde es Sticken. Typologie und die alte Kulturtechnik Sticken haben schon über 100 Jahre eine lange und spannende Beziehung miteinander. 

So wollten meine Teampartnerin Mellisa Güzdün und ich mit der App „All about the stitch“, einen digitalen Ort kreieren in dem der/die User*innen Ideen sammeln, Tutorials anschauen und eigene Projekte anlegen können.

Umsetzung: 

Die Herausforderung für uns bestand darin, die Kern-Features logisch auszuarbeiten und dabei die iOS-Guidelines zu berücksichtigen.

Es war spannend, die einzelne Bausteine in unser Design zu implementieren und zu entscheiden, was an welcher Stelle funktioniert und was nicht. 

Auch hier war das wöchentliche Feedback durch unseren Kurs und Prof. Müller sehr wichtig und wertvoll.

Den Workflow aus der ersten Aufgabe konnten wir bei dieser Gruppenarbeit gut umsetzten. So dass wir zeitgerecht die einzelnen Screens gestalten und das Flowdiagramm entwickeln konnten.

Digitale Tools: Zoom, Figma, Miro

3. Klangbild "Ice, ice, ...."

Aufgabe: 

Es sollte eine aufgezeichnete akustische Begebenheit in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit sollte also für den Betrachter nachvollziehbar sein.

Idee: 

Der mir zugewiesene Klang rief in mir sofort ein ganz klares Bild von einer Eiswürfelmaschine im Betrieb hervor. 

So war der erste Entwurf auch eine bildliche Darstellung.

Im zweiten Schritt – inspiriert durch den Künstler XX – übersetzte ich die einzelnen Klang Geräusche in Farben und Formen.

Umsetzung: 

Die anfänglichen Quadrate entwickelte ich zu Strichen, die in ihrer Gesamtheit an einen Barcode anmuten.

Im nächsten Schritt musste ich die Dramaturgie des Klangs visuell einfangen. Um den Klang visuell erfahrbar zumachen, benötigt der/die Zuschauer*in Ankerpunkte als klare Zuordnungen der einzelnen Klänge. Dafür stellte ich die markantesten Töne besonders stark hervor.

Da diese Aufgabe individuell gelöst werden sollte, waren die Besprechung und Rückmeldung aus der Gruppe besonderes wichtig für die Bearbeitung dieser Aufgabe.

Digitale Tools: Figma

4. 1000 Worte

Aufgabe:

Es sollte ein komplexer Sachverhalt gesucht und in einem Schaubild dargestellt werden. Die Darstellung durfte keinerlei Text enthalten. Der Sachverhalt sollte möglichst deutlich und klar kommuniziert werden.

Idee: 

Die Vorfreude auf diese Aufgabe war bei mir sehr groß, die Frustration bei der Umsetzung leider auch. 

Das richtige Thema für die Visualisierung zu finden dauerte sehr lang und füllte sich nach der ersten Präsentation nicht 100% richtig an. Es ist mir nach mehreren Anläufen nicht gelungen, DYI-Anleitung für nachhaltige Reinigungsmittel ohne die Verwendung von Buchstaben, zu entwickeln.

Die Fruchtfliegenplage in unserer Wohnung bot letztendlich die notwendige Inspiration. So visualisierte ich diesen Sachverhalt: „Fruchtfliege, wie kommst du in meine Küche und wie werde ich dich wieder los?“

Umsetzung: 

Neben den inhaltlichen Fragen stellte auch die Umsetzungen eine größere Herausforderung dar als gedacht.

Gerne wollte ich die Gestaltung im SketchNote-Still machen. Allerdings nicht anlog, sondern digital. Das richtige Tool zu finden und mir das Programm anzueignen, kostete mich viel Zeit. 

Diese Zeit fehlte mir dann leider für den Finetuning. Ich hätte gern noch eine weitere Runde mit dem Blatt gedreht und das Feedback aus der Abschluss-Präsentation dringend gebraucht.

Digitale Tools: Procreate iPad

Fazit

Ein wunderbarer Start in die Interfacewelt. Durch den Kurs konnte ich viele hilfreiche und lehrreiche Erkenntnisse zu Gestaltungsregeln im Interface Design bekommen. 

Die praktischen Aufgaben waren schön unterschiedlich und jede auf ihre eigene Art und Weise fordernd und fördernd. Der praktische Ansatz führte dazu, das wir uns in jedes Thema schnell einarbeiten durften und experimentell an die Umsetzung setzen konnten.  

Die Gruppendynamik im Kurs war super. Das Feedback der Teilnehmenden und von Herr Müller stets konstruktiv und wertschätzend. 

Ich habe mich jede Woche aufs Neue auf das Design der anderen und die Rückmeldung zu unseren / meinen Entwürfen gefreut.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Projekt-Tagebuch

Entstehungszeitraum

Sommersemester 2020