Wireframe Design

Device types

Model selectie

Vuistregel: Start met GEMINI_3_FLASH voor het eerste concept. Schakel over naar GEMINI_3_1_PRO voor de definitieve versie of bij complexe layouts.

Prompt engineering voor UI-schermen

De kwaliteit van het gegenereerde scherm hangt direct af van de prompt. Een goede Stitch-prompt volgt deze structuur:

Promptstructuur

1. Paginatype en doel: Begin met wat voor pagina het is en wat het primaire doel is.
2. Sectie-indeling: Beschrijf de pagina van boven naar beneden, sectie per sectie.
3. Content per sectie: Specificeer welk type content in elke sectie hoort (tekst, afbeeldingen, iconen, formulieren).
4. Interactie-elementen: Benoem knoppen, formuliervelden, navigatie, dropdowns, toggles.
5. Visuele stijl: Optioneel. Kleurschema, typografie, sfeer (modern, corporate, speels).

Promptprincipes

• Wees specifiek over structuur. "3-column feature grid with icon, title, and description per card" is beter dan "features section".
• Benoem hiërarchie. Welk element is het belangrijkst? Wat moet het eerst opvallen?
• Gebruik ruimtelijke taal. "Left sidebar with navigation, main content area with dashboard widgets" geeft duidelijkere resultaten dan vage beschrijvingen.
• Specificeer hoeveelheden. "4 KPI cards" is beter dan "some metrics". "3 testimonial cards" is beter dan "testimonials".
• Vermeld CTA-tekst. Geef de exacte tekst voor knoppen en headlines als je die al hebt.

Voorbeeld: goed vs. slecht

Slecht: "Make a landing page for a SaaS product"

Goed: "A modern SaaS landing page with: a hero section containing a bold headline, subtitle text, a green primary CTA button labeled 'Start free trial', and a product screenshot on the right side. Below that, a 3-column features section with icon, title, and short description per feature card. Then a testimonials section with 3 customer quotes showing photo, name, role, and company. A pricing comparison with 3 tiers (Starter, Professional, Enterprise) in card format with feature checklists. Finally, a footer CTA section with headline and email capture form."

CRO-principes in wireframes

Elk wireframe is een conversie-instrument. Pas deze principes toe bij elke layout:

Leespatronen

Above the fold

Wat zichtbaar moet zijn zonder scrollen (eerste ~600px op desktop, ~500px op mobile):

1. Waardepropositie: Eén zin die zegt wat je aanbiedt en waarom het relevant is.
2. Primaire CTA: De belangrijkste gewenste actie, visueel dominant.
3. Visueel bewijs: Screenshot, foto, of illustratie die het aanbod tastbaar maakt.
4. Trust indicator: Minimaal één vertrouwenssignaal (klantenlogo's, review score, certificering).

Visuele hiërarchie

Gebruik grootte, kleur en witruimte om de blik te sturen:

CTA-plaatsing

• Primaire CTA: Above the fold, herhaal na elke majeure sectie, eindig met finale CTA.
• Secundaire CTA: Naast de primaire CTA, of als standalone in informatieve secties.
• Minimaal 3 CTA-momenten op een landing page: hero, midden, einde.
• CTA-tekst: Actiegericht, specifiek. "Start gratis proefperiode" > "Verzenden". Gebruik loss framing waar gepast: "Mis deze besparing niet".

Trust signals positie

Friction reduction

• Formulieren: maximaal 3-5 velden. Elk extra veld kost ~3-5% conversie.
• Stappen: toon een progress bar bij multi-step flows.
• Keuzes: beperk tot 3-4 opties per selectie. Meer = keuzestress.
• Laadtijd: houd secties compact. Vermijd zware visuele elementen boven de fold.

Pagina-type templates

Specifieke prompttemplates per paginatype. Gebruik deze als startpunt en pas aan op basis van het specifieke project.

1. Landing page

A modern SaaS landing page with: hero section with headline, subtitle, CTA button and product screenshot; trust bar with 5 company logos; 3-column features section with icons; customer testimonials carousel with photo, name, and quote; pricing comparison table with 3 tiers; FAQ accordion section; final CTA section with email capture form; minimal footer with links.

CRO-checklist voor landing pages:

• Waardepropositie boven de fold
• Primaire CTA binnen 3 seconden zichtbaar
• Trust signals direct na de hero
• Minimaal 3 CTA-herhalingen
• Social proof met specifieke cijfers
• Loss framing in ten minste één CTA

2. Email template

A promotional email template with: company logo header with preheader text area, hero image section with overlay headline, two-column product feature blocks with icons, single customer testimonial quote with photo, centered CTA button in contrasting color, secondary text link below CTA, social media links footer with unsubscribe link.

CRO-checklist voor emails:

• Eén primaire CTA, visueel dominant
• CTA zichtbaar zonder scrollen in de meeste clients
• Scanbare structuur (koppen, bullets, witruimte)
• Personaliseerbare elementen gemarkeerd
• Mobilevriendelijke single-column fallback

3. Pricing page

A pricing page with: page title and subtitle explaining value, 3-tier pricing cards (Basic, Pro, Enterprise) with monthly and annual toggle, feature checklists per tier with checkmarks, highlighted recommended plan with 'Most popular' badge, comparison table below cards, FAQ accordion section with common objections, enterprise contact CTA with form.

CRO-checklist voor pricing:

• Aanbevolen plan visueel gehighlight (anchoring)
• Jaarprijs als default getoond (status quo bias)
• Features geordend op waarde, niet op techniek
• "Meest gekozen" label op gewenst plan (social proof)
• Garantie of trial-mogelijkheid nabij de CTA

4. Dashboard

An analytics dashboard with: top navigation bar with user avatar and notifications, collapsible sidebar menu with icon labels, 4 KPI summary cards in a row (revenue, users, conversion rate, churn), line chart showing 6-month trend with comparison toggle, horizontal bar chart for top channels, data table with sortable columns and pagination, date range filter and export button in toolbar.

UX-checklist voor dashboards:

• KPI's direct zichtbaar bovenaan
• Maximaal 4-6 KPI's in de eerste rij
• Visuele hiërarchie: KPI's > charts > tabellen
• Filtercontrols altijd bereikbaar
• Actiegerichte data, niet alleen informatief

5. Onboarding flow

A 4-step onboarding wizard: step 1 welcome screen with user name input and role selection dropdown; step 2 team setup with invite colleagues via email field and skip option; step 3 integrations page with toggle cards for popular tools; step 4 completion screen with celebration illustration and 'Go to dashboard' button. Progress bar at top showing current step, back and next buttons at bottom.

UX-checklist voor onboarding:

• Progress bar zichtbaar in elke stap
• Skip-optie voor niet-essentiële stappen
• Maximaal 5 stappen totaal
• Completion screen met duidelijke volgende actie
• Elk formulierveld heeft een duidelijk label en placeholder

6. Checkout flow

E-commerce checkout with: order summary sidebar showing items, quantities, and running total; shipping information form with address autocomplete; shipping method selection with delivery time and cost; payment method tabs (credit card, iDEAL, Bancontact); order review step with edit links per section; trust badges row (SSL, payment logos, return policy); place order button with price confirmation.

CRO-checklist voor checkout:

• Totaalprijs altijd zichtbaar (geen verrassingen)
• Guest checkout als optie
• Vertrouwensbadges nabij betaalgegevens
• Minimale navigatie (geen volledige header)
• Error messages inline, niet bovenaan

Iteratief verfijnen: workflow

Zelden is de eerste gegenereerde versie perfect. Gebruik dit stappenplan:

Stap 1: eerste generatie

mcp__stitch__create_project(title)
mcp__stitch__generate_screen_from_text(projectId, prompt, deviceType, modelId)

Gebruik GEMINI_3_FLASH voor snelheid. Start met een gedetailleerde prompt op basis van het relevante pagina-type template.

Stap 2: resultaat bekijken

mcp__stitch__get_screen(name, projectId, screenId)

Beoordeel het resultaat op de CRO-checklist van het relevante paginatype.

Stap 3: verbeterpunten identificeren

Check het scherm systematisch op:

1. Hiërarchie: Is de visuele volgorde correct? Valt de CTA genoeg op?
2. Completeness: Zijn alle secties aanwezig? Ontbreken trust signals?
3. Balans: Is er voldoende witruimte? Zijn secties proportioneel?
4. Mobile-readiness: Zou deze layout werken op een smaller scherm?
5. Leesbaarheid: Zijn tekstelementen groot genoeg en logisch gegroepeerd?

Stap 4: gericht bewerken

mcp__stitch__edit_screens(projectId, selectedScreenIds, prompt, deviceType)

Geef specifieke, gerichte instructies. Voorbeelden:

• "Make the hero CTA button larger and change its color to bright green for more contrast"
• "Add a trust bar with 5 company logos between the hero section and the features section"
• "Reduce the testimonials section to show only 2 quotes side by side instead of 3"
• "Add a sticky header with CTA button that appears when scrolling past the hero"

Tip: Eén gerichte edit per keer geeft betere resultaten dan meerdere wijzigingen tegelijk.

Stap 5: herhalen

Herhaal stap 2-4 tot het scherm voldoet aan alle CRO-principes. Typisch zijn 2-4 iteraties nodig.

Stap 6: device varianten

Genereer na goedkeuring van de desktop versie ook mobile en tablet varianten:

mcp__stitch__generate_screen_from_text(projectId, mobilePrompt, "MOBILE", modelId)

Pas de prompt aan voor mobile: single-column layout, grotere tap targets, compactere secties.

Ehrenberg-Bass in wireframes

De principes van het Ehrenberg-Bass Institute zijn niet alleen voor merkcommunicatie, maar ook voor visueel design.

Mentale beschikbaarheid

De wireframe moet category entry points (CEPs) visueel activeren. Als iemand op een pagina landt, moet het design binnen 3 seconden communiceren:

• Wat is dit? (categorie-herkenning)
• Is dit voor mij? (relevantie voor de situatie)
• Wat kan ik hier doen? (gewenste actie)

Dit betekent: headline en visual in de hero moeten de CEP aanspreken, niet het merk of product uitleggen.

Fysieke beschikbaarheid

CTA's en conversie-elementen moeten gemakkelijk vindbaar zijn:

• Consistent geplaatst op voorspelbare posities
• Visueel onderscheidend van de rest van de pagina
• Herhaalbaar op meerdere punten in de pagina
• Bereikbaar met minimale inspanning (thumbzone op mobile)

Distinctive brand assets (DBA's)

Reserveer ruimte in de wireframe voor merkherkenning:

• Logo: Linksboven in header, consistent formaat
• Merkkleuren: CTA-buttons en accenten in merkkleur
• Typografie: Merktypografie in headlines
• Visuele stijl: Consistente illustratie- of fotostijl
• Tone of voice: Placeholder tekst die de merkpersoonlijkheid weerspiegelt

Breed bereik

De layout moet werken voor nieuwe bezoekers, niet alleen voor terugkerende gebruikers:

• Ga niet uit van voorkennis over het product
• Toon de waardepropositie expliciet, niet impliciet
• Gebruik herkenbare patronen (standaard navigatie, conventionele CTA-posities)
• Vermijd jargon in placeholder tekst

Anti-patterns

Vermijd deze veelvoorkomende fouten in wireframe design:

1. Te veel content above the fold

Het is verleidelijk om alles boven de vouw te proppen. Het resultaat: overweldiging, geen focus, System 2 overload. Beter: Eén duidelijke boodschap, één CTA, één visual. De rest komt eronder.

2. CTA's verstoppen onder de vouw

Het tegenovergestelde: alle content boven de fold, maar de CTA pas na drie scrolls. Beter: Primaire CTA altijd boven de fold. Herhaal na elke majeure sectie.

3. Geen mobiele versie overwegen

Een desktop wireframe die op mobile niet werkt, is een halve wireframe. Beter: Genereer altijd een mobile variant. Controleer of kolommen stacken, knoppen groot genoeg zijn, en formulieren bereikbaar blijven.

4. Te complexe navigatie

Mega-menu's, dubbele navigatiebalken, hamburger plus topnav. Beter: Maximaal 5-7 items in de hoofdnavigatie. Op landing pages: minimale of geen navigatie (focus op conversie).

5. Formulieren met te veel velden

"We willen alles weten." Elk extra veld kost conversie. Beter: Alleen de absoluut noodzakelijke velden. Gebruik progressive profiling voor de rest.

6. Geen visuele hiërarchie

Alles even groot, even vet, even kleurrijk. Niets springt eruit, niets stuurt de blik. Beter: Eén primaire actie per scherm. Eén headline die domineert. Eén kleur voor actie-elementen.

7. Social proof vergeten of te laat plaatsen

Testimonials helemaal onderaan, of helemaal afwezig. Beter: Trust bar direct na de hero. Testimonials in het midden van de pagina. Specifieke reviews nabij de CTA.

Gerelateerde skills

Scoring rubric

Zelfcheck

Controleer voor oplevering elk wireframe op deze 10 punten:

1. Waardepropositie zichtbaar boven de fold? De bezoeker moet binnen 3 seconden begrijpen wat het aanbod is en waarom het relevant is.
2. Primaire CTA visueel dominant en boven de fold? De belangrijkste actie moet het meest opvallende element op het scherm zijn.
3. Minimaal 3 CTA-momenten op de pagina? Hero, midden en einde. De bezoeker moet op elk punt in de scroll-reis kunnen converteren.
4. Trust signals aanwezig en correct geplaatst? Direct na de hero (logo's), nabij formulieren (garantie), midden (testimonials), nabij pricing (case studies).
5. Visuele hiërarchie klopt? Er is een duidelijke leesrichting. Niet alles schreeuwt om aandacht.
6. Formulieren beperkt tot essentiële velden? Maximaal 3-5 velden. Elk extra veld is een bewuste keuze, niet een automatisme.
7. Mobile variant gegenereerd of overwogen? De layout moet werken op alle apparaten, niet alleen op desktop.
8. Ruimte voor distinctive brand assets? Logo, merkkleuren en typografie zijn consistent en herkenbaar geplaatst.
9. Leespatroon gevolgd? F-patroon voor tekst-zware pagina's, Z-patroon voor visuele pagina's.
10. Geen anti-patterns aanwezig? Check de 7 anti-patterns. Geen overweldiging, geen verborgen CTA's, geen formulier-excessen.