Schep

Mijn eigen site is bewust rustig, en Smart Timmerwerk is een zakelijke site voor een vakman. Ik wilde ook laten zien wat er kan als een merk juist mag opvallen: veel kleur, veel beeld en beweging die iets vertelt.

My own site is deliberately calm, and Smart Timmerwerk is a business site for a tradesman. I also wanted to show what's possible when a brand is allowed to stand out: lots of colour, lots of imagery and motion that tells you something.

Daarom verzon ik een zaak: Schep, een ijssalon in Amsterdam-Oost. Het merk, de teksten en de site zijn van mij. Schep bestaat niet, en dat staat ook gewoon op de site zelf. Daarom staat hij ook niet in Google.

So I made up a business: Schep, an ice cream shop in Amsterdam-Oost. The brand, the copy and the site are mine. Schep doesn't exist, and the site itself says so. That's also why it isn't in Google.

Ik begon met twee complete richtingen naast elkaar, allebei als echte webpagina met beweging: Schep, speels en kleurrijk, en Laat, een filmische wijnbar. Zo kies je niet op een plaatje, maar op hoe het voelt als je scrolt.

I started with two complete directions side by side, both as a real web page with motion: Schep, playful and colourful, and Laat, a cinematic wine bar. That way you don't choose from a picture, but from how it feels as you scroll.

Schep won. Het verschilt het meest van mijn eigen werk, en het wow-moment snap je in twee seconden.

Schep won. It's the furthest from my own work, and you get the wow moment in two seconds.

Het wow-moment: scroll je door de smaken, dan krijgt de hele pagina de kleur van de smaak die in beeld is. Framboos, pistache, mango, blauwe bes en chocola, elk met een eigen foto die meedraait terwijl je scrolt.

The wow moment: as you scroll through the flavours, the whole page takes the colour of the flavour in view. Raspberry, pistachio, mango, blueberry and chocolate, each with its own photo that turns as you scroll.

Elke kleur is gecontroleerd op contrast, zodat de tekst op elke achtergrond goed leesbaar blijft.

Every colour is checked for contrast, so the text stays easy to read on every background.

Een ijssalon is geen bank, dus er mag gespeeld worden. In het stapelspel kies je tot drie bollen, die met een stuiter op het hoorntje vallen. Tik op een bol om hem eraf te halen, zet er spikkels op, en een bon rekent mee.

An ice cream shop isn't a bank, so you're allowed to play. In the stacking game you pick up to three scoops, which bounce onto the cone. Tap a scoop to take it off, add sprinkles, and a receipt keeps count.

En een quiz van drie vragen vertelt welke smaak jij bent. Met één knop leg je die smaak meteen op je hoorntje.

And a three-question quiz tells you which flavour you are. One button puts that flavour straight onto your cone.

De opening speelt meteen af, nog voordat er een script geladen is: de letters stuiteren binnen en het ijsje komt omhoog uit een boog. Verderop schuiven de vier stappen van melk tot hoorntje zijwaarts voorbij terwijl je naar beneden scrolt, met korte video's die pas laden als ze in beeld komen.

The opening plays straight away, before any script has loaded: the letters bounce in and the ice cream rises out of an arch. Further down, the four steps from milk to cone slide sideways as you scroll down, with short videos that only load once they're in view.

Beweeg je muis door “Op is op.” en er vallen ijsjes achter je aan. Wie in zijn instellingen minder beweging vraagt, krijgt een stille pagina waarop alles nog werkt.

Move your mouse through “Op is op.” and ice creams drop behind it. Anyone who asks for less motion in their settings gets a still page where everything still works.

Op de telefoon veeg je door de stappen, vouwt het menu open uit de hoek en is elke knop groot genoeg voor een duim. De open-of-dicht-status rekent in Amsterdamse tijd en heeft een korte versie, zodat hij ook op een klein scherm past.

On the phone you swipe through the steps, the menu unfolds from the corner and every button is big enough for a thumb. The open-or-closed status works in Amsterdam time and has a short version, so it fits on a small screen too.

Elk onderdeel staat los, met een eigen stukje code dat alleen draait als zijn sectie op de pagina staat. Verplaatsen, weglaten of hergebruiken kan zonder dat de rest breekt. Op een aparte pagina staan de kleuren, letters, knoppen en alle vijftien secties.

Every part stands on its own, with its own bit of code that only runs when its section is on the page. Moving, removing or reusing one doesn't break the rest. A separate page shows the colours, type, buttons and all fifteen sections.

Zo kan ik dezelfde bouwstenen inzetten voor een echte zaak. De foto's en video's komen nu van Unsplash en Pexels; voor een echte zaak werk ik het liefst met eigen beeld.

That way I can use the same building blocks for a real business. The photos and videos come from Unsplash and Pexels for now; for a real business I prefer to work with its own imagery.

Schep staat live als demo. Lighthouse geeft op mobiel 97 voor snelheid en 100 voor toegankelijkheid en best practices. De eerste lading is ongeveer 390 KB; de video's komen pas als je erbij bent. Elke knop, elk spel en elke schermbreedte wordt gecontroleerd door 82 automatische tests.

Schep is live as a demo. On mobile, Lighthouse gives it 97 for speed and 100 for accessibility and best practices. The first load is about 390 KB; the videos only arrive once you get to them. Every button, every game and every screen width is checked by 82 automated tests.

Wil je iets in deze richting voor je eigen zaak? Dit is een one-pager met veel maatwerk: eigen animaties, een spel en een quiz. In een gratis kennismaking kijken we wat bij jou past.

Want something along these lines for your own business? This is a one-pager with a lot of custom work: its own animations, a game and a quiz. In a free intro call we look at what suits you.