Illustrazioni di prodotto: disegnarle, comprarle o evitarle

Un sistema di illustrazioni è un insieme chiuso di disegni, uno stile definito e le regole che dicono in quali schermate possono comparire. Quasi nessun prodotto ce l'ha. Ha delle illustrazioni: due comprate durante un restyling, tre disegnate da chi aveva un pomeriggio libero, una ereditata da una landing che ormai non segue più nessuno. Passando da una schermata all'altra si vede: decorazione applicata in momenti diversi da mani diverse.

La scelta riguarda il budget e la manutenzione prima ancora del gusto. Un'illustrazione su misura, quelle da header o da pagina di lancio, costa tra 300 e 1.200 dollari a pezzo. Una serie da dodici diventa una spesa a cinque cifre prima ancora di parlare di revisioni e diritti d'uso. Con queste cifre serve una regola, non una preferenza.

Cosa contiene davvero un sistema di illustrazioni

Quattro parti. Nei prodotti che sembrano disomogenei di solito ne mancano due.

• La definizione dello stile. Spessore della linea, comportamento delle campiture, limiti di palette, prospettiva, se compaiono figure umane e come sono disegnate. Scritta, non "guarda questi tre file".
• L'inventario con le collocazioni. Ogni disegno legato alla schermata o allo stato in cui può apparire.
• Le regole di produzione. Formato di export, comportamento del viewBox, colori presi dai token invece che scritti in esadecimale, passaggio di ottimizzazione, gestione del tema.
• Un responsabile e una voce di budget. Chi commissiona il disegno successivo, e con quali soldi.

Senza la quarta parte le prime tre si sfaldano in un paio di trimestri. Serve un'immagine di venerdì, l'illustratore è occupato, entra un file di stock, e la definizione dello stile descrive metà prodotto.

Quando disegnare

Commissiona un lavoro su misura quando il disegno deve reggere un concetto inventato dal prodotto. Una pipeline, un canvas, un modello di permessi, una forma di dato che esiste solo dentro la tua applicazione: nessuna libreria ce l'ha, e infilarci sopra un'immagine generica non insegna niente a chi guarda.

Disegna per le superfici che si ripetono all'infinito. Onboarding, empty state degli oggetti principali, percorso di errore, hero di marketing. Vengono viste migliaia di volte e costano poco per impression. Disegna quando conta il riconoscimento: l'illustrazione è uno dei pochi livelli che un concorrente non copia in un pomeriggio, ed è per questo che appartiene alla direzione artistica e non alla decorazione.

Chiudi le condizioni commerciali nella stessa conversazione in cui parli di stile. Gli illustratori quotano quasi sempre il disegno e la licenza separatamente, e l'uso commerciale parte parecchio sopra la tariffa editoriale prima ancora che esclusiva, durata e territorio la alzino. Metti per iscritto quattro cose: esclusiva, durata, territorio, e se ricevi il file sorgente modificabile.

Quando comprare

Le librerie funzionano quando il concetto è generico. Ricerca, pagamenti, sicurezza, un gruppo di persone intorno a un tavolo: sono già stati disegnati diecimila volte e rifarli non porta niente. Ricolora una serie sulla tua palette, tienila sulle superfici a basso traffico (404, documentazione, pagine di marketing secondarie) e sposta il budget sulle schermate che contano.

Leggi la licenza prima dello stile. Le tre librerie gratuite più usate differiscono su punti che pesano dentro un'interfaccia:

• unDraw ammette l'uso commerciale senza attribuzione, e vieta di ridistribuire le illustrazioni in pacchetti o di usarle per addestrare modelli di machine learning (licenza).
• Storyset è gratuito solo con un credito visibile e un link a ogni utilizzo; un abbonamento premium Freepik o Flaticon toglie l'obbligo (termini).
• Blush consente l'uso commerciale, anche nei lavori consegnati a un cliente, e vieta di rivendere, ridistribuire o raccogliere i disegni in una libreria concorrente (licenza).

Una serie che pretende un credito visibile non è gratuita dentro un prodotto. È un obbligo permanente su ogni schermata che la ospita, e sopravvive alla persona che l'ha scelta.

Quando lasciar perdere

Schermate dense di dati. Un'illustrazione accanto a un numero di dashboard compete con quel numero e di solito vince, cioè l'opposto del motivo per cui la schermata esiste.

Empty state che già funzionano. Una frase chiara e un bottone battono spesso il disegno della persona con la lente di ingrandimento; l'immagine aggiunge qualcosa solo quando lo stato è davvero ambiguo. I quattro stati che ogni schermata deve prevedere li abbiamo trattati in un altro articolo.

Qualunque superficie in cui il disegno ripete il titolo. Se l'H1 dice "Ancora nessuna fattura" e l'immagine mostra una cartella vuota, quell'immagine sono byte e attenzione spesi per una seconda copia dello stesso messaggio.

Schermate in fase di ridisegno. L'illustrazione è l'ultimo livello. Disegnare su un layout che si muoverà ancora è il modo più diretto per rifare tutto.

Cosa fare

Fissa il numero prima di commissionare. Dodici disegni mantenuti valgono più di quaranta lasciati andare. Il tetto costringe a discutere le collocazioni subito, quando costa poco.

Fai passare il colore dai token. Richiama le custom property CSS dentro l'SVG invece di scrivere gli esadecimali. Un file solo copre tema chiaro e scuro, e un cambio di palette non diventa il riesport dell'intera serie.

Ottimizza in ingresso, in automatico. Gli export dei tool di design portano metadati dell'editor, commenti, gruppi vuoti e una precisione decimale assurda. SVGO toglie tutto senza spostare un pixel, e i risparmi riportati stanno di solito tra il 30% e l'80%. Mettilo in CI, così nessuno deve ricordarsene.

Segna come decorativi i disegni decorativi. Un'illustrazione che ripete il testo vuole l'attributo alt vuoto o aria-hidden, così gli screen reader la saltano. Se invece porta un'informazione che il testo non dà, decorativa non è, e serve una descrizione vera secondo il criterio WCAG 1.1.1.

Tieni il testo fuori dal disegno. Le parole dentro un SVG non si traducono, ignorano la dimensione di carattere impostata da chi legge e trasformano ogni nuova lingua in un nuovo export. L'etichetta va nel DOM, sopra il disegno.

Compra il sorgente. Chiedi il file modificabile insieme alla licenza. Senza, la seconda versione di qualsiasi disegno è una commissione nuova.

Scrivi la regola di collocazione accanto al disegno. Un "solo per l'empty state dei progetti" nei metadati del file evita che lo stesso personaggio spunti su sei schermate scollegate un anno e mezzo dopo.

Cosa non fare

Niente due stili insieme. Una serie geometrica piatta su una schermata e una disegnata a mano su quella dopo raccontano una migrazione che qualcuno ha lasciato a metà. Se vale la pena cambiare stile, vale la pena finire.

Niente illustrazioni per tappare il layout. Un'immagine buttata in uno spazio storto rende ufficiale lo spazio storto. Sistema le spaziature, poi decidi se il disegno serve davvero.

Marketing e prodotto non commissionano separatamente. Due budget, due fornitori, due stili, un prodotto solo. La serie di illustrazioni è un asset con un responsabile, oppure non è una serie.

Non pubblicare l'export grezzo. Una singola illustrazione hero non ottimizzata da qualche centinaio di kilobyte finisce dritta nel Largest Contentful Paint, ed è il peso più facile da togliere in tutta la pagina.

Le figure umane non sono un default. I personaggi portano età, corporatura, tono della pelle e genere in ogni schermata in cui compaiono. È una decisione di marca con conseguenze reali su chi si sente incluso, e merita una risposta pensata invece del default della libreria scaricata.

Cosa cambia nel 2026 con le illustrazioni generate

Due fatti vanno tenuti dritti prima di generare una serie.

Il primo riguarda la proprietà. Il Copyright Office statunitense ha stabilito il 29 gennaio 2025 che i prompt da soli non danno all'utente un controllo sufficiente sull'output per considerarlo autore, e che il materiale generato senza un contributo umano adeguato non è tutelabile; restano protetti gli elementi di mano umana dentro un'opera mista (rapporto Parte 2). Una serie interamente generata è materiale che puoi usare e che con ogni probabilità non puoi impedire ad altri di usare.

Il secondo riguarda la marcatura. L'articolo 50 dell'AI Act europeo impone a chi fornisce sistemi che producono immagini sintetiche di marcare gli output in formato leggibile dalle macchine e di renderli riconoscibili come generati da AI. L'obbligo si applica dal 2 agosto 2026, con sanzioni fino a 15 milioni di euro o al 3% del fatturato mondiale annuo, a seconda di quale sia più alto.

Nessuno dei due fatti vieta l'illustrazione generata. Definiscono dove sta bene: presentazioni interne, esplorazione, campagne usa e getta. Per la firma visiva che un prodotto vuole tenersi per cinque anni il terreno è più fragile.

La decisione in un passaggio

• Concetto inventato dal prodotto, superficie vista ogni giorno, riconoscimento importante: disegna.
• Concetto generico, superficie a basso traffico, budget stretto: compra, ricolora, e leggi prima la licenza.
• Schermata densa di dati, o testo che già fa il lavoro: lascia lo spazio com'è.

La stessa regola vale per la fotografia, e la lista di scatti equivalente l'abbiamo scritta in fotografie per il sito di un prodotto software. Mezzo diverso, principio identico: prima si decide cosa deve dire l'immagine, poi chi la fa.