Website voor een bloemist
Dit ontwerp heb ik zelf gemaakt, rond een winkel die niet bestaat: Bloemisterij Wilde Aster in Lindenbroek. Zo kan ik laten zien wat maatwerk voor een bloemenzaak oplevert zonder het werk van iemand anders te lenen. Wat je hieronder leest, is ook echt gebouwd en staat online.
Een winkel die elke week anders is
Een bloemist verkoopt iets dat elke week anders is. Wat er in de emmers staat wisselt met het seizoen en de prijs loopt met de veiling mee. Zet je dat allemaal op je site, dan klopt hij binnen een maand niet meer. Dit ontwerp is daarom om twee vragen heen gebouwd die wel elke dag gelden: is de winkel nu open, en maken ze wat ik zoek?
Bestellen gaat hier per telefoon of aan de toonbank. Dat is geen gemis, het staat er als keuze: "Bestellen is bellen of langskomen". Een webshop voor verse bloemen betekent voorraad bijhouden, en dat is werk dat er elke ochtend bij komt.
Vier pagina's rond het seizoen
Vier pagina's plus een eigen foutpagina: de homepage, het assortiment, het verhaal van de winkel en de contactpagina.
- Assortiment Zes groepen in twee rijen: boeketten, kamerplanten, tuin en terras, rouwwerk, trouwwerk, cadeaus en vazen. Elke foto heeft dezelfde staande snede, met een korte zin eronder.
- Openingstijden De tabel staat onderaan elke pagina, en de contactpagina heeft er daarnaast een uitgeschreven versie. Bovenin leest een klein script uit die tabel of de winkel vandaag open is, en de rij van vandaag licht op.
- Nu in de winkel Een oker etiket op de homepage met drie regels over wat er deze weken staat. Zonder datums of jaartallen geschreven, zodat het niet meteen achterhaald oogt als het een week blijft staan. Wat er staat blijft wel iets dat de winkel zelf bijwerkt.
- Contact Een formulier met een keuzelijst voor het onderwerp, het adres en een knop die de route in Google Maps opent. Geen ingesloten kaart, want die laadt mee bij iedere bezoeker.
- Op mobiel Na een stukje scrollen verschijnt rechtsonder een vaste bestelknop. Op de contactpagina verdwijnt hij weer zodra het contactblok zelf in beeld komt, want dan staat het nummer er al.
De kleuren en de letters
Het idee achter het ontwerp is de toonbank en het etiket. Het warme wit (#fbfaf7) is het pakpapier, het inktblauw (#1d3a5f) is de pen- en stempelinkt van de winkelier, en het oker (#d09b2c) is het gekleurde kaartje dat op een ding wordt geplakt, niet op alles.
Die laatste regel bepaalt waar de kleur mag komen. Op de homepage draagt alleen het seizoensetiket het oker; op de assortimentspagina hangt precies een kaartje met "Aanrader". Knoppen en links staan in het inktblauw.
De koppen staan in Karla, de lopende tekst in IBM Plex Serif. Winkeldrukwerk doet dat van oudsher zo: een nuchtere grotesk voor de naam boven de deur, een serif voor de tekst die je echt leest. Allebei staan ze als bestand op de site zelf, dus er gaat bij het openen geen verzoek naar een lettertypedienst van Google.
Rustig, als een etalage
Er beweegt bijna niets. Een etalage beweegt ook niet, de voorbijganger beweegt: kleur verandert vrijwel alleen op wat je aanwijst of aantikt, en er fadet niets in beeld tijdens het scrollen. Alleen de balk bovenaan krijgt een lijntje zodra je begint te scrollen, zodat hij van de pagina loskomt. Wie in zijn systeem heeft ingesteld dat hij minder beweging wil, ziet helemaal geen overgangen meer.
Prijzen staan er niet bij, want die lopen met de veiling mee; de site zegt dat en verwijst naar de winkel. Er staat ook geen vast sterrencijfer op, want zo'n getal klopt na een halfjaar niet meer en niemand ziet dat het achterloopt. De foto's krijgen geen zoom of schaduw bij het aanwijzen, ze hangen strak in een rij zoals dingen in een etalage.
Zoiets voor jouw winkel
Vertel me wat je verkoopt en hoe klanten nu bij je bestellen. Dan maak ik een voorbeeld met jouw naam en jouw foto's erin, en pas daarna gaat het over de prijs.
Liever eerst zelf rondklikken: bekijk dit ontwerp live.