Cos'è una flat illustration (e perché non è flat design)

Lo screenshot è già una dashboard fitta di numeri. Accanto, l'illustrazione della sezione hero sfoggia riflessi lucidi, un volto dipinto e un cielo che sfuma dal blu al pesca. L'interfaccia è sobria, l'immagine per niente. Ti è mai capitato?

A me sì: più di una volta ho tolto un'illustrazione così da una landing page, perché faceva a pugni con l'interfaccia. Un prompt scritto meglio non cambiava niente: era sbagliato lo stile.

Una flat illustration è un disegno fatto di forme semplici e colori pieni: poche ombre, quasi nessuna sfumatura, nessuna finta profondità. È l'immagine in sé, non l'interfaccia che le sta intorno. Quando deve convivere con una vera interfaccia, apro il generatore di illustrazioni flat, imposto Stile su Flat e descrivo soltanto il soggetto.

Com'è fatta una flat illustration

Parti dai riempimenti. Ogni forma ha un solo colore: la camicia è blu navy, la tazza è terracotta. Lo sfondo è bianco o crema, in tinta unita, così il titolo accanto ha spazio per respirare.

Le persone non hanno volto. Un cerchio per la testa, un blocco per il busto, e si capisce lo stesso che è una persona al portatile. È proprio quello che cerco: un volto dettagliato attira l'occhio che dovrebbe cadere sullo screenshot.

Tieni la palette ridotta: due o tre colori che il prodotto usa già, più un neutro. Una tinta in più, scelta a caso, fa sembrare l'immagine appiccicata alla pagina. Ne parlo anche nell'articolo sugli stili di illustrazione che funzionano sulle landing page: l'immagine sta al servizio del prodotto, non gli contende l'attenzione.

I contorni devono essere netti, al punto che puoi indicare una forma e dire di che colore è. Se la luce avvolge una guancia, o se una sfumatura fa il lavoro dell'ombra, non hai più una flat illustration. Hai un render, e i render litigano con un'interfaccia pulita.

Flat illustration non vuol dire flat design

Le due espressioni si cercano spesso insieme, ma indicano due mestieri diversi.

Il flat design è un modo di costruire le interfacce. Si è diffuso con Metro, il linguaggio visivo di Microsoft: debutta su Windows Phone 7 nel 2010 e arriva su Windows 8 a ottobre 2012. Verso il 2013 anche la homepage di Apple ha preso la stessa strada.

L'articolo di Nielsen Norman Group sulle interfacce flat e sui controlli cliccabili è l'avvertimento che giro ancora ai colleghi: se ogni controllo è un rettangolo piatto, non si capisce più cosa si può premere. Il cosiddetto «flat 2.0», arrivato dopo, rimette una leggera ombra su pulsanti e pannelli perché lo schermo resti leggibile: pensa all'elevazione di Material Design.

Su quello schermo una flat illustration può restare più semplice dei pulsanti. Il pulsante magari ha bisogno di un'ombra per sembrare cliccabile, l'immagine dell'hero no. Dai le stesse ombre anche a lei e ti ritrovi con due livelli che fanno a gara a chi si nota di più.

Il flat design costruisce lo schermo. La flat illustration è l'immagine che ci appoggi sopra.

Flat illustration, line art, 3D e illustrazioni da fiaba

Illustro offre quattro stili. Flat è quello a cui ricorro quando il file deve entrare in un layout di prodotto e poi uscire in SVG. Gli altri tre non sono un flat «più rifinito»: sono proprio un altro tipo di immagine.

Anche il disegno al tratto è vettoriale, quindi Colori funziona, ma l'effetto è quello della china, non delle forme piene. Passo al generatore di line art quando il layout chiede uno schema più che una scena.

L'Illustrazione 3D è opaca, tondeggiante, illuminata come un oggettino fotografato in studio. Non si esporta in SVG e non è un file di Blender. Se accanto a un prodotto giocoso il flat ti sembra troppo leggero, leggi come creare una mascotte 3D senza Blender prima di costringere il flat a un lavoro per cui non è fatto.

Lo stile Libro per bambini è volutamente caldo: perfetto per una fiaba, fuori posto nella schermata delle impostazioni. Le illustrazioni da fiaba lasciale alle storie. Anche questo stile è raster, quindi non puoi ricolorare i tracciati come fai con il flat.

Dove una flat illustration dà il meglio

Stati vuoti, onboarding, la sezione delle funzionalità sotto un titolo, una slide che deve richiamare il sito. In tutti questi casi a spiegare ci pensano le parole e lo screenshot. All'immagine basta rendere riconoscibile il momento: una persona, un portatile, una pianta, una casella di posta vuota.

Una sezione hero larga ha bisogno di spazio vuoto: un'immagine che occupa ogni angolo non lascia posto al titolo. Chiedi un solo soggetto su uno sfondo in tinta unita, poi controlla come viene ritagliata sullo smartphone prima di definire la versione desktop.

Tenere la stessa persona lungo tutto un flusso è un altro problema, e rigenerare non basta a mantenerla uguale. Per quello c'è il set di illustrazioni.

Scrivi un tema e una descrizione del personaggio, prepara le scene con Pianifica il set (la pianificazione è gratis), poi premi Blocca il personaggio. La scheda del personaggio costa 3 crediti e la approvi prima di qualsiasi scena. Ogni scena costa altri 3 crediti, perché i set funzionano in Illustro MAX. Un set da 4 scene costa quindi 15 crediti.

Aspettati un risultato «più coerente», non un gemello identico pixel per pixel.

Quando lascio perdere questo stile

Quando la gag sta tutta nella faccia. In Flat le figure non hanno occhi né bocca: se è l'espressione a reggere l'idea, hai sbagliato stile.

Per un albo illustrato. Lì conta la morbidezza, e l'SVG non lo avresti comunque.

Quando la mascotte deve sembrare un giocattolo appoggiato sul tavolo. Lì serve l'Illustrazione 3D, da esportare in PNG o JPEG.

Per un logo. Le piccole forme flat possono essere leggibili, ma Illustro non è un programma per creare loghi. Un marchio da stampare su mille gadget richiede comunque un designer.

Quando il brand ha già un suo sistema di illustrazioni su misura, che nessun prompt saprebbe rispettare. Con il flat hai una prima versione da pubblicare entro la settimana, ma non sostituisci la direzione artistica sull'hero di una campagna.

Come scrivere il prompt per una flat illustration da ricolorare

Ecco il prompt che incollo davvero, e che poi ritocco:

«Persona al portatile, vista di lato, forme geometriche semplici, camicia blu navy, tazza color terracotta, sfondo crema, senza tratti del viso, senza sfumature»

Indica il soggetto, la posa e due o tre colori. Lascia fuori «cinematografico», «8k» e «luce drammatica»: sono parole che chiedono proprio la profondità che vuoi evitare.

Se il prompt parla di obiettivi fotografici, l'immagine non resterà flat. «Donna in un ufficio pieno di sole, stile cinematografico, viso dettagliato, bokeh morbido» chiede una fotografia. La versione flat parla di forme e colori, e chiede esplicitamente niente viso e niente sfumature.

Se il primo risultato sembra ancora un render, rigenera con Illustro Light prima di spendere crediti MAX su una scena che non ti serve. Anche la guida su come creare un file SVG con l'AI che puoi ancora ricolorare parte dalla stessa idea: chiedi una grafica, non una fotografia.

Poi passa ai comandi.

1. Imposta Stile su Flat.
2. Usa Illustro Light (1 credito) finché la posa è ancora da trovare, e passa a Illustro MAX (2 crediti) quando la scena è quella da pubblicare. L'editor si apre su Light: controlla la modalità prima di premere Genera.
3. Scegli le Proporzioni: Quadrato (1024×1024), Verticale (1024×1536) o Orizzontale (1536×1024). Quadrato per un riquadro nell'interfaccia, Orizzontale per una sezione hero. Non puoi inserire dimensioni personalizzate in pixel.
4. Se la posa va bene ma il giallo no, apri Colori. Ricolorare è gratis: puoi sostituire un colore ovunque compaia, oppure cliccare una forma e cambiare solo quella.
5. Per un oggetto in più, o un sorriso, serve Modifica con l'AI (3 crediti). Colori non sa disegnare un oggetto nuovo.
6. Scaricare PNG o JPEG è gratis. Esporta in SVG costa 1 credito sulle immagini che hai generato. Inserisci il file in Figma con il plugin Figma di Illustro, oppure esportalo e trascinalo tu sul canvas.

Hai già una foto con la posa giusta? Trasforma la foto in un cartoon. Lo strumento produce solo immagini in stile flat, a 3 crediti, che poi ricolori come qualsiasi altro file flat.

Domande frequenti

Cosa significa flat nell'illustrazione?

Flat significa che l'immagine non simula la profondità. Le forme stanno su un solo piano, i colori restano pieni e le ombre sono minime o assenti. In un layout di prodotto è proprio questo che evita all'illustrazione di fare concorrenza a pulsanti, testi e screenshot. Se su una guancia si intuisce da dove arriva la luce, il disegno non è più flat.

A cosa serve una flat illustration?

Una flat illustration si usa nelle sezioni dei siti web, nell'onboarding delle app, negli stati vuoti e nelle slide: ovunque una scena semplice debba andare d'accordo con un'interfaccia. I team la scelgono quando il protagonista è lo screenshot e all'immagine basta mostrare una persona, un oggetto o una casella di posta vuota. Esporta l'SVG quando il file va ridimensionato, e tieni la palette ridotta, così può prendere in prestito i colori del prodotto.

Flat illustration e flat design sono la stessa cosa?

No. Il flat design è uno stile di interfaccia: Metro è comparso su Windows Phone 7 nel 2010, è arrivato sui computer con Windows 8 nel 2012, e le interfacce di molti prodotti l'hanno seguito.

La flat illustration è l'immagine che metti dentro quell'interfaccia. Il pulsante può avere ancora una piccola ombra per sembrare cliccabile, mentre l'immagine può restare più piatta del controllo.

Le flat illustration sono file vettoriali?

In Illustro lo stile Flat diventa un SVG che puoi ricolorare. Scaricare quell'SVG costa 1 credito, mentre PNG e JPEG sono gratis.

Con Colori puoi sostituire un colore o eliminare una forma, ma non aggiungere nuovi elementi disegnati come faresti con lo strumento penna. Libro per bambini e Illustrazione 3D restano raster, quindi per questi stili il discorso non vale.

Come si chiama un disegno in stile flat?

Lo trovi anche come flat vector illustration, illustrazione vettoriale flat o illustrazione in stile flat design; chi non lavora nel settore spesso dice semplicemente disegno stilizzato. Io uso «flat» per forme piene quasi senza ombre. Se l'immagine è fatta soprattutto di contorni è line art, non flat. Se sembra un giocattolo di plastilina è Illustrazione 3D.

Posso usare una flat illustration per scopi commerciali?

Sì, una volta acquistati dei crediti: l'uso commerciale è incluso in qualsiasi pacchetto di crediti una tantum, nel rispetto dei termini. Quello che crei con i crediti gratuiti ricevuti alla registrazione è per uso personale finché non acquisti crediti: con il primo acquisto puoi usare anche quello a fini commerciali. E non usare questi file per addestrare o valutare un altro sistema di intelligenza artificiale.

Nella pagina dei prezzi di Illustro trovi i diritti di uso commerciale inclusi nei pacchetti di crediti una tantum. Per una campagna con un sistema visivo su misura per il brand, dopo la bozza potrebbe comunque servire il lavoro di un illustratore.