Le icone possono essere considerate una delle universalità del web design; quasi tutti i siti Web beneficiano dell'aggiunta di almeno alcuni di essi. Quindi è allettante supporre che se si spruzza in una manciata di queste piccole immagini, il lavoro è finito. Ma c'è molto di più in questo: le buone icone dovrebbero essere visivamente integrate nel gruppo di immagini in cui sono inserite, così come nel design del sito nel suo complesso. Hanno bisogno di avere una chiarezza concettuale e uno scopo che vada al di là del semplice piacere per gli occhi. Qualsiasi icona che non ha uno scopo dichiarato o che non trasmette il concetto giusto nelle sue immagini, deve essere riconsiderata.
Naturalmente, c'è spazio per l'interpretazione e la generalizzazione con qualsiasi tipo di immagine, ma le icone non sono mere illustrazioni che sono usate puramente per rompere lo spazio e aggiungere interesse: sono metafore visive che possono investire un significato in un soggetto a un solo sguardo; e in quanto tali, sono un potente strumento per migliorare le esperienze degli utenti.
Come dovresti usare le icone?
L'iconografia può essere un argomento sfuggente, perché comprende tanti tipi di immagini e può assolvere a tanti ruoli. Le icone possono essere utilizzate per molti scopi, ma i due più comuni e importanti tendono ad essere:
- Interruzioni visive nei contenuti: renderlo più accattivante e leggibile. Questa applicazione è spesso utilizzata nel corpo del sito Web, in elenchi (come visto sopra) o altri elementi di testo pesante.
- Riferimento visivo rapido per un concetto: Questo utilizzo si presenta molto spesso negli elementi di navigazione (come visto sopra) e alcuni, come l'icona della lente di ingrandimento che indica una ricerca, sono così comuni che non è nemmeno necessario un identificatore di testo.
È ovvio che anche queste due categorie rappresentano una miriade di modi e motivi per utilizzare le icone, quindi è probabile che le vedrai in quasi ogni elemento del web design: intestazioni, piè di pagina, barre di navigazione, elenchi; praticamente ogni parte di un disegno può essere migliorata aggiungendo icone ben scelte.
Che cosa rende una buona icona?
Anche se non è difficile vedere come le icone siano una componente essenziale per quasi tutti i design di siti Web, a volte può essere difficile riconoscere quando non si comportano come potrebbero. Anche un set di icone mal progettato di solito è preferibile a un muro di testo, ma una bella serie di icone significative, come quelle sopra, può fare molto di più.
Anche se il design dell'icona è un argomento complicato che cambia in ogni nuova situazione, ci sono ancora alcune regole essenziali che si applicano all'efficace design delle icone in tutte le applicazioni: le due cose fondamentali da considerare in qualsiasi sistema di icone sono come creare icone sia visivamente e concettualmente efficace.
Come si rendono le icone visivamente efficaci?
Le icone migliorano il lavoro di raggruppamento dei contenuti correlati e guidano l'attenzione verso informazioni importanti se hanno relazioni coerenti e considerate con le altre icone dell'insieme e con la progettazione del sito che le circonda.
I set di icone dovrebbero avere unificazione visiva
Un gruppo di icone che non ha abbastanza coesione sembra sbagliato, non importa quanto grandi possano essere considerate singolarmente. Ci sono molti trucchi che possono creare un senso di unità, tra cui:
- Usando lo stesso colore o combinazione di colori, come visto sopra.
- Adatta tutte le tue icone nella stessa forma, come visto sopra.
- Disegnare le icone con o senza linee o altri attributi del bordo, come visto sopra.
- Aggiunta di effetti, come sfumature, trasparenze o ombre, come visto sopra.
A tal fine, è importante considerare come adatterai lo stile delle tue illustrazioni per adattarle ai soggetti. Ad esempio, potresti voler rappresentare le tue icone con un effetto 3D, su un angolo. Ma cosa succede se una delle icone nell'esempio sopra doveva rappresentare una carta regalo? Un'icona che rappresenta una carta dovrebbe quasi certamente essere bidimensionale e quindi rovinerebbe l'effetto che stai cercando.
Più grande è il Set and Scope of Icons, più diversità dovrebbero avere
Anche se le icone all'interno di un set dovrebbero avere una stretta conformità, puoi piegare e persino infrangere le regole quando si tratta di grandi serie di immagini. Questo sito web, visto sopra, è un esempio eccellente che affronta il problema della stessa dimensione, poiché hanno deciso di abbracciare le diverse dimensioni delle sue icone. Le differenze non sono stridenti perché i due tipi sono separati, rendendoli in sistemi di icone correlati che funzionano bene insieme senza apparire esattamente uguali.
Oltre a questi piccoli cambiamenti, il sito si diverge ancora di più nelle altre icone che incontri, alcune con forme più grandi e più complesse e altre che replicano l'effetto 3D, ma in uno stile completamente diverso. Tuttavia, questi funzionano ancora bene insieme perché conservano alcuni elementi comuni e vengono presentati in istanze che sono abbastanza separate da non sovraccaricare il visualizzatore.
Le icone dovrebbero armonizzare con il resto del design del tuo sito
Naturalmente, esiste un numero infinito di metodi che è possibile utilizzare per far funzionare le icone con gli altri elementi di progettazione. Ma a un livello base, i due modi più efficaci per farlo sono:
- Icone come punto di contrasto rispetto al resto del sito: Questo approccio è particolarmente efficace se le icone sono di navigazione, come questi collegamenti di social media (vedi sopra), perché il contrasto richiama molta attenzione su di loro.
- Icone di stile in modo che siano integrate e simili ad altri elementi di design: Questa è una buona opzione per le immagini che forniscono più respiro visivo e chiarezza e non richiedono l'enfasi aggiuntiva che gli elementi di navigazione potrebbero avere, come visto sopra.
Come si rendono le icone concettualmente efficaci?
È importante che le icone giochino il ruolo giusto nel dirigere l'attenzione e aggiungere all'estetica di un design, ma è ugualmente importante che siano anche logiche e coerenti in termini di concetti che comunicano.
Le icone devono essere facilmente comprese
Da un lato, le immagini possono essere difficili perché le interpretazioni non sono mai assolute. Dall'altro, sono molto più gestibili delle parole, perché se sono abbastanza chiare possono trascendere il linguaggio. Le semplici direttive in cui il web design abbonda sono il veicolo perfetto per la comunicazione universale, come visto sopra.
Ma a volte i designer cercano di mettere concetti più complicati in iconografia, e l'effetto è confuso piuttosto che chiarificatore, come visto sopra. In queste circostanze, è bene fare un passo indietro e cercare davvero di distillare il contenuto fino alla sua essenza di base. Se non puoi, significa che un'icona non è la soluzione giusta per quel contenuto. Una delle migliori risorse per trovare un'iconografia intelligente che spinga i confini della comunicazione pittorica è la progettazione infografica, in cui l'obiettivo è spesso quello di creare un'icona da ogni informazione possibile.
Mentre il web design cresce e matura in modo esponenziale, così come il design delle icone. Concetti che una volta erano impossibili da rappresentare attraverso l'iconografia stanno rapidamente diventando standardizzati e vengono aggiunti agli strumenti di comunicazione del web designer. Con questa spinta verso l'universalità, è una previsione sicura che le icone diventeranno una parte ancora più importante del design di quanto non lo siano già. E tenendo a mente questi metodi di utilizzo essenziali, sarete in grado di portarli avanti con tutta l'arte e la chiarezza necessarie per creare progetti belli, funzionali ed efficaci per qualsiasi progetto.