Bereits Mitte letztens Jahres habe ich die interaktive Ausstellung »In Pieces« von Bryan James vorgestellt. Damals hatte ich fälschlicherweise noch den Titel »Species in pieces« verwendet.
Seitdem möchte ich mich etwas näher mit dem technischen Hintergrund auseinandersetzen, da mich das Projekt nachhaltig begeistert hat und ich es sehr interessant finde, dass es basierend auf CSS umgesetzt wurde.
Neben der Dokumentation, die auf der Projektseite selbst zu finden ist, bin ich auf »The Making Of ›In Pieces‹: Designing an Interactive Exhibition With CSS Clip Paths« auf Smashing Magazine gestoßen. Hier erklärt Bryan James ausführlich seine Vorgehensweise und auf welche Probleme er während des Prozesses gestoßen ist. Da die Dokumentation sowie das Making Of sehr detailliert sind, möchte ich den technischen Hintergrund nicht einfach wiedergeben, sondern lediglich die für mich spannenden Punkte herausgreifen.
Zunächst finde ich es erstaunlich, dass die Polygone aus denen die Tiere zusammengesetzt sind mit der CSS-Eigenschaft clip-path generiert wurden. Ich bin mehr Designerin als Entwicklerin, so dass mir das breit gefächerte Verständnis fehlt. Jedoch war meine Vermutung die, dass mit SVG-Grafiken gearbeitet wurde, die dann via Code verändert und bewegt werden. Zur Erstellung der Formen stellt Bryan James das Tool Clippy » vor. Mit dieser Browseranwendung können eigene sowie vorgefertigte Masken ausgewählt werden. Der dazugehörige Code erscheint dabei direkt am unteren Rand des Browsers. Schade finde ich, dass man den Code nicht direkt im Browser ändern kann, um die erstellte Form selbst noch einmal im Detail zu ändern. Zwar ist ein klickbares Logo von Codepen zu sehen, dessen Sinn erschließt sich mir aber leider nicht ganz, da sich nichts ändert oder öffnet. Davon abgesehen, ist es aber ein einfaches, schönes Tool, um visuell die Formen zu erstellen. Den Code kann man nachträglich immerhin selbst ändern, so dass ich das nicht als sehr großen Nachteil empfinde.
Als weitere spannende Lösung stellt James eine Funktion vor, die ermöglicht die prozentualen Werte eines Punktes auszulesen. Er nutzt eine PNG-Datei als Unterstützung und durch einen Klick wird ein Fenster mit den Daten des jeweiligen Punkts zum Kopieren ausgegeben. Die Funktion ist im Making Of zu finden.
Aus grafischer bzw. konzeptioneller Sicht finde ich es zudem überraschend, dass die 30 Tiere jeweils aus etwa 30 Polygonen bestehen. Das war mir im Vorfeld nicht bewusst bzw. habe ich nicht darauf geachtet.
Eine weitere bemerkenswerte Herangehensweise sehe ich in der Maskierung von Bildern mit Zahlen durch die Polygone als Hilfestellung. Eine simple Methode, um die Ränder der Formen hervorzuheben, um sie anschließend zueinander passend zu verändern. So können feine Linien vermieden werden, die zwischen den Gebilden entstehen, wenn sie exakt aufeinander liegen.
Visuell ansprechend finde ich außerdem den von ihm verwendeten und erwähnten Schimmer-Effekt. Generell bin ich kein Fan von Schimmern, Schatten oder beispielsweise Verläufen. Doch der Einsatz im Web kann bei dosierter Anwendung sehr reizvoll sein. Im Vergleichsbild seiner Grafiken sieht man deutlich, dass sie durch den Schimmer-Effekt sehr viel hochwertiger wirken.
Schlussendlich finde ich es großartig, dass Bryan James das Projekt und den Prozess so ausführlich dokumentiert. Einen Einblick in die Arbeitsweise und die Problemlösungen machen deutlich, wie das große Ganze Schritt für Schritt und Hürde für Hürde gewachsen ist. Dass die Arbeit beinahe wegen zu großer Probleme beendet wurde, motiviert zudem sich an mancher Stelle weiter durchzubeißen. Denn das Ergebnis finde ich nach wie vor so imposant, dass es Mut macht dem ein oder anderen Hindernis zu trotzen. Zudem inspiriert mich die interaktive Ausstellung so sehr, dass ich mich nun mit mehr technischem Verständnis, selbst an einer erstmaligen Gestaltung durch Polygone versuchen möchte.
Abbildungen
- James, Bryan: »The Making Of ›In Pieces‹: Designing an Interactive Exhibition With CSS Clip Paths«, Stand: 2.6.2015, URL: https://www.smashingmagazine.com/2015/06/the-making-of-in-pieces/, abgerufen am 2.3.2017.