Resumindo
- A voz da marca é como ela soa em palavras; seus visuais devem expressar o mesmo caráter em cor, tipografia, textura, movimento e layout.
- Quando voz e visuais discordam, como uma mensagem gentil em um visual de neon berrante, as pessoas sentem o descompasso mesmo sem saber nomeá-lo.
- Cada traço de voz se traduz em escolhas visuais concretas: calma sugere contraste suave e movimento lento, ousadia sugere alto contraste e tipografia pesada.
- Escreva cada traço de voz como “isto, não aquilo”, para que as escolhas visuais tenham um limite além de 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.
Nesta página
A voz da sua marca é como ela soa em palavras: calma ou ousada, brincalhona ou precisa, calorosa ou fria. Seus visuais devem dizer exatamente a mesma coisa em cor, tipografia, textura, movimento e layout. O jeito prático de chegar lá é pegar cada traço de voz e relacioná-lo a escolhas visuais específicas, depois conferir cada design com esse mapa. Quando os dois concordam, um post parece sincero antes de alguém ler.
A maioria das marcas define a voz para quem escreve e o visual para quem projeta, separadamente. É assim que você acaba com uma legenda gentil e tranquilizadora sobre um fundo de neon aos gritos. Este guia junta os dois. Se você ainda não definiu o seu caráter, comece pela personalidade da marca.
Por que a voz da marca e os visuais precisam concordar
As pessoas absorvem o visual de um post antes das palavras. O visual cria uma expectativa, e as palavras a confirmam ou a contradizem. Uma contradição nem sempre é percebida de forma consciente; ela só deixa a marca com uma sensação levemente estranha, como um amigo cujo tom não combina com o que ele está dizendo.
Voz e visual discordam
- Uma marca discreta e ponderada em neon saturado, com animação saltitante
- Uma marca brincalhona em cinza, tipografia fina e grades rígidas
- Uma marca precisa e técnica com fontes desenhadas à mão e desfoques suaves
- Uma marca calorosa e local em azul frio e fotos corporativas de banco de imagens
Voz e visual concordam
- A mesma marca discreta em neutros profundos, uma serifa fina e deslocamento lento
- A marca brincalhona em combinações vivas e inesperadas e tipografia arredondada
- A marca técnica em uma sem serifa limpa, contraste nítido e espaçamento exato
- A marca calorosa em tons terrosos, textura de papel e rostos reais
Um mapa dos traços de voz para as escolhas visuais
Use esta tabela como ponto de partida, não como lei. A maioria das marcas mistura dois ou três traços; escolha o dominante para a cor e deixe os outros moldarem a tipografia e o movimento.
| Traço de voz | Cor | Tipografia | Textura e movimento | Layout |
|---|---|---|---|---|
| Calma | Contraste suave, matizes próximos, tons apagados | Pesos leves ou regulares, espaçamento aberto | Grão fino, deslocamento lento | Muito espaço, poucos elementos |
| Ousada | Alto contraste, 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 macios, suavização saltitante | Solto, um pouco fora da grade |
| Precisa | Contida, um destaque claro | Sem serifa limpa, ritmo regular | Lisa, textura mínima, tempo exato | Grade rígida, bordas alinhadas |
| Calorosa | Tons terrosos e ensolarados | Serifa simpática ou sem serifa humanista | Papel, grão, luz do dia | Margens generosas, fotos de pessoas |
Quatro vozes, quatro visuais
Aqui estão os mesmos tipos de escolha feitos para quatro vozes diferentes. Repare como só a cor já diz muito, antes de qualquer palavra.
Calma: uma linha curta, peso leve, a maior parte do quadro vazia.
Ousada: uma palavra enorme, nada mais competindo com ela.
Brincalhona: uma pergunta, um convite, um toque mais leve.
Precisa: uma lista, bordas alinhadas, nenhuma decoração que não seja informação.
Como encontrar sua voz visual
- 1
Escreva seus traços como “isto, não aquilo”
“Confiante, não arrogante.” “Calorosa, não melosa.” A segunda metade dá aos visuais um limite além de uma direção.
- 2
Escolha o traço principal
Decida qual traço conduz a cor. Dois traços principais puxando em sentidos opostos, como calma e ousadia, produzem um visual confuso.
- 3
Relacione cada traço a escolhas
Use a tabela acima para escolher cor, tipografia, textura, movimento e layout. Escreva as escolhas ao lado de cada traço.
- 4
Passe a mesma frase por dois visuais
Componha uma linha real do seu texto no visual que você escolheu e no oposto dele. Se o oposto parecer mais verdadeiro, reveja os traços.
- 5
Escreva tudo junto
Ponha as regras de voz e de visual na mesma página do seu guia de estilo da marca, para que quem escreve e quem projeta trabalhem a partir de uma só fonte.
O movimento também tem voz
A velocidade e a suavização de uma animação soam como alguma coisa. Uma saída longa e gentil parece calma. Um movimento curto e seco parece decidido. Um leve exagero no fim parece brincalhão. Se sua marca aparece em vídeo ou em um site, dê ao movimento a mesma voz das palavras. Suavização (easing) explica as curvas em detalhe.
/* 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; }O mesmo vale para a tipografia. A fonte do título é a parte mais alta da sua voz visual, e a combinação de fontes decide se ela fala sozinha ou numa conversa. No Gradiently, cada Mark traz uma voz tipográfica junto com suas cores e materiais, então o visual e as letras já chegam combinados.
Perguntas frequentes
O que é voz de marca?
A voz da marca é o caráter constante que ela expressa em suas palavras, como calma, ousada, brincalhona ou precisa. O tom ajusta essa voz à situação.
Como os visuais expressam a voz da marca?
Por meio de cor, tipografia, textura, movimento e layout. Contraste suave e espaçamento aberto soam calmos; alto contraste e tipografia pesada soam ousados.
Qual é a diferença entre voz e personalidade de marca?
A personalidade é o caráter da marca; a voz é como esse caráter aparece nas palavras. Os visuais devem expressar a mesma personalidade que a voz.
Uma marca pode ter mais de um traço de voz?
Pode, e a maioria tem dois ou três. Escolha um para conduzir a cor e deixe os outros moldarem a tipografia, o movimento e o layout.
A animação afeta a voz da marca?
Afeta. Suavização lenta e gentil parece calma, movimentos rápidos parecem decididos e um leve exagero parece brincalhão, então o movimento deve combinar com a voz das palavras.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
