Zum Hauptinhalt springen
Woop Technology
Punktraster-Karte von Europa: Deutschland hervorgehoben, darin der Kundenstandort StuttgartStuttgart
Alle Referenzen
Case Study · Kunst & digitale Galerie

Ein digitaler Kunstraum, der Kunst erlebbar und einzelne Werke auffindbar macht.

Für den Künstler Ralph D. Woop entwickelten wir einen individuellen digitalen Auftritt, der die Atmosphäre einer Ausstellung mit einem strukturierten, mehrsprachigen Werkverzeichnis verbindet.

Projektfakten
Auftraggeber
Ralph D. Woop
Branche
Kunst, Atelier & Galerie
Sprachen
Deutsch, Englisch
Status
Live, in laufender Betreuung
Projektvolumen
CHF 10'000–15'000
Unsere Rolle
  • Strategie und Informationsarchitektur
  • UX/UI Design und digitale Szenografie
  • Individuelle Webentwicklung
  • Werkdatenmodell und mehrsprachige Umsetzung
  • SEO, strukturierte Daten und Consent Management
  • Hosting, Deployment und technische Betreuung

Die Kunstwerke, die Werkfotografien und die fachlichen Werkangaben stammen vom Künstler.

Startseite von Woop Art auf einem Laptop
Galerie von Woop Art auf einem Smartphone
Ergebnisse auf einen Blick

98 Werke. Zwei Zugänge. Eine gemeinsame Struktur.

98

digital dokumentierte Unikate

214

indexierbare Adressen

2

vollständig integrierte Sprachen

100 / 100

Lighthouse SEO

100 / 100

Lighthouse Accessibility

0

Cumulative Layout Shift

Die Website umfasst 107 Adressen pro Sprache; 196 der insgesamt 214 URLs entstehen automatisch aus den zentral verwalteten Werkdaten. Die Lighthouse-Werte stammen aus der Desktop-Messung vom 7. August 2026, die zusätzlich einen Performance-Score von 99 bei 0,8 Sekunden Largest Contentful Paint erreicht.

01Ausgangslage

Ein gewachsener Werkbestand brauchte mehr als eine klassische Künstlerwebsite

Das künstlerische Werk von Ralph D. Woop umfasst Cyanotypien, Pyrographien, Porträts, Auftragsarbeiten und experimentelle Arbeiten mit sehr unterschiedlichen Formaten, Geschichten und Verfügbarkeiten.

Die Herausforderung bestand deshalb nicht einfach darin, Bilder online zu präsentieren.

Die neue Website sollte gleichzeitig

  • die Atmosphäre der Kunst vermitteln
  • einen umfangreichen Werkbestand strukturiert dokumentieren
  • einzelne Arbeiten dauerhaft auffindbar machen
  • Hintergrundinformationen zu Techniken und Projekten vermitteln
  • ein internationales Publikum ansprechen
  • und Interessenten gezielt zur Kontaktaufnahme führen

Daraus entstand die Anforderung an einen digitalen Auftritt, der Ausstellung, Werkverzeichnis und Kommunikationsplattform in einem System verbindet.

02Herausforderung

Kunst inszenieren, ohne Auffindbarkeit und Struktur zu verlieren

Ein Kunstwerk funktioniert anders als ein klassisches Produkt. Jedes Werk ist ein Unikat. Formate und Proportionen unterscheiden sich stark. Manche Arbeiten sind verfügbar, andere reserviert, Teil einer Privatsammlung oder grundsätzlich nicht verkäuflich.

Ein gewöhnliches Kartenraster hätte diese Vielfalt visuell vereinheitlicht. Eine rein experimentelle Galerie wiederum hätte zwar Atmosphäre geschaffen, wäre für gezielte Recherche, Suchmaschinen und Besucher mit einem konkreten Interesse an einem Werk jedoch nur eingeschränkt geeignet gewesen.

Die zentrale Frage lautete deshalb: Wie verbindet man ein digitales Galerieerlebnis mit einem strukturierten Werkverzeichnis? Die Antwort war keine einzelne Oberfläche, sondern zwei unterschiedliche Zugänge zum gleichen Werkbestand.

03Konzept & Gestaltung

Entdecken oder gezielt suchen – beides führt zu denselben Werken

Die Informationsarchitektur wurde so entwickelt, dass Besucher selbst entscheiden können, wie sie sich dem Werk nähern möchten.

Eine digitale Ausstellung statt eines klassischen Portfolios

Die visuelle Gestaltung orientiert sich an der Atmosphäre eines historischen Ateliers und eines kuratierten Galerieraums.

Dunkle Blau- und Schwarztöne schaffen einen ruhigen Hintergrund. Warme Gold- und Lichtakzente greifen Materialien und Farbstimmungen der Werke auf. Klassische Serifentypografie verbindet die digitale Oberfläche mit der Ästhetik einer Ausstellung. Die Benutzeroberfläche tritt dabei bewusst hinter die Kunst zurück.

Unterschiedliche Formate bleiben Teil der Gestaltung

Querformat, Hochformat oder ungewöhnliche Proportionen werden nicht in identische Bildcontainer gezwungen. Für die Galerie wurde eine eigene Layoutlogik entwickelt, die die tatsächlichen Seitenverhältnisse der Werke berücksichtigt und daraus ausgewogene Reihen erzeugt.

Auch beim Nachladen weiterer Werke bleiben bereits sichtbare Bilder stabil. Die Inhalte werden zeilenweise ergänzt, damit sich bestehende Elemente nicht nachträglich neu skalieren.

Der Ausstellungsraum ist gebaut, nicht fotografiert

Die Museumswand ist kein Hintergrundbild. Wand, Sockelleiste, Parkettboden, Deckenstrahler und die Rahmen um jedes Werk entstehen im Browser – aus Farbverläufen, Schatten, Lichtkegeln und wenigen Materialtexturen. Ein Foto hätte denselben Raum gezeigt, aber immer nur diesen einen: feste Lichtstimmung, feste Rahmenfarbe, feste Bildgrösse.

Weil jede Ebene aus Gestaltungswerten entsteht, bleibt sie jederzeit veränderbar. Eine hellere Wand, ein anderes Holz, ein zusätzlicher Strahler oder ein schmaleres Passepartout sind die Änderung eines Wertes im Code – kein neues Rendering, kein neuer Fototermin. Der Raum wächst mit der Sammlung, statt sie in ein einmal festgelegtes Bild zu zwingen.

Damit dieses Bühnenbild beim seitlichen Scrollen nicht jede Bewegung teuer macht, wird es einmal je Bildschirmgrösse auf eine Zeichenfläche (Canvas) gerechnet und als fertiges Bild hinter die Werke gelegt. Die Werke selbst bleiben eigenständige Elemente im Vordergrund – anklickbar, verlinkbar, mit ihren echten Bilddaten. Ändert sich die Fenstergrösse, entsteht der Raum neu; beim Scrollen bewegt der Browser nur noch eine einzige Ebene.

Die horizontale Museumswand: Besucher bewegen sich seitlich durch die Ausstellung, die Werke behalten dabei ihre tatsächlichen Seitenverhältnisse.

Die Galerie als Erlebnis

Die digitale Galerie übersetzt Elemente eines klassischen Ausstellungsraums in den Browser. Auf grösseren Bildschirmen bewegen sich Besucher horizontal entlang einer virtuellen Museumswand. Unterschiedliche Bildformate behalten ihre tatsächlichen Proportionen und werden innerhalb einer räumlich inszenierten Umgebung dargestellt. Wandstrukturen, Passepartouts, Beleuchtung und zurückhaltende räumliche Elemente schaffen einen Rahmen, ohne mit den Kunstwerken zu konkurrieren. So steht zunächst nicht die Information, sondern die visuelle Entdeckung im Mittelpunkt.

Das Werkverzeichnis als strukturierter Zugang

Wer ein bestimmtes Werk sucht oder den Bestand gezielt durchsuchen möchte, gelangt über das Werkverzeichnis direkt zu den relevanten Informationen. Für jedes Werk werden unter anderem Vorschaubild, Titel, Entstehungsjahr, Werknummer, Technik und Verfügbarkeitsstatus übersichtlich dargestellt.

Das vollständige Werkverzeichnis wird serverseitig bereitgestellt und bleibt damit unabhängig vom interaktiven Galerieerlebnis klar strukturiert, direkt zugänglich und für Suchmaschinen erfassbar.

Digitale Galerie von Woop Art am Desktop
Die Desktop-Galerie: Wandstrukturen, Passepartouts und Beleuchtung rahmen die Werke, ohne mit ihnen zu konkurrieren.
Die mobile Startseite in voller Länge: vertikale Führung, eigene Bildanordnung, dieselbe Bildsprache wie am Desktop.

Mobile ist nicht einfach Desktop in schmal

Die Desktop-Galerie wurde bewusst nicht auf kleinere Displays zusammengeschrumpft. Für mobile Geräte entstand ein eigenes Interaktionskonzept:

Desktop

  • horizontale, scrollgesteuerte Museumswand
  • grosszügige räumliche Inszenierung
  • eigene Desktop-Motive

Mobile

  • vertikale Nutzerführung
  • eigene Bildanordnung für schmale Displays
  • eigene, anders beschnittene Motive

Dadurch bleibt die gestalterische Identität erhalten, während die Bedienung an das jeweilige Gerät angepasst wird.

Aus diesen Ebenen entsteht der Raum

  • Wandverlauf mit Materialtextur
  • Sockelleiste aus mehreren Profilen samt Schattenkanten
  • Parkettboden mit Lack- und Kornschicht
  • drei Deckenstrahler mit Lichtkegel und Streulicht
  • Lichtreflexe auf dem Boden unter jedem Strahler
  • Holzrahmen, Goldkante und Passepartout um jedes Werk

Jede dieser Ebenen ist ein Gestaltungswert im Code – Farbe, Breite, Deckkraft, Anzahl. Die Ausstellung lässt sich damit jederzeit umhängen und neu ausleuchten, ohne dass ein einziges Bild neu erstellt werden muss.

04Werkdaten

Jedes Werk erhält eine eindeutige digitale Identität

Die zentrale Grundlage der Website ist nicht der Seitentitel, sondern die Werknummer. Ein Werk behält seine Identität unabhängig davon, ob sich später sein Titel oder seine URL verändert. Dadurch bleiben Übersetzungen, Empfehlungen, Galeriepositionen und weitere Verknüpfungen zuverlässig miteinander verbunden.

Beispiel einer Werknummer

  • RDW-CYA-002

Auch die Werknummer selbst wird zum digitalen Einstiegspunkt. Wer eine Werknummer beispielsweise auf einem physischen Werk, einer Dokumentation oder einem Zertifikat findet, kann diese als Adresse verwenden. Das System leitet automatisch auf die kanonische Werkseite weiter.

Damit entsteht eine direkte Verbindung zwischen physischem Kunstwerk und digitalem Werkverzeichnis, ohne zusätzliche konkurrierende URLs für Suchmaschinen zu erzeugen.

Ein neues Werk wird einmal ergänzt – der Rest entsteht automatisch

Alle relevanten Werkdaten werden zentral verwaltet.

Daraus entstehen automatisch

  • Werkdetailseite
  • Eintrag im Werkverzeichnis
  • Darstellung in der Galerie
  • deutsche und englische Inhalte
  • Metadaten
  • Sitemap-Eintrag
  • strukturierte Daten
  • interne Verknüpfungen
  • Weiterleitungen

Von den 214 indexierbaren Adressen der Website werden 196 auf diese Weise aus den Werkdaten erzeugt.

Datenfehler werden erkannt, bevor sie veröffentlicht werden

Werknummern, Übersetzungen und weitere werkbezogene Strukturen sind miteinander typisiert. Fehlt beispielsweise eine Übersetzung oder wird eine Werknummer falsch geschrieben, schlägt der automatisierte Build fehl, statt unvollständige Inhalte unbemerkt auf die Live-Website zu übertragen. Diese Prüfung läuft bei jedem Push und Pull Request automatisch mit.

Der Bestand wächst, ohne dass die Komplexität mitwächst

Werkseite, Verzeichniseintrag, Galerieposition, Metadaten, Sitemap-Eintrag und Weiterleitungen entstehen aus derselben Quelle. Ein zusätzliches Werk ist deshalb ein Datensatz mehr – keine neue Seite, keine neue Route und kein zweiter Ort, an dem dieselbe Angabe gepflegt werden müsste.

05Werkseiten & Anfragen

Vom ersten Eindruck bis zur vollständigen Werkdokumentation

Jedes Werk besitzt eine eigene Detailseite. Dort werden visuelle Präsentation und strukturierte Informationen miteinander verbunden.

Je nach Werk können dargestellt werden

  • Titel
  • Künstler
  • Jahr
  • Technik
  • Material
  • Abmessungen
  • Werkart
  • Serie
  • Werknummer
  • Verfügbarkeit
  • Beschreibung
  • verwandte Arbeiten
  • direkte Kontaktmöglichkeit

Besucher können ausserdem zwischen vorherigen und nächsten Werken wechseln. Die Reihenfolge folgt dabei der kuratierten Galerie und nicht einfach der Reihenfolge in einer Datenbank.

Ähnliche Werke gezielt weiterentdecken

Für verwandte Arbeiten wurde eine eigene Empfehlungslogik entwickelt. Sie berücksichtigt unter anderem:

  • Serie
  • Motiv
  • Technik
  • Komposition
  • Farbwirkung
  • Stimmung
  • Referenzart

Insgesamt werden acht gewichtete Merkmale berücksichtigt. Die Empfehlung kann dem Besucher zusätzlich erklären, warum ein anderes Werk als ähnlich eingestuft wurde. So endet die Entdeckung nicht auf einer einzelnen Detailseite, sondern führt thematisch durch den Werkbestand weiter.

Nicht jedes Kunstwerk muss online gekauft werden können

Woop Art wurde bewusst nicht als Onlineshop aufgebaut. Der Schwerpunkt liegt auf Kunstvermittlung, Werkdokumentation und persönlichem Kontakt.

Deshalb passt sich die Handlungsaufforderung an den Status des jeweiligen Werks an.

Werkdetailseite von Woop Art am Desktop
Werkdetailseite: grossformatige Bilddarstellung, strukturierte Werkangaben und eine Anfrage, die den Werkbezug automatisch mitführt.
Vier Verfügbarkeiten, zwei Wege

Werk anfragen

Gilt für
  • Auf Anfrage
  • Reserviert

Das Werk kann noch den Besitzer wechseln – es ist erhältlich oder für jemanden vorgemerkt. Die Schaltfläche führt deshalb zu einer Anfrage, die sich auf genau dieses Werk bezieht.

Termin für ähnliches Werk anfragen

Gilt für
  • Privatsammlung
  • Nicht verkäuflich

Das Werk ist in Privatbesitz oder steht nicht zum Verkauf. Eine Anfrage danach liefe ins Leere – deshalb führt die Schaltfläche nicht zum Werk, sondern zu einem Gespräch über eine vergleichbare Arbeit.

Die Anfrage entsteht auf der Werkseite selbst. Bezeichnung beziehungsweise Werknummer und die Art der Anfrage werden dabei mitgeführt – Besucher müssen sie nicht abschreiben.

06Auffindbarkeit

Nicht nur die Website, sondern jedes einzelne Werk soll verstanden werden können

Eine wesentliche Anforderung bestand darin, einzelne Kunstwerke dauerhaft auffindbar und technisch eindeutig beschreibbar zu machen.

Dafür verwendet die Website sechs verschiedene Schema.org-Typen

  • Person
  • WebSite
  • BreadcrumbList
  • VisualArtwork
  • CollectionPage
  • CreativeWork

Alle 98 Werkseiten werden als VisualArtwork ausgezeichnet und mit Informationen wie Technik, Material, Werknummer und Abmessungen ergänzt. Über stabile Entitätsverknüpfungen werden Kunstwerk, Künstler und Website miteinander verbunden.

Auf Preis- oder Offer-Markup wurde bewusst verzichtet, da Woop Art eine Galerie und kein klassischer Onlineshop ist.

Deutsch und Englisch – bis in die URL-Struktur

Mehrsprachigkeit wurde nicht lediglich über übersetzte sichtbare Texte gelöst. Alle 98 Werke sind vollständig auf Deutsch und Englisch gepflegt. Insgesamt umfasst dies 196 Werkdatensätze mit 1'372 ausgefüllten übersetzten Textfeldern.

Auch die URLs sind sprachspezifisch aufgebaut

  • /de/werkverzeichnis/knechtschaft
  • /en/catalogue/servitude

Canonical-, hreflang- und x-default-Verknüpfungen sorgen dafür, dass Suchmaschinen die Sprachversionen korrekt miteinander verbinden. So wird Mehrsprachigkeit nicht als Zusatzfunktion behandelt, sondern als Teil der grundlegenden Informationsarchitektur.

214 Adressen – automatisch in der Sitemap

Die Sitemap wird automatisch aus dem tatsächlichen Seiten- und Werkbestand erzeugt und umfasst aktuell 214 Adressen. Für jede URL werden unter anderem Sprachalternativen, Aktualisierungsdatum, Priorität und Canonical-Zuordnung gepflegt.

Das Änderungsdatum orientiert sich dabei am tatsächlichen Inhaltsstand und nicht lediglich am Zeitpunkt des letzten Deployments. So wird vermieden, dass bei jeder technischen Veröffentlichung fälschlicherweise signalisiert wird, sämtliche Inhalte seien aktualisiert worden.

07Technik & Betrieb

Eigenständiger Betrieb, integrierter Datenschutz, zugängliche Oberfläche

Individuelle Anwendung ohne Plattformabhängigkeit

Woop Art wurde als individuelle Webanwendung auf Basis von Next.js, React und TypeScript entwickelt. Die Anwendung wird als eigenständiger Container ausgeliefert und ist damit nicht an eine bestimmte Website-Plattform oder einen einzelnen Hosting-Anbieter gebunden.

Zum technischen Betrieb gehören

  • mehrstufiger Docker-Build
  • automatisierte Type- und Build-Prüfungen
  • versionierte Container-Images
  • private Paketverwaltung
  • kontrollierte Veröffentlichungen
  • laufende technische Betreuung

Jede veröffentlichte Version lässt sich reproduzierbar bereitstellen oder bei Bedarf auf einen vorherigen Stand zurücksetzen.

Auch der E-Mail-Versand für Kontaktanfragen läuft über eine zentrale Infrastruktur mit Amazon SES.

Übergabe, Quellcode und Exit

Die Oberfläche entsteht bei uns je Projekt in einem eigenen Repository. Woop Art lässt sich deshalb als abgeschlossener Quellcodestand übergeben, ohne dass Teile fremder Projekte mitgehen.

  • Quellcode der Website auf Anfrage des Auftraggebers
  • Nutzungsrechte an den eingesetzten Woop-Packages zu dem Stand, den die Website verwendet
  • Auslieferung als eigenständiger Container – ein Anbieterwechsel setzt keine bestimmte Plattform voraus
  • Löschung der Kundendaten 30 Tage nach Übergabe oder Vertragsende

Beschrieben ist, was vorgesehen ist. Was im Einzelfall gilt, regelt der jeweilige Vertrag.

Datenschutz wurde in die Anwendung integriert

Auch das Consent Management basiert auf einer eigenen wiederverwendbaren Komponente von Woop Technology. Für Woop Art umfasst die Konfiguration:

3

Consent-Kategorien

4

Services

7

deklarierte Cookies

2

Sprachen: Deutsch und Englisch

Änderungen an der Consent-Konfiguration werden versioniert und können eine erneute Entscheidung des Besuchers auslösen.

Google Consent Mode v2 wird standardmässig mit verweigerten Zuständen initialisiert. Analytics wird erst geladen, nachdem die entsprechende Zustimmung erteilt wurde. Consent-Entscheidungen werden serverseitig mit Zeitstempel, Consent-Version und anonymisierter IP-Adresse protokolliert.

Gestaltung endet nicht beim sichtbaren Interface

Die Website berücksichtigt auch Nutzer, die mit Screenreadern, reduzierter Bewegung oder Zoomfunktionen arbeiten.

Unter anderem wurden umgesetzt

  • zweisprachige Screenreader-Texte
  • redaktionelle Alt-Texte für alle 98 Kunstwerke
  • semantisches HTML
  • zugängliche Formularbeschriftungen
  • prefers-reduced-motion
  • weiterhin erlaubtes Pinch-to-Zoom
  • navigierbare Werkstrukturen auch ohne JavaScript

Gerade bei einer Kunstwebsite wurde bewusst darauf verzichtet, das Zoomen auf mobilen Geräten einzuschränken – Besucher sollen Werke vergrössert betrachten können.

Ein formales WCAG-Konformitätsaudit wurde nicht durchgeführt; deshalb werden keine entsprechenden Zertifizierungs- oder Konformitätsaussagen gemacht.

08Ergebnis

Aus einem Werkbestand wurde ein digitales System

Woop Art ist heute nicht nur eine Website mit Bildern. Entstanden ist ein digitaler Kunstraum, der unterschiedliche Anforderungen miteinander verbindet:

Erlebnis

Eine atmosphärische Galerie für die visuelle Entdeckung.

Struktur

Ein vollständiges digitales Werkverzeichnis.

Kontext

Eigene Werk-, Technik-, Projekt- und Künstlerseiten.

Auffindbarkeit

214 indexierbare Adressen mit mehrsprachiger SEO-Struktur.

Conversion

Werkbezogene Anfragen statt anonymer Kontaktformulare.

Erweiterbarkeit

Neue Arbeiten werden zentral ergänzt und automatisch in die bestehende Struktur integriert.

Damit kann der digitale Auftritt gemeinsam mit dem künstlerischen Werk weiterwachsen – ohne für jedes neue Kunstwerk eine neue technische Lösung zu benötigen.

Gemessene Qualität · Lighthouse Desktop
99

Performance

100

Accessibility

96

Best Practices

100

SEO

  • 0,5 s First Contentful Paint
  • 0,8 s Largest Contentful Paint
  • 0 Cumulative Layout Shift

Die Werte stammen aus der aktuellen Lighthouse-Desktop-Messung vom 7. August 2026.

Portfolio

Weitere Projekte

  • Eigener DienstDatenschutzArchitektur
    Technischer Baustein

    Consent Management

    Unsere eigene Consent-Engine. Sie verwaltet Einwilligungen, schaltet zustimmungsabhängige Dienste frei und bereinigt Cookies beim Widerruf – während Daten, Sprachen und Gestaltung pro Projekt frei bestimmbar bleiben.

    Oberfläche
    Banner und Einstellungen im Design des Projekts
    Consent-Engine
    Zustand, Versionierung, Registry, Gating
    Datenquelle
    JSON, API oder CMS – austauschbar
  • UX/UI DesignWebentwicklungMehrsprachigkeitBuchung & Zahlung

    Ciklusfit — Cintia Németh

    Eine klar strukturierte Plattform für zyklusorientiertes Training, Ernährungs- und Lebensstilberatung – mit Angebotsvergleich, Terminanfrage und Buchung.

    Ciklusfit — Cintia Németh
    Ciklusfit — Cintia Németh