# Variações de logótipo: principal, empilhada, ícone e uma só cor

[Canonical HTML page](https://gradiently.design/pt-pt/guide/logo-variations)

Um só logótipo não cabe num banner largo, num círculo minúsculo e num carimbo de borracha. Uma pequena família de variações cabe. Este é o conjunto de que a maioria das marcas precisa e as regras que o mantêm com ar de um só logótipo.

## The short version

- As variações de logótipo são disposições e colorações diferentes do mesmo logótipo, feitas para ele caber em todos os espaços onde aparece.
- Um conjunto típico inclui um logótipo principal, uma versão horizontal, uma versão empilhada, um ícone ou submarca e versões a uma só cor, em preto e em branco.
- Cada variação deve partilhar as mesmas letras, símbolo e cores, para se lerem como um só logótipo e não como vários.
- O ícone ou submarca é a versão usada em fotografias de perfil, favicons e outros espaços quadrados pequenos.
- Escreve qual variação vai onde, para ninguém ter de adivinhar nem esticar o logótipo principal para caber.

As **variações de logótipo** são as diferentes versões de um só logótipo, dispostas e coloridas para servir espaços diferentes. A maioria das marcas precisa de cinco: um logótipo principal, uma composição horizontal para espaços largos, uma versão empilhada para espaços quadrados, um ícone ou submarca para espaços minúsculos e versões a uma só cor, em preto e em branco. Feitas das mesmas peças, deixam o logótipo ficar bem num banner, numa fotografia de perfil e num carimbo a uma só tinta, sem nunca ser esticado ou espremido.

## Porque um só logótipo não chega

Um logótipo desenhado para a tabuleta de uma loja costuma ser largo demais para uma fotografia de perfil e detalhado demais para um favicon. Quando há só um ficheiro, as pessoas improvisam: reduzem-no até ficar ilegível, espremem-no para caber ou põem-no sobre um fundo onde desaparece. As variações resolvem isto à partida. Decides uma vez como o logótipo se adapta, e todos seguem a mesma resposta.

## As cinco variações de logótipo de que a maioria das marcas precisa

| Variação | O que é | Para que serve |
| --- | --- | --- |
| Principal | O logótipo completo como foi desenhado, normalmente símbolo mais nome | Cabeçalho do site, sinalética, primeira página de documentos |
| Horizontal | Símbolo à esquerda do nome, numa só linha | Banners, cabeçalhos de email, barras de navegação estreitas |
| Empilhada | Símbolo por cima do nome, centrado | Publicações quadradas, rótulos de embalagens, merchandising |
| Ícone ou submarca | O símbolo ou as iniciais sozinhos | Fotografias de perfil, favicons, ícones de apps, marcas de água, autocolantes |
| Uma só cor | Qualquer uma das anteriores a preto sólido ou branco sólido | Impressão a uma tinta, fotografias, relevo seco, carimbos, fundos escuros ou confusos |

O teu logótipo principal pode já ser horizontal ou empilhado. Nesse caso precisas da outra disposição, mais o ícone e as versões a uma só cor.

Algumas marcas acrescentam uma versão **só com o nome**, o nome sem o símbolo, para sítios onde o símbolo seria pequeno demais para se ler. E uma versão de **distintivo** ou emblema pode ser útil para autocolantes e selos de embalagens. Nenhuma é essencial no primeiro dia.

## Ligar cada variação ao seu espaço

A forma do espaço decide a variação. Os espaços largos levam a composição horizontal, os quadrados levam a versão empilhada ou o ícone, e tudo o que for menor do que uma miniatura leva só o ícone.

- Cabeçalho de email 1200×600: horizontal: 1200 × 600
- Instagram quadrado 1080×1080: empilhada: 1080 × 1080
- Story 1080×1920: empilhada ou ícone: 1080 × 1920
- Banner LinkedIn 1584×396: horizontal: 1584 × 396

A forma da tela diz-te que versão escolher. Um logótipo empilhado num banner fino desperdiça a maior parte do espaço; um horizontal num quadrado fica minúsculo.

Um cabeçalho de email largo com o nome Fern Studio numa só linha e uma linha curta sobre novidades, sobre um gradiente verde

Num cabeçalho de email largo, o nome corre numa só linha e o espaço lê-se com naturalidade.

Uma publicação quadrada de Instagram com a palavra Studio por cima de um grande Fern, empilhado e centrado sobre o mesmo gradiente verde

Num quadrado, a disposição empilhada enche a moldura e continua grande o bastante para se ler.

## Variações de cor: a cores, invertida e a uma só cor

Cada disposição precisa também de versões de cor. Não precisas de todas as combinações, mas precisas destas quatro, para o logótipo ter resposta para fundos claros, fundos escuros e impressão a uma só tinta.

- A cores sobre claro: #14532d
- Invertida sobre escuro: #f7f3ea
- Preto de uma só cor: #111111
- Branco de uma só cor: #ffffff

Verde-feto para uso diário, uma versão em papel quente para fundos escuros e preto e branco puros para carimbos, fotografias e trabalhos a uma tinta.

Sobre gradientes e fotografias, a versão a uma só cor, branca ou preta, é muitas vezes a escolha certa, porque um logótipo a duas cores pode chocar com o que está por trás. [Logótipo sobre fundo de gradiente](https://gradiently.design/pt-pt/guide/logo-on-gradient-background) mostra como escolher entre elas, e [ideias de fundo para logótipo](https://gradiently.design/pt-pt/guide/logo-background-ideas) tem fundos que servem um logótipo simples.

## Como montar um conjunto de variações de logótipo

1. **Parte do logótipo principal em vetor** Cada variação é reorganizada a partir das mesmas peças mestras. Nunca redesenhes o símbolo nem recomponhas o nome com outro peso.
2. **Faz as composições horizontal e empilhada** Move o símbolo para o lado ou para cima do nome. Fixa o espaço entre eles como medida, por exemplo a altura das maiúsculas do nome.
3. **Simplifica o ícone** Pega só no símbolo ou nas iniciais, tira o pormenor fino e engrossa as linhas finas. Tem de se ler em tamanhos muito pequenos, por isso testa-o como [favicon](https://gradiently.design/pt-pt/guide/favicon-design).
4. **Cria as versões de cor** A cores, invertida, preto e branco para cada disposição. Verifica a versão invertida sobre a tua cor de marca mais escura.
5. **Define o espaço livre e os tamanhos mínimos** Define a margem vazia à volta de cada versão e o menor tamanho em que pode ser usada, em píxeis para ecrãs e milímetros para impressão.
6. **Exporta e nomeia bem os ficheiros** SVG, PDF e PNG transparente de cada uma, com nomes como `fern-stacked-reversed.svg` para as pessoas escolherem a certa sem a abrir.

## Regras que mantêm as variações com ar de um só logótipo

### Evita

- Esticar ou espremer uma versão para caber num espaço
- Redesenhar o ícone de forma diferente para cada plataforma
- Cores novas que aparecem só numa variação
- Juntar slogans a algumas versões e a outras não, ao acaso
- Usar o logótipo principal onde pertence o ícone

### Faz

- Escolhe a variação cuja forma condiz com o espaço
- Um ícone, usado onde quer que seja preciso um quadrado pequeno
- A mesma paleta em todo o conjunto
- Trata uma composição com slogan como variação própria e documentada
- Respeita o espaço livre e os tamanhos mínimos

Documenta o conjunto numa só página do teu [guia de estilo da marca](https://gradiently.design/pt-pt/guide/brand-style-guide): cada variação, as suas versões de cor, o espaço livre, o tamanho mínimo e onde é usada. Depois põe os ficheiros onde as pessoas realmente desenham. No Gradiently, o kit de marca guarda vários logótipos lado a lado, por isso a versão empilhada, o ícone e o ficheiro invertido estão a um clique no Studio, e o Designer pode aplicar o kit ao dispor um design. [Kit de marca](https://gradiently.design/pt-pt/guide/brand-kit) trata do resto do que pertence a seu lado.

## FAQ

### O que são variações de logótipo?

São versões alternativas de um só logótipo, como horizontal, empilhada, ícone e a uma só cor, feitas para o logótipo caber em todos os espaços sem ser deformado.

### De quantas variações de logótipo preciso?

A maioria das marcas precisa de cerca de cinco: principal, horizontal, empilhada, um ícone ou submarca e versões a preto e a branco. Acrescenta mais só quando um uso real o pedir.

### O que é um logótipo submarca?

Uma submarca é uma versão simplificada e geralmente compacta do logótipo, muitas vezes as iniciais ou só o símbolo, usada em espaços pequenos como fotografias de perfil, favicons e autocolantes.

### O que é um logótipo responsivo?

Um logótipo responsivo é um conjunto de variações que se simplificam à medida que o espaço diminui, da composição completa em ecrãs grandes até só o ícone nos tamanhos mais pequenos.

### Que variação de logótipo devo usar numa fotografia de perfil?

Usa o ícone ou submarca, ou a versão empilhada se for curta, sobre um fundo quadrado. Os logótipos horizontais largos ficam ilegíveis num círculo pequeno.