Samenvatting

Deze AI wireframe generator laat je een paginalay-out vastleggen voordat je de WordPress blok-editor opent. Kies een paginatype zoals landingspagina, blogbericht, dashboard, productpagina, portfolio of contactformulier, kies een lay-outstijl (gestapelde banden, kaartgrid of zijbalk plus inhoud), en stel het aantal secties in van twee tot acht. De tool tekent echte, proportionele vakken live opnieuw, volgens vaste UX-conventies zoals F-patroon en Z-patroon leesorder, dus het ontwerp dat je schetst ziet eruit als een echte pagina, niet als een gok.

AI Wireframe Generator Gratis: Leg je paginalay-out in seconden vast

Kies een paginatype, een lay-outstijl en het aantal secties. Een echte laagdetail-wireframe wordt live opnieuw getekend, nog voordat je een enkel Gutenberg-blok plaatst.

Maak een ontwerp

Schets je paginalay-out

Kies het paginatype dat je bouwt, een lay-outstijl voor het inhoudsgebied, en hoeveel secties je ervan nodig hebt. De vakken hieronder worden bij elke wijziging bijgewerkt.

Wireframe-voorvertoning alleen. Vakken vertegenwoordigen lay-outregio's, geen definitieve tekst of beelden.

Hoe deze wireframe eerlijk blijft

Gebouwd op lay-outconventies, niet op gissingen

F-patroon en Z-patroon leesorder

Gestapelde inhoudsbanden volgen het F-patroon dat eye-tracking-onderzoek steeds weer vindt op tekstheavy pagina's. Een gecentreerde hero met de kop, subkop en call-to-action in een rij volgt in plaats daarvan het Z-patroon, de vorm die het oog van een lezer traceert op een schaars, beslissingsgericht scherm.

Paginatype-presets gebouwd op echte conventies

Een dashboard houdt ongeacht wat er anders verandert een persistent linkernavigatiekolom aan, zoals beheervensters werkelijk zijn gebouwd. Een blogbericht koppelt een hoofdartikkelkolom met een zijbalk. Een productpagina deelt zich in een galerij en een koopbox boven de vouwlijn, dan stapelt detailsecties hieronder.

Rasterwiskunde die werkelijk reageert

De rasterlay-out gebruikt CSS auto-fill zodat kaarten zichzelf opnieuw indelen wanneer het aantal secties verandert, en elke rangschikking, raster, gestapeld of zijbalk, vouwt in op één kolom onder ongeveer 480px breed. Geen handmatige breakpoint-tuning om op een telefoon te controleren.

Drie instellingen, één ontwerp

  1. 1

    1. Kies het paginatype

    Landingspagina, blogbericht, dashboard, productpagina, portfolio of contactformulier. Dit stelt de header, de hero-vorm en de voettekst in om aan te passen aan wat dat paginatype werkelijk nodig heeft.

  2. 2

    2. Kies een lay-outstijl

    Gestapelde banden, een grid van kaarten of een zijbalk naast een hoofdkolom. Elk paginatype opent met de stijl waarnaar bouwers het meest grijpen, en je kunt het overschrijven.

  3. 3

    3. Stel het aantal secties in

    Sleep van twee tot acht inhoudssecties. De wireframe hieronder voegt live vakken toe of verwijdert deze, terwijl header, hero en voettekst op dezelfde plaats blijven.

Een ontwerp dat je vóór het openen van de Site Editor aan een klant kunt voorleggen

Een wireframe dit grof is niet bedoeld om contact met echte kopie te overleven. Het is bedoeld om snel overeenstemming over het skelet van een pagina te bereiken: hoeveel secties, wat zit boven de vouwlijn, of de blog echt een zijbalk nodig heeft. Zodra dat skelet vastgesteld is, is het bouwen van de overeenkomstige Group, Cover en Query Loop blokken in de Site Editor een veel korter gesprek, omdat niemand meer over structuur twistt, alleen over de woorden en beelden die erin gaan.

  • Wees het eens over het aantal secties voordat je de Site Editor opent
  • Toon een klant twee lay-outstijlen in hetzelfde gesprek
  • Controleer de mobiele versie op hetzelfde scherm als de desktopversie
Close-up van iemand die wireframe-vakken tekent met een vulpen en liniaal op papier

Veelgestelde vragen over de wireframe generator

Is deze AI wireframe generator gratis?
Ja. Hij werkt volledig in je browser zonder registratie en zonder gebruikslimiet. Er is geen servercall: de wiskundige berekening van de lay-out gebeurt op je apparaat op het moment dat je een besturingselement verplaatst.
Slaat het mijn invoer ergens op of stuurt het dat door?
Nee. Paginatype, lay-outstijl en aantal secties blijven alleen in het geheugen van de pagina staan. Niets wordt naar een database geschreven en niets wordt naar een server gestuurd, behalve een anoniem tool-run-signaal dat gebruikt wordt om te meten hoeveel bezoekers het tool proberen.
Waar komen deze lay-outpatronen vandaan?
Van gedocumenteerde, veel geciteerde UX-onderzoeken in plaats van gissingen: de F-patroon- en Z-patroon eye-tracking-studies (Nielsen Norman Group), de persistent-sidebar-nav-conventie gebruikt in admin dashboards, het split gallery-plus-buy-box-patroon dat veel voorkomt op productpagina's (een bevinding van het Baymard Institute), en de éénkolom-indeling die onderzoek naar bruikbaarheid consistent het meest omzet voor korte formulieren.
Kan ik deze wireframe exporteren als een echt Gutenberg-patroon?
Niet direct. Dit is een planningsstap, geen codegenerator: het helpt je overeenstemming te bereiken over een structuur met een klant of teamlid voordat je de Site Editor opent en de overeenkomstige Group, Cover en Query Loop blokken met de hand bouwt.
Waarom houdt het dashboard-paginatype ongeacht welke lay-out ik kies altijd een linkerzijbalk?
Omdat een persistent navigatiekolom een structurele conventie van admin dashboards is, niet een stijlkeuze. De lay-outselector verandert nog steeds hoe de widgets erin zijn gerangschikt (een grid van kaarten of een gestapelde lijst), maar het verwijderen van de navigatiekolom zou misrepresentatie zijn van hoe echte dashboards werkelijk zijn gebouwd.
Welke lay-outstijl moet ik gebruiken voor een landingspagina?
Kaartgrid is de standaard voor landingspagina's en portefeuilles, omdat functie- en projectsecties meestal scanbaar naast elkaar zijn. Gestapelde banden passen bij een productpagina of formulier, waar je bezoekers één ding tegelijk wilt laten lezen.
Werkt de wireframe op een klein telefoondscherm?
Ja. Elke lay-out vouwt onder ongeveer 480px breed in op een enkele kolom, inclusief het grid en de zijbalk-plus-hoofdindeling, zodat je een mobiel ontwerp op hetzelfde scherm als de desktopversie kunt controleren.
Zullen er later meer paginatypes worden toegevoegd?
Landingspagina, blogbericht, dashboard, productpagina, portfolio en contactformulier dekken de paginatypes die freelance WordPress-bouwers het meest schetsen. Als er in de praktijk een duidelijke hiaat naar voren komt, wordt het aan de presetlijst toegevoegd.

Meer WordPress-tools die het de moeite waard zijn om open op een tabblad te houden

noonwp dekt Gutenberg, Full Site Editing en RTL WordPress voor mensen die client sites verzenden, niet alleen erover lezen.

Open het scriptorium
Noon