Vernieuwing in het DNA

Experimentele vorm als drager van DNA van het Stedelijk Museum

Als eerste museum ter wereld maakte het Stedelijk in 1938 alle muren wit. Achteraf gezien bleek het de geboorte van het begrip White Cube; nog steeds wereldwijd de standaard voor museumzalen. Deze lef en vernieuwingsdrang blijven kenmerkend voor het Stedelijk en zie je terug in het vernieuwde online platform. Want een sterke identiteit is niet alleen artistiek maar ook zakelijk gezien enorm belangrijk.

Wij maakten deze nieuwe digitale stijl en de techniek daarachter, die zowel een heftige reactie oproept als heel intuïtief aanvoelt, en daardoor typisch Stedelijk is. Design voor mobiele gebruikers stond hierin centraal.

 

De samenwerking met Grrr heb ik als uiterst prettig ervaren. Wij zijn geen makkelijke klant, in die zin dat wij hoge eisen stellen aan de inventiviteit en de prestatiemotivatie van onze partners. Grrr nam de uitdaging aan en overtuigde met kennis, grote toewijding en de nodige humor. Ik kijk met veel plezier terug op het hele traject, en ben trots op het resultaat van het teamwerk tussen Grrr en het Stedelijk Museum.

Karin Sommerer - Manager Marketing & Communication at Stedelijk Museum Amsterdam

Brutalist webdesign; een opkomende trend

Qua ontwerp is het web steeds meer eenheidsworst. Beïnvloed door Google, Apple en Microsoft maken ontwerpers websites en apps met steeds meer dezelfde visuele stijl. Dat voelt vertrouwd voor gebruikers maar leidt ook tot saaie digitale vinexwijken. Met de nieuwe Stedelijk website proberen we iets anders en brengen we de opkomende trend van web brutalisme naar het grote publiek. Net als zijn architectonische voorganger, het brutalisme van bijvoorbeeld Le Corbusier, is web brutalisme een reactie op standaardisatie en overdreven franjes. Vroeger waren dat ornamenten op gebouwen. Digitaal uit zich dat in comfortabele en makkelijke websites met vaak een overdaad aan beeld, terwijl dat voor gebruikers niet altijd heel veel toevoegt.

Brutalisme heeft niks met brutaal of bruutheid te maken. Taalkundig gezien verwijst het naar rauw beton (naar het Franse “béton-brut”). We gebruiken typografie hier als het ruwe beton van de website. De teksten zijn groot en duidelijk leesbaar. Precies de informatie die je zoekt maar ook zo in your face dat het een artistiek statement is.

Rolf Coppens, Creative Director Grrr

Niet standaard, wel intuïtief

Veel websites zijn eigenlijk gedigitaliseerde folders waar je doorheen bladert. Dat terwijl toenemend digitaal gedrag – we gebruiken veel vaker mobiel – juist kansen biedt tot een heel andere benadering. Waarom niet een speelse presentatie waar je alle functies direct voor je hebt? Zo werken je mobiele besturingssysteem en chat apps, en dat was de inspiratie voor de opzet van de nieuwe Stedelijk website.

We laten zien dat het allebei kan: een artistiek statement maken en een intuïtieve website. Zoals de White Cube de kunst beter tot zijn recht liet komen, is ook hier de digitale vorm dienend aan de inhoud. Tegelijkertijd is het ook een iconisch nieuw beeld.

Robin Holland, Marketeer Stedelijk Museum

Trouw aan de huisstijl, maar niet hetzelfde

Het Stedelijk Museum heeft een iconische, herkenbare huisstijl van Mevis & Van Deursen. Wij vertaalden die stijl naar een vorm die online logisch is, zonder de papieren uitingen na te maken. Typografie speelde daarin een grote rol, maar ook het element van spel. Wij vertaalden dat spelen met vorm naar een interactieve vorm met het swipen van de letters.

Design als statement

Na de jubeljaren waarin iedere digitale ontwikkeling met luid gejuich werd ontvangen zijn we inmiddels in een kritischer stadium beland. Airbnb, Facebook en Uber zijn niet langer meer de ideale schoonzoon die ze ooit waren. Stedelijks tegendraadse ontwerp vormt een impliciet statement voor deze ontwikkeling.

Zoeken staat centraal

De focus voor de nieuwe website ligt op mobiel gebruik. We zien dat navigeren steeds vaker gebeurt via de zoekfunctie in plaats van het menu. Daarom dient de zoekfunctie, zeker op mobiel, als navigatiemiddel. Leuk detail: de zoekmachine praat ook terug, afhankelijk van waar je bent krijg je tips en reacties.

Eindelijk een website die ik zonder leesbril kan lezen.

Bezoeker van Stedelijk Museum
Toegankelijkheid en inclusie

Een toegankelijke website voor oa. blinden

Net zoals de kunst van Stedelijk moet de website er ook voor iedereen zijn. Daarom is de website ook gebouwd met precies dat in gedachten: de website moet toegankelijk en inclusief zijn. Daarom is de website niet alleen toegankelijk voor muis gebruikers maar is er ook gedacht aan toetsenbord toegankelijkheid: je kunt volledig door de website navigeren door middel van het toetsenbord. Ook de photo carrousel en de overlays zijn bijvoorbeeld op deze manier navigeer- en bedienbaar.
De (front-end) code is semantisch door de juiste HTML5 elementen te gebruiken en content van de juiste heading-structuur te voorzien. Ook zijn er aria-labels en andere beschrijvende teksten aangebracht zodat Assistive Technology (zoals screenreaders voor mensen met blindheid of een andere visuele handicap), goed overweg kan met de content en bezoekers de informatie geeft waar zij naar op zoek zijn. Om de bezoeker in staat te stellen grote blokken content te omzeilen, om zo snel naar de taalinstellingen, menu of de kern van een pagina te gaan, zijn er zgn. “skiplinks” aanwezig.

Door progressive enhancement toe te passen is de website is volledig bruikbaar wanneer JavaScript(-ondersteuning) is uitgeschakeld of misschien niet goed is ingeladen door een haperende internetverbinding of Adblocker.

Een leuk detail: gebieden van het museum die niet toegankelijk zijn voor een rolstoel, zijn op de website te zien als een 360 graden foto. Zo maak je als rolstoeler toch alles mee.

Voor de tech nerds

Technische vernieuwing achter de schermen

De nieuwe website gaat verder dan je wat ziet: het is een super flexibel content platform. Op basis van Laravel worden koppelingen gemaakt met collecties, kaartverkoop- en reserveringssystemen. De zoekmachine draait op het krachtige Elastic Search algoritme. Boven alles: een super uitgebreid redactiesysteem dat curatoren, conservatoren, wetenschappers en marketeers de tools geeft om hun verhaal te vertellen.

Nieuwe trucs die we toegepast hebben zijn oa. Lambda (algoritmen zonder servers) voor de Adlib collectie synchronisatie en een 100% auto-scaling server cluster op basis van Amazon AWS. In de frontend pasten we responsive typography met vw units toe en met CSS font-display property laden we een fallback font op trage verbindingen op sommige browsers. Aria-labels en toetsenbordtoegankelijkheid voor toegankelijkheid en gehandicapte gebruikers. Toepassing van `skiplinks` om snel te kunnen navigeren door de website, als toetsenbordgebruiker kom je nu sneller bij de languageswitch dan een muisgebruiker.

In samenwerking met

Credits

Het team van Grrr werkte nauw samen met het Stedelijk Museum team: Karin Sommerer, Robin Holland, Saskia Dubois en Moniek Dollekens.

In samenwerking met Bas Koopmans (Art Direction), Koen Wijffelaars, Lotte Meijer, Maartje Rooker, Michiel Agterberg. In de researchfase werkten we samen met SILO.

Met dank aan de Stedelijk staf, Karin van Gilst en Beatrix Ruf.