Waar staat Mirliefs binnenkort?
De eerstvolgende markt staat op de homepage. Op de marktkaart vind je de andere locaties en data.
Projectcase · Live
Mirliefs
Mirjams creaties en marktagenda op een eigen website.
Mirliefs maakt decoraties en cadeautjes van keramisch gips. Ik bouwde een website waarop klanten voorbeelden kunnen bekijken en zien op welke markt ze Mirjam kunnen vinden. Bestellen gaat rechtstreeks via een bericht.
Handgemaakt van keramisch gipsKleine gelukjes, met liefde gemaakt.Bekijk de marktkaart
Project in het kort
Een website naast de marktkraam en sociale media.
Mirjam verkoopt op markten en bespreekt bestellingen persoonlijk. Op de website moest je vooral haar werk kunnen bekijken, de marktagenda vinden en weten hoe je iets kunt bestellen.
- Projectvorm
- Website met een marktkaart en zelfbeheer
- Doelgroep
- Klanten die creaties en marktlocaties willen bekijken
- Mijn rol
- Indeling, ontwerp, bouw, beheeromgeving en livegang
- Techniek
- Next.js, React, TypeScript en Sanity
- Centrale functie
- Interactieve marktkaart van Nederland
- Status
- Live op www.mirliefs.nl
De beginsituatie
De informatie stond vooral op sociale media.
Mirjam deelde haar creaties via sociale media. Voor voorbeelden, uitleg over bestellen en de marktagenda wilde ze ook een eigen website hebben.
Een winkelwagen was daarvoor niet nodig. Ik heb de site zo ingedeeld dat bezoekers eerst kunnen rondkijken en daarna met hun wensen een bericht aan Mirjam kunnen sturen.
De vragen
Vier vragen die de website moest beantwoorden.
Wat Mirliefs nodig hadHandgemaaktMarktenPersoonlijkInspiratieSocial mediaZelf beheren
Op de websiteMarkten als blikvangerInspiratie zonder webshopBestellen via DMWarm en overzichtelijkBeheerbare inhoud via Sanity
Wat kun je laten maken?
De foto’s laten voorbeelden zien. Ze zijn geen voorraadlijst: klanten bespreken hun wensen rechtstreeks met Mirjam.
Hoe bestel je iets?
De website legt uit hoe bestellen werkt en verwijst voor het gesprek naar Instagram en TikTok.
Hoe blijft de agenda actueel?
Mirjam kan zelf een markt, tekst of foto aanpassen in de beheeromgeving.
De pagina’s
De creaties, het bestellen en de markten hebben een eigen pagina.
Op de homepage lees je kort wat Mirliefs maakt en waar de eerstvolgende markt is. Voor meer voorbeelden, de volledige marktagenda en uitleg over bestellen kun je verder klikken.
HomeKennismaken & eerstvolgende markt
InspiratieVoorbeelden & sfeer
BestellenPersoonlijk via DM
MarktenKaart & locaties
ContactDirecte kanalen
Door de website
- 01Home → Markten → Locatie en route
- 02Home → Inspiratie → Bestellen via DM
- 03Contact → Instagram of TikTok
Merk en ontwerp
Zachte kleuren bij de foto’s van de creaties.
Ik gebruikte crème, perzik, roze en lila naast de productfoto’s. De teksten en knoppen hebben meer contrast, zodat je ook op een telefoon kunt lezen waar je naartoe kunt.
Helder crème#FFF8E8
Zacht perzik#F5B895
Bloemroze#EFA6B8
Zacht lila#CDBCEB
Het ontwerpDe creaties in beeld
De productfoto’s krijgen veel ruimte. De kleuren komen terug in de achtergronden en knoppen.
De marktkaart
Op de kaart zien waar Mirjam staat.
Ik bouwde een kaart van Nederland waarop je de markten kunt aanklikken. Je ziet dan de datum, tijden, het adres en eventuele extra informatie. Via een routelink kun je de weg naar de markt openen.
Dezelfde informatie staat ook in een gewone lijst. Zo blijft de pagina bruikbaar voor bezoekers die liever lezen dan een kaart bedienen.
De stippen moeten op hun plek blijven.Ik heb de marktpunten in dezelfde SVG-afbeelding als de kaart gebouwd. Zo schalen ze mee en blijven ze ook op een iPhone bij de juiste plaats staan.
Sanity CMS
Mirjam kan zelf markten en foto’s toevoegen.
Met Sanity heb ik een beheeromgeving ingericht voor de inhoud die regelmatig verandert. Mirjam kan daar de marktagenda, foto’s en teksten bijwerken. De indeling en vormgeving van de website blijven hetzelfde.
Mirliefs beheer●
⌂HomepageFoto's en verhaal
⌖MarktenData, kaartlocaties en links
✿InspiratievoorbeeldenBeelden, teksten en volgorde
⚙Website-instellingenIntroductie en contactkanalen
Zelfstandig aanpasbaar
- Marktnaam, datum, tijden en locatie
- Kaartpositie en aanvullende marktinformatie
- Inspiratiebeelden, teksten en volgorde
- Homepagefoto en focuspunt
- Verkoopkastverhaal en fotografie
- Introductie en sociale links
Kan de site de marktagenda tijdelijk niet ophalen, dan blijven de vaste informatie en links naar sociale media beschikbaar.
Bouw en controles
Hoe ik de website heb gebouwd.
Ik gebruikte Next.js, React en TypeScript voor de website en Sanity voor de beheeromgeving. De code staat in GitHub; via Vercel worden nieuwe versies gepubliceerd.
Tijdens het bouwen controleerde ik onder andere de mobiele indeling, de kaart, leesbaarheid en bediening. Ook de paginatitels en informatie voor zoekmachines zijn ingericht.
01Next.js App Router
02React
03TypeScript
04Sanity Studio
05Schaalbare SVG-kaart
06Native SVG-markers
07Next Image
08GitHub
09Vercel
10Technische SEO
De livegang
Online op het bestaande domein.
Na de technische controles is de GitHub-repository aan Vercel gekoppeld. Voor het bestaande domein zijn alleen de benodigde webrecords gewijzigd; de aanwezige mailrecords bleven behouden.
www.mirliefs.nl is het primaire adres, de versie zonder www verwijst automatisch door en HTTPS is actief. Google Search Console is via DNS geverifieerd, de sitemap is aangemeld en Mirjam kreeg toegang tot de Sanity-beheeromgeving.
GitHub→Vercel→www.mirliefs.nl
Het resultaat
Klanten kunnen nu ook via de website de markten vinden.
Mirjam heeft een eigen plek voor haar creaties en de agenda. Ze kan nieuwe markten zelf toevoegen. Klanten kunnen de locatie en route bekijken en een bericht sturen als ze iets willen bestellen.
Dat sluit aan op hoe ze al werkte: verkopen op de markt en bestellingen persoonlijk bespreken.
Bekijk Mirliefs live