A versão curta
- 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.
Nesta página
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.
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 |
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: uma linha curta, um peso leve, a maior parte do quadro vazia.
Ousada: uma palavra enorme, sem mais nada a competir com ela.
Brincalhona: uma pergunta, um convite, um toque mais leve.
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, 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) 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. O tipo de letra dos teus títulos é a parte mais ruidosa da tua voz visual, e o guia sobre combinar tipos de letra 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.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
