Pianifica una pagina come wireframe con viste desktop e mobile, o carica uno screenshot in una cornice browser, laptop o telefono. Esporta PNG o stampa in PDF, gratis, nel tuo browser.
Due strumenti in uno. La modalità wireframe pianifica una pagina: scegli le sezioni, mettile in ordine e confronta i layout desktop e mobile. La modalità cornice dispositivo presenta un design finito: carica uno screenshot e mettilo in una finestra browser o cornice telefono per una proposta o un post social. Entrambi esportano un PNG, ed entrambi girano nel tuo browser. Il tuo screenshot non viene mai caricato.
Modalità wireframe: spunta le sezioni di cui la tua pagina ha bisogno, spostale su e giù, e passa tra desktop e mobile. Su mobile, le colonne si impilano nel modo in cui fanno la maggior parte dei siti responsive.
Esporta il wireframe come PNG, o stampalo e scegli Salva come PDF.
Modalità cornice dispositivo: carica uno screenshot PNG, JPG o WebP (fino a 15 MB e 8.000 pixel su un lato). Scegli una finestra browser o una cornice telefono, un colore di sfondo e un'etichetta opzionale della barra degli indirizzi.
L'immagine è disegnata su un canvas nel tuo browser ed esportata come PNG al doppio della risoluzione dello schermo.
Quando la struttura è giusta, invia il piano delle sezioni al builder We.Inc come brief di partenza.
Apri con l'hero: dì cosa fai e per chi è in una riga.
Metti la prova (recensioni, loghi, esempi) vicino al primo pulsante, dove le persone decidono se fidarsi di te.
Controlla prima il wireframe mobile. La maggior parte dei visitatori di un sito di piccola impresa arriva da un telefono.
Per le cornici dispositivo, prendi lo screenshot alla larghezza che la cornice si aspetta: circa 1440 pixel per un browser e 390 per un telefono.
Etichetta i mockup come mockup quando li condividi, così nessuno scambia un piano per un sito live.
Domande frequenti
Qual è la differenza tra un wireframe e un mockup?
Un wireframe è un piano a blocchi grigi di cosa va dove. Un mockup mostra l'aspetto finito, spesso dentro una cornice dispositivo. Questo strumento fa entrambi, in modalità separate, ed etichetta ogni esportazione.
Il mio screenshot viene caricato?
No. Lo screenshot è letto e disegnato nel tuo browser. Niente viene inviato a We.Inc o a chiunque altro.
Posso catturare uno screenshot di un sito live qui?
No. Catturare un altro sito richiede un server che esegue un browser, che questo strumento gratuito non ha. Fai tu stesso lo screenshot (gli strumenti per sviluppatori del tuo browser possono catturare una pagina intera) e caricalo.
Posso esportare un PDF?
Sì. Usa Stampa e scegli Salva come PDF come stampante. L'esportazione PNG ti dà un file immagine.
Il generatore di mockup sito web è gratuito?
Sì. Non c'è registrazione, filigrana o limite.
Pianifica su mobile, presenta su desktop
I layout che sembrano equilibrati su uno schermo largo spesso si trasformano in uno scorrimento lungo su un telefono: tre colonne di funzionalità diventano tre blocchi impilati, e la tabella prezzi spinge il modulo di contatto molto più in basso. Passare il wireframe a mobile lo mostra presto, mentre spostare una sezione è ancora un click.
Le cornici dispositivo sono per l'altro estremo del lavoro: mostrare a un cliente o a un pubblico social come appare una pagina finita. Uno screenshot semplice in una cornice pulita di solito basta.