Mockup Grafici: Cosa Sono e Perché Servono per il Sito

In breve: Guida ai mockup per siti web: differenza tra wireframe, mockup e prototipo, perché servono, come valutarli. Per PMI e imprenditori che commissionano un sito.

Ultimo aggiornamento: 17 Febbraio 2026

Prima di costruire una casa serve il progetto dell'architetto. Per un sito web il concetto è lo stesso: il mockup è il progetto visivo che definisce come apparirà ogni pagina prima di scrivere una riga di codice. Ecco perché è fondamentale e come valutarne la qualità.

I 3 Livelli della Progettazione Visiva

1. Wireframe (Scheletro)

Schema in bianco e nero della struttura della pagina. Definisce cosa va dove: posizione del logo, menu, contenuti, CTA, footer. Nessun colore, nessuna immagine reale.

Tempo: 1-2 giorni. Costo: spesso incluso nel preventivo.

2. Mockup (Aspetto Finale)

Versione visivamente completa della pagina con colori, font, immagini, icone e grafica definitivi. Il mockup mostra esattamente come apparirà il sito finito. Non è interattivo (non puoi cliccare).

Tempo: 3-7 giorni. Costo: €300-1.500 a seconda del numero di pagine.

3. Prototipo (Interattivo)

Mockup interattivo dove puoi cliccare, navigare tra pagine e simulare l'esperienza utente. Creato con tool come Figma o Adobe XD. Utile per siti complessi o e-commerce.

Tempo: 3-5 giorni extra. Costo: €200-800 aggiuntivi.

Perché il Mockup è Essenziale

Costo delle modifiche: cambiare un mockup costa 1h di lavoro. Cambiare codice sviluppato ne costa 5-10h
Allineamento aspettative: il cliente vede esattamente cosa otterrà prima di investire nello sviluppo
Decisioni informate: è più facile valutare un design quando lo vedi completo
Risparmio complessivo: meno revisioni in fase di sviluppo = progetto più veloce ed economico

Come Valutare un Mockup

Quando l'agenzia ti presenta il mockup, valuta questi aspetti:

Coerenza con il brand: colori, font e stile riflettono la tua brand identity?
Gerarchia visiva: è chiaro cosa è più importante nella pagina?
CTA visibili: i pulsanti di azione sono ben evidenti?
Leggibilità: i testi sono leggibili? Contrasti sufficienti?
Versione mobile: il mockup include la versione smartphone?
Contenuti reali: usa testi e foto reali, non Lorem ipsum

Il Processo Ideale

Briefing: l'agenzia raccoglie obiettivi, target, brand, preferenze
Wireframe: struttura approvata → si passa al mockup
Mockup v1: prima versione, presentazione e feedback
Revisioni: 2-3 giri di modifiche (inclusi nel preventivo serio)
Mockup finale: approvato → si passa allo sviluppo

Red Flag nel Processo di Design

Nessun wireframe: si passa direttamente al design senza struttura
Mockup solo desktop: nel 2026, il 70% del traffico è mobile
Lorem ipsum ovunque: impossibile valutare il layout senza contenuti reali
Nessuna revisione inclusa: un professionista serio include 2-3 revisioni
Sviluppo senza approvazione: codificano prima che il design sia approvato

In WebNovis il mockup è una fase obbligatoria del nostro processo di lavoro. Nessuna riga di codice senza la tua approvazione visiva. Scopri il nostro approccio →

Domande frequenti su Design

Cos'è un mockup grafico per un sito web?

Un mockup è una rappresentazione visiva statica e dettagliata di come apparirà il sito web finito. Include colori, font, immagini, layout e tutti gli elementi grafici, ma non è interattivo. Serve come "progetto architettonico" del sito prima di iniziare lo sviluppo.

Qual è la differenza tra wireframe, mockup e prototipo?

Il wireframe è uno schema in bianco e nero della struttura (cosa va dove). Il mockup aggiunge l'aspetto visivo (colori, font, immagini reali). Il prototipo è un mockup interattivo dove puoi cliccare e navigare. Si usano in questa sequenza: wireframe → mockup → prototipo → sviluppo.

Un'agenzia seria deve sempre mostrare i mockup prima dello sviluppo?

Sì. Un'agenzia che inizia a sviluppare senza approvazione del mockup rischia di sprecare ore di lavoro su un design che al cliente non piace. I mockup permettono di fare revisioni quando è ancora economico (modificare un PSD costa 1h, modificare codice costa 5-10h).