Wat er gebouwd wordt
Het ontwerp is uitgesproken en direct herkenbaar als ANIQ: schuine vlakken, de bliksemschicht uit het logo, een draaiende ster en bewegende tekstbalken. Die eigenheid moet online volledig overeind blijven.
De website wordt daarom gebouwd volgens het ontwerp, ook op mobiel. In het Nederlands en Engels, goed vindbaar in Google en AI-tools, en zo opgezet dat je daarna zelf teksten aanpast en cases of blogs toevoegt.
Uitgangspunt uit de briefing: de website moet nieuwe klanten opleveren en de vindbaarheid verbeteren. Dat is bij alle keuzes in dit voorstel meegenomen.
WordPress en Bricks, zo werkt het samen
De website wordt gebouwd in WordPress, zoals gevraagd. WordPress bepaalt zelf alleen niet hoe de site eruitziet. Daarvoor wordt Bricks Builder gebruikt. Omdat je straks zelf met de site werkt, is het handig om te weten hoe die twee samenwerken.
Hier staat de content
Pagina's, cases, blogs, beelden, talen en de instellingen voor Google. Hier log je in, zoals nu bij je huidige site.
Hiermee wordt het ontwerp gebouwd
Een thema met een visuele editor dat binnen WordPress draait. Aanpassingen zijn direct zichtbaar, vergelijkbaar met werken in een ontwerpprogramma.
Eén template, 20 cases
De opmaak van een case wordt één keer gebouwd. Een nieuwe case die je in WordPress toevoegt, verschijnt automatisch in die opmaak.
Waarom niet Elementor?
Elementor is de bekendste pagebuilder voor WordPress, maar laadt veel extra code in. Sites worden daar vaak trager van, en een uitgesproken ontwerp exact nabouwen is lastiger. Bricks is lichter en geeft meer controle over vormen, overlap en animaties.
Dit is vooraf getest: de intro van de homepage, met de draaiende ster over de foto, is al nagebouwd in Bricks op desktop en mobiel.
Aanpak
Het ontwerp gebruikt steeds dezelfde vormen: schuine blokken, knoppen, de logo-carousel en de footer. Die worden eerst als losse bouwstenen gemaakt. Daarna worden de pagina's ermee opgebouwd. Dat werkt sneller en zorgt dat alles overal consistent is.
Basis opzetten
WordPress en Bricks installeren. Kleuren, fonts en tekststijlen uit het ontwerp vastleggen.
Bouwstenen maken
Header, footer, knoppen, schuine vormen, carousel en uitklapvragen, samen op één testpagina. Zo kun je ze in één keer beoordelen.
Pagina's bouwen
Eerst de homepage, daarna de overige pagina's. Cases en blogs krijgen elk één template.
Controleren
Elke pagina wordt naast het ontwerp gelegd en gecontroleerd op desktop en mobiel, voordat je hem te zien krijgt.
Afronden en live
Content invoeren, SEO, doorverwijzingen vanaf de huidige site en livegang.
Opbouw per pagina
Klik op een pagina om te zien uit welke blokken hij bestaat en wat er gebouwd wordt.
Homepage9 blokken
De homepage wordt als eerste gebouwd, omdat hier bijna alle bouwstenen samenkomen. De negen blokken worden opgebouwd, inclusief de ster-knop over de foto, de schuine reviewkaarten en een tijdelijke versie van de bewegende banner. Daarna worden afstanden en overlap afgestemd tot alles overeenkomt met het ontwerp.
- 1Header
Logo, menu met actieve pagina in zwart, NL/EN, Instagram en LinkedIn
- 2Hero met bewegende banner
Tekstblok links, motion-banner met portfolio rechts. Tijdelijke versie tot de motion designer oplevert
- 3Intro met ster-knop
Ster draait en valt over de foto heen. Al getest in Bricks
- 4Drie dienstblokken
Blauw, paars en roze met icoon, klikken door naar Diensten
- 5Logo-carousel
Twee of drie rijen logo's die doorlopen. Eén keer bouwen, drie keer hergebruiken
- 6Merkstrategie-blok
Turquoise vlak met schuine rand en foto
- 7Reviews
Drie schuine paarse kaarten. Tekst volgt later, de opbouw staat klaar
- 8CTA met foto
Roze vlak met schuine punt en portret
- 9Footer
Blauw vlak met schuine rand, links, KvK en twee tekstbalken die tegengesteld bewegen
Diensten5 blokken
De voorbeeldkaart met schuine hoek en beeld wordt één keer gebouwd en zes keer ingezet, met afwisselende kleuren en uitlijning. Het portfoliogrid onderaan haalt de cases automatisch op.
- 1Intro
Titel en tekst
- 2Drie dienstblokken
Hergebruikt van de homepage
- 3Zes voorbeelden
Afwisselend gekleurde en omlijnde kaarten met schuine hoek en beeld
- 4Portfoliogrid
Zes cases die automatisch uit het portfolio komen
- 5CTA en footer
Hergebruikt
Werkwijze4 blokken
Grotendeels bestaande bouwstenen. Nieuw zijn de vijf gekleurde stap-tegels met het grote outline-nummer.
- 1Intro
Titel en tekst
- 2Vijf stappen
Gekleurde tegels met groot outline-nummer en een CTA-tegel
- 3Logo-carousel
Hergebruikt
- 4Veelgestelde vragen
Uitklapbaar, twee kolommen. Ook goed voor vindbaarheid in Google en AI
Portfolio3 blokken
Het grid wordt gekoppeld aan de cases, met een filter op vier categorieën. Projecten verschijnen en verdwijnen zonder dat de pagina opnieuw laadt.
- 1Intro
Titel en tekst
- 2Filter op 4 categorieën
Food & beverages, non-food, personal care, other. Klik en de rest verdwijnt
- 3Grid met 20 cases
Vult automatisch vanuit je cases, inclusief de tegel Jouw merk hier
Case-template5 blokken
Invulvelden voor klant, dienst, uitdaging, aanpak, resultaat en beelden, met één template eromheen. Flexibel genoeg zodat elke case een eigen beeldopbouw kan hebben.
- 1Titel en klant
Invulvelden
- 2Hero-beeld
Groot beeld met logo
- 3Uitdaging, aanpak, resultaat
Drie kolommen met turquoise lijnen, op mobiel onder elkaar
- 4Beeldblokken
Flexibele opbouw zodat elke case eigen beeld kan tonen
- 5Meer van mijn werk
Zes andere cases, automatisch
Over mij6 blokken
De ster en de uitklapvragen bestaan op dit punt al. Nieuw zijn de fotorij met bewegende middelste foto en het blok dat automatisch de laatste drie blogs toont.
- 1Quote-banner met ster
Zwart vlak, foto en ster-knop. Hergebruik van de ster
- 2Intro-tekst
Gecentreerd
- 3Drie foto's
Middelste beweegt. Liever als video dan als gif, dat laadt veel sneller
- 4Aniek in 10 vragen
Uitklapbaar, hergebruik van de FAQ
- 5Tekstbalk
Bewegende balk, hergebruikt
- 6Blogpreviews
Drie laatste artikelen, automatisch
Blog-overzicht4 blokken
Een grid dat zich automatisch vult met artikelen, met paginering die verschijnt zodra er meer dan zes artikelen zijn.
- 1Intro
Titel en tekst
- 2Kaartgrid
Artikelen komen er automatisch in
- 3Paginering
Verschijnt vanzelf zodra er meer dan zes artikelen zijn
- 4LinkedIn-blok
Titel, streep en icoon
Blogartikel5 blokken
Invulvelden voor titel, nummer, tekst en foto's, met één template eromheen. Op mobiel komen de drie tekstkolommen onder elkaar.
- 1Titel met blognummer
Paarse badge met nummer, automatisch
- 2Tekst in drie kolommen
Op mobiel één kolom zodat het leesbaar blijft
- 3Drie foto's
Invulvelden
- 4Afsluitende tekst en CTA-tegel
Groene tegel met knop
- 5Lees meer artikelen
Automatisch
Contact3 blokken
Een formulier met zeven velden, gekoppeld aan je mailbox en voorzien van een spamfilter. Er wordt getest of berichten daadwerkelijk aankomen.
- 1Intro en veelgestelde vragen
Hergebruikt
- 2Contactformulier
Zeven velden, schuine vorm met bliksem, verzending naar je mailbox
- 3Spamfilter en bevestiging
Zodat je geen rommel binnenkrijgt en berichten niet in spam belanden
Wat eenvoudig is en wat meer tijd kost
Wat er spectaculair uitziet, is niet altijd veel werk. De bewegende tekstbalken zijn bijvoorbeeld relatief eenvoudig. Het finetunen tot alles exact klopt, kost juist de meeste tijd.
- Pixel-perfect finetunenSchuiven tot marges en hoeken echt kloppen
- ResponsiveSchuine vormen en overlap moeten op elk scherm goed vallen
- HomepageHier zit het meeste unieke werk
- Twee talenAlles bestaat twee keer, ook URL's en het formulier
- Portfolio-filterKlikken op een categorie en de rest verdwijnt
- Case-templateFlexibel genoeg voor 20 verschillende cases
- ContactformulierMoet altijd aankomen, niet in spam
- SEO en redirectsZodat je je plek in Google houdt
- Bewegende tekstbalkenMet code, geen motion designer nodig
- Draaiende sterAl getest
- Strepen die worden neergezetSimpele animatie bij het scrollen
- Logo-carousel en uitklapvragenEén keer bouwen, overal hergebruiken
Verdeling van de 75 uur
Uren per onderdeel
Klik op een onderdeel voor de details. Uurtarief € 65 excl. btw.
BasisHet fundament waar alle pagina's op draaien.9 uur€ 585,00
| Onderdeel | Uren | Bedrag |
|---|---|---|
| ProjectopzetWordPress, Bricks, hosting met testomgeving, kleuren, fonts en tekststijlen uit het ontwerp | 3 | € 195,00 |
| Globale componentenHeader met actieve pagina en NL/EN, footer, knoppen, schuine vormen en bliksemschicht, logo-carousel, uitklapbare FAQ, CTA-blokken | 6 | € 390,00 |
Pagina's en templatesOpbouwen met de componenten uit de basis.26 uur€ 1.690,00
| Onderdeel | Uren | Bedrag |
|---|---|---|
| HomepageBewegende banner, ster-knop over foto, dienstblokken, logo-carousel, reviews, CTA | 7 | € 455,00 |
| DienstenDienstblokken, zes voorbeelden met schuine kaders, portfoliogrid | 3 | € 195,00 |
| WerkwijzeVijf stappen, logo-carousel, uitklapbare vragen | 2 | € 130,00 |
| Portfolio-overzichtGrid met filter op 4 categorieën | 3 | € 195,00 |
| Case-templateEén opbouw voor alle 20 cases | 3 | € 195,00 |
| Over mijQuote-banner, bewegende foto, 10 vragen, blogpreviews | 3 | € 195,00 |
| Blog-overzichtKaartgrid met paginering | 1,5 | € 97,50 |
| Blogartikel-templateTitel met nummer, tekstkolommen, foto's, CTA, meer artikelen | 1,5 | € 97,50 |
| ContactFormulier naar je mailbox met spamfilter, schuine vorm, FAQ | 2 | € 130,00 |
Techniek en afwerkingWat je niet ziet, maar wel merkt.25 uur€ 1.625,00
| Onderdeel | Uren | Bedrag |
|---|---|---|
| ResponsiveMobiel en tablet, doorgetrokken vanuit je voorbeeldsectie, per component getest | 7 | € 455,00 |
| AnimatiesBewegende balken, strepen die worden neergezet, draaiende ster, motion-banner en bewegende foto inbouwen | 3 | € 195,00 |
| MeertaligheidNL en EN, taalwissel, Engelse URL's en formulier | 4 | € 260,00 |
| SEO en AI-vindbaarheidMeta-gegevens, sitemap, structured data, redirects van je huidige site, Search Console en Analytics | 5 | € 325,00 |
| Beveiliging en snelheidAutomatische backups, beveiliging en laadsnelheid | 2 | € 130,00 |
| CookiebannerPrivacy-instellingen voor Analytics | 1 | € 65,00 |
| TestenBrowsers en devices | 3 | € 195,00 |
SamenwerkingAfstemmen en feedback verwerken.5 uur€ 325,00
| Onderdeel | Uren | Bedrag |
|---|---|---|
| Afstemming en feedbackKick-off en briefing, drie afstemmomenten, feedback verwerken en de controle van elke template naast het ontwerp | 5 | € 325,00 |
Content en opleveringVan gevulde site naar live.10 uur€ 650,00
| Onderdeel | Uren | Bedrag |
|---|---|---|
| Content invoerenTeksten en beelden van alle pagina's, 20 cases en 6 blogs in NL en EN | 5 | € 325,00 |
| LivegangOverzetten van je huidige site, redirects testen en controle na livegang | 3 | € 195,00 |
| Oplevering en instructieVideo-instructie: teksten aanpassen, cases en blogs toevoegen | 2 | € 130,00 |
Opmerkingen en advies
Alle comments bij het ontwerp zijn doorgenomen en alles is haalbaar. Op een paar punten is er advies dat het bouwen eenvoudiger of de site sneller maakt.
Strepen en tekstbalken zonder motion designer
De strepen die van links naar rechts worden neergezet en de twee bewegende balken in de footer kunnen met code worden gemaakt. Dat bespaart werk en kosten bij de motion designer en laadt sneller dan video.
Bij de ster draait alleen de vorm
Zo blijft "Bekijk mijn diensten" leesbaar. Een SVG van de ster is voldoende, de animatie wordt in de site gemaakt.
Bewegende foto als video in plaats van gif
Een gif is al snel vijf tot tien keer zo zwaar als een korte MP4. Visueel is er geen verschil, maar de pagina laadt veel sneller.
Tekstkolommen op mobiel
De drie tekstkolommen op de blogpagina komen op mobiel onder elkaar. Goed om mee te nemen in het mobiele ontwerp.
Lopende tekst iets groter
Op sommige plekken, zoals bij de voorbeelden op Diensten, is de tekst klein. Een paar pixels groter verbetert de leesbaarheid en toegankelijkheid.
Vindbaarheid behouden bij de overstap
De huidige site heeft pagina's die al in Google staan. Die adressen worden doorverwezen naar de nieuwe pagina's, zodat bestaande posities behouden blijven.
Typfouten in het ontwerp
Handig voor de definitieve teksten: "Sterke merken beginnen hier.vOv" op Portfolio, "concent creatie" op Diensten, "branding & en verpakkingsontwerpster" op de homepage en "challengers brands" in de blog.
Planning
Drie vaste momenten om samen af te stemmen. Omdat je in oktober op vakantie gaat, worden de data bij de kick-off vastgelegd. De site staat tussendoor steeds online op een testomgeving, dus je kunt op elk moment meekijken en via de feedbacktool bijsturen.
Akkoord, briefing en aanlevering
Aanlevering van ontwerpbestand, teksten en beelden. De technische basis wordt klaargezet.
Fundament en bouwstenen
Kleuren, fonts, header, footer, knoppen, vormen en animaties, plus de homepage.
Bouwstenen en homepage goedkeuren
Kloppen deze, dan klopt de rest van de site straks ook. Tussendoor kun je altijd meekijken en bijsturen via de feedbacktool.
Overige pagina's en templates
Diensten, werkwijze, over mij, portfolio met filter, case, blog en contact. Elke template wordt naast het ontwerp gecontroleerd.
Feedback op de complete site
Alles in één keer, op desktop en mobiel.
Verwerken, content en livegang
Feedback verwerken, content invoeren, SEO en cookiebanner, testen. Daarna gaat de NL-site live en worden de doorverwijzingen getest.
Engelse versie en oplevering
EN-versie live, plus reviews en motion-banner zodra die klaar zijn. Je ontvangt een video-instructie over teksten aanpassen en cases en blogs toevoegen.
Wat er nodig is
Onderstaande materialen zijn nodig voordat de bouw start. Hoe completer de aanlevering, hoe beter de planning houdt. Vink af wat al klaar is.
Nog een paar vragen
De antwoorden kunnen invloed hebben op de planning of het aantal uren. Je kunt ze hier invullen en in één keer kopiëren om te mailen.
Prijs
Het aanbevolen voorstel: alles uit de briefing, inclusief het invoeren van alle content. Met 10% vriendenkorting op het totaal.
Liever iets lichter?
Het voorstel hierboven is compleet: de site staat er volledig, in twee talen, met alle content erin. Wil je het budget lager houden, dan kan dat door een deel zelf te doen. Het ontwerp wordt in beide gevallen exact nagebouwd.
Lichter
Minder uren, meer eigen inbreng.
- Alleen Nederlands, Engels later apart
- Cases en blogs voer je zelf in, per template staat een voorbeeld klaar
- Eén feedbackronde minder
Afspraken en voorwaarden
- Licenties (zoals Bricks Builder), hosting en domein zijn niet inbegrepen. Alle accounts komen op jouw naam.
- Facturatie: 50% bij akkoord, 50% bij oplevering. Betaaltermijn 14 dagen.
- Na de oplevering is de site helemaal van jou.
- Dit voorstel is geldig tot 17 oktober 2026.
Akkoord, of eerst samen doorlopen?
Laat weten wat je van het voorstel vindt. Een korte call om het samen door te nemen kan ook.