Case Study

ringelberg.art

Een galerie waar je zelf doorheen loopt. Elk doek hangt op zijn echte formaat aan de muur.

Kunstenaarsportfolio3D-galerieUX/UI + BrandingThree.js + Vite

Ringelberg is een Nederlands-Tanzaniaanse schilder die in België woont en werkt. Hij wilde zijn werk laten zien en het direct verkopen, zonder dat het als een webshop aanvoelt. Geen winkelwagen, geen productpagina's. Meer een ruimte dan een catalogus.

ringelberg.art

De uitdaging

Kunst online verkopen is vooral een kwestie van vertrouwen. Pas daarna wordt het techniek. Wie een paar duizend euro aan een doek uitgeeft, wil weten hoe het aan de muur hangt, hoe groot het echt is en wat hij precies krijgt. De schilder wilde bovendien achter zijn signatuur blijven, en prijzen en beschikbaarheid zelf kunnen aanpassen zonder in de code te duiken.

Onze aanpak

Geen framework, gewoon JavaScript op Vite. Three.js laadt alleen op de pagina die het nodig heeft, de rest blijft simpele en snelle HTML. Voor het ontwerp keken we naar hoe een galerie werkt, niet naar hoe een website hoort te werken: geen ronde hoeken, geen gevulde knoppen, één lettertype, niets dat de schilderijen wegdrukt. Al het werk staat in één bestand dat de schilder zelf bijhoudt.

Ringelberg wordmark

De signatuur

Het woordmerk schrijft zichzelf en gaat daarna aan de kant.

Het woordmerk is de handtekening van de schilder zelf. Op de voorpagina schrijft het zichzelf en schuift daarna mee naar de hoek van de header zodra je scrollt.

De animatie volgt het echte pad van de pen. We zetten de handtekening om naar pixels, brachten hem terug tot de middellijnen en bouwden de volgorde van de halen opnieuw op. Zo verschijnen de letters zoals een hand ze zet, in plaats van dat ze van links naar rechts inschuiven.

Het speelt één keer af als je binnenkomt en daarna is het klaar. Het gaat om de schilderijen, niet om het effect.

De oplossing

Vier dingen dragen de site: een ruimte waar je doorheen loopt, een handtekening die zichzelf schrijft, foto's precies zoals de schilder ze maakte, en pagina's die een zoekmachine echt kan lezen.

3D-galerie

Een witte ruimte in de browser. De camera glijdt van doek naar doek en elk schilderij hangt op zijn echte formaat, dus een 40 bij 50 oogt kleiner dan een 80 bij 100. Klik en je staat er met je neus bovenop.

Geschreven woordmerk

De handtekening tekent zichzelf langs het echte pad van de pen en schuift bij het scrollen mee naar de header.

Zijn foto's, onbewerkt

Er wordt niets bijgesneden of geretoucheerd; de site past zich aan de foto's aan. In de 3D-ruimte neemt de muur de achtergrondkleur van elke foto over, zodat het doek er zonder zichtbare rand op hangt.

Gebouwd om gevonden te worden

Elke pagina wordt als echte HTML geleverd, met een eigen preview-afbeelding en gestructureerde data. Zo zien zoekmachines en AI-assistenten het werk in plaats van een lege pagina.

Het resultaat

Een site die verkoopt zonder ooit als winkel te klinken. Negen doeken met formaat, prijs en beschikbaarheid, een gesigneerd echtheidscertificaat bij elke verkoop, en aanvragen die in één klik bij de schilder binnenkomen. Past hij een prijs aan of zet hij een doek op verkocht, dan volgt de rest van de site vanzelf.

Technologie

Three.jsGSAPViteJavaScriptVercelJSON-LD

Werk dat meer verdient dan een template?

We ontwerpen en bouwen sites rond wat jij maakt, van portfolio tot platform. Vertel wat je in gedachten hebt.

Start een gesprek