lun

28

set

2015

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!


Scrivi commento

Commenti: 11
  • #1

    Paolo Banci (lunedì, 28 settembre 2015 20:18)

    Vorrei mettere delle Icone sul sito magari sotto le voci dei menù ma non riesco... non so se si possa farlo.

  • #2

    Francesca - Jimdo team (martedì, 29 settembre 2015 14:22)

    @Paolo Banci: Ciao Paolo, mi fa piacere che ti sia già messo all'opera :)
    Le icone puoi inserire nel corpo contenuti, nella sidebar oppure nel footer, ma non è possibile inserirle sotto il menu di navigazione. In quella posizione poi potrebbero distrarre l'attenzione dei visitatori dalle voci di navigazione. Se ci spieghi meglio quali icone vorresti inserire ed il tuo piano ti diamo volentieri una mano! È perfetto se ci contatti via supporto: http://aiuto.jimdo.com/contatti/
    Buona giornata e a presto

  • #3

    darkhood (mercoledì, 30 settembre 2015 11:51)

    grazie Francesca , complimenti per l esposizione e i suggerimenti
    ne farò tesoro..
    Buona Giornata e Buon Lavoro

  • #4

    Francesca - Jimdo team (mercoledì, 30 settembre 2015 12:35)

    @darkhood: Ciao, grazie mille per il tuo feedback! Sono davvero felice che le nostre dritte possano esservi utili e aiutarvi ad avere ancora più successo con i vostri progetti e attività! A presto e per qualsiasi dubbio... siamo qui :) Buona giornata a te e tanti saluti da Amburgo

  • #5

    sitovacanze (giovedì, 01 ottobre 2015 11:04)

    utilissimo,le icone le utilizzerò durante la costruzione del mio sito

  • #6

    Francesca - Jimdo team (giovedì, 01 ottobre 2015 14:05)

    @sitovacanze: Grazie del vostro commento, fa davvero piacere sapere che un tema o un articolo vi sono utili e ci aiuta a pensare ai prossimi articoli :)
    Buon lavoro con la ricerca delle icone giuste per la vostra attività e a presto!

  • #7

    Lorena (martedì, 13 ottobre 2015 18:53)

    Buonasera.
    Ho creato il sito perchè faccio piano bar. Sarebbe possibile, oltre all'icona music, aggiungere una playlist sul sito dove poter mettere le mie canzoni? Tipo come my space...sarebbe grandioso. Grazie.

  • #8

    Francesca - Jimdo Team (mercoledì, 14 ottobre 2015 14:44)

    @Lorena: Ciao Lorena!
    Per inserire la tua playlist potresti inserire sul tuo sito un lettore musicale, scegliendo tra i tanti servizi disponibili in rete. Dopo esserti registrata ti verrà fornito un codice embed/html da inserire sul sito come contenuto Widget/HTML.
    Nel nostro Support Center trovi maggiori informazioni e una liste di servizi consigliati:
    http://aiuto.jimdo.com/social-utilit%C3%A0/dritte/
    Buon lavoro e buon divertimento con il tuo sito!

  • #9

    Mirko (domenica, 29 maggio 2016 17:39)

    Vi ringrazio per aver reso molto intuitivo un argomento per me agnostico, cioè la creazione di un sito. Ho iniziato a valutarne le potenzialità per sapere cosa chiedere al realizzatore e poi mi sono incuriosito al punto che mi sono creato il sito da solo... Grazie mille

  • #10

    Monica - Jimdo Team (lunedì, 30 maggio 2016 10:36)

    Grazie Mirko, continua così!

  • #11

    Pietro (giovedì, 04 agosto 2016 21:02)

    salve, ho messo l'icona Facebook sul footer così come hai spiegato tu e aggiungendo il link. funziona tutto. ma se voglio aggiungerne altre per altri link uno a fianco all'altro non me lo fa fare...li mette uno sotto l'altro perché la finestra che gestisce l'inserimento dell'immagine mi prende tutta la larghezza del sito anche se poi l'icona è messa in piccolo in un angolo.... potresti aiutarmi per favore...?