Accedi / Registrati Account
Jump to section

Le icone simboleggiano concetti astratti e letterali, che ci aiutano a rappresentare diverse idee e tecnologie. Ciascuna icona della nostra serie di icone ha un significato specifico e un design coerente che ci consente di trasmettere comunicazioni efficaci e lineari in tutto i nostri ambiti aziendali.

A seconda delle dimensioni, potresti aver bisogno di un tipo diverso di icona o di un'illustrazione.

Icone per interfaccia utente

Le icone per interfaccia utente (UI) sono molto piccole e vengono utilizzate nelle interfacce di siti web o prodotti.

Icone standard

Le icone rappresentano un singolo concetto o una relazione tra 2 elementi.

Minispot

I minispot sono piccole illustrazioni che rappresentano un concetto semplice.

Illustrazioni

Le illustrazioni hanno una struttura narrativa o dimostrano un concetto complesso.

Disponiamo di 2 tipi di icone: standard e esperienza utente (UX). Le icone standard vengono utilizzate in materiali di marketing, diapositive, infografiche e diagrammi, mentre le icone UX vengono utilizzate nelle interfacce.

Icone standard

Il nostro sistema di icone è semplice, chiaro e open source. Tutte le icone usano gli stessi spessori di tratto e raggi d'angolo, mostrano gli oggetti dalla parte anteriore, usano la prospettiva appiattita e sono costituite esclusivamente da forme geometriche. Per impostazione predefinita, le nostre icone standard sono disponibili in 2 versioni: riempite e non riempite. Inoltre, sono disponibili in 3 colori (rosso, nero e bianco), ma possono essere modificate in qualsiasi colore della palette del nostro marchio.

Utilizza le icone standard in materiali di marketing, presentazioni, contenuti web, infografiche e diagrammi. Sono più adatte a dimensioni tra 32 e 100 pixel.

Come creare icone standard

La nostra libreria di icone è frutto di una collaborazione costruita nel tempo. Se vuoi dare il tuo contributo alla nostra libreria, condividi con noi le icone che hai creato. Per assicurarti che le icone funzionino con la serie esistente, usa il modello a disposizione e segui le linee guida riportate di seguito.

1. Disegna le icone su una tavola da disegno da 36 pixel. Estendi il disegno nel margine interno in base alle esigenze per mantenere ciascuna icona con proporzioni e dimensioni simili, ma tieni libero il margine esterno.

2. Tutti gli angoli devono essere di 0°, 45°, 90° oppure 1 di questi angoli deve essere più o meno di 12°. Utilizziamo angoli di 12° perché corrispondono all'angolo degli ascendenti e dei discendenti del nostro font.

3. Crea prima icone non riempite. Usa uno spessore del tratto da 1,5 e assicurati che i terminali e gli angoli siano arrotondati.

4. Usa solo forme geometriche per determinare la forma di base dell'icona.

5. Usa punti e linee rette per aggiungere dettagli. Usa uno spazio di 1,5 punti nel tratto per creare apertura o mostrare profondità. Per le linee tratteggiate, usa un trattino di 0 punti e uno spazio di 2,5 punti.

6. Le frecce piccole devono essere di 90° e lunghe 2 pixel alle due estremità. Le frecce più grandi devono utilizzare le stesse proporzioni di quelle piccole.

Come creare icone riempite

1. Per creare un'icona riempita, inizia con la versione delineata ed esegui il riempimento con lo stesso colore e la stessa dimensione del tratto.

2. Modifica tutti i dettagli in bianco.

3. Modifica la dimensione dei dettagli per mantenere uno spazio di 1,5 o 0,5 punti tra gli elementi. A seconda dell'icona, puoi estendere la linea.

Icone per  interfaccia utente

Le interfacce basate su schermo presentano problematiche specifiche per il design delle icone, in particolare per dimensione e scala. Le interfacce richiedono icone immediatamente comprensibili e che rimangano chiare in dimensioni molto piccole. In queste dimensioni più piccole delle icone di interfaccia utente, usa gli stessi principi delle icone standard: 12° e angoli retti, angoli e terminali arrotondati e forme geometriche. 

Le nostre icone per interfaccia utente sono piatte, semplici e leggibili a 16 pixel. In genere, vengono utilizzate in grigio o bianco.

1. Inizia con una tavola da disegno da 16 pixel e un tratto di 1 punto. Imposta un margine di 1 pixel attorno al tuo modello.

2. Assicurati che l'icona rientri in una griglia di 14 pixel.

3. Fai riferimento alle icone standard e ispirati a quelle esistenti. Usa solo gli elementi necessari per identificare l'icona.

Icone come modelli

I modelli offrono uno strumento per utilizzare le nostre icone creando rapidamente una grafica che richiami l'attenzione. Usa i modelli per gli sfondi o per riempire spazi.

Approcci ai modelli

Durante la creazione di un modello, prova a modificare 1 o 2 elementi al suo interno per renderlo più dinamico. Un modello deve essere dinamico e interessante, non noioso o monotono. 

Usa 1 icona e modifica la dimensione, il colore o il riempimento. 

Usa una serie di icone correlate della stessa dimensione.

Aggiungi linee di collegamento alle icone di una serie.

Sperimenta con il colore e le dimensioni.

Icone in uso

Rendi le icone bidimensionali con elementi di design minimi.

Non creare un'icona complicata o tridimensionale.

Usa un unico spessore di linea in ogni icona per tutte le icone.

Non usare diversi spessori di linea.

Trova un'immagine concreta che possa rappresentare l'idea astratta.

Non creare un'icona così astratta da non riuscire a comprenderne il significato.

Usa un'icona per rappresentare solo 1 concetto alla volta.

Non combinare 2 concetti per illustrare un concetto più complesso.

Varia 1 o 2 elementi in un modello per creare ritmo e interesse.

Non utilizzare lo stesso modello senza alcuna variazione. È noioso e ripetitivo.

Usa un modello che non sia troppo complesso e che non interferisca con il testo.

Non usare un modello che intralci il messaggio.

Le icone standard sono un modo rapido per aggiungere interesse visivo e rafforzare i punti principali nelle presentazioni.

Le icone dell'interfaccia di redhat.com consentono agli utenti di navigare nel nostro sito in modo più rapido e intuitivo.