# Voz e visuais da marca: faz o teu visual soar a ti

[Canonical HTML page](https://gradiently.design/pt-pt/guide/brand-voice-and-visuals)

Uma mensagem calma num visual ruidoso parece pouco sincera, e as pessoas notam-no antes de saberem dizer porquê. Eis um mapa prático de como soas para como pareces.

## The short version

- A voz da marca é como uma marca soa em palavras; os seus visuais devem exprimir o mesmo carácter em cor, tipografia, textura, movimento e composição.
- Quando a voz e os visuais discordam, como uma mensagem suave num visual néon ruidoso, as pessoas sentem a discrepância mesmo sem a saberem nomear.
- Cada traço da voz corresponde a escolhas visuais concretas: calma sugere contraste suave e movimento lento, ousada sugere contraste alto e tipografia pesada.
- Escreve cada traço da voz como “isto, não aquilo” para que as escolhas visuais tenham um limite e não só uma direção.
- O movimento também tem voz: a velocidade e a suavização de uma animação podem soar calmas, ousadas, brincalhonas ou precisas.

A tua **voz da marca** é como a tua marca soa em palavras: calma ou ousada, brincalhona ou precisa, acolhedora ou fria. Os teus visuais devem dizer exatamente o mesmo em cor, tipografia, textura, movimento e composição. A forma prática de lá chegar é pegar em cada traço da voz e ligá-lo a escolhas visuais específicas, e depois verificar cada design contra esse mapa. Quando os dois concordam, uma publicação parece sincera antes de alguém a ler.

A maioria das marcas define a voz para os redatores e o visual para os designers, em separado. É assim que se acaba com uma legenda suave e tranquilizadora sobre um fundo néon aos gritos. Este guia junta os dois. Se ainda não definiste o teu carácter, começa pela [personalidade da marca](https://gradiently.design/pt-pt/guide/brand-personality).

## Porque a voz e os visuais da marca têm de concordar

As pessoas absorvem o aspeto de uma publicação antes das palavras. O aspeto cria uma expectativa, e as palavras confirmam-na ou contradizem-na. Uma contradição nem sempre é registada de forma consciente; limita-se a fazer a marca parecer ligeiramente desafinada, como um amigo cujo tom não condiz com o que está a dizer.

### Voz e visual discordam

- Uma marca discreta e ponderada em néon saturado com animação saltitante
- Uma marca brincalhona em cinzento, tipografia fina e grelhas rígidas
- Uma marca precisa e técnica em tipos de letra manuscritos e desfocados suaves
- Uma marca acolhedora e local em azul frio e fotografias corporativas de banco de imagens

### Voz e visual concordam

- A mesma marca discreta em neutros profundos, uma serifa fina e deriva lenta
- A marca brincalhona em combinações vivas e inesperadas e tipografia arredondada
- A marca técnica numa sem serifa limpa, contraste nítido e espaçamento exato
- A marca acolhedora em tons terrosos, textura de papel e rostos reais

## Um mapa dos traços da voz para as escolhas visuais

Usa esta tabela como ponto de partida, não como lei. A maioria das marcas é uma mistura de dois ou três traços; escolhe o dominante para a cor e deixa os outros moldar a tipografia e o movimento.

| Traço da voz | Cor | Tipografia | Textura e movimento | Composição |
| --- | --- | --- | --- | --- |
| Calma | Contraste suave, tons próximos, apagados | Pesos leves ou normais, espaçamento aberto | Grão fino, deriva lenta | Muito espaço, poucos elementos |
| Ousada | Contraste alto, saturada, poucas cores | Pesos fortes, tamanhos grandes, espaçamento justo | Superfícies nítidas, cortes rápidos | Tipografia grande, de ponta a ponta |
| Brincalhona | Combinações inesperadas, pastéis vivos | Formas arredondadas, tamanhos variados | Materiais suaves, suavização saltitante | Solta, ligeiramente fora da grelha |
| Precisa | Contida, um destaque claro | Sem serifa limpa, ritmo uniforme | Suave, textura mínima, tempo exato | Grelha rigorosa, margens alinhadas |
| Acolhedora | Tons terrosos e solares | Serifa simpática ou sem serifa humanista | Papel, grão, luz natural | Margens generosas, fotografias de pessoas |

Normalmente um traço lidera. Os outros ajustam os detalhes.

## Quatro vozes, quatro visuais

Eis o mesmo tipo de escolhas feitas para quatro vozes diferentes. Repara em quanto só a cor já te diz, antes de se acrescentarem palavras.

- Calma: névoa a azul suave: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)`
- Ousada: laranja-vermelho a amarelo: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)`
- Brincalhona: rosa, manteiga, menta: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)`
- Precisa: tinta a azul-marinho: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)`

A cor define primeiro a voz. Para mais contexto sobre o que as cores sugerem, vê a [psicologia das cores](https://gradiently.design/pt-pt/guide/color-psychology).

Uma publicação vertical com as palavras Leva o teu tempo pequenas e leves sobre um fundo tranquilo com muito espaço

Calma: uma linha curta, um peso leve, a maior parte do quadro vazia.

Uma publicação vertical com a palavra Agora em tamanho muito grande sobre um fundo vivo

Ousada: uma palavra enorme, sem mais nada a competir com ela.

Uma publicação quadrada a perguntar O que farias? numa composição simpática sobre um fundo vivo

Brincalhona: uma pergunta, um convite, um toque mais leve.

Uma publicação quadrada intitulada Três mudanças esta semana, com uma lista alinhada sobre um fundo contido

Precisa: uma lista, margens alinhadas, nenhuma decoração que não seja informação.

## Como encontrar a tua voz visual

1. **Escreve os teus traços como “isto, não aquilo”** “Confiante, não arrogante.” “Acolhedora, não açucarada.” A segunda metade dá aos visuais um limite e não só uma direção.
2. **Escolhe o traço principal** Decide que traço conduz a cor. Dois traços principais a puxar em sentidos opostos, como calma e ousada, produzem um visual confuso.
3. **Liga cada traço a escolhas** Usa a tabela acima para escolher cor, tipografia, textura, movimento e composição. Escreve as escolhas ao lado de cada traço.
4. **Passa a mesma frase por dois visuais** Compõe uma linha real do teu texto no visual que escolheste e no seu oposto. Se o oposto parecer mais verdadeiro, revê os traços.
5. **Escrevam juntos** Põe as regras de voz e de visual na mesma página do teu [guia de estilo da marca](https://gradiently.design/pt-pt/guide/brand-style-guide), para que redatores e designers trabalhem a partir de uma só fonte.

## O movimento também tem voz

A velocidade e a suavização de uma animação soam a alguma coisa. Uma suavização de saída longa e delicada parece calma. Um movimento curto e seco parece decidido. Uma pequena ultrapassagem parece brincalhona. Se a tua marca aparece em vídeo ou num site, dá ao movimento a mesma voz que às palavras. O guia sobre [suavização (easing)](https://gradiently.design/pt-pt/guide/easing) explica as curvas em detalhe.

```css
/* Calm: slow, soft landing */
.calm { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Bold: fast and decisive */
.bold { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }

/* Playful: a small overshoot past the target */
.playful { transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Precise: short, even, no flourish */
.precise { transition: transform 200ms ease-out; }
```

Quatro vozes de movimento. A ultrapassagem na curva brincalhona vem de o segundo ponto de controlo passar de 1.

O mesmo vale para a tipografia. O tipo de letra dos teus títulos é a parte mais ruidosa da tua voz visual, e o guia sobre [combinar tipos de letra](https://gradiently.design/pt-pt/guide/font-pairing) decide se fala sozinho ou numa conversa. Na Gradiently, cada Mark leva uma voz tipográfica junto com as suas cores e materiais, por isso o visual e as letras chegam já combinados.

> **O teste de ler em voz alta** Lê em voz alta as palavras de uma publicação no tom que o design sugere. Se nunca o dirias assim, o visual e a voz precisam de voltar a juntar-se.

## FAQ

### O que é a voz da marca?

A voz da marca é o carácter constante que uma marca exprime nas suas palavras, como calma, ousada, brincalhona ou precisa. O tom ajusta essa voz à situação.

### Como exprimem os visuais a voz da marca?

Através da cor, tipografia, textura, movimento e composição. Contraste suave e espaçamento aberto soam calmos; contraste alto e tipografia pesada soam ousados.

### Qual é a diferença entre a voz da marca e a personalidade da marca?

A personalidade é o carácter da marca; a voz é a forma como esse carácter se manifesta em palavras. Os visuais devem exprimir a mesma personalidade que a voz.

### Uma marca pode ter mais do que um traço de voz?

Sim, a maioria tem dois ou três. Escolhe um para conduzir a cor e deixa os outros moldar a tipografia, o movimento e a composição.

### A animação afeta a voz da marca?

Sim. Uma suavização lenta e delicada parece calma, movimentos rápidos parecem decididos e uma pequena ultrapassagem parece brincalhona, por isso o movimento deve corresponder à voz das palavras.