# Voz de marca y elementos visuales: haz que tu estilo suene a ti [Canonical HTML page](https://gradiently.design/es/guide/brand-voice-and-visuals) Un mensaje tranquilo con un estilo estridente suena falso, y la gente lo nota antes de saber decir por qué. Aquí tienes un mapa práctico de cómo suenas a cómo te ves. ## The short version - La voz de marca es cómo suena una marca en palabras; su aspecto visual debe expresar el mismo carácter en color, tipografía, textura, movimiento y composición. - Cuando la voz y lo visual no coinciden, como un mensaje amable en un estilo de neón estridente, la gente percibe el desajuste aunque no sepa nombrarlo. - Cada rasgo de voz se traduce en decisiones visuales concretas: lo tranquilo sugiere contraste suave y movimiento lento, lo atrevido sugiere contraste alto y tipografía pesada. - Escribe cada rasgo de voz como «esto, no aquello» para que las decisiones visuales tengan un límite además de una dirección. - El movimiento también tiene voz: la velocidad y la curva de una animación pueden sonar tranquilas, atrevidas, juguetonas o precisas. Tu **voz de marca** es cómo suena tu marca en palabras: tranquila o atrevida, juguetona o precisa, cálida o fría. Tu aspecto visual debe decir exactamente lo mismo en color, tipografía, textura, movimiento y composición. La forma práctica de lograrlo es tomar cada rasgo de voz, enlazarlo con decisiones visuales concretas y comprobar cada diseño con ese mapa. Cuando los dos coinciden, una publicación se siente sincera antes de que nadie la lea. La mayoría de las marcas definen su voz para los redactores y su aspecto para los diseñadores, por separado. Así se acaba con un pie de foto suave y tranquilizador sobre un fondo de neón que grita. Esta guía junta ambos mundos. Si aún no has decidido tu carácter, empieza por la [personalidad de marca](https://gradiently.design/es/guide/brand-personality). ## Por qué la voz de marca y lo visual deben coincidir La gente asimila el aspecto de una publicación antes que las palabras. El aspecto crea una expectativa, y las palabras la confirman o la contradicen. Una contradicción no siempre se registra de forma consciente; simplemente hace que la marca se sienta algo desafinada, como una amiga cuyo tono no encaja con lo que dice. ### Voz y aspecto no coinciden - Una marca discreta y reflexiva con neón saturado y animaciones saltarinas - Una marca juguetona en gris, con tipografía fina y cuadrículas estrictas - Una marca precisa y técnica con fuentes dibujadas a mano y desenfoques suaves - Una marca cálida y local con azul frío y fotos de banco de imágenes corporativas ### Voz y aspecto coinciden - La misma marca discreta con neutros profundos, una serifa fina y una deriva lenta - La marca juguetona con combinaciones vivas e inesperadas y tipografía redondeada - La marca técnica con una sans limpia, contraste nítido y espaciado exacto - La marca cálida con tonos terrosos, textura de papel y rostros reales ## Un mapa de los rasgos de voz a las decisiones visuales Usa esta tabla como punto de partida, no como ley. La mayoría de las marcas son una mezcla de dos o tres rasgos; elige el dominante para el color y deja que los demás den forma a la tipografía y al movimiento. | Rasgo de voz | Color | Tipografía | Textura y movimiento | Composición | | --- | --- | --- | --- | --- | | Tranquila | Contraste suave, tonos cercanos, apagados | Pesos ligeros o normales, espaciado abierto | Grano fino, deriva lenta | Mucho espacio, pocos elementos | | Atrevida | Contraste alto, saturado, pocos colores | Pesos gruesos, tamaños grandes, espaciado ajustado | Superficies nítidas, cortes rápidos | Tipografía grande, de borde a borde | | Juguetona | Combinaciones inesperadas, pasteles vivos | Formas redondeadas, tamaños mezclados | Materiales suaves, curvas con rebote | Suelta, algo fuera de la cuadrícula | | Precisa | Contenida, un acento claro | Sans limpia, ritmo uniforme | Suave, textura mínima, tiempos exactos | Cuadrícula estricta, bordes alineados | | Cálida | Tonos terrosos y soleados | Serifa amable o sans humanista | Papel, grano, luz natural | Márgenes generosos, fotos de personas | Normalmente un rasgo lidera. Los demás ajustan los detalles. ## Cuatro voces, cuatro estilos Estas son las mismas decisiones tomadas para cuatro voces distintas. Fíjate en cuánto te dice ya solo el color, antes de añadir palabras. - Tranquila: de niebla a azul suave: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)` - Atrevida: de rojo anaranjado a amarillo: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)` - Juguetona: rosa, mantequilla, menta: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)` - Precisa: de tinta a azul marino profundo: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)` El color marca la voz primero. Para saber más de lo que sugiere cada color, mira la [psicología del color](https://gradiently.design/es/guide/color-psychology). Una publicación vertical con las palabras Tómate tu tiempo pequeñas y ligeras sobre un fondo sereno con mucho espacio Tranquila: una línea corta, un peso ligero y casi todo el encuadre vacío. Una publicación vertical con la palabra Ahora a un tamaño enorme sobre un fondo vivo Atrevida: una palabra enorme y nada más que compita con ella. Una publicación cuadrada que pregunta ¿Qué harías? en una composición amable sobre un fondo vivo Juguetona: una pregunta, una invitación, un toque más ligero. Una publicación cuadrada titulada Tres cambios esta semana con una lista ordenada y alineada sobre un fondo contenido Precisa: una lista, bordes alineados y ninguna decoración que no sea información. ## Cómo encontrar tu voz visual 1. **Escribe tus rasgos como «esto, no aquello»** «Segura, no arrogante.» «Cálida, no empalagosa.» La segunda mitad da a lo visual un límite además de una dirección. 2. **Elige el rasgo principal** Decide qué rasgo lleva el color. Dos rasgos principales que tiran en direcciones opuestas, como tranquilo y atrevido, dan un estilo confuso. 3. **Enlaza cada rasgo con decisiones** Usa la tabla de arriba para elegir color, tipografía, textura, movimiento y composición. Escribe las decisiones junto a cada rasgo. 4. **Pasa la misma frase por dos estilos** Pon una línea real de tu texto en el estilo que elegiste y en su contrario. Si el contrario suena más cierto, revisa los rasgos. 5. **Anótalo todo junto** Pon las reglas de voz y las visuales en la misma página de tu [guía de estilo de marca](https://gradiently.design/es/guide/brand-style-guide), para que redactores y diseñadores trabajen desde una sola fuente. ## El movimiento también tiene voz La velocidad y la curva de una animación suenan a algo. Una salida larga y suave se siente tranquila. Un movimiento corto y seco se siente decidido. Un ligero rebote se siente juguetón. Si tu marca aparece en vídeo o en una web, dale al movimiento la misma voz que a las palabras. Las [curvas de aceleración](https://gradiently.design/es/guide/easing) explican los detalles. ```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; } ``` Cuatro voces de movimiento. El rebote de la curva juguetona viene de que el segundo punto de control supera 1. Con la tipografía pasa lo mismo. La fuente de tus titulares es la parte más ruidosa de tu voz visual, y el [emparejamiento de fuentes](https://gradiently.design/es/guide/font-pairing) decide si habla sola o en conversación. En Gradiently, cada Mark lleva una voz tipográfica junto a sus colores y materiales, así que el aspecto y las letras llegan ya combinados. > **La prueba de leer en voz alta** Lee en voz alta las palabras de una publicación con el tono que sugiere el diseño. Si nunca lo dirías así, hay que volver a juntar el aspecto y la voz. ## FAQ ### ¿Qué es la voz de marca? La voz de marca es el carácter constante que una marca expresa con sus palabras, como tranquila, atrevida, juguetona o precisa. El tono adapta esa voz a la situación. ### ¿Cómo expresan lo visual la voz de marca? A través del color, la tipografía, la textura, el movimiento y la composición. El contraste suave y el espaciado abierto suenan tranquilos; el contraste alto y la tipografía pesada suenan atrevidos. ### ¿Qué diferencia hay entre voz de marca y personalidad de marca? La personalidad es el carácter de la marca; la voz es cómo ese carácter se transmite en palabras. Lo visual debe expresar la misma personalidad que la voz. ### ¿Puede una marca tener más de un rasgo de voz? Sí, la mayoría tiene dos o tres. Elige uno para que lidere el color y deja que los demás den forma a la tipografía, el movimiento y la composición. ### ¿Afecta la animación a la voz de marca? Sí. Una aceleración lenta y suave se siente tranquila, los movimientos rápidos se sienten decididos y un ligero rebote se siente juguetón, así que el movimiento debe encajar con la voz de las palabras.