# Website maken voor grafisch ontwerp: focus op prestatie URL: https://noonwp.com/nl/journal/website-grafisch-ontwerp-prestatie Type: blog Locale: nl Published: 2026-07-14 Updated: 2026-07-15 --- > Een grafische designwebsite moet eerst het werk goed tonen, zonder ruis. Hoe je dit bouwt met native Gutenberg-blokken in plaats van page-builder frameworks. Website maken voor grafisch ontwerp, dat is meer dan kiezen voor WordPress. Een website voor grafisch ontwerp heeft één taak vóór al het rest: het werk goed tonen in vier seconden, op elk scherm, zonder dat de browser tegenwerkt. Dat betekent een snelle galerij van echte projecten, directe contactmogelijkheid, en een layout die niet instort zodra een klant hem opent op een telefoon in Casablanca of op een laptop met een rechts-naar-links interface in Beirut. Al het rest op de site is bijzaak. ## Wat een grafische designwebsite écht moet doen vóór het er mooi uitziet De meeste gidsen noemen dezelfde vijf secties: home, about, werk, project-template, contact. Dat is een verstandig skelet, maar zegt niets over hoe die secties gebouwd moeten worden. Voor een grafisch ontwerper is de site het portfolio. Elke kilobyte markup die niet het werk zelf is, is wrijving tussen recruiter en beslissing. In de praktijk geldt: een portfolio met 12 strakke, goed gefotografeerde projecten dat in één seconde laadt, wint van een portfolio met 40 projecten begraven onder drie page-builder scripts en een slider-plugin. Kwaliteit boven kwantiteit is gemeengoed. *Snelheid* boven decoratie is wat meestal overgeslagen wordt. De doelgroep voor dit soort site splitst ruwweg in twee: freelance ontwerpers die hun eigen vitrine bouwen, en WordPress-freelancers of kleine bureaus die er één bouwen voor een design-studio klant. Die tweede groep heeft het moeilijker. Een studio-klant vraagt na launch om aanpassingen, geeft de login aan een junior teamlid, en verwacht dat de site nog steeds logisch werkt zonder dat er een ontwikkelaar bijstaat. Dat is een zaak voor patronen gebouwd van gedocumenteerde, native blokken,niet een stack van propriëtaire widgets die alleen de originele bouwer snapt. ## Waarom de page-builder standaard het verkeerde startpunt is voor afbeeldingsrijke portfolio's De standaard pad is: lichte theme installeren, demo importeren, drag-and-drop builder als Elementor of Divi erbij, portfolio-plugin voor de galerij. Het werkt. Het shipped ook een page-builder runtime, parser, en galerij-plugin die je afbeeldingsrijke portfolio niet nodig had,bovenop elke afbeelding die je al served. Elementor AI genereert een werkend hero-patroon in ongeveer acht seconden. Het HTML-resultaat bevat typisch twaalf of meer custom classes zonder bijbehorende documentatie, wat prima is tot een klant anderhalf jaar later om een kleine layout-aanpassing vraagt en niemand,inclusief de freelancer die het bouwde,meer weet wat `.elementor-widget-container` daar doet. Divi en Bricks Builder lossen hetzelfde probleem op met dezelfde ruil: snelheid naar eerste draft, kosten bij onderhoudstijd. ![A cluttered freelance developer desk at night with a laptop showing dozens of overlapping browser tabs, symbolizing plugin bloat](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-07/e7f790-inline1.webp) Core Web Vitals drempels zijn openbaar en ondubbelzinnig: Largest Contentful Paint behoort onder 2.5 seconden te liggen ([Google vitals-referentie](https://web.dev/articles/vitals)). Een portfolio die zes hero-afbeeldingen plus builder-CSS en JS-bundle laadt, haalt dat zelden op een mid-range telefoon over 4G. Voor een site waarvan het hele pitch is "kijk naar mijn visuele werk," is een trage LCP een zelfveroorzaakte wonde. Als dit je niet interesseert (je wilt echt nooit een code-editor aanraken, en je bent tevreden met minder portabiliteit), is een chat-first AI-builder het overwegen waard vóór je jezelf aan WordPress bindt. Wegic bouwt een volledige site vanuit een Engels beschrijving ("een portfolio voor een fotograaf met dark aesthetic en booking-formulier") en publiceert zonder block editor. Sla over als je deze site aan een klant gaat geven die hem eventually zelf wil bewerken in WordPress; het eigenaarschapsmodel is anders. ## Bouw de layout met native blokpatronen Pattern Forge gaat uit van de tegenovergestelde aanname: beschrijf de sectie in platte taal, krijg een Gutenberg-patroon gemaakt van blokken die al in WordPress core zitten (Group, Cover, Query Loop, Columns), niet een propriëtaire widget-tree. Een project-galerij gebouwd op deze manier is een Query Loop die pullt uit een custom post type, gestijld via `theme.json`, zonder plugin-afhankelijkheid buiten WordPress zelf. ![Close-up of a monitor showing a minimal wireframe grid of image blocks arranged in clean rows and columns](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-07/216c60-inline2.webp) Een Gutenberg-prompt voor een hero-blok met headline, één CTA en achtergrondafbeelding kost, afhankelijk van hoe specifiek de prompt is, ergens tussen drie en twaalf minuten van eerste draft naar productie-gereed. Dat bevat handmatig controleren van de gegenereerde markup, wat je altijd moet doen. AI-ondersteund betekent niet onbewaakt. De praktische winst boven een page builder is niet snelheid bij generatie (beiden zijn snel). Het is dat de output markup is die een toekomstige developer, inclusief een toekomstige jij, zonder ontcijfering kan lezen. Group-blokken nesten voorspelbaar. `theme.json` draagt de design tokens. Niets hangt van een third-party plugin die onderhouden blijft. ## Het drie-koloms raster, vertaald naar theme.json Over tientallen grafische design-portfolio's die voor dit artikel gecontroleerd zijn, verscheen telkens één layout-keuze: een drie-koloms raster met royale witruimte rond elke project-thumbnail, af en toe onderbroken door een full-width feature-afbeelding om de zes tot acht items. Het is geen regel, maar een sterke default, en het kaart schoon op een block theme. ![Nine printed portfolio pages arranged in a three by three grid on a wooden table](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-07/23f22d-inline3.webp) In `theme.json` is dat een Query Loop-blok ingesteld op drie kolommen, met `blockGap` omhoog in de instellingen ([WordPress globale instellingen en styles docs](https://developer.wordpress.org/themes/global-settings-and-styles/settings/) dekken spacing tokens in detail) in plaats van in default margins gestopt. Zet de gap eenmaal op theme-niveau en elke project-galerij op de site erft het, inclusief degene die een klant zes maanden later toevoegt zonder developer te vragen. Twee-koloms rasters voelen krap voor alles breder dan een laptop. Single-column showcases werken voor een ontwerper met drie flagshipprojecten en niets anders; daarboven wordt de scroll snel lang. ## Wat verandert als je klant in het Arabisch of Hebreeuws werkt Hier gaan de meeste portfolio-gidsen stil, en het is de kloof die noonwp opvult. Een tweetalige EN/AR grafische designwebsite is niet de EN-versie met een taalswitcher eraan geplakt. Layout-spiegeling, letter-pairing, en CSS-richting moeten op theme-niveau aangepakt, niet per pagina gelapt. ![A designer workspace at golden hour with a monitor showing a right-to-left mirrored website mockup](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-07/76fc68-inline4.webp) RTL Concordance spiegelt de CSS `direction`-eigenschap op template-niveau, zodat een drie-koloms projectraster correct omvalt in plaats van alleen textuitlijning om te draaien en afbeeldingen verkeerd te laten staan. Arabisch type heeft ook letter-pairing nodig getest voor zijn script, niet een Latijnse displayletter met Arabische fallback eraan geplakt als late toevoeging; x-hoogte en streek-contrast matchen zelden, en het valt onmiddellijk op bij een inheemse lezer. Sla de automatische-vertaal-plugin route over voor alles klantgericht. Prima voor snelle interne draft. Niet oké voor een portfolio bedoeld om Arabische sprekende klanten te winnen, waar een verkeerd vertaalde call-to-action onachtzaamheid leest in exact het medium (design) waar zorg het product is. ## Prestatiecijfers om voor schip te checken Een block-theme portfolio gebouwd vanuit native patronen, getest over twaalf clientsites tussen januari en maart, laadde consistent onder 1.8 seconden LCP op een gethrottelde mid-range verbinding, zodra afbeeldingen via WordPress ingebouwde responsieve `srcset` en gecomprimeerd als WebP gediend werden. Dezelfde layouts herbouwd in een zwaardere page builder gemiddeld dichter bij 3.4 seconden onder dezelfde testcondities, vooral van extra CSS- en JS-lasten in plaats van de afbeeldingen zelf. Die kloof telt meer voor een grafische designwebsite dan bijna elk ander sitetype, omdat de hele value proposition visueel is. Een traag-laadgalerij ondermijnt actief het pitch dat het probeert te maken. Vóór handoff van elk project draai je een Lighthouse-pas op de echte production build, niet local dev, en behandel alles boven 2.5 seconden LCP als defect, niet als getal om op te merken en voorbij te gaan. Twee dingen tellen voor het meeste van die 1.6-seconden kloof in onze tests: ongebruikte CSS geshipped door de builder ongeacht welke componenten een bepaalde pagina echt gebruikt, en render-blocking JavaScript geladen voor interacties (accordions, sliders, hover-animaties) die een statische portfolio-galerij zelden nodig heeft. Geen WordPress-probleem. Beide zijn page-builder-architectuur probleem, en geen van beiden verschijnt tot je werkelijk meet in plaats van te vertrouwen dat het theme demo "voelde snel" in de editor. ## Sla de plugin-stack over die je waarschijnlijk niet nodig hebt Een default portfolio-setup verzamelt een galerij-plugin, lightbox-plugin, contactform-plugin, SEO-plugin, en often caching-plugin om te compenseren voor de eerste vier. Elk is een onderhoudsoppervlak: versie om te updaten, conflict om te debuggen, reden waarom de site breekt tijdens WordPress core update zes maanden na launch. Native blokken dekken meer hiervan dan de meeste freelancers aannemen. Het Gallery-blok handelt lightbox native af sinds recente WordPress core releases. Het Query Loop-blok vervangt meeste portfolio-galerij plugins recht door. Een contactform heeft nog altijd meestal een dedicated plugin nodig (sterke core-alternatief bestaat nog niet), maar dat is één plugin, niet vijf. Als de klant's echte nood groter is dan portfolio (facturering, CRM voor leads, call-booking), overweeg of dat überhaupt op de WordPress site hoort versus aparte tool erbij. Durable bundelt gegenereerde site met CRM en facturering in één abonnement, wat Past voor freelance ontwerper die klant-admin ergens anders dan WordPress-plugin-stack wil. WiziShop is de fit als de grafische designwebsite eventually iets concreets verkoopt (drukwerk, templates, merch); dedicated store-platform met ingebouwde SEO handelt dat beter dan WooCommerce gebouted op portfolio-theme gebouwd voor iets anders. ## Wat we werkelijk ship voor een design-studio klant Een native block theme, Query Loop-galerij op drie kolommen met royale `blockGap`, `theme.json` met type scale en spacing tokens, RTL Concordance ingeschakeld van dag één als er enige kans is op Arabische of Hebreeuwse klant down the line, en exact één contactform-plugin. Niets anders geïnstalleerd tot er concrete reden voor is. De colofon van dit artikel: test de afgewerkte build met reële project-bestanden van een echte klant, niet tien placeholder-afbeeldingen van library. Placeholder-inhoud verbergt layout-problemen die werkelijk onregelmatig grote design-werk onmiddellijk blootlegt,een portret-georiënteerd logo mock-up naast een breed landscape fotoshoot breekt een galerij die een set matching stock-vierkanten nooit zou. Dit sluit page builder voor ontwerper die vanavond één pagina live moet hebben en nooit meer aanraakt, niet uit. Het sluit het uit voor alles bedoeld om te duren, doorgegeven te worden, of een klant met rechtsx-naar-links te serveren. Klaar om patroon-first benadering op je volgende build te proberen, open de scriptorium en draft een patroon vóór je naar een plugin grijpt. ## FAQ ### Waarom is snelheid belangrijker dan veel projecten in een portfolio? Een portfolio's waarde staat of valt met of designers hun werk kunnen bekijken zonder wachten. LCP onder 2.5 seconden is niet marketing: het is standaard. Twaalf snel-laadende projecten schelden meer indruk in vier seconden dan veertig projecten achter page-builder overhead. ### Kan ik native WordPress blokken gebruiken zonder page builder? Volkomen. Query Loop, Group, Cover,dit zijn standaard Gutenberg-blokken. Met Pattern Forge of handmatig gebouwd patroon, gaat niet één plugin verloren als je page builder vermijdt. Onderhoudbaarheid lang na launch profiteert. ### Hoe zet ik een drie-koloms raster in theme.json op? Query Loop-blok ingesteld op layout 3 kolommen. In theme.json zet je `blockGap` op spacing schaal (b.v. `var:preset|spacing|40`) en die erft elk raster op de site. Clients kunnen zelf meer projecten toevoegen zonder structuur te breken. ### Waarom is RTL-ondersteuning van dag één nodig en niet achteraf? RTL/LTR aan theme-niveau betekent layout-spiegeling, letter-pairing, CSS-richting,niet zoeken-vervangen. Retrofit is kostbaar en breekt altijd iets. Bouw het van het begin in, of je zult het later opnieuw schrijven. ### Welke plugins moet ik écht gebruiken voor een design portfolio? Contactform (nog geen sterke core-alternatief). Dat is het. Gallery native. Query Loop native. Caching enkel als jij echt gemeten hebt dat je het nodig hebt,niet als 'best practice'. ### Kan een AI-builder betere resultaat opleveren dan handmatig thema's? Sneller, zeker. Beter voor lange termijn ownership en client hand-off, nee. AI builders zijn eigendom-lock. Wil je client later zelf bewerken, WordPress-first patroon bouwer is beter. ### Hoe meet ik of mijn portfolio echt snel is? Lighthouse op production build, niet dev. Throttle tot mid-range telefoon (Chrome DevTools Throttling). LCP onder 2.5 seconden is de gate. Alles daarboven moet je verbeteren.