Mockup — cos'è, differenze con wireframe e prototipo + 20 esempi

Nel linguaggio del design digitale la parola mockup viene usata in modo così fluido che tre designer intervistati danno tre definizioni diverse. Per alcuni è uno schizzo in scala di grigi, per altri è una schermata finita in Figma, per altri ancora è l'immagine promozionale con un iPhone che mostra l'app. Tutte queste accezioni esistono e sono corrette in contesti diversi — e il problema nasce quando un cliente e un designer usano la stessa parola intendendo cose diverse.

Questa guida chiarisce una volta per tutte cos'è un mockup nel 2026, come si distingue da wireframe e prototipo, in quali contesti si usa l'una o l'altra forma, e con quali strumenti si produce. Trovi anche 20 esempi reali, fra mockup di prodotto digitale e mockup di presentazione, per capire quali sono pronti per essere usati nel portfolio.

Cosa imparerai leggendo:

• Le tre definizioni di "mockup" che esistono nel settore
• Le differenze tecniche tra wireframe, mockup, prototipo e product shot
• Quando serve ciascuno nel processo di design
• Gli strumenti migliori per crearli (gratis e a pagamento)
• 20 esempi reali con analisi di cosa li rende efficaci
• Risorse di mockup gratuiti da scaricare

Cos'è un mockup

Un mockup è la rappresentazione ad alta fedeltà (high fidelity) di come apparirà un'interfaccia digitale quando sarà finita. Contiene i colori definitivi, la tipografia reale, le immagini vere, gli stati di componenti (hover, disabled), ma non è cliccabile e non simula interazioni. È una foto "alta qualità" del design.

Nel senso tecnico più usato, il mockup si colloca tra due estremi:

• Wireframe (bassa/media fedeltà) → struttura e layout, di solito in scala di grigi, senza decisioni di visual
• Mockup (alta fedeltà, statico) → la pagina come apparirà, pixel perfect, ma ferma
• Prototipo (alta fedeltà, interattivo) → il mockup + collegamenti cliccabili che simulano l'uso reale

Un designer moderno passa da wireframe → mockup → prototipo nel corso dello stesso progetto, aumentando la fedeltà mentre le decisioni si consolidano.

Le altre due accezioni di "mockup"

Oltre al significato tecnico sopra, "mockup" viene usato in altri due contesti distinti:

• Mockup 3D di presentazione = un'immagine in cui il design viene mostrato "calato" in un device fisico (iPhone, MacBook, iPad, billboard). Tipico di case study di portfolio o di pitch. Esempio: la schermata dell'app dentro la foto di una persona che tiene lo smartphone.
• Mockup di print design = nel mondo grafico è il rendering di un prodotto fisico: biglietto da visita, packaging, magliette. Diverso dal digitale, ma la parola è la stessa.

Per evitare confusione, quando comunichi con un cliente o un collega, aggiungi sempre un aggettivo chiarificatore: "mockup UI" per il design pixel-perfect, "mockup 3D" o "product shot" per l'immagine di presentazione, "mockup di stampa" per i prodotti fisici.

Wireframe, Mockup, Prototipo: tabella comparativa

Caratteristica	Wireframe	Mockup	Prototipo
Fedeltà visiva	Bassa/media	Alta	Alta
Colori	Scala di grigi	Brand finali	Brand finali
Tipografia	Placeholder	Definitiva	Definitiva
Immagini	Rettangoli con X	Immagini reali	Immagini reali
Interattivo	No	No	Sì
Tempo di creazione	30 min - 2 ore	2-8 ore	2 ore - 2 giorni
Scopo	Validare struttura e flusso	Validare visual design	Testare l'esperienza
Pubblico	Team interno	Team + stakeholder	Utenti reali (usability test)

Per approfondire la parte iniziale del processo leggi la nostra guida sul wireframe.

Quando usare mockup nel tuo processo

Il mockup non serve in ogni progetto. Ci sono tre momenti in cui serve davvero:

1. Presentazione a stakeholder non-tecnici — un cliente non-designer non capisce un wireframe. Un mockup pixel-perfect chiude la firma più velocemente.
2. Validazione del visual design — una volta che la struttura è decisa, il mockup serve per stabilire i colori, la tipografia, la gerarchia visuale prima di creare prototipi interattivi.
3. Handoff agli sviluppatori — i dev hanno bisogno di vedere lo stato finale di ogni pagina con i valori esatti (spacing, colori, shadow). Il mockup in Figma con l'inspect panel è lo standard.

Quando non serve:

• In fase di ricerca e ideation — in quelle fasi il wireframe è più veloce e meno cognitivamente costoso
• Quando lavori con un design system maturo — puoi saltare dalla wireframe direttamente al prototipo cliccabile
• Per usability test su flussi — servono prototipi interattivi, non mockup statici

Strumenti per creare mockup

Il 90% dei mockup digitali nel 2026 viene creato in uno di questi tool:

1. Figma (il 90% del mercato)

Figma è diventato lo standard assoluto per il design digitale. Permette di creare mockup pixel-perfect partendo da wireframe, riusare componenti da un design system, collaborare in tempo reale, esportare asset per gli sviluppatori. Gratis per uso base, a pagamento per team (~$15/user/mese).

Perché è lo standard: componenti con varianti, auto-layout che ridimensiona automaticamente, Variables per i design token, plugin per accessibility, integrazione con Jira/Linear/Notion.

2. Adobe XD / Sketch

Sketch (solo Mac) è stato il re fino al 2020. Ancora usato da designer senior per inerzia. Adobe XD è praticamente dismesso da Adobe (2023) ma alcuni team lo usano ancora.

Nel 2026 consigliamo a chi inizia di andare direttamente su Figma e saltare questi due.

3. Penpot (open source)

Penpot è un'alternativa open source a Figma, gratis anche per team. Interessante per chi vuole evitare lock-in, ma la community è molto più piccola. Per progetti professionali con clienti, Figma è ancora più comodo.

4. Photoshop (legacy)

Prima del 2015, Photoshop era lo standard per mockup. Oggi è usato solo per mockup che richiedono effetti fotografici complessi o ritocco visual avanzato. Per UI pura è obsoleto.

5. Tool per mockup 3D di presentazione

Per i mockup di presentazione (il tuo design dentro uno smartphone fisico), gli strumenti migliori sono:

• Shots — tool web gratuito con device frame moderni, export 1-click
• Mockuuups Studio — libreria enorme di scene realistiche
• Angle 5 — collezione premium di mockup vettoriali per Figma
• Placeit — libreria ampia di video e mockup con rendering fotorealistico

20 esempi di mockup reali (per tipo)

Analizzati in modo che tu veda cosa li rende efficaci, non solo come copiarli.

Mockup UI pixel-perfect (in Figma)

1. Stripe Dashboard — mockup di tutti gli stati (vuoto, loading, errore, pieno di dati). Perfetta gerarchia visiva.
2. Linear App — mockup con microinterazioni annotate. Ogni schermata specifica cosa cambia al click.
3. Notion Mobile — mockup di una feature in tutti e 3 i tema (light, dark, system). Mostra pensiero multi-contesto.
4. Figma Community — Weather App — ottimo esempio per junior: pulito, ben strutturato, con componenti riusabili.
5. Revolut Card Design — mockup sia dell'interfaccia che della carta fisica. Mostra design system cross-mediale.

Mockup di presentazione (iPhone/MacBook)

6. Dropbox — product case study — la schermata dell'app Dropbox su MacBook Pro fotografato in stile lifestyle.
7. Spotify — annual campaign — iPhone con l'app Spotify in mano di una persona, sfondo sfocato concerto.
8. Airbnb — onboarding feature — MacBook + iPhone + iPad nella stessa immagine, mostra multi-device.
9. Calm — app feature — iPhone sul comodino la sera, luce soft, con meditation screen in mostra.
10. Duolingo — gamification — screen Duolingo su iPhone, effetto zoom sulla feature "streak".

Mockup per portfolio / case study

11. Medium "How I redesigned Netflix" — serie di mockup a pagina intera con note di design sotto ciascuno.
12. Dribbble — checkout flow redesign — 6 mockup sequenziali che mostrano il prima/dopo.
13. Behance — banking app case study — mockup con annotazioni delle decisioni di design.
14. Read.cv — portfolio Maya Gao — mockup statici intervallati da testi di spiegazione contestuale.
15. UX Collective — grocery app redesign — 10 schermate sequenziali con storytelling del processo.

Mockup "wow factor" per pitch

16. Apple Keynote — Vision Pro launch — mockup 3D fotorealistico dell'interfaccia in AR, su sfondo living room.
17. Tesla — app mockup — iPhone sul cruscotto di una Tesla con l'app visibile.
18. Uber — rebrand 2018 — video mockup con transizioni fluide tra stati dell'app.
19. Pinterest — Lens launch — iPhone rivolto verso un oggetto reale con il Lens sopra.
20. Headspace — breathe feature — mockup con gradient animato per mostrare il respiro.

Mockup gratuiti: dove scaricarli

Se vuoi partire subito con mockup pronti senza crearli da zero, queste sono le risorse gratuite più complete del 2026:

• Figma Community — cerca "mockup" + il device che ti serve. Centinaia di template gratuiti, scaricabili con 1 click.
• Freepik — Mockups — oltre 1 milione di mockup gratuiti (attribuzione richiesta) in formato PSD.
• Mockup World — curato, qualità alta, ogni mockup in PSD con smart objects.
• LS Graphics — mockup premium di qualità Apple-like, con diversi gratuiti.
• Smart Mockups — web-based, crea mockup in 30 secondi dal browser.

Errori comuni nel creare mockup

Quelli che vediamo più spesso nei portfolio dei junior:

• Mockup troppo belli ma strutturalmente incoerenti — visual piacevole, ma gerarchia sbagliata. Il primo test è togliere il colore: se il design funziona in scala di grigi, funziona. Altrimenti, il colore nasconde problemi di struttura.
• Tipografia inconsistente — 4 font diversi in una sola schermata, taglie casuali. Un mockup serio ha al massimo 2 famiglie e una scala definita.
• Lorem ipsum infinito — riempire tutti i campi con "Lorem ipsum dolor sit amet" dà al visual un'aria finta. Usa contenuti realistici o esempi plausibili del dominio.
• Immagini stock gigantesche — una foto 1600×900 in ogni card. Usa immagini realistiche per contesto, ma non dominanti.
• Stati single only — mostrare solo lo stato "happy path" senza empty state, loading, error. Un mockup senior mostra sempre tutti gli stati del componente.

Domande frequenti

Qual è la differenza tra mockup e prototipo?

Il mockup è statico: è un'immagine del design finito ma non reagisce ai click. Il prototipo è il mockup collegato in modo che quando clicchi su un bottone passi a un'altra schermata, simulando l'uso reale del prodotto. I due vivono nello stesso file Figma: tu costruisci il mockup e poi, in modalità Prototype, aggiungi i collegamenti cliccabili.

Meglio Figma o Photoshop per i mockup?

Figma, senza dubbi, per mockup di interfacce digitali. Figma è vettoriale, collaborativo, con componenti, veloce da modificare. Photoshop ha senso solo per mockup di presentazione con effetti fotografici (riflessi, ombre complesse, smart objects) che Figma non gestisce. Nel 2026 qualsiasi designer UX/UI lavora il 95% del tempo in Figma e apre Photoshop solo per ritocchi occasionali.

Un cliente non-designer capisce la differenza tra wireframe e mockup?

Raramente. Un cliente vede il wireframe e spesso pensa "è brutto, è finito?" perché gli manca la formazione visiva per leggere l'astrazione. Per questo motivo molti designer saltano la fase wireframe quando presentano ai clienti e passano direttamente al mockup. Nei team interni invece i wireframe sono indispensabili per decidere la struttura senza distrarsi con il visual.

Serve creare mockup nel 2026 con l'AI?

L'AI (Midjourney, Stable Diffusion, Figma AI) può generare mockup di presentazione veloci, ma non sostituisce il mockup UI professionale. Un designer usa l'AI per: generare placeholder di immagini realistiche, creare varianti rapide di colore, accelerare il visual storytelling del portfolio. Ma i componenti di interfaccia seri, accessibili, coerenti col design system, vanno ancora costruiti a mano.

Come si presenta un mockup al cliente?

Tre regole: (1) presentali sempre in contesto — non le schermate da sole ma mostrate dentro device o con un breve caption che spiega di cosa si tratta; (2) numera le schermate — "1/12 — Home" "2/12 — Lista prodotti" — aiuta il cliente a orientarsi; (3) allega una legenda dei componenti riutilizzati. Un cliente che capisce la logica del tuo design system ti pagherà più volentieri il lavoro di manutenzione futura.

Prossimi passi

Saper creare mockup di qualità professionale è un requisito di base per qualsiasi UX/UI designer nel 2026. Ma il vero salto di carriera arriva quando impari a costruirli all'interno di un design system coerente, con componenti riusabili e stati completi — non come pixel dipinti uno per uno.

Il corso completo di UX Design di CorsoUX ti insegna a passare da wireframe → mockup → prototipo con Figma in modo sistematico: 40+ ore di esercitazioni pratiche, costruzione di un design system personale, case study reali. Al termine hai 3-4 mockup di alta qualità nel portfolio, ognuno con una spiegazione del processo di progettazione.

Per iniziare subito:

• Guida al wireframe — il passo prima del mockup
• Figma tutorial italiano — lo strumento con cui farli
• Design System: come costruirne uno — il livello successivo per diventare senior
• UI Design: principi e tendenze 2026 — come rendere i tuoi mockup visivamente efficaci