Design di icone

Perché le raccolte di icone miste sembrano economiche

La maggior parte dei prodotti parte da una libreria di icone gratuita e poi incontra un concetto che non copre. Qualcuno trova l'icona mancante in un'altra raccolta, con uno spessore del tratto leggermente diverso, angoli più arrotondati o una prospettiva differente. Ripetuto una dozzina di volte, l'interfaccia sembra assemblata da pezzi, anche se nessuno sa dire esattamente perché.

Una raccolta personalizzata risolve il problema con delle regole. Ogni icona sta sulla stessa griglia, usa lo stesso spessore del tratto, lo stesso raggio degli angoli e lo stesso livello di dettaglio. Una volta stabilite queste regole, si possono aggiungere nuove icone anni dopo e saranno comunque coerenti.

Disegnate per 16 pixel, non per la presentazione

Le icone vengono spesso progettate in grande e ammirate in grande, poi pubblicate a 16 o 24 pixel, dove il dettaglio diventa sfocatura. Un delicato disegno a linee di un edificio diventa una macchia grigia in una barra di navigazione. Alcuni concept risultano anche ambigui quando vengono rimpiccioliti.

Verifichiamo ogni icona alla sua dimensione reale all'interno di screenshot della sua interfaccia. Dove un'icona viene usata a dimensioni molto diverse, il pacchetto più grande include versioni ottimizzate separatamente per l'uso piccolo e grande.

Gli sviluppatori ricevono SVG puliti e ottimizzati con nomi coerenti, più una libreria di componenti Figma per i designer. Così le icone restano coerenti tra i file di design e il prodotto live.

• Griglia, spessore del tratto e stile degli angoli condivisi
• Verificate a dimensione reale nella sua interfaccia
• SVG ottimizzati con nomi di file prevedibili
• Componenti Figma per il suo team di design