BewerbungsPortfo lio

A u s ta u s c h s e m e s t e r F H P ot s d a m
Interface Design

In d i e s e m B e w e r b u n g s p o r t folio finden sich ausgewählte Arbeiten

au s d e n v e r g a n g e n e n S e mester n. V iele der Arbeiten beinha lten
V ideos als A b g a b e ma te r i a l i en , di es e werden al s L i n ks i ntegri ert .

Dies e Dok u m e n t a t i o n i st o nl i n e: h ttp:/ / www.x x x .x x x

S em es ter 1
Ges t a l t e r i s c h e G r u n d l a g en I - Bild s chirmtyp o g raf ie & Icon s
Volls tändig e D o k u m e n t a t i o n: h ttp:/ / s cr.bi / f C6 s j a

CAR2GO i P h o n e A p p l i k a t io n

Aufgabe
Für das sich zurzeit (2010) im Pilotstadium befindende Car2Go car sharing Projekt von der Daimler AG in Ulm/DE und
Austin/USA soll das Design einer iPhone Applikation entworfen werden, mit welcher man möglichst einfach eine
Spontanbuchung abwickeln kann. Spontanbuchung bedeutet, das Auto ab sofort für 15min zu buchen und somit für
sich selbst zu reservieren. Das Car2Go corporate design steht zur Verfügung.

Analyse
Angefangen mit dem Entwerfen des Struktogramms der Applikation begann sich die Grundidee rasch zu verfestigen.
Mit möglichst wenigen Schritten soll eine Spontanbuchung arrangiert werden können - zudem soll der Benutzer das
App nur bevor er in das Auto steigt benötigen - es soll also bewusst auf zuviele Features verzichtet werden. DasTool
soll ein in sich geschlossenes, kompaktes System bilden, welches als Werkzeug fungiert.
Das Design der Oberflächenelemente wurde auf nur wenige Teile reduziert, um möglichst nicht zu stark vom
vorgegebenen iPhone feeling abzuweichen, welches man sich als User unweigerlich gewohnt ist. Eine zu starke
Individualiserung der Steuerelemente würde zu unnötiger Ablenkung und Verwirrung führen.
S em es ter 1
Ges t a l t e r i s c h e G r u n d l a g en I - Zeichenmo d ule
Volls tändig e D o k u m e n t a t i o n: h ttp:/ / s cr.bi / h OT EOM

Mor ph ol o g i s c h e r K a s t e n

Morphologischer Kasten
Der morphologische Kasten ist eine systematisch analytische Kreativitätstechnik nach dem Schweizer Astrophysiker
Fritz Zwicky (1898– 1974). Die mehrdimensionale Matrix bildet das Kernstück der morphologischen Analyse.

Morphologische Analyse
Die morphologische Analyse ist eine kreative analytische Methode, um komplexe Problembereiche vollständig zu
erfassen und alle möglichen Lösungen vorurteilslos zu betrach- ten.

Prozess
Die ersten Versuche bzw. die ersten Zeichen endeten in sehr banalen Formen. Erst beim zweiten Anlauf des gesamten
Kastens entstanden interessanterere Zeichen. Das Folgen der Operationen durch den Kasten hindurch stellte sich
oftmals als schwierig heraus, weil ich mir immer wieder klarmachen musste, dass dieses Vorgehen rein systematisch
sein soll - ich versuchte fälschlicherweise oft zu direkten Ergebnissen zu kommen - nämlich sollen die beiden jeweils zur
Verfügung stehenden Parameter strikt genutzt werden und dies ist auch so als erster wichtiger Punkt anzusehen.
S em es ter 1
Indu st r i a l D e s i g n B a s i c s
Volls tändig e D o k u m e n t a t i o n: h ttp:/ / s cr.bi / i b5 l L h

Li gh t F or m s

Description
Exploring the relationship between and in- teraction with form and light. How can you change, shape and affect the light
embedded in an object? This was the most interesting excercise to me. I found myself captured entirely by the
challenge to invent and create a form which emits light and offers an affordance to interact with it in an interesting way.
The hardest part was the finding of an idea to work on. It took me about a whole day to finally come to a satisfying
concept. From then on everything went like clockwork. I used some industrial plastic tubes, cut them, sanded them
(especially the transparent part, so the light gets diffused by it), lasered the top and bottom covers, glued them and
finally soldered the electronics.

It‘s about a portable device which emits light either on a spot, like a spotlight, or disperses the light into the ambi- ence.
Pull out the upper tube to get more ambience light, push it in to get more spot-on light.

V ideo 3D Mo d e l l : h t t p : / / b i t .l y/ h tY Z3 7
S em es ter 1
Te c h n o l o g i s c h e G r u n d l a gen

Mu si c Vi d e o C l i p

Beschreibung
In diesem Modul bekamen wir eine Einführung in die 3D Gestaltung mittels der Software Cinema 4D. Durch viel
Eigeninitiative konnten wir innert kurzer Zeit rasch sebstständig entwerfen und rendern. Die gelernten Techniken sollten
sich füs uns aus vielerlei Hinsicht als nützlich erweisen, vor allem für die Erstellung von Prototypen in 3D.

Video End p ro d u k t : h t t p : / / bi t.l y/ g 2 ru j u

S em es ter 2
Ges t a l t e r i s c h e G r u n d l a g en II - Vis ual Dynamics
Volls tändig e D o k u m e n t a t i o n: h ttp:/ / s cr.bi / eJu f IT

Vi rtual Wa t e r

Aufgabenstellung
Mit dem Slogan „EXPLORE THE WORLD“ vor Augen sollte eine Touchscreen basierte Applikation, die auf eine Wand
projeziert werden sollte, entworfen werden, mit welcher der Benutzer mit von uns ausgewählten Daten interagie- ren
können sollte.

Die primäre Zielsetzung bestand also darin, eine Möglichkeit zu bieten, über Gesten durch die dargestellten
Informationen zu navigieren, aber auch diese auf eine interessante Art und Weise manipulieren zu können.
Es sollte Wert darauf gelegt werden, die Visualisierung so simpel und dadurch so verständlich wie möglich zu halten,
sowie auch die Interaktionsmöglichkeiten möglichst intuitiv zu gestalten. Der Umgang mit der Anwendung sollte
selbstverständlich und dadurch auch mit einem positiven Erlebnis verbunden sein. Das Vorgehen wurde so geplant,
dass als erstes die Recherche und Informationssuche getätigt werden sollte, bevor es mit der Konzipierungs- und
Entwurfsphase weitergehen und schlussendlich die finale Umsetzung in Form eines „Fakes“ erfolgen sollte. Dieser
„Fake“ sollte in Form eines Filmes den Sinn und Zweck, die Funktionsweise und die dazugehörigen Interaktionsgesten
aufzeigen und verständlich machen.

Video End p ro d u k t : h t t p : / / bit.ly/ h tYDyQ

S em es ter 2
We b U s e r I n t e r f a c e s
Volls tändig e D o k u m e n t a t i o n: h ttp:/ / s cr.bi / f 8 1 yGf

ht t p: //w w w. z h d k . c h R e d e s ig n

Aufgabenstellung
Die Problemstellung bestand darin, ein online Repositorium für die ZHdK zu entwerfen, über welches Studenten ihre
Arbeiten online stellen, an- deren zugänglich machen und auch archivieren können sollten. Mit dieser Aufgabe vor
Augen versuchten wir, unserem Konzept einen Fokus zu geben, indem wir einen spezifischen Teilaspekt einer solchen
Webapplikation näher betrachten und später speziell gewichten sollten.

Wir wählten dazu die Filtriermöglichkeit der Inhalte aus. Diese sollte nicht wie gewohnt durch ‚faceted search filter‘
geschehen, sondern durch einen ‚Mixer‘, mit welchem die Informationen über eine ‚haptischere‘, benutzernahere Art
ausgewählt werden können sollten. Durch das Ziehen und Draggen von Sildern sollten die Daten auf eine interessantere
Art und Weise filtriert, sortiert und angezeigt werden können.

Technologie
Anfangs bestand der technische Lösungsansatz darin, ein bestehendes CMS à la Drupal oder Wordpress zu
verwenden, da uns dies einen Vorsprung bezogen auf Funktion und bereits verwendbare Features verschafft hätte.
Nach weiterem Überlegen jedoch entschieden wir uns, unter anderem auch deswegen weil beim Endprodukt eher die
Veranschaulichung der Idee und des Konzepts statt dem Funktionieren im Vordergrund stehen sollte, die Umsetzung
über ‚statische‘ Seiten zu entwickeln. Zum Einsatz kamen die üblichen Standards XHTML, CSS, JavaScript/JQuery, etc.
Durch dieses Vorgehen konnte das geplante Design rasch und zweckmässig umgesetzt werden.

Video Scre e n c a s t ( s w i s s g e r ma n ) : h ttp:/ / bit.ly/ fu X X a U

S em es ter 3
Des i gn S t u d i o I - G r a p h i c al Us er Interf aces
Volls tändig e D o k u m e n t a t i o n: h ttp:/ / s cr.bi / g 5 2 KA h

Aufgabenstellung
Als Ausgangslage diente die aktuelle eMuseum Such-Webapplikation der ZHdK für Plakate http://sammlungen-
archive.zhdk.ch Diese technisch sowie ästhetisch sehr grundlegend gehaltene Suchmaschine diente uns als Grundlage
- nun sollte eine interessante Möglichkeit geschaffen werden, sich auf eine alternative Art und Weise durch das Archiv
dieser ca. 10‘000 Plakate hindurchzubewegen.

Als Endprodukt soll ein gut veranschaulichbarer

Prototyp der Anwendung entstehen. Dieser soll dem
Betrachter und Benutzer die zentralen Kernpunkte des
Konzepts präsentieren und begreiflich machen. Als
Technologie zur Realisierung wurde Adobe Flash bzw.
ActionScript 3 festgelegt.

Produkt
Unser Produkt ist eine Suchmaschine welche die Plakate über Tags, also dessen meta Daten, verwaltet, anzeigt,
miteinander verknüpft und somit die Möglichkeit schafft, gezielt nach einem Resultat zu suchen oder aber auch einfach
durch die Sammlung zu stöbern.

Hauptmerkmal ist jedoch die bewusst geschaffene Suchtechnik über Tags. Die Haptik der Interaktion mit den Tags
kommt bei deren Verwendung zur Geltung, wenn man durch ein Tag einen neuen Filter erzeugt, einen eigenen schafft
indem man ihn im dazu vorgesehenen Textfeld eingibt oder bestehende Filter löscht.

Das Resultat ist sehr anwendungsorientiert und bezieht sich in seiner Konzeption hauptsächlich auf seine Benutzung
als seriöses und funktionelles Werkzeug zu einem bestimmten Zweck. Gleichzeitig schafft es durch den spielerischen
Umgang mit denTags/Filtern eine einfaches und simples Image.
Zeitliche Einschränkungen liessen es uns nicht zu, das Projekt vollumfänglich abzuschliessen bzw. alle Funktionalitäten
in das Endprodukt einzubauen. Das Endresultat ist ein Prototyp.

Video Scre e n c a s t : h t t p : / / b it.ly/ fFe 0 Uq

S em es ter 3
Des i gn S t u d i o I I - Ta n g i b le Us er Interf aces
Volls tändig e D o k u m e n t a t i o n: h ttp:/ / bi t.l y/ g OF D Oi

Aufgabenstellung
Es sollte ein “Wesen” geschaffen werden, welches über frei wählbare “Sinnesorgane” die Umgebung wahrnimmt und
mit dem Benutzer interagiert. Ferner soll es einen “Charakter” besitzen und verschiedene Zustände darstellen können.

Konzept
Unser Projekt SHOEO handelt um einen
intelligenten Schuhabtreter mit Charakter.
SHOEO lässt einen nur dann passieren,
wenn man seine Schuhe gründlich genug
gereinigt hat. Wenn nicht, drückt er seine
Unzufriedenheit dem Schuhabtretenden
damit aus, dass er seine Miene verzieht.

SHOEO ist etwas kleinlich und

pedantisch, was das Schuhabtreten
angeht. So kann es durchaus vorkommen,
dass man seine Schuhe öfter über die
Matte fahren lassen muss, als man es sich
gewohnt ist.

Den genügend fleissigen Schuhabtreter

verabschiedet SHOEO mit einem
sympathischen Augenzwinkern – auf bis
zum nächsten Mal, mit SHOEO!

Video End p ro d u k t : h t t p : / / bit.ly/ fAT7 O j