Digital Design – Come utilizzare icone e immagini – Guida

Condividi

SOMMARIO ARTICOLO – Quando siamo alle prese con un nuovo progetto di digital design, o da soli o fianco a fianco con il nostro web designer di fiducia, dobbiamo trovare il giusto equilibrio tra la creazione di qualcosa di nuovo e visivamente accattivante e la comunicazione di ciò che è realmente importante. Icone e immagini ci vengono incontro per l’impostazione della giusta user experience e invitare l’utenza ad assorbire l’etica e l’identità del nostro marchio.

Di seguito una guida che ci aiuterà, prima di ogni cosa, a concentrarci sull’utilizzo di icone e immagini nel nostro design. Andiamo.

digital design
Un set di Icone lineare e pulito

Come dare carattere alle icone nel Digital design

Le icone iniettano quel po’ di pepe, aggiungono accenti visivi al digital design; nel caso avessimo diverse informazioni da comunicare, diventano un’ottimo e brillante mezzo per la suddivisione dei contenuti ricchi di testo in modo più accettabile. Ma, per riuscire ad imboccare questa strada nel modo migliore possibile, bisogna essere strategici; andiamo quindi a scoprire come piazzare al meglio le icone nei nostri contenuti visivi:

1 – Evidenziare i punti chiave

Un approccio più creativo al classico elenco puntato o numerato nel digital design, che ha l’obiettivo di riordinare il testo, separando pezzi di informazioni dal corpo del testo, riguarda l’iconografia.

Il creare simboli unici al fine di trasmettere non soltanto delle precise informazioni ma fornire, al contempo, ulteriore identità al nostro marchio, tiene alta l’attenzione del lettore, lo coinvolge ancor di più e non lo stressa con blocchi stracolmi di testo destinati alla lettura.


2 – Grafici, tabelle o classifiche

Vi sono alcuni design che ben si adattano ad un testo pesante – pensiamo, ad esempio, alle sezioni blurb della copertina di un libro – ma altri, come le infografiche ad esempio, richiedono un lavoro più visivo. L’iconografia offre una serie di vantaggi e uno di questi è che consente al lettore la visualizzazione del testo, che può risultare particolarmente importante quando vogliamo comunicare una serie di dati o delle statistiche.

Per renderci conto del concetto espresso nelle righe precedenti, possiamo dare uno sguardo all’esempio sopra: un’infografica trasmessa con e senza iconografia; il grafico accompagnato dalle icone sembra meno ingombro e facile da leggere e questo accade proprio grazie agli elementi visivi di supporto, che aiutano nella spiegazione di tutti i vari punti. Ricordiamo comunque di inserire icone che abbiano una rilevanza più che significativa per il messaggio da trasmettere, altrimenti non avranno senso. Non stiamo piazzando delle icone per il solo gusto di farlo, ma per rendere comprensibili e visivamente accattivanti i nostri messaggi.

Un altro esempio di infografica lo possiamo osservare nelle immagini sottostanti, in cui è facile notare le varie differenze nella visualizzazione dei dati inseriti; vediamo come l’immagine di destra, con l’iconografia a supporto, offre un design più chiaro e accessibile, cosa che si traduce con il termine “efficiente”.

3 – Coerenza

E’ vero, vi sono tanti stili diversi per l’iconografia da tenere in considerazione, fattore che potrebbe dare un certo senso di frustrazione visto che potremmo non sapere quale di queste è più adatta o meno. Abbiamo quindi raccolto alcune cose da tenere a mente quando scegliamo l’iconografia per dar vita al nostro design e al nostro progetto. Dimensioni, stile e colore giusti è obbligatorio al fine di mantenere una coerenza e riflettere l’identità del nostro marchio.

Icona – Le dimensioni

La dimensione è uno dei fattori importanti quando si decide di implementare l’iconografia nei nostri progetti; qualunque sia il messaggio che vogliamo trasmettere con le icone dobbiamo considerare che è tanto importante quanto tutto il resto. Quindi, se così è, vogliamo che l’utente consideri allo stesso modo tutti i nostri messaggi, quindi le nostre icone dovrebbero riflettere il fatto che ogni elemento, in un progetto di digital design, dovrebbe essere razionalizzato insieme. Infine, cerchi della stessa dimensione, ci aiutano nella creazione di un aspetto uniforme attorno ad alcune icone dalla forma più strana (ne parleremo più avanti).

Icona – Lo stile

Considerando il fatto che ci sono diversi stili di icone tra cui scegliere, è importante mantenerle in uno stile unico per tutto il nostro design, a prescindere dalla scelta che effettueremo. Quindi ipotizzando un progetto iconografico nel voler comunicare un “prima e dopo” di un’ipotetico evento promozionale, se dovessimo usare un’icona colorata (tenendo sempre in conto il fatto di utilizzare due stesse infografiche per comunicare il nostro “prima e dopo”) nella prima infografica per comunicare il “prima”, mentre nella seconda, per comunicare il “dopo” usassimo un’icona a contorno nero (contro la precedente, in cui mostravamo il nostro ipotetico prodotto per mezzo della stessa icona però colorata), getteremmo lo spettatore in confusione e interromperemmo il design. E sarebbe un errore.

Icona – Colori giusti

Altro aspetto importantissimo per la coerenza delle nostre icone riguarda il colore; mentre in alcuni contesti – come il precedente – le icone devono mantenere una logica, a volte si può essere creativi: un modo per farlo sta nell’abbinare il colore dell’icona con il widget di dati in cui appare, o con lo schema di colori generale. Ipotizziamo una statistica e l’insieme di colori coordinati tra questa e l’icona corrispondente. Come l’esempio sotto.

4 – Aggiungiamo uno sfondo

Come abbiamo potuto notare negli esempi precedenti, un’icona venuta fuori come forma da una linea, spesso è abbastanza drastica come scelta. A volte però, dovremmo aggiungere uno sfondo dovuto alla scelta di aggiungere uno strato di contrasto extra al digital design al fine di far risaltare l’iconografia. A sostegno delle nostre icone, a parte le solite forme sferiche, abbiamo altre strade che rispondono al nome di trasparenza, posizionamento, dimensioni e forma.

Forme basiche per l’icon design

5 – Aggiunta di animazione

Qualora volessimo, possiamo prendere in considerazione l’aggiunta di animazione alle nostre icone; movimenti o rumori come spasmi o ticchettii portano un po’ di teatralità e comunicheranno il messaggio in modo più efficace. Adesso, torniamo alle immagini.

Massimizzare la nostra immagine

Siamo in possesso di una grafica fenomenale e non sappiamo come piazzarla sulla nostra pagina web? Oppure abbiamo bisogno di ispirazione? Le immagini la storia e l’essenza del nostro marchio – a livello visivo – catturano l’attenzione e arricchiscono l’esperienza del visitatore. Esse, in primo piano, sono così significative nel design che bisogna arricchirle, fino a rasentare la perfezione, per distinguersi e distaccarsi dai concorrenti. Ecco quindi alcune tecniche alternative per presentare al meglio le immagini nei nostri progetti.

1 – Ritaglia e crea

Un modo inusuale per incorporare immagini nei nostri progetti è quello di ritagliare forme astratte e creare motivi unici; potremmo iniziare con qualcosa di semplice, come un quadrato, un cerchio o qualcosa di asimmetrico e andare avanti con le dimensioni fino a trovare quella giusta. Se amiamo la geometria possiamo provare il tilling, con forme che proiettano l’immagine e altre che invece riempiremo con colori a blocchi complementari o contrastanti.

2 – Immagini come sfondo

digital design
Un esempio di home page con un’immagine per sfondo

Riempire uno sfondo per mezzo di un’immagine è un modo per creare atmosfera, accogliere il visitatore e stabilire una profonda connessione con il nostro marchio. Possiamo provare diverse tecniche, come usare un box trasparente per visualizzare il testo sopra l’immagine, ma non dimentichiamo di scegliere posizioni e colori contrastanti al fine di permettere una facile lettura.

3 – Ritagli

Quante volte è capitato di trovare l’immagine perfetta, quella che stavamo cercando da ore (a volte da molto più…), ma non essere affatto contenti dello sfondo? Non è un problema, tagliamo quello che non ci serve ottenendo il ritaglio dell’immagine che, invece, adoriamo. Si tratta di un’ottima tecnica, un modo per inserire quella particolare caratteristica che cercavamo da tempo, o di cui ci siamo infatuati, senza doversi preoccupare dei bordi quadrati o rettangolari dell’immagine. Sentiamo liberi anche qui di sfoderare tutte le nostre armi e, se vogliamo, potremmo anche piazzare un ritaglio su una parte del testo per dare più profondità al nostro design.

4 – Collage

Da oltre un secolo, la pratica del collage nel digital design si è evoluta parallelamente a movimenti culturali e artistici; fino ad arrivare ai giorni nostri, in cui possiamo giocare con il white space per realizzare progetti digitali dinamici, ricchi e affascinanti. Per presentare le immagini, possiamo utilizzare un sistema a griglia liscio come base. Oppure possiamo fare alla vecchia maniera, scansionare e strappare le foto prima di metterle insieme in un collage digitale. Assicuriamoci soltanto che il tutto sia lineare con l’identità del nostro marchio e la tavolozza dei colori.

5 – Aggiungiamo una semplice transizione

I siti statici possono risultare molto potenti ma anche inavvicinabili; una semplice transizione di movimento correrebbe in aiuto aumentando l’interattività tra il sito web e il visitatore offrendo a questi un’esperienza memorabile, mentre si va creando un’altra possibilità di esprimere l’identità individuale del nostro marchio.

Adesso siamo pronti

Immagini e icone possono rappresentare un po’ di pepe in più al nostro sito e al nostro design o, addirittura, avere un enorme impatto sulle nostre creature digitali, sulla nostra attività e di riflesso sulla nostra vita. Grazie anche a questi suggerimenti possiamo implementarli nei nostri lavori e passare al livello successivo. Se non siamo sicuri di quale icona o immagine è più adatta al nostro design o al nostro sito, ricordiamoci che uno dei massimi segreti del digital design è la sperimentazione continua: provare, provare e riprovare fin quando non abbiamo trovato l’allineamento perfetto. E, qualora volessimo ma non ci riuscissimo, possiamo sempre rimediare ingaggiando un professionista del design digitale.

Buona fortuna!

Informazioni Autore

Maniscalco Filippo

Blogger, copywriter, project manager. Propositivo e dedito al lavoro, gestisce ogni progetto con passione e dedizione. Appassionato di lettura, scrittura e musica. contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo