Face your Face

10 Personen, 1 Gesicht. Eine interaktive Fotocollage, in der die Probanden mit ihren Augenbrauen konfrontiert werden!

Mit unseren Lippen geniessen wir Küsse, mit unseren Ohren hören wir unseren Lieblingssong, mit unseren Augen sehen wir wundervolle Dinge. Vieles in unserem Gesicht dient uns dazu, die tollen Dinge des Lebens so zu erleben, wie wir sie eben erleben. Das Gesicht ist auch ausschlaggebend, ob uns eine Person sympathisch ist. Wir zupfen, schminken und trimmen, damit wir uns – und natürlich auch Anderen – beim Blick in den Spiegel gefallen. Wenn man aber einer Person sagt, dass sie wunderschön ist, erwidert diese sinngemäss oft: «Danke vielmals, aber meine Nase gefällt mir nicht.» Oder: «meine Lippen könnten voller sein».

Face your Face – ein Experiment, mit dem wir herausfinden wollten, wie Menschen auf ihrer Gesichtsstellen reagieren und ob es wirklich immer etwas gibt, was uns nicht gefällt. Dafür erstellten wir eine Fotocollage aus unterschiedlichen Gesichtsstellen von zehn verschiedenen Personen. Die Werke haben wir in eine Website eingebunden, auf der man die Personen hinter der Fotocollage interaktiv kennenlernen kann.

Die Website findet ihr hier.

(fms)

Kritik
von Max Eschler und Kyle Smith

Kritik
von Max

Idee
Die Idee für dieses Digezz-Projekt hatte Max nach dem Berlin-Aufenthalt im Modul Filmisches Gestalten 2. Bei einer alternativen Stadtführung stoss er auf das Streetworkartist-Duo Various & Gould. Die Künstler haben verschiedene Gesichtsteile zusammengeschnitten und damit die Berlinerwände tapeziert. Dies inspirierte Max etwas ähnliches zu machen, aber in einem Multimedia Production Stil. Deshalb fragte er auch gleich Kyle an, ein langjähriger Freund und mit vertieftem Wissen in JQuery und Websites. Zusammen haben wir das Projekt konzipiert und besprochen. Mit viel Elan startet wir dann auch zusammen.

Vorbereitung
Die Aufgabenverteilung war sehr schnell klar. Max würde die Fotos und die Erstellung der Fotocollage übernehmen, sowie alle Textobjekte. Kyle ist für das Aussehen und der Funktionalität der Website verantwortlich. Da wir beide MMP studieren, halfen wir uns natürlich gegenseitig wo wir nur konnten, so flossen die beiden Arbeitsbereiche auch schnell ineinander ein. Wir tauschten uns viel aus und setzten Milestones.

Als Erstes suchten wir freiwillige Probanden, die für uns vor die Linse stehen. Wir hörten uns bei unseren Freunden und Familie um und fanden dann auch schnell 10 Personen, die sich zur Verfügung stellten bei unserem Digezz-Projekt mitzumachen. Neben der Suche haben wir besprochen wie die Website aussehen soll und was für Funktionalitäten sie haben muss.

Durchführung
Zu Beginn brauchten wir die Fotos um die Collage zu erstellen und die fertige Collage brauchten wir um den Hauptteil unserer Website zu programmieren. Dies führte zu mehreren kleinen Arbeitsaufschüben, da wir immer wieder Dinge ändern mussten, bis wir in den Code und die Collage interaktiv machen konnten. Wir haben uns auch oft besprochen, damit wir hinter unserem Projekt stehen und es uns gefällt.

Die Fotos wurden mit einer Canon 5D mit einem 50mm Objektiv geschossen. Die Bildbearbeitung wurde in Adobe Lightroom gemacht und die Erstellung der Fotocollage wurde in Adobe Photoshop getätigt. Wir versuchten die Bilder alle gleich mit dem gleichen Licht zuschiessen. Der Bildausschnitt gelang uns sehr gut doch die Fotos könnten besser ausgeleuchtet sein. Dies ist wahrscheinlich da wir an verschiedenen Orten an verschiedenen Tagen geknipst haben. Die Bearbeitung in Photoshop funktionierte sehr gut. Wir wussten beide wie es am Schluss aussehen sollte, es brauchte einfach viel Zeit bis das fertige Gesicht, für den Export ready war: Die Entscheidung der Farben, der Positionierung und der Auswahl des Gesichtsteil frass viele Stunden und Nerven. Die einzelnen Fotos wurden dann in Lightroom schwarz/weiss Bearbeitet, damit der Kontrast zur Fotocollage ersichtlich ist. Die fertige Collage wurde dann in die Website eingebunden Einige Schwierigkeiten erwiesen sich mit der Fotocollage selbst, da sie nicht so einfach auf die responsive Webseite eingebunden werden konnte. Daher mussten wir gemeinsam - auch ein wenig mit tüfteln - herausfinden wie es am besten funktioniert. Wir haben den Hintergrund des Bildes transparent gemacht und danach die Position fixiert.

Fazit von Max
Wir arbeiteten sehr gut als Team zusammen, obwohl wir das noch nie gemacht haben wussten wir wo die Stärken des jeweiligen Anderen sind und wo wir uns unterstützen konnten. Die Idee gefällt uns immer noch sehr. Wir haben uns leider im Zeitmanagement ein wenig überschätzt. Wie schon erwähnt konnten wir schlecht parallel am fertigen Produkt arbeiten, da es immer eine perfekte, fertige Version des Zwischenschritts brauchte. Wir haben vielleicht auch zu viel Zeit damit verbracht, jeden Zwischenschritt zu besprechen, wir wollten einfach beide aneinander helfen und hatte meistens zu viele Ideen für die verfügbare Zeit.

Nichtsdestotrotz gefällt uns, unser Projekt und wir sind glücklich haben wir noch ein Digezz-Projekt zusammen gemacht, da Kyle in das Bachelorsemester kommt und wir schon lange befreundet sind. Die Collage überzeugt uns sowie die Fotos. Da wir Perfektionisten sind, können wir es aber nicht auf uns sitzen lassen, dass die Portraits-Fotos nicht identisch ausgeleuchtet sind. Mit der Website sind wir auch glücklich, obwohl es viele Nerven kostete die richtige Funktion für die interaktive Collage zu finden. Zum Glück kam Kyle die Idee mit dem HTML 5-Tag zu verwenden. Mehr dazu findet ihr im folgenden Text.

Kritik
von Kyle Smith

Bereich: Visualisierung
Ich erstellte vor allem das Darstellungskonzept und die Webseite. Hierfür verwendeten wir das neue Bootstrap 4 Framework. Zwei Seiten sind ähnlich und wie eine Kampagnen-Seite aufgebaut (Home und Idee), d. h. mit einem Menu und Unterseiten jedoch ist der wichtigste Inhalt immer sofort zu sehen. Sowie ein Hintergrundbild für die Stimmung sowie zentrierter Text, der die Idee hinter faceyourface aufzeigt. Erhebliche Schwierigkeiten hatte ich bei der Seite: Faces.

Darstellungskonzept und das interaktive Bild
Eigentlich dachten wir bei der Konzeption von faceyourfaces, dass jedes Bildelement anklickbar wäre, mittels jQuery oder Javascript. Die Möglichkeiten heute sind viele - zumindest schien es in unseren Köpfen, jedoch bei der Umsetzung konnten wir die einzelnen Elemente des Bildes in einer Javascript-Library nicht "einfach" in Hyperlinks teilen. Ein jQuery toggle(), http://fabricjs.com/, https://juxtapose.knightlab.com/ oder andere Javascript basierte Tools waren eigentlich vorgesehen. Nachdem ich mehrere probiert hatte, merkte ich, dass ich nirgendwo die Elemente “einfach” auf das Bild “mehrmals” anbinden konnte. Da fand ich das Image-Map HTML 5 Element. Ein simples Imagemapping durch Koordinaten lässt die definierte Bildfläche zu einem Hyperlink werden. Dieser einfache Tag wurde zu einer Schwierigkeit, weil ich mit Bootstrap 4 gearbeitet habe. Nach dem ich die HOME-Seite und IDEE-Seite erstellt hatte, spinnte der Footer. Ich änderte zwei Eigenschaften, so dass das Problem gelöst wurde und baute die Fades-Seite mit der Gesichts-Collage. Die Gesichts-Collage war ein Zusammenschnitt aus mehreren Gesichtern von Max Eschler. Ich mappte die Image und versuchte die Hyperlinks einzubauen.

Zu meinem Pech testete ich die Faces-Seite erst nachdem sie fertig war und die Koordinaten berechnet waren. Beim Anklicken der Fläche passierte jedoch nichts. Mein Bild war eingebunden und responsive, jedoch ohne Fläche die zu einem Hyperlink führte. Durch längere Recherche stellte sich heraus, dass das HTML5 <map>-Tag nur bei statischen Seiten funktioniert, da dass Koordinatensystem bzw. Grid fix ist. Das <map>-Tag ist nicht mit responsiven Seiten brauchbar. Nach dem ich verschiedenste Varianten versucht hatte, dass Bild einigermassen zentrierte einzubetten mit dem funktionierenden Image-Map mussten wir verschiedenste Transparenz-Einstellungen beim Bild ausprobieren. Ich versuchte auch andere Varianten ein anklickbares Bild zu machen, jedoch entschied ich mich auch aufgrund des Zeitaufwands und des Zeitdrucks eine Variante mit dem Tag zu finden. Nun ist auf der Faces-Seite die Hyperlink-Flächen mit dem <map>-Tag eingebunden und wie im Quellcode ersichtlich durch von den fixen Koordinaten verlinkt. Alles ausser die Collage ist responsive. Da wir die Mobilefirst-Philosophie vertrete, nahmen wir eine Bildgrösse die auf dem Smartphone und auf dem Desktop eine normale Usability zulässt. Diese ist auch mit Touch bedienbar.

Live-Schaltung und Reflexion
Nachdem die Bildgrössen und die Bilder den gewünschten Look im Photoshop hatten, integrierte ich die Bilder gemäss den Koordinaten und deren “Alt” Beschreibung. Dabei wurde bewusst nur einen “Zur Collage”-Button integriert, damit man die Gesichter entdecken kann. Der Aufwand für den Bau der Webseite habe ich massiv unterschätzt und bin mehrere Tag daran gesessen mit dem interaktiven Bild. Es hätten andere Funktionen wie ein Tooltip, toggleClass() oder andere jQuery-Methoden auch auf der Faces-Seite der Probanden/Protagonisten haben können. Jedoch fanden wir, dass das Erlebnis der Seite damit nicht verbessert wird, sondern eher verwirrt wenn alles bei einem klick sich verändert. Nun haben wir eine gute Lösung gefundenfür das interaktive Bild und ich denke, dass die Digezz-Kampagne überzeugt.

 

Keine Kommentare

Schreibe einen Kommentar