Adamarant
Inizia
Torna agli Appunti

Fotografie per il sito di un prodotto software: 7 passi

Product Design29 ago 20269 min di lettura

Il software non ha un oggetto da fotografare, così quasi tutti i siti finiscono in stock. I 7 passi per scegliere, uniformare e pubblicare 8-12 immagini.

A bunch of polaroid pictures on a table

Alla fine di questo processo hai una shot list di otto-dodici immagini, una decisione sulla fonte per ognuna e un trattamento che le fa leggere come una serie sola. Il vincolo è preciso: il prodotto è software, quindi non c'è niente da mettere su un tavolo e illuminare.

È per quel vincolo che tanti siti di prodotto finiscono con le stesse quattro foto. Una persona che sorride davanti al portatile. Una riunione intorno a una lavagna. Due mani sulla tastiera, riprese dall'alto. Una sfumatura sfocata al posto dell'idea di tecnologia. La ricerca VisualGPS di Getty Images misura il costo di quella scelta: il 98% dei consumatori dice che immagini e video autentici contano per guadagnare fiducia, e quasi il 90% vuole sapere quando un'immagine è stata generata dall'AI. Una foto che il visitatore ha già visto su tre siti concorrenti fallisce quel test prima che qualcuno legga il titolo.

Che cosa serve prima di iniziare

  • Il posizionamento in una frase. Per chi è il prodotto e cosa cambia per quella persona. Senza, la shot list scivola verso quello che sembra bello nella cartella.
  • Un inventario delle pagine. Ogni slot che mostra un'immagine, con proporzione e larghezza reale di resa. Un hero da 1600px e una card da 320px vogliono soggetti diversi, non lo stesso soggetto tagliato due volte.
  • L'interfaccia in uno stato mostrabile. Etichette vere, dati plausibili, niente lorem ipsum, niente avatar segnaposto.
  • Una voce di budget e una data. Mezza giornata di shooting commissionato, una serie in licenza e una serie generata hanno prezzi e tempi diversi.

Passo 1: dare a ogni immagine un compito solo

Su un sito di prodotto software i compiti sono tre, e ogni immagine ne fa uno.

  1. Mostrare il prodotto. L'interfaccia, tagliata sulla parte che regge l'argomento della sezione accanto.
  2. Mostrare il lavoro intorno al prodotto. La corsia del magazzino, la reception della clinica, la scrivania alle sette del mattino. Il software vive dentro la giornata di qualcuno, e quella giornata si fotografa anche quando il software no.
  3. Portare il tono. Materia, texture, luce. Niente persone, niente schermi, niente racconto. È l'immagine che fa sembrare otto pagine un marchio solo.

Scrivi il compito accanto a ogni slot dell'inventario prima di guardare una sola fotografia. Le scelte deboli quasi sempre nascono al contrario: prima l'immagine, poi la giustificazione.

Passo 2: eliminare le quattro foto che non dicono niente

Girano sui siti software di ogni mercato, e ognuna si scambia con la versione di un concorrente senza cambiare il senso della pagina.

  • La scrivania con portatile e caffè. Descrive un ufficio, non un prodotto.
  • La riunione con i post-it. Descrive un workshop, di solito uno che nessuno dei presenti sta conducendo.
  • La stretta di mano. Descrive una trattativa già chiusa.
  • La visualizzazione dati astratta. Nodi azzurri su campo scuro, al posto di quello che il software fa davvero.

Il test dura dieci secondi: copri logo e titolo. Se l'immagine starebbe identica sulla pagina di un concorrente, è decorazione pagata a prezzo di fotografia.

Passo 3: costruire la shot list sul vocabolario del prodotto

Prendi i sostantivi che i clienti usano nei ticket e nelle chiamate commerciali, e fotografa quelli. Un gestionale per appuntamenti in studio dentistico ha un vocabolario: il bancone all'apertura, il foglio cartaceo della giornata che il software sostituisce, il telefono che squilla durante una seduta, la porta alle otto. Quattro scatti, nessuno disponibile in stock, tutti leggibili per chi manda avanti uno studio e per nessun altro.

Otto-dodici immagini coprono un sito di cinque-otto pagine. Sotto le otto il sito si ripete. Sopra le dodici la serie perde coerenza e qualcuno riempie i buchi con quello che trova nel drive condiviso.

Passo 4: scegliere la fonte scatto per scatto

Le fonti sono tre e si scelgono per immagine, non per sito.

Commissiona gli scatti che portano il vocabolario del passo 3. Nessun archivio ha le foto del posto di lavoro dei tuoi clienti. Mezza giornata con un fotografo produce i tre o quattro fotogrammi che rendono il sito impossibile da copiare.

Prendi in licenza gli scatti di tono, dove il luogo preciso e la persona precisa non contano. Leggi il testo alternativo prima della miniatura e guarda il resto del lavoro del fotografo: una serie di un autore solo si uniforma molto più facilmente di cinque immagini di cinque autori.

Genera con un piano di dichiarazione già pronto. Il Nielsen Norman Group ha misurato la cosa nel 2026 con 77 adulti statunitensi, che hanno valutato sei versioni della homepage di una società di consulenza inventata: tre con immagini hero generate dall'AI, tre con stock in licenza. Chi non sapeva l'origine ha giudicato le immagini AI affidabili e professionali quanto quelle stock, con un margine minimo in loro favore su tutte e tre le misure, ma con differenze tanto piccole che NN/g ha evitato di dichiararle migliori. Quello che resta è più stretto del titolo: le immagini AI non vengono penalizzate quando chi guarda non lo sa.

Chi guarda lo sa sempre più spesso. Dal 2 agosto 2026 l'articolo 50 dell'AI Act europeo obbliga i fornitori di sistemi generativi a marcare l'output sintetico in formato leggibile dalle macchine, così che se ne rilevi l'origine artificiale, e obbliga i deployer a dichiarare le immagini generate o manipolate che costituiscono un deep fake. Le sanzioni per la violazione degli obblighi di trasparenza arrivano a 15 milioni di euro o al 3% del fatturato mondiale annuo, e gli standard tecnici di marcatura si stanno ancora definendo con il codice di condotta. Se pubblichi immagini generate su un sito che serve utenti europei, marcatura e dichiarazione fanno parte della produzione dell'immagine, non della revisione legale che arriva dopo. Su un caso specifico, la parola spetta a un avvocato.

Passo 5: uniformare la serie perché si legga come una serie

Cinque variabili decidono se otto immagini sembrano scelte o raccolte: temperatura colore, contrasto, distanza dal soggetto, profondità di campo e proporzione del taglio. Fissane una alla volta su tutta la serie e tienile ferme. Un fotogramma caldo in mezzo a sette freddi sembra un errore anche a chi non saprebbe dire cosa non va. La distanza dal soggetto è quella che i team dimenticano: un ambiente largo accanto a un macro stretto rompe la serie anche a colore perfetto. È la stessa disciplina che impedisce a un prodotto di sembrare un template.

Passo 6: pubblicarle senza rovinare l'LCP

L'immagine hero di solito è l'elemento LCP. Il Web Almanac 2025 di HTTP Archive ha rilevato che un'immagine è l'elemento LCP nel 76% delle pagine mobile e nell'85,3% di quelle desktop, e che i formati in produzione sono vecchi: il JPG copre il 57% delle immagini LCP, il PNG il 26%, il WebP l'11%, l'AVIF lo 0,7%. L'attributo che sistema l'ordine di caricamento, fetchpriority="high", compare sul 17% delle pagine mobile con un'immagine LCP.

  • Servi AVIF con fallback WebP. Il supporto dei browser supera il 94% per entrambi.
  • Metti fetchpriority="high" su una sola immagine per pagina, l'hero, e non caricarla mai in lazy.
  • Dai a ogni immagine larghezza e altezza esplicite, o una proporzione, così il layout regge mentre carica.
  • Esporta al doppio della larghezza di resa, non a quella che esce dalla macchina fotografica. Un hero da 3,2MB è un problema di fotografia che diventa un problema di ingegneria.

La parte di misurazione sta in Core Web Vitals su Next.js.

Passo 7: scrivere il testo alternativo sul soggetto, non sulla keyword

Il testo alternativo descrive cosa c'è nell'inquadratura a chi non la vede. "Receptionist di uno studio dentistico che controlla gli appuntamenti del giorno su uno schermo a parete" è testo alternativo. "Miglior software gestionale per studi dentistici" è una keyword infilata dentro un attributo di accessibilità, e peggiora l'esperienza proprio di chi quell'attributo dovrebbe servire. Le immagini di tono, che non portano informazione, prendono un attributo alt vuoto: così gli screen reader le saltano invece di annunciare una texture.

Come si verifica che la serie funzioni

  • Copri tutti i logo e i titoli del sito. Si capisce ancora a quale settore parla?
  • Metti le immagini in griglia a dimensione miniatura. Una sembra venire da un altro sito?
  • Fai una ricerca inversa sulle immagini in licenza. Chi altro nel tuo mercato le sta usando?
  • Carica la home con connessione 4G limitata. Conta i secondi prima che compaia l'hero.
  • Disattiva del tutto le immagini. La pagina regge ancora il suo argomento? Se sì, le immagini stanno lavorando come sostegno e non come sostituto del testo.

Errori frequenti e come si correggono

La serie è stata scelta in una cartella invece che sulla pagina. Le miniature aiutano immagini che si sfasciano a 1600px con del testo sopra. Metti ogni candidata nel layout vero, al taglio vero, prima di decidere.

L'hero è tutta l'interfaccia al 30%. Uno screenshot intero rimpicciolito a misura di hero mostra un rettangolo grigio. Taglia su un componente, un grafico, una riga di tabella, a una dimensione in cui le etichette si leggono.

La fotografia è forte e l'interfaccia accanto no. Su una pagina di prodotto la tipografia pesa più della fotografia, e una buona immagine accanto a una scala tipografica rotta rende la scala più visibile. Sistema prima la scala tipografica.

La cartella non è di nessuno. Sei mesi dopo la serie è cresciuta di quattro immagini che nessuno ha uniformato, e il sito è tornato a sembrare una raccolta. Tieni le immagini nel repository del design system con licenza, fotografo e fonte annotati file per file, e tratta un'aggiunta come una modifica da rivedere.

Foto di Etienne Girardet su Unsplash

Domande frequenti

Quante fotografie servono davvero al sito di un prodotto software?+

Da otto a dodici per un sito di cinque-otto pagine. Il numero esce dall'inventario delle pagine, non dal gusto: conta ogni slot che mostra un'immagine, poi togli quelli dove un dettaglio di interfaccia ritagliato funziona meglio di una foto. Sotto le otto immagini gli stessi fotogrammi si ripetono di pagina in pagina e il sito sembra povero. Sopra le dodici la serie smette di sembrare uniforme, perché nessuno tiene dodici immagini coerenti senza un trattamento scritto.

Nel 2026 si possono pubblicare immagini generate dall'AI sul sito di un'azienda?+

Si può, con degli obblighi. Dal 2 agosto 2026 l'AI Act europeo impone ai sistemi generativi di marcare l'output sintetico in formato leggibile dalle macchine, e impone a chi pubblica un deep fake di dichiarare che l'immagine è generata artificialmente. Le sanzioni per le violazioni degli obblighi di trasparenza arrivano a 15 milioni di euro o al 3% del fatturato mondiale. Il rischio commerciale è un'altra cosa: secondo Getty Images quasi il 90% dei consumatori vuole sapere quando un'immagine è generata dall'AI, quindi un'immagine generata e non dichiarata resta un problema di fiducia anche dove non si applica nessuna norma. Sul caso specifico, chiedi a un avvocato.

Nell'hero è meglio uno screenshot del prodotto o una fotografia?+

Servono entrambi, in slot diversi. Un dettaglio di interfaccia ritagliato risponde alla domanda con cui arriva chi visita il sito: che aspetto ha questa cosa quando gira. La fotografia risponde alla seconda domanda: se chi l'ha fatta capisce il lavoro di chi la userà. Il caso che non funziona è lo screenshot intero rimpicciolito a larghezza hero: a quella scala non si legge niente e l'immagine sembra un rettangolo grigio. Ritaglia su un componente a una dimensione in cui le etichette si leggono, e dai alla fotografia un altro slot.

Si può usare semplicemente lo stock gratuito di Unsplash o Pexels?+

Per gli scatti di tono, spesso sì. Per le immagini che portano il vocabolario del prodotto no, perché i fotogrammi che servirebbero non esistono in un archivio gratuito. Due controlli prima di pubblicare un'immagine gratuita: ricerca inversa per vedere chi altro nel tuo mercato la sta usando, e lettura della licenza della singola foto invece della pagina riassuntiva della piattaforma, visto che le liberatorie di persone e luoghi non sono garantite dalla licenza. Un fotogramma che compare su due siti concorrenti costa in credibilità più di quanto costi in denaro uno scatto commissionato.

Studio

Inizia un progetto.

Scriviamo riguardo a ciò che costruiamo. Raccontaci cosa vuoi costruire tu.