Share
Hai difficoltà a scegliere l'icona giusta per un problema specifico? Lavorare con il tuo sviluppatore per ottenere il miglior risultato possibile per il tuo cliente? Questo articolo ti darà un'idea dei principi, della risoluzione dei problemi e della collaborazione necessari per trovare qualcosa che si adatti!
Le icone sono tra gli aspetti visivi più importanti del web design. Il livello di dettaglio, stile e applicazione dipendono da un numero di cose diverse. Recentemente ho lavorato su numerosi siti Web che richiedono icone molto specifiche per comunicare metafore sottili.
Questo post seguirà un esempio recente, in cui mi è stato richiesto di creare un'icona di avviso per uno stato di errore del documento. Sarà una guida lineare del mio processo di pensiero e collaborazione con lo sviluppatore, ma toccherà anche le seguenti fasi guida: -
Questo post non dovrebbe essere esauriente, ma ti porterà beneficio attraverso un esempio del mondo reale.
A volte costruisci il tuo sito web da zero e devi generare una serie di icone per comunicare visivamente determinate cose. Spesso riceverai una richiesta da uno sviluppatore o da un cliente per un'icona unica. La richiesta in questo esempio proviene da uno sviluppatore. Aveva bisogno di un'icona di stato di errore per un documento. Inizialmente ha suggerito di utilizzare un'icona della pagina scura con una X dietro di essa nei casi in cui un tipo di documento non è supportato o un documento non viene caricato per qualche motivo. Aveva qualcosa di simile in mente:
Non male vero? L'ho spogliato un po 'e gliel'ho mandato ...
Ma, abbiamo convenuto che era necessario fare riferimento all'icona del documento in qualche modo poiché era specificamente per un errore di caricamento del documento.
Avevamo bisogno di considerare il set di icone nel suo insieme, quindi abbiamo dato qualche idea in giro.
"E l'icona 'avvisi'?"
abbiamo pensato. Ma era già in uso per gli allarmi clinici.
Quando si ha a che fare con un set di icone completo è importante avere una comprensione dell'insieme di icone. Altrimenti potresti riutilizzare per errore una metafora che è già stata utilizzata da qualche altra parte.
Quindi abbiamo considerato l'icona del documento con un triangolo intorno:
Questo era solo un suggerimento dello sviluppatore, ma l'esperienza mi ha detto che era troppo complesso. Ha fatto una metafora scomoda che non comunicava abbastanza direttamente.
Successivamente ho suggerito che dovremmo usare una grande "X" all'interno di un cerchio.
Anche questo non era ottimale, poiché il messaggio comunicato era uno di Pericolo! Probabilmente era troppo esagerato.
La lezione qui è di considerare il contesto della tua icona. Il colore e il peso visivo sono un modo importante per comunicare questo. Ad esempio, il rosso è usato tradizionalmente per avvisare le persone, mentre i colori più chiari come il grigio sono più neutrali e sub - comunicare che tutto è ok!
La sub-comunicazione è un linguaggio semiotico; qualcosa che è anche eminente nella tipografia.
Ad esempio, un carattere decorativo sub-comunica un carattere femminile, mentre un carattere disegnato a mano può sub-comunicare qualcosa di più giocoso e infantile.
Cosa stai cercando di comunicare con la tua icona?
Ad esempio, con l'icona di errore del documento ho tentato di richiamare i messaggi di errore che hanno comunicato in modo non creato troppo il panico.
Mi sono ricordato dei messaggi di errore che avrei ricevuto quando la mia connessione Internet si spegneva; erano perfetti Non troppo esagerato, ma lascia che l'utente sappia che qualcosa non va.
Sicuramente la giusta direzione.
Quest'ultimo esempio del browser Chrome è stato perfetto per ciò di cui avevo bisogno! Sottile, ma lasciando che l'utente sappia che qualcosa non va. Tutto, dalla dimensione dell'icona al colore grigio utilizzato, aiuta l'utente a comprendere la gravità del problema, ma non è così sopra le righe da causare il panico.
L'icona finale creata in questa istanza era semplice, ma comunicava anche il messaggio giusto.
L'arte di usare le icone è qualcosa che richiede un po 'di esperienza e un occhio per il design, ma può essere affrontata seguendo determinati principi come quelli di cui abbiamo discusso. Se la tua icona è troppo ambigua, ma la metafora si adatta allora considera l'uso di un'etichetta come spunto visivo per aiutare gli utenti a identificare le informazioni. Grazie per la lettura, sentiti libero di condividere le tue esperienze di design delle icone nei commenti!
Accentsconagua