# Varianti del logo: primaria, in colonna, icona e monocromatica [Canonical HTML page](https://gradiently.design/it/guide/logo-variations) Un solo logo non sta in un banner largo, in un minuscolo cerchio e in un timbro di gomma. Una piccola famiglia di varianti sì. Ecco il set di cui hanno bisogno quasi tutti i brand e le regole che lo fanno sembrare un solo logo. ## The short version - Le varianti del logo sono disposizioni e colorazioni diverse dello stesso logo, create perché si adatti a ogni spazio in cui appare. - Un set tipico comprende un logo primario, una versione orizzontale, una in colonna, un’icona o submark e versioni a colore singolo in nero e bianco. - Ogni variante dovrebbe condividere le stesse lettere, lo stesso simbolo e gli stessi colori, così si leggono come un solo logo e non come tanti. - L’icona o submark è la versione usata per foto profilo, favicon e altri piccoli spazi quadrati. - Scrivi quale variante va dove, così nessuno deve tirare a indovinare o stirare il logo primario per farlo stare. Le **varianti del logo** sono le diverse versioni di un unico logo, disposte e colorate per adattarsi a spazi diversi. La maggior parte dei brand ne ha bisogno di cinque: un logo primario, una composizione orizzontale per gli spazi larghi, una versione in colonna per quelli quadrati, un’icona o submark per gli spazi minuscoli e versioni a colore singolo in nero e bianco. Costruite con le stesse parti, permettono al logo di stare bene in un banner, in una foto profilo e in un timbro a un solo inchiostro senza mai essere stirato o schiacciato. ## Perché un solo logo non basta Un logo disegnato per l’insegna di un negozio di solito è troppo largo per una foto profilo e troppo dettagliato per una favicon. Quando c’è un solo file, le persone improvvisano: lo rimpiccioliscono fino a renderlo illeggibile, lo schiacciano per farlo stare o lo mettono su uno sfondo dove scompare. Le varianti risolvono tutto questo in anticipo. Decidi una volta come si adatta il logo e tutti seguono la stessa risposta. ## Le cinque varianti del logo di cui hanno bisogno quasi tutti i brand | Variante | Cos’è | Usala per | | --- | --- | --- | | Primaria | Il logo completo come è stato disegnato, di solito simbolo più nome | Intestazione del sito, insegne, prima pagina dei documenti | | Orizzontale | Simbolo a sinistra del nome, su una riga | Banner, intestazioni email, barre di navigazione strette | | In colonna | Simbolo sopra il nome, centrato | Post quadrati, etichette di packaging, merchandising | | Icona o submark | Il solo simbolo o le sole iniziali | Foto profilo, favicon, icone di app, filigrane, adesivi | | Colore singolo | Una qualsiasi delle precedenti in nero pieno o bianco pieno | Stampa a un solo inchiostro, foto, rilievi, timbri, sfondi scuri o movimentati | Il tuo logo primario potrebbe già essere orizzontale o in colonna. In quel caso ti serve l’altra disposizione, più l’icona e le versioni a colore singolo. Alcuni brand aggiungono una versione **solo wordmark**, il nome senza il simbolo, per i posti in cui il simbolo sarebbe troppo piccolo per leggersi. E una versione **distintivo** o emblema può servire per adesivi e sigilli sul packaging. Nessuna delle due è essenziale il primo giorno. ## Abbinare ogni variante al suo spazio È la forma dello spazio a decidere la variante. Gli spazi larghi prendono la composizione orizzontale, quelli quadrati la versione in colonna o l’icona, e tutto ciò che è più piccolo di una miniatura riceve la sola icona. - Intestazione email 1200×600: orizzontale: 1200 × 600 - Quadrato Instagram 1080×1080: in colonna: 1080 × 1080 - Storia 1080×1920: in colonna o icona: 1080 × 1920 - Banner LinkedIn 1584×396: orizzontale: 1584 × 396 La forma della tela ti dice quale versione scegliere. Un logo in colonna in un banner sottile spreca quasi tutto lo spazio; uno orizzontale in un quadrato resta minuscolo. Un’ampia intestazione email con il nome Fern Studio su una riga e una breve riga sulle novità, su una sfumatura verde In un’ampia intestazione email il nome corre su una riga e lo spazio si legge in modo naturale. Un post Instagram quadrato con la parola Studio sopra un grande Fern, in colonna e centrato sulla stessa sfumatura verde In un quadrato la disposizione in colonna riempie il riquadro e resta abbastanza grande da leggersi. ## Varianti di colore: a colori, in negativo e mono Anche ogni disposizione ha bisogno delle versioni di colore. Non servono tutte le combinazioni, ma servono queste quattro, così il logo ha una risposta per gli sfondi chiari, per quelli scuri e per la stampa a un solo inchiostro. - A colori su chiaro: #14532d - In negativo su scuro: #f7f3ea - Mono nero: #111111 - Mono bianco: #ffffff Verde felce per l’uso quotidiano, una versione color carta calda per i fondi scuri, e nero e bianco puri per timbri, foto e lavori a un solo inchiostro. Su sfumature e foto, la versione a colore singolo bianca o nera è spesso la scelta giusta, perché un logo a due colori può stonare con ciò che c’è dietro. [Il logo su uno sfondo sfumato](https://gradiently.design/it/guide/logo-on-gradient-background) mostra come scegliere tra le due e [le idee per sfondi del logo](https://gradiently.design/it/guide/logo-background-ideas) ha sfondi adatti a un logo semplice. ## Come costruire un set di varianti del logo 1. **Parti dal logo primario in vettoriale** Ogni variante è riorganizzata dalle stesse parti master. Non ridisegnare mai il simbolo né reimpostare il nome con un peso diverso. 2. **Crea le composizioni orizzontale e in colonna** Sposta il simbolo accanto o sopra il nome. Fissa la distanza tra i due come una misura, per esempio l’altezza delle maiuscole del nome. 3. **Semplifica l’icona** Prendi il solo simbolo o le sole iniziali, togli i dettagli fini e ispessisci le linee sottili. Deve leggersi a dimensioni molto piccole, quindi provala come [favicon](https://gradiently.design/it/guide/favicon-design). 4. **Crea le versioni di colore** A colori, in negativo, nero e bianco per ogni disposizione. Controlla la versione in negativo sul più scuro dei colori del brand. 5. **Imposta spazio libero e dimensioni minime** Definisci il margine vuoto attorno a ogni versione e la dimensione minima a cui può essere usata, in pixel per gli schermi e in millimetri per la stampa. 6. **Esporta e dai nomi chiari ai file** SVG, PDF e PNG trasparente per ciascuna, con nomi come `fern-stacked-reversed.svg` così le persone scelgono quella giusta senza aprirla. ## Regole che fanno sembrare le varianti un solo logo ### Da evitare - Stirare o schiacciare una versione per farla stare in uno spazio - Ridisegnare l’icona in modo diverso per ogni piattaforma - Nuovi colori che compaiono solo in una variante - Aggiungere slogan ad alcune versioni e non ad altre, a caso - Usare il logo primario dove va l’icona ### Da fare - Scegliere la variante la cui forma corrisponde allo spazio - Un’icona, usata ovunque serva un piccolo quadrato - La stessa palette in tutto il set - Trattare una composizione con slogan come variante a sé, documentata - Rispettare spazio libero e dimensioni minime Documenta il set in una sola pagina della tua [guida di stile del brand](https://gradiently.design/it/guide/brand-style-guide): ogni variante, le sue versioni di colore, lo spazio libero, la dimensione minima e dove viene usata. Poi metti i file dove le persone progettano davvero. In Gradiently il kit del brand tiene più loghi affiancati, così la versione in colonna, l’icona e il file in negativo sono tutti a un clic nello Studio e il Designer può applicare il kit quando imposta un design. [Il kit del brand](https://gradiently.design/it/guide/brand-kit) copre il resto di ciò che va insieme a loro. ## FAQ ### Cosa sono le varianti del logo? Sono versioni alternative di un unico logo, come orizzontale, in colonna, icona e a colore singolo, create perché il logo si adatti a ogni spazio senza essere deformato. ### Di quante varianti del logo ho bisogno? La maggior parte dei brand ne ha bisogno di circa cinque: primaria, orizzontale, in colonna, un’icona o submark e le versioni in bianco e nero. Aggiungine altre solo quando un uso reale lo richiede. ### Cos’è un submark? Un submark è una versione semplificata e di solito compatta del logo, spesso le iniziali o il solo simbolo, usata in spazi piccoli come foto profilo, favicon e adesivi. ### Cos’è un logo responsive? Un logo responsive è un set di varianti che si semplificano man mano che lo spazio si riduce, dalla composizione completa sugli schermi grandi alla sola icona alle dimensioni più piccole. ### Quale variante del logo devo usare per una foto profilo? Usa l’icona o submark, oppure la versione in colonna se è corta, su uno sfondo quadrato. I loghi orizzontali larghi diventano illeggibili in un piccolo cerchio.