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 Design - Robin Marx

1. Digitales Buch

JustKidsEntwurfBrille2.pngJustKidsEntwurfBrille2.png

Die erste Aufgabe bestritt ich gemeinsam mit Joseph Ribbe.  Es galt, ein digitale Fassung eines Buches zu gestalten – wir befassten uns dabei mit dem biografischen Werk „Just Kids“ von Patti Smith.

Nach einem holprigen ersten Anlauf entschieden wir uns für ein dunkles, klares Design, das leicht an ein Skizzenbuch angelehnt ist. Die Umkehrung von weiß auf schwarz sollte den Rock’n’Roll-Charakter darstellen und die Persönlichkeit Smiths widerspiegeln. 

Wir haben insgesamt drei verschiedene Fonts benutzt, MinionPro (reg.) für den Fließtext, Shady Lane für Kapitel-Überschriften und -zahlen sowie Buttons und Myriad Pro (ital.) für Seitenzahlen.  Nach langer Suche nach passenden Buttons habe ich dann selbst welche gestaltet, die mit dem gekribbelten Stil der Shady Lane korrespondieren. 

Die Aufgabe war ziemlich spannend für mich, erst war ich etwas blockiert – huch Screen, noch nie gemacht! – aber nach dem Anstoß ist es schon besser gelaufen. Ans pixelgenaue Arbeiten auf dem sehr kleinen Screen und dem anschließenden Überprüfen im exportierten PNGs mussten wir uns auch gewöhnen und immer wieder ein bißchen umstellen, bis es passte.

JK29.4.2.pngJK29.4.2.png
JK29.4.3.pngJK29.4.3.png
Small 1.pngSmall 1.png
Small 2.pngSmall 2.png
Small 3.pngSmall 3.png
Small 4.pngSmall 4.png
Small3 Kopie.pngSmall3 Kopie.png

2. Klangbild

Bei der Klangbildaufgabe habe ich ein Stück aus der Deutschlandradio-Kolumne “Wurfsendung” verwendet.  „Vögelbox“ ist ein Mix aus Vogelgezwitscher und Beatbox.

FullSizeRender.jpgFullSizeRender.jpg

Vorskizzen zur Animation in After Effects

Der Animation liegt ein einfaches analoges System zugrunde: Ich habe den verschiedenen Tonhöhen Gesichter gegeben, die die Töne charakterisieren sollen; so ist zB. der tiefe Ton ein dicker Vogel, der hohe ein Küken. Für die einzelnen „Beatboxschnipsel“ habe ich mir kurze Sequenzen öfter angehört und dabei Linien auf ein Schmierblatt gezogen. Wenn ich den Sound in der Linie wiederkannte, habe ich diesen Teil in After Effects angelegt – so hat sich der Film Stück für Stück zusammengesetzt.

Bildschirmfoto 2015-10-01 um 18.14.02.pngBildschirmfoto 2015-10-01 um 18.14.02.png

Zerlegung eines Charakters zur Animation.

Im Nachhinein würde ich mich für ein anderes Stück entscheiden, denn der ganze Sound war extrem schnell – gern hätte ich mehr detailreiche Animationen erstellt, wie am Ende. Allerdings ging alles Schlag auf Schlag, sodass nur sehr grobe Bewegungen passten.  

3. GUI

mockupGedankenspinner.pngmockupGedankenspinner.png

Bei der GUI-Aufgabe haben ich wieder mit Joseph Ribbe zusammengearbeitet.  Die grundlegende Idee zu unserer App war das japanische Shiritori-Spiel. Dabei werden Wörter aneinandergereiht, wobei das neue Wort mit dem letzten Buchstaben des vorangegangen beginnen muss (z.B. Kaffee – Ente – erniedrigend – Dorf – Freundschaft – Tachometer – Reise …)

Dadurch soll erreicht werden, dass man spielerisch und unbefangen an ein Thema herantritt. Anders als beim klassischen Brainstorming bleibt man nicht bei den ersten Einfällen und vertieft diese.

SkrizzeGedankenstream.jpegSkrizzeGedankenstream.jpeg

Entwurfsskizzen

Der Idee die passende Form zu geben, war schwierig.   Was in der Einführung zum GUI so gut erklärt wurde, nämlich, dass beim Interfacedesign (im Gegensatz zum herkömmlichen Design) das Produkt nichts über die Funktionsweise aussagt. Deswegen müssen Apps selbsterklärend gestaltet sein.  Wir versuchten also unsere Idee simpel aufzubauen, aber trotzdem zwei verschiedene Modi zu integrieren, um das Nutzen der App etwas raffinierter zu machen.

1.png1.png
2.png2.png
3.png3.png
4.jpg4.jpg
5.png5.png
6.png6.png
7.png7.png

verschiedene Stadien der Gestaltung

Joseph und ich hatten während der Arbeit viele spannende, grobe Ansätze zur Gestaltung, aber diese dann in den Screen zu übersetzen, fiel uns schwer. Vielleicht lag es für mich auch daran, dass ich kaum Apps nutzte.   Mit dem endgültigen Resultat bin ich trotzdem zufrieden. Durch klare Linie ist die Funktionsweise schon relativ gut erklärt und die Idee für die App an sich. 

g1.pngg1.png
g2.pngg2.png
g3.pngg3.png
g4.pngg4.png
g6.pngg6.png
g7.pngg7.png
g8.pngg8.png
g9.pngg9.png
g10.pngg10.png
g11.pngg11.png
g12.pngg12.png
g13.pngg13.png
g14.pngg14.png
g15.pngg15.png
g16.pngg16.png

Finale Screens

ProgrammflussGedankenspinner.jpgProgrammflussGedankenspinner.jpg

Programmfluss

1000 Worte

Bei der 1.000-Worte-Aufgabe habe ich mich mit dem Herstellungsprozess von Toilettenpapier beschäftigt. Bei der Recherche stieß ich auf ein Video aus der „Sendung mit der Maus“.  Ich scribbelte erst ein Schaubild und illustrierte dann mit Fineliner. Farben benutzte ich nur für die Darstellung des Wassers, des Holzes und zur Schattierung von Maschinen. 

Toitoitoi_ohnepapier.jpgToitoitoi_ohnepapier.jpg

Fazit

Im Basic-Interface-Kurs ging es bei mir besonders darum auszuloten, worin für mich die Vorteile von z.B. Brainstorming-Apps und E-Books stecken, im Vergleich zu den analogen Varianten, die ich persönlich immer vorziehe. Aber die zwei kreativen Aufgaben gaben dem Kurs Lockerheit und Raum zum Experimentieren.  Auch die Vorträge zum Einstieg in die einzelnen Aufgaben waren toll. Sie warfen in mir Fragen über Design-Geschichte und zukünftige Entwicklung auf.  Die Gruppendynamik war auch spannend zu sehen – wie gingen die einzelnen Typen mit den verschiedenen Aufgaben. Auch die Kritik zu den Projekten war anregend. 

Ich denke, dass mir die Teilnahme an diesem Kurs in Zukunft auch außerhalb des Interface-Bereichs helfen wird. Ich möchte auch deshalb auch im Hauptstudium den einen oder anderen Kurs in dieser Richtung belegen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Zugehöriger Workspace

Basics Interface 15|1

Entstehungszeitraum

Wintersemester 2015 / 2016