Usual 2 Unusual — der Beobachtereffekt, eingebaut ins Interface

Wir bauten ein Designkonzept auf der Superposition aus der Quantenmechanik — und es hob auf Behance ab.

Clickbaitig genug, ich weiß. In eine Behance-Galerie zu kommen bringt eigentlich nichts außer Traffic. Doch über die Jahre sind um die Plattform ganze Schulen des „Case-Bauens“ gewachsen, samt endloser Theorien, wie man das Badge bekommt. Die Jurymitglieder schreiben selbst in ihren Blogs: Ein Projekt soll nicht nur schön und modern sein — es braucht eine Geschichte. Unsere ging so.

Kundin und Problem

Eine deutsche Künstlerin mit ukrainischen Wurzeln — Irina Mitaenko — kam für eine neue Portfolio-Website zu uns. Interessant: Irina ist studierte Physikerin, und Kunst ist ihr Weg, die Schönheit von Mathematik und Physik metaphorisch auszudrücken. Merken Sie sich das — es wird noch wichtig.

Ihre alte Website lief auf Tilda und hatte reichlich Probleme. Das größte: Die Werke haben alle möglichen Formate, und Template-Galerien sind dafür nicht flexibel genug — die Vorschauen schnitten Teile der Bilder einfach ab.

Das ist, als würde Warhol wegen technischer Grenzen ein gutes Stück seiner Suppe verlieren.

Überhaupt: Wie man Kunst betrachtet, prägt, wie man sie versteht. Wir nahmen das Projekt an, weil die Kundin uns kreative Freiheit und Raum zum Experimentieren gab. Ihre einzige Bitte: das Manifest vermitteln.

Ohne Betrachter gibt es keine Kunst.

Erste Schritte

Ein Konzept zu finden ist keine „hinsetzen und machen“-Aufgabe. Normalerweise springt das ganze Team in einen Call und wir brainstormen gemeinsam. Diesmal war es nicht anders: Nach dem Durchgehen der Optionen blieben wir an dem Gedanken hängen, wie sehr moderne Kunst vom Betrachter abhängt.

Mein Team prototypt sonst komplexe Interfaces — ein Künstlerportfolio war eine Premiere. Also gingen wir auf Referenzjagd. Nach 30+ Portfolio-Websites von Künstlern, Kunsthandwerkern und Art Directors legten wir die Regeln der künftigen Seite fest:

• Werke dürfen sich nicht hinter Rahmen oder Interface-Elementen verstecken;
• die Visuals der Seite lenken nicht ab — sie bleiben neutral;
• Kollektionen und Werke müssen leicht zu finden sein;
• das Konzept baut auf dem Manifest der Künstlerin auf.

Dieser Gedanke wurde das Fundament — die visuelle Sprache fanden wir in der Physik.

Das Doppelspaltexperiment

Stellen Sie sich ein Gerät vor, das Teilchen — Elektronen oder Photonen — durch einen Schirm mit zwei Spalten schießt. Dahinter zeichnet ein zweiter Schirm auf, wo sie landen. Schießt man, ohne zu messen, durch welchen Spalt sie fliegen, bekommt man keine zwei Streifen wie von Kügelchen — sondern ein Interferenzmuster: Die Teilchen verhalten sich wie interagierende Wellen. Thomas Youngs Experimente von 1801 bewiesen genau so die Wellentheorie des Lichts.

Aber setzen Sie einen Detektor ein, um zu „spicken“, welchen Spalt jedes Teilchen nimmt — und die Magie verschwindet. Die Teilchen verhalten sich wie einzelne Kügelchen, nur zwei Streifen erscheinen, keine Interferenz. Beobachten wir nicht, existieren die Teilchen scheinbar in Superposition — sie passieren beide Spalte zugleich, wie Wellen. Beobachten wir, „entscheiden“ sie sich für einen bestimmten Weg.

Kurz: ein Quantenmechanik-Thriller.

Der Kernpunkt: Das Ergebnis hängt von uns ab — ob wir beobachten oder nicht.

Das reimt sich perfekt auf das Manifest „ohne Betrachter gibt es keine Kunst“. Und mit einer Physikerin als Kundin — ein besseres Match gibt es nicht.

Visuelles Konzept

Wir vermittelten die Idee mit einem Hover-Effekt: Solange der Nutzer nicht mit dem Inhalt interagiert, treiben fünf Spalten bewegter „Teilchen“ im Hintergrund. Sobald der Cursor ein Bild berührt, ordnen sich die Teilchen in zwei Reihen.

Und die fünf Linien der „Teilchen“ aus dem Interferenzmuster wurden zur Basis des Seitenrasters. Das Raster positioniert die wichtigen Elemente auf dem Bildschirm — so verschmolz das Konzept mit einem technischen Feature, und es wurde großartig.

Die Startseite

Über den ersten Screen diskutierten wir lange. Ein Foto der Hauptkollektion? Eine Auswahl neuer Arbeiten? Beides fühlte sich unfair an: Die Werke sind völlig verschieden — Experimente in unterschiedlichen Techniken — und die Künstlerin nach dem erstbesten Bild zu beurteilen wäre falsch.

So entstand die Idee, alles auf einmal zu zeigen. Die Startseite ist eine Leinwand mit allen bedeutenden Kollektionen, und der Betrachter wählt selbst, wohin er schaut. Es gibt kein Scrollen — es wird schlicht nicht gebraucht. Nur Buttons in den Bildschirmecken: volles Portfolio, über die Künstlerin, Kontakt.

Und der Dauerstreit, welcher Hintergrund besser aussieht, endete damit, die Wahl dem Betrachter zu überlassen — helles und dunkles Theme sind umschaltbar.

Custom Code

Dieses Projekt verlangte extra Code-Arbeit. Wir scheuen keine einzigartigen Web-Experimente, aber Irinas Seite war eine neue Art Herausforderung: Wer ein Doppelspaltexperiment für eine Website erfindet, muss es auch bauen. Wir sind stolz darauf, ein Projekt vom Konzept bis zur Live-Seite zu führen, also definierten wir die Verhaltensregeln der „Atome“ präzise:

• es gibt zwei Zustände: Focused und Relaxed;
• Focused aktiviert sich, wenn der Cursor auf einem Werk liegt — die Atome sammeln sich in zwei Spalten;
• unabhängig vom Zustand bewegen sich die Atome immer — nie statisch.

Zuerst schauten wir auf Particles.js — leicht umzusetzen, aber als Fertiglösung fehlte die Flexibilität für unsere ersten zwei Regeln. Also wechselten wir zu GSAP (mit Rajat Kapoors Code aus Made in Webflow als Basis), teilten die Teilchengenerierung in Spalten, stylten die Atome nach unserem Geschmack und banden die Bewegung an den Cursor. Überraschend war der letzte Schritt der einfachste — die Hover-in/Hover-out-Animation bauten wir direkt in Webflow, und sie sah genau aus wie geplant.

Die mobile Version

Die Kundin bat ausdrücklich darum, dass die Seite auch mobil richtig funktioniert. Das hieß ein paar Extraschritte: Die Mouse-Move-Animation der Startseite (die Leinwand folgt dem Cursor) läuft am Desktop perfekt, glitchte mobil aber fürchterlich. Also holten wir interact.js und bauten eine ähnliche Touch-Interaktion:

• Drag-and-drop mit sanftem Auslaufen;
• Begrenzungen, die verhindern, dass die Leinwand aus dem Bildschirm gezogen wird;
• geschwindigkeitsbasierte Bewegung — eine realistische, natürliche Interaktion.

Bonus: Für die Werkseiten integrierten wir Swiper.js statt Webflows Standard-Slider — dem fehlte Anpassbarkeit, und flüssig fühlte er sich nie an. Mit Swiper wirkt alles poliert.

Portfolio

Irinas Werke sind Kollektionen aus verschiedenen Perioden und Stilen. Wichtig war eine Struktur, in der Betrachter leicht ihr Ding finden. Standardmäßig werden die Werke visuell gezeigt — man wählt mit den Augen. Es gibt aber auch einen Tab, sortiert nach Titel mit Vorschau: praktisch, wenn man ein Werk aus einem Artikel oder Katalog kennt, wo nur der Name steht.

Die Kollektionen selbst zeigen wir in einem Slider — viele Bilder haben Sonderformate, ein Template-Raster passt ihnen nicht.

Warum wir das überhaupt gemacht haben

In ihrem Manifest sagt Irina: Kunst heißt für sie, das Ungewöhnliche im Gewöhnlichen und das Gewöhnliche im Ungewöhnlichen zu finden. Daher der Name der Seite. Und genau darum nahmen wir das Projekt: um zu experimentieren, ungewöhnliche Lösungen für gewöhnliche Probleme zu suchen — das, was der Routine des Interface-Designs manchmal fehlt, wo 90% der Patterns vor dir erfunden wurden. Wir hatten Spaß, streckten die Arme und bauten eine coole Seite.

Das Ergebnis

Eine zufriedene Kundin, eine Honorable Mention bei Awwwards und ein Interaction-Feature auf Behance — 784 Appreciations und 7.637 Views. Am wichtigsten — eine Live-Seite, auf der sich kein Werk mehr hinter einem Rahmen versteckt: usual2unusual.com.