inside / outside
Eine interaktive HTML-Seite mit zwei Seiten: Vorne nur eine Überschrift und ein Button – ein Klick, und die Seite klappt nach hinten um und zeigt ihre Innenseite: den Code, aus dem sie besteht. inside / outside macht sichtbar, dass alles, was wir im Netz sehen, eine verborgene Rückseite hat.
Herausforderung
Alles, was wir im Internet sehen, hat eine zweite Seite, die niemand zu Gesicht bekommt: den Code. Jede noch so ruhige, aufgeräumte Oberfläche steht auf einer verborgenen Struktur aus HTML, die das eigentliche Innere der Seite ist. inside / outside sollte genau diesen Gegensatz erlebbar machen – nicht als Erklärung, sondern als Moment, in dem das Unsichtbare plötzlich sichtbar wird.
Die eigentliche Gratwanderung lag in der Reduktion: Die Vorderseite – das Outside – durfte nur aus einer Überschrift und einem einzigen Button bestehen. Je stiller und minimaler diese Oberfläche ist, desto stärker wirkt der Umschlag zur Rückseite, dem dichten, rohen Code dahinter.
Prozess
Im Zentrum steht eine einzige Interaktion: Ein Klick auf den Button lässt die Seite nach hinten umklappen und dreht das Outside weg, bis das Inside erscheint – der HTML-Code, aus dem die Seite selbst besteht. Diese Selbstbezüglichkeit war mir wichtig: Man sieht nicht irgendeinen Code, sondern genau die Struktur der Seite, die man gerade betrachtet. Gestalterisch habe ich alles weggelassen, was von diesem einen Umschlag ablenkt – keine zweite Aktion, keine Navigation, keine Deko. Vorne die maximale Ruhe, hinten die volle Komplexität; die Bewegung dazwischen trägt die ganze Aussage.
Lösung
Entstanden ist eine minimalistische Seite mit zwei Zuständen und einem einzigen Übergang. Vorne empfängt einen nur die Überschrift und der Button – bewusst still und leer. Der Klick klappt die Seite nach hinten um und offenbart das Inside: den HTML-Code, der die Oberfläche trägt. Die Reduktion der Vorderseite und die Rohheit der Rückseite bilden ein Paar, das den Gedanken ohne ein einziges erklärendes Wort transportiert.
Ergebnis
Das Projekt lebt vom Aha-Moment: Wer den Button klickt, versteht sofort und ohne Erklärung, dass hinter jeder cleanen Oberfläche im Netz eine verborgene Struktur steckt. Für mich war es ein schönes Stück Creative Coding an der Schnittstelle von Konzept und Umsetzung – eine Idee, die genau dann funktioniert, wenn die Technik dahinter unsichtbar bleibt und die Interaktion für sich spricht.
Nächstes Projekt
progress / decay