Come trovare icone gratuite e usarle da ♛ sul proprio sito


 

Ci sono icone per tutto e per tutti i gusti. Dall'antichità (ricordate gli ideogrammi?!) sono arrivate fino ad oggi. Dicono molto senza bisogno di parole, ecco perché hanno tanto successo, anche e soprattutto nel web!

Le icone danno un tocco di stile al design di un sito e raccontano visivamente i contenuti, permettendo ai visitatori di trovare a colpo d’occhio quello che cercano.
In breve, possono rendere il vostro sito ancora più cool!

In questo articolo vi mostrerò allora come trovare delle belle icone e come inserirle in modo facile sul vostro sito.

Perché le icone sono importanti per il design di un sito

In breve, hanno un forte potere comunicativo. Le icone infatti (dal greco eikṓn - eikónos: 'immagine') riescono a indicare un contenuto in modo semplice e visuale.
Sono come le segnaletiche del traffico, indicano dove andare e che percorso seguire.  


Una semplice icona comunica in modo più veloce e immediato quello che volete trasmettere, dal contatto telefonico al vostro e-shop, dall'offerta al calendario, etc.

Se usate in modo appropriato (ricordate che naturalmente non dovete associare un'icona ad ogni contenuto del sito!), le icone possono portare grandi benefici al vostro sito. Ecco perché:


  • sono espressive e semplici da riconoscere. Se un nuovo visitatore arriva sul vostro sito le icone permettono di scansionare e comprendere velocemente il contenuto.
  • sono belle! Hanno un grande appeal visivo, migliorano il design e rendono i contenuti più leggibili.
  • sono universali. Sono usate a livello globale da persone con culture, lingue e scritture diverse, il potenziale comunicativo è quindi enorme!

Ecco qui un esempio che mostra gli stessi contenuti, con e senza icone:

Contenuti con icone.
Con l'aggiunta delle icone il testo acquista senso anche senza leggerlo.
Contenuti senza icone.
Senza icone questi contenuti non si riconoscono a colpo d'occhio e appaiono più aridi.

Come scegliere le icone giuste  

Prima di tutto, non siate troppo creativi, scegliete le icone più note. Se ad esempio volete un'icona che rappresenti il concetto di "ricerca", affidatevi alla classica icona “lente di ingrandimento”. È nota, chiara e quindi evita fraintendimenti.

Naturalmente è possibile che per alcuni contenuti non sia facile trovare un’icona da abbinare. Scegliete allora l'immagine che più si avvicina al contenuto da rappresentare. Se questa risulta comunque un po' ambigua, associate all'icona un testo.


Tenete sempre a mente che le icone servono a completare il vostro contenuto, non a sostituirlo. Infine, scegliete icone attuali e pertinenti.  Ad esempio, evitate di inserire una macchina da scrivere o un mangiacassette, potrebbero essere rappresentazioni - ahimè - superate per i più giovani. In caso di dubbio fate un test e chiedete feedback.

Come usarle correttamente, senza distruggere il sito

Ci sono quattro importanti caratteristiche da tenere a mente quando usate le icone e che possono fare la differenza: dimensione, posizione, colore e coerenza.


Dimensione:
la grandezza delle icone è fondamentale, assicuratevi che non siano né troppo piccole (tanto da non vedersi bene), né troppo grandi (tanto da sovrapporsi al resto dei contenuti).


Posizione
: inserire le icone in colonne è perfetto per presentarle insieme ad un testo.
A seconda del vostro template potete inserirle a sinistra, a destra, sopra o sotto il testo. L’importante è che, scelto il metodo, lo seguiate coerentemente per ogni icona.

Icone posizionate in modo disordinato.
Icone posizionate in modo differente risultano disarmoniche e disordinate.

Colore: scegliete icone dello stesso colore e che si sposino bene con il colore del logo ed i colori del sito.


Coerenza: scegliete icone che abbiano lo stesso stile, lo stesso look and feel tra di loro e con il design del sito. Ecco altrimenti cosa succede:

Icone con stili differenti.
Icone con stili differenti risultano disarmoniche.

I migliori siti dove trovare icone gratuite

Sono tanti i siti dove è possibile trovare icone gratuite pronte all'uso. Ne abbiamo selezionati alcuni per voi e ve ne indico qui pro e contro.

Nota: molti di questi siti permettono di scaricare le immagini in diversi formati. Per ottenere il risultato migliore il consiglio è di scaricarle sempre in PNG.

Iconmonstr

Su Iconmonstr.com trovate circa 3000 icone da usare liberamente sul vostro sito.

Icone su Iconmonstr
Iconmonstr ha circa 3000 icone che potete usare sul vostro sito.

Cosa ci piace

  • È gratuito
  • Potete modificare grandezza e colore delle icone
  • Potete cercare le icone per categoria

Cosa non ci piace

  • Una volta personalizzati, non potete salvare dimensione e colore. Se create un'icona e personalizzate grandezza e colore, annotatevi la dimensione e il codice HTML del colore per poterlo applicare alle icone successive.

Flaticon.com

Flaticon.com  ha un enorme marketplace di icone gratuite per siti web.

Icone su Flaticon.com
Flaticon.com conta un gran numero di icone.

Cosa ci piace

  • Potete cercare le icone per categoria
  • Potete salvare le icone che vi piacciono in “My icons”, molto utile per la selezione!
  • Potete scaricare icone in diverse dimensioni

Cosa non ci piace

  • Le icone sono gratuite ma viene citato l'autore. In alternativa bisogna acquistare la versione a pagamento - il pacchetto è mensile
  • Tutte le icone sono nere, per modificare il colore dovete ricorrere a Photoshop o ad altri programmi di graphic design

Flaticons.net

Flaticons.net è un'altra ottima risorsa per trovare icone e personalizzarle. 

Icone gratis su Flaticons.net.
Flaticons.net permette di cercare le icone per categoria e di modificarle.

Cosa ci piace

  • È gratuito
  • Potete modificare grandezza e colore delle icone
  • Potete cercare le icone per categoria
  • Potete personalizzare lo sfondo e i colori

Cosa non ci piace

  • Come per Iconmonstr non è possibile salvare la grandezza ed il colore per le icone successive

Nota: Potete duplicare un colore trovando il suo “hex code” - è un valore numerico che identifica un colore e permette di ottenere una corrispondenza perfetta. Per trovare l'hex code si usa un plugin come ColorZilla o EyeDropper. Questi strumenti permettono di abbinare i colori su ogni sito.

Altre risorse

Cercate qualcosa di unico? Provate a cercare “free vector icons”, icone vettoriali gratuite, su siti come freepik.com o Behance, dove diversi artisti condividono icone gratuite. (Vettoriale è uno standard del webdesign e indica formati di alta qualità che possono essere ingranditi o rimpiccioliti).

Come inserire le icone sul vostro sito Jimdo

Potete inserire un'icona nello stesso modo in cui inserite un'immagine. Basta aggiungere l'elemento "Immagine" nel punto in cui volete mostrare l'icona e caricare poi il file .PNG dell'icona. Potete quindi ridimensionare l'icona e modificarne anche la posizione.

Se poi volete che l'icona linki ad un'altra pagina, interna o esterna al vostro sito, cliccate semplicemente l'icona “Link” (appunto :) e selezionate “Link interno o esterno”. Et voilà!

Inserire icone su sito Jimdo.
Potete inserire icone sul vostro sito Jimdo come elemento Immagine e collegarlo ad altre pagine e contenuti.

Conclusioni: usatele per migliorare l'esperienza di navigazione 

Le icone, se scelte e usate bene, possono migliorare il design e la leggibilità del vostro sito, migliorando quindi l'esperienza di navigazione che offrite ai visitatori e la conversione del sito. L'importante è usarle “in modo sensato”. Come si dice, meglio poche ma buone.

Scegliete icone davvero utili e chiare, usatele per completare i contenuti testuali e seguite sempre le quattro regole, dimensione, colore, posizione e coerenza.

Buon divertimento e fateci sapere cosa ne pensate e che risultati avete avuto!

Francesca Cazzaniga

Content writer & PR Jimdo Italia 

Ti è piaciuto l'articolo?

Condividilo!