Conceptproject: maatwerk websiteConcept project: custom website
Laat
Een verzonnen wijnbar in De Pijp, met een site die niet alleen over de zaak vertelt, maar een deel van het werk doet: reserveren, de kaart van vandaag, de agenda, cadeaubonnen en een beheerscherm voor het team.
A made-up wine bar in De Pijp, with a site that doesn't just talk about the place but does part of the work: bookings, today's menu, events, gift cards and an admin screen for the team.

01De opdrachtThe brief
Laat is verzonnen, maar ik heb hem opgezet als een echte opdracht. De eigenaren komen met zes problemen: vrijdag en zaterdag vol en doordeweeks lege tafels, een kaart die elke dag verandert maar als oude pdf online staat, toeristen die in het Engels vragen wat natuurwijn is, proeverijen die via berichtjes lopen, cadeaubonnen die alleen aan de bar te koop zijn en gasten die een fles mee naar huis willen.
Laat is made up, but I set it up like a real brief. The owners come with six problems: full on Friday and Saturday but empty tables midweek, a menu that changes every day but sits online as an old pdf, tourists asking in English what natural wine is, tastings booked through direct messages, gift cards only sold at the bar and guests who want to take a bottle home.
Laat begon als de tweede richting voor Schep: een filmische wijnbar. Schep werd de one-pager, Laat kreeg een eigen site om te laten zien wat maatwerk is. De zaak bestaat niet, dat staat op elke pagina, en daarom staat hij ook niet in Google.
Laat started as the second direction for Schep: a cinematic wine bar. Schep became the one-pager, Laat got a site of its own to show what custom work is. The place doesn't exist, every page says so, and that's why it isn't in Google either.
02Wat maakt het maatwerk?What makes it custom?
Een bedrijfswebsite vertelt over de zaak. Maatwerk doet een deel van het werk van de zaak. Het verschil zit niet in het aantal pagina's, maar in wat de site weet: welke tafels er vrij zijn, wat er op is, welke avonden vol zitten en wat er nog op een cadeaubon staat.
A business website tells you about the place. A custom site does part of the place's work. The difference isn't the number of pages, it's what the site knows: which tables are free, what's sold out, which evenings are full and what's left on a gift card.
Laat heeft elf pagina's in het Nederlands en het Engels, elk met een eigen adres. De kaart, de wijnen en de avonden staan in één databestand waaruit de site wordt gebouwd, en alle tijden rekenen in Amsterdamse tijd, ook na middernacht.
Laat has eleven pages in Dutch and English, each with its own address. The menu, the wines and the evenings live in one data file the site is built from, and every time works in Amsterdam time, even after midnight.
03Reserveren met eigen regelsBooking with its own rules
Reserveren gaat in vier stappen: personen, dag, tijd en klaar. Rustige momenten krijgen een label en volle tijden bieden de dichtstbijzijnde vrije tijden en een wachtlijst. Vanaf zes personen staat de aanbetaling vooraf in beeld, vanaf negen wordt het een groepsaanvraag. Na het bevestigen zet je de tafel met één tik in je agenda.
Booking takes four steps: people, day, time and done. Quiet moments get a label, and full times offer the nearest free times and a waiting list. From six people the deposit is shown up front, from nine it becomes a group request. Once confirmed, one tap adds the table to your calendar.
Op de homepage staat “Nog een tafel vrij?” met de eerste vrije tijden van vanavond. Eén tik en het reserveringsscherm staat al ingevuld.
The home page asks “Still a table free?” and shows tonight's first free times. One tap and the booking screen is already filled in.

04Een kaart die meedenktA menu that thinks along
Filters voor vega, vegan, glutenvrij en allergenen, die in de link blijven staan, zodat je je keuze kunt delen. Wat het team op “op” zet, staat meteen als op op de kaart, en bovenaan staat de special van vandaag.
Filters for vegetarian, vegan, gluten-free and allergens that stay in the link, so you can share your selection. What the team marks as sold out shows as sold out straight away, and today's special sits at the top.
Met “Jouw tafel” kies je borden: de site rekent mee voor het aantal personen, zegt wanneer je tafel vol genoeg is en zoekt er een fles bij. Je keuze gaat mee naar je reservering, zodat de keuken weet waar je zin in hebt.
With “Your table” you pick plates: the site does the maths for the number of people, says when your table is full enough and finds a bottle to go with it. Your picks travel with your booking, so the kitchen knows what you fancy.

05Wijn, agenda en cadeaubonWine, events and gift card
Een wijnkiezer van drie vragen wijst twee flessen aan, de wijn van de week wisselt elke maandag, en flessen bestel je om af te halen. De agenda rekent zelf uit wanneer de volgende proeverij, jazzavond of chef's table is, laat zien hoeveel plekken er nog zijn en heeft aanmelden, een wachtlijst en een agenda-bestand.
A three-question wine finder points out two bottles, the wine of the week changes every Monday, and you order bottles to pick up. The events page works out by itself when the next tasting, jazz night or chef's table is, shows how many seats are left and has sign-up, a waiting list and a calendar file.
De cadeaubon stel je zelf samen met een live voorbeeld, je bewaart hem als afbeelding en met de code check je later wat er nog op staat.
You put the gift card together yourself with a live preview, save it as an image and later use the code to check what's left on it.


06Het beheerschermThe admin screen
Het belangrijkste stuk voor de eigenaren. In tabbladen ziet het team de bezetting per avond, de reserveringen en de wachtlijst. Het zet gerechten en wijnen op “op”, past prijzen aan, kiest de wijn van de week, bepaalt de plekken per avond, gelast een avond af en boekt cadeaubonnen af.
The most important part for the owners. In tabs the team sees the occupancy per evening, the bookings and the waiting list. It marks dishes and wines as sold out, changes prices, picks the wine of the week, sets the seats per evening, cancels an evening and redeems gift cards.
Bij Instellingen staan de huisregels: openingstijden, gesloten dagen, de eerste en laatste tafel, hoe lang een tafel van jou is, tot hoeveel personen je online reserveert, de aanbetaling en een melding bovenaan de site. Alles wat het team aanpast, staat meteen op de site. In deze demo blijft dat in je eigen browser; in een echte versie praat hetzelfde scherm met een database of het reserveringssysteem van de zaak.
Settings holds the house rules: opening hours, closed days, the first and last table, how long a table is yours, up to how many people can book online, the deposit and a notice at the top of the site. Whatever the team changes is on the site straight away. In this demo that stays in your own browser; in a real version the same screen talks to a database or the place's booking system.


07Op de telefoonOn the phone
Op de telefoon toont de kalender één maand, wordt Jouw tafel een lade onderin en worden de cijfers in het beheer twee bij twee. Elke knop is groot genoeg voor een duim.
On the phone the calendar shows one month, Your table becomes a drawer at the bottom and the admin figures sit two by two. Every button is big enough for a thumb.

08ResultaatResult
Laat staat live als demo. Lighthouse geeft op mobiel 99 of 100 voor snelheid en 100 voor toegankelijkheid en best practices, op alle zeven geteste pagina's. 259 automatische tests klikken elke stap door, in beide talen, op drie schermbreedtes, met minder beweging en zonder JavaScript, ook op de live site. De foto's en video's komen van Unsplash en Pexels.
Laat is live as a demo. On mobile, Lighthouse gives it 99 or 100 for speed and 100 for accessibility and best practices, on all seven pages tested. 259 automated tests click through every step, in both languages, at three screen widths, with reduced motion and without JavaScript, on the live site too. The photos and videos come from Unsplash and Pexels.
Krijg jij elke dag dezelfde vragen, of doe je dingen met de hand die een site kan overnemen? Daar is maatwerk voor. In een gratis kennismaking kijken we wat jouw site voor je kan doen.
Do you get the same questions every day, or do things by hand that a site could take over? That's what custom work is for. In a free intro call we look at what your site can do for you.