Industrie:
Mode en streetwear
Tijdlijn:
1,5 week
Impact:
6 pagina's, van merk tot cart
GRYM is een streetwear-concept dat laat zien hoe wij een mode webshop laten maken, op het niveau dat we meenemen naar een pitch. We bedachten het merk zelf, een label met limited drops, en bouwden het uit tot een werkende storefront van zes pagina’s. Zo zie je hoe we denken voordat er geld op tafel ligt. Omdat het merk van ons is, zijn er geen omzetcijfers van een klant om mee te zwaaien. Wat er wél is, is het werk zelf, live op onze staging en van begin tot eind klikbaar, omdat we er trots op zijn en het je sneller laat zien wat mogelijk is dan welke slide ook.
Pitchen hoort bij het vak. Je gaat de strijd aan met andere studio’s, je wint er, je verliest er, en het ligt zelden aan één heldere reden. Dus naast het klantwerk bouwen we dingen als GRYM op eigen houtje, waar de enige brief de brief is die we onszelf opleggen en de lat dezelfde is als bij een echte. Dit is die lat.
De meeste modewebshops lijken op elkaar omdat ze hetzelfde beginnen. Pak een thema, vul het met producten, zet het live. Werkt prima, en je bent het meteen vergeten. We wilden weten hoe ver je de persoonlijkheid van een webshop kunt oprekken voordat hij onbruikbaar wordt, want precies op die grens zit het interessante werk. Te weinig en je hebt weer een raster met kaartjes. Te veel en niemand vindt de maatknop.
Een drop-label maakt het lastiger. Het hele model draait op schaarste en timing. Eén oplage, een vast aantal stuks, een klok, en dan is het weg. Dat moet voelen als een gebeurtenis zonder een gokspel te worden voor wie iets wil kopen. Dus stelden we onszelf drie regels. De winkel moet vanaf het eerste scherm naar het merk voelen, niet pas vanaf het derde. Schaarste moet duidelijk zijn zonder een goedkope truc te worden. En het systeem moet over elke pagina kloppen, niet alleen op de homepage die in een pitch alle aandacht krijgt. Goede UX voor een limited drop draait vooral om twijfel wegnemen terwijl de klok loopt, en dat is moeilijker dan het klinkt.
GRYM is een streetwear- en schoenenlabel met kleine oplages, voor de gelegenheid bedacht. De identiteit leunt bijna volledig op typografie, het goedkoopste en meest onderschatte gereedschap in webdesign voor een modemerk. Het woordmerk staat in Syne, zwaar en breed, en op de homepage stopt het met logo zijn en wordt het de lay-out. De letters spannen over het scherm en het product staat ertussen, genesteld tussen de R en de Y. Het leest als zelfverzekerd in plaats van schreeuwerig, precies de toon die het label zoekt.
Archivo draagt de bodytekst, en DM Mono doet het kleine, technische werk: de speclijnen, de labels, de drop-klok, alles wat moet lezen als een pakbon en niet als een poster. Die splitsing doet veel stil werk. De mono staat voor precisie en voorraad, de schreefloze display voor houding, en je haalt de twee nooit door elkaar.
Het palet is bewust kort. Gebroken wit op #ECECE8, bijna zwart op #0A0A0A, en één acid-lime op #C8FF1E die al het wijzen doet. Elke knop, elke live status, elke “hier moet je klikken” is lime, en verder niets. Twee betongrijzen vullen de productwereld aan. Onder alles ligt een licht ruitjesgrid, zodat de pagina leest als een werkbank en niet als een billboard. Vijf tinten, één accent, veel terughoudendheid. Dat is de hele set, en hij draagt zes pagina’s zonder moe te worden.
Een homepage bewijst op zichzelf niks. Iedereen krijgt één scherm wel mooi. De echte vraag is of het idee een productpagina overleeft, een cart, en de pagina’s waar niemand een screenshot van maakt. Dus bouwden we de hele set:
Zes pagina’s, één systeem. De header en footer zijn overal gelijk, de typeschaal dwaalt niet af, en de lime betekent altijd hetzelfde. Die consistentie is het echte werk. Een hero ontwerpen is makkelijk. De zesde pagina net zo strak houden als de eerste is wat een echt ontwerpsysteem voor e-commerce scheidt van een mooie homepage.
Een drop-winkel die niet beweegt voelt dood, dus de front-end is gebouwd om te reageren. De cart is echt. Voeg de Concrete Runner toe en hij schuift van opzij in als een drawer met het lopende totaal, in plaats van je naar een andere pagina te gooien en je ritme te breken. Een live countdown telt af naar de dropdatum, 14 juni 2026 om 18:00 CET, gebouwd op een timer en niet op een statisch plaatje, zodat het leest als een echte deadline en niet als een sticker.
De collectie filtert ter plekke in plaats van te herladen. Productkaarten lichten op en wisselen bij hover naar een tweede beeld, zodat je een line-up snel scant zonder elke pagina te openen. En omdat beweging voor sommige mensen een probleem is, respecteert het geheel de reduced-motion-instelling en kalmeert het als de browser daarom vraagt. Niets hiervan is animatie om de animatie. Elk stukje is er om twijfel weg te halen uit een snelle aankoop onder tijdsdruk, precies het moment waarop een drop-winkel mensen meestal kwijtraakt.
Dit is een front-end concept, geen draaiende winkel, en dat doen we ook niet anders voorkomen. Het is ontworpen om op WooCommerce gebouwd te worden, een van de platformen waar we echt mee werken, naast Shopify en een maatwerk-CMS waar dat zich loont. We bouwen niet op paginabouwers als Elementor of Oxygen. Zo legt het ontwerp zich zonder gevecht neer op een echte build.
De Concrete Runner en zijn broertjes worden WooCommerce-producten, met maten als varianten en de “individueel genummerd” en oplagegrootte als productvelden. De drop zelf wordt een productcategorie, zodat “Concrete Season” een echte, filterbare collectie is in plaats van een handgemaakte pagina. De countdown en de uitverkocht-logica hangen aan de dropdatum en de voorraadstand, wat betekent dat als een oplage doorverkoopt, de winkel dat zelf zegt zonder dat iemand om middernacht een banner zit te wijzigen. De cart drawer, de filtering en de producttemplates zijn precies het soort maatwerk front-end dat we boven op WooCommerce bouwen, zonder een opgeblazen thema.
De reden dat we het zo ontwerpen is simpel. Een concept dat niet te bouwen is, is een poster. Dit is een storefront die je kunt opleveren, met een helder pad van het ontwerp dat je hier ziet naar een werkende winkel.
Mensen wachten niet aan hun bureau op een drop. Ze krijgen de melding, pakken hun telefoon, en hebben ongeveer een minuut voordat de maat die ze willen weg is. Dus de winkel is responsive over alle schermformaten, en de telefoon is niet het restgeval. Het hero-woordmerk herstapelt, de productpagina houdt de maatkiezer en de koopknop binnen duimbereik, en de countdown en cart blijven waar je ogen al zijn. Responsive ontwerp telt overal, maar bij een drop is het het hele spel, dus het zat er vanaf het eerste scherm in en is er niet achteraf op kleiner formaat ingeperst.
Even de rechttoe rechtaan versie. Omdat het merk van ons is, zijn er geen conversiecijfers en geen voor- en na-grafieken, en dat zeggen we liever dan een grafiek te schilderen om het gat te vullen. Wat je wél kunt beoordelen is het werk zelf, en daar gaat het om.
Wat het laat zien is hoe we werken als de brief van onszelf is en er nergens te verbergen valt. Een merk vanaf nul met een mening. Een systeem strak genoeg om zes pagina’s te dragen zonder af te dwalen. Commerce-flows die passen bij hoe mensen echt kopen onder tijdsdruk, een echte cart, een productpagina die vragen beantwoordt voordat je ze stelt, filtering, en schaarste-logica die eerlijk is over wat weg is. En een front-end die ontworpen is om op een echt platform te draaien, niet in een zandbak.
Als je wilt uitvogelen of een bureau een idee van het eerste tot het laatste scherm overeind houdt, vertelt zo’n stuk je meer dan een mooie homepage met een geleend logo erop. Als we voor een betalend merk bouwen, geldt dezelfde discipline, met jouw doelen en jouw cijfers erbovenop. Het werk gaat langs dezelfde lat, of we er nu voor pitchen of het al gewonnen hebben.
Als je shop er prima uitziet maar voelt als elke andere shop, is dat meestal een merk- en structuurprobleem, geen pluginprobleem. Plan een korte videocall van 30 minuten en we laten je precies zien wat er beter kan, in gewone taal, zonder druk.
Vertel wat vastloopt, wat je wilt bouwen, of wat opgelost moet worden. We reageren doorgaans binnen 24 uur.
