Productlanceringspagina's
Test een kop, een aanbieding en een aanmeldformulier vóór de lanceerdag.
AI-websitemockupgenerator
Beschrijf een site of voeg een schets toe. Manus maakt er een klikbare, hoogwaardige websitemock-up van voor desktop en mobiel.
Voorbeeld van website-mockup: één briefing, twee schermen
Een goede briefing noemt het merk, de secties, de stijl en de schermen. Hier is er één die alle vier behandelt.
Een illustratief ontwerp voor een verzonnen merk. Jouw mockup volgt je eigen briefing.
Invoer voor de website-mockupgenerator: een zin, een schets of een screenshot
Gebruik wat je al hebt. Voeg afbeeldingen toe met de +-knop in het vak hierboven.
Heb je het ontwerp al in Figma? Gebruik Figma to code om een frame om te zetten in een werkende webapp.
Modelideeën voor sites, winkels en apps
Kies een voorbeeld om het verzoek in het vak hierboven te plaatsen, en wijzig daarna de details.
Online winkels
Bekijk een homepage, een productpagina en een winkelwagentje voordat je een platform kiest.
Webapp-schermen
Laat investeerders of engineers zien hoe de belangrijkste schermen eruit moeten zien.
Portfolio's
Probeer een paar manieren om je werk te presenteren voordat je elke case study schrijft.
Restaurants en lokale bedrijven
Plaats het menu, de openingstijden en de reserveringsknop waar gasten als eerste kijken.
Klantpitches
Neem twee designrichtingen mee naar de eerste klantafspraak.
Wireframe vs mockup vs prototype
Een wireframe toont de structuur, een mockup toont het uiteindelijke uiterlijk en een prototype toont het gedrag.
Toon je site op een laptop en een telefoon
Maak van een screenshot een apparaatmockup voor presentaties, portfolio's en lanceringsposts.
Voeg een screenshot toe en geef aan welke apparaten en scène je wilt. Je krijgt een afbeeldingsbestand voor een pitchdeck, een portfolio of een lanceringspost.
- Kies de apparaten: laptop, desktopmonitor, tablet of telefoon
- Beschrijf de scène: een bureau, een effen studioachtergrond of een hand
- Noem de afmeting, zoals 16:9 voor dia's of 4:5 voor social posts
Heb je een logo, banner of social graphics nodig die erbij passen? Probeer AI-ontwerp.
Maak van de goedgekeurde mockup een live site
De mockup is al een webpagina, dus je kunt verder bouwen zodra het ontwerp is goedgekeurd.
Bekijk hoe de Manus website builder logins, databases en betalingen toevoegt, of begin een volledige site met de AI-websitegenerator of een enkele pagina met de landingspagina-builder.
Veelgestelde vragen
Wat is een website-mockup?
Een website-mockup is een realistisch beeld van een pagina voordat deze gebouwd wordt: de echte layout, kleuren, lettertypen, afbeeldingen en tekst. Het zit tussen een wireframe, dat alleen de structuur toont, en de voltooide site.
Hoe maak ik een website-mockup met AI?
Beschrijf de pagina in het vak boven aan deze pagina: voor wie het is, de secties die je nodig hebt en de stijl die je mooi vindt. Manus bouwt de mock-up als een webpagina die je op desktop en mobiel kunt openen, en daarna vraag je om wijzigingen binnen dezelfde taak.
Is deze website-mockupgenerator gratis?
Elk verzoek wordt uitgevoerd als een Manus-taak, en taken gebruiken credits. Je kunt de credit-opties bekijken op de prijzenpagina.
Kan ik een schets of screenshot omzetten in een mockup?
Ja. Voeg een foto toe van een met de hand getekende schets, een whiteboard of een screenshot van je huidige site, en geef aan wat behouden moet blijven en wat veranderd moet worden. Manus gebruikt de afbeelding als startlay-out.
Werkt de mockup op mobiel?
Vraag om een responsieve pagina en Manus maakt de layout voor zowel desktop- als telefoonschermen. Open de preview op je telefoon, of vraag om een apart mobiel mockup om de twee te vergelijken.
Wat is het verschil tussen een wireframe en een mockup?
Een wireframe gebruikt vakken en grijze placeholders om de structuur vast te leggen. Een mockup voegt het visuele ontwerp toe, zodat mensen kunnen beoordelen hoe de pagina er echt uit zal zien. Een prototype gaat nog een stap verder en laat mensen door de flow heen klikken.
Kan ik de mockup bewerken en de code behouden?
Ja. Vraag om wijzigingen in de taak, of gebruik de ontwerp-bewerkmodus om lay-out, kleuren, typografie en spacing aan te passen zonder code. Je kunt op elk moment de volledige code downloaden of de pagina verder uitbouwen tot een live site.
Kan ik een apparaatmockup van mijn website maken?
Ja. Voeg een screenshot van je site toe en vraag erom op een laptop, telefoon of tablet in de gewenste setting. Manus genereert de afbeelding zodat je die kunt downloaden.
Maak je volgende websitemodel
Beschrijf de pagina of voeg een schets toe, en bekijk hem op desktop en mobiel.