Advertisement
  1. Web Design
  2. Branding

Cómo crear guías de estilo para un público específico

by
Read Time:10 minsLanguages:
This post is part of a series called All About Style Guides.
A Super-Quick Introduction to Style Guides
Using Guidelines to Mind Your Tone

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Una guía de estilo puede ser un documento increíblemente poderoso que perdure más tiempo que la mayoría dentro de la cultura de una empresa. Con independencia de que estés construyendo una reciente nueva marca para una empresa aún por conocer, o que estés rediseñando una marca ya establecida, centrarte en una guía de estilo puede aportar cohesión a los recursos diseñados alrededor de dicha marca, así como el tono asociado a la misma.

En este artículo, me gustaría explorar algunas de las audiencias para las que podrías crear la guía de estilo y algunas técnicas que puedes utilizar para construir ecosistemas de branding más sólidos y sostenibles. Este artículo no solo es aplicable a la web, pero sin duda incluiremos algunos consejos específicos para las guías de estilo orientadas a la web.

Audiencia #1. Tú mismo

Tú mismo necesitas reglas. Necesitas responsabilidad. Si no la tienes, no podrás crear una marca focalizada. Crear una guía de estilo con límites estrictos y una estructura básica para el diseño y el desarrollo hará que cumplas las reglas, liberándote de la carga cognitiva de tener que intentar limitarte sin una guía.

Jack White, guitarrista de White Stripes, dijo como es bien sabido:

Decirte a ti mismo, "Oh, tienes todo el tiempo del mundo, tienes todo el dinero del mundo, tienes todos los colores que deseas en la paleta, cualquier cosa que quieras", quiero decir, eso simplemente mata la creatividad.

Tómate el tiempo necesario para definir tus propias restricciones. No lo hagas a ciegas; hazlo a través de la investigación, tanto por tu propia cuenta como con base en las mejores prácticas empíricas/documentadas. Ten cuidado de no abandonar la creatividad y la intuición en aras de la investigación, pero recuerda que la investigación puede potenciar la creatividad y la intuición.

¿Qué tipo de restricciones?

Esta pregunta no es fácil de responder, y depende en gran medida de tus circunstancias. Más adelante, discutiremos algunas de las restricciones y directrices que añadirás a una guía de estilo para los demás, pero primero, debes asegurarte de crear restricciones para ti.

El propósito de una guía de estilo, en última instancia, es crear restricciones que ayuden a construir la eficacia de una iniciativa de diseño. En pro de este artículo, asumiremos que la guía de estilo está construida en torno a una marca.

¿Restrictiva? No, crucial. Una muestra de los famosos recursos de marca de MailChimp

Para hacer esto de la manera más efectiva, uno de los primeros pasos que tenemos que dar es considerar más atentamente la percepción de la marca como si fuera un ser humano. La marca sirve como un marcador de posición simbólico para aquello a lo que se aplica la marca. Por lo tanto, debes considerar la asignación de una voz y un tono, y filtrar todo lo que creas a través de ella. Esto proporcionará un ancla para que la gente reconozca mentalmente tu marca. La marca funciona en último término como portavoz de una empresa u organización.

Parte de la voz y el tono utilizados por Tuts+ para guiar a sus instructores

¿Qué tiene que ver esto con una guía de estilo, especialmente en la web? Absolutamente todo. Si estudias el diseño y los principios psicológicos de la teoría de la comunicación, podrás potenciar esta persona, la voz y el tono, a través de los elementos de diseño. Por ejemplo, si tu tono es amistoso con los niños pequeños, deberías tener en cuenta los colores brillantes en lugar de colores primarios. Podrías considerar palabras más breves en lugar del empleo de palabras más largas, y los elementos de diseño probablemente girarán en torno a las imágenes y existirá un límite en el número de palabras utilizadas en un elemento determinado.

Para la web, existen piezas muy importantes que ayudan a dar forma a tu tono.

Consejos profesionales:

  • Cuando solicites a un usuario que cumplimente un formulario, recuerda que los formularios son conversaciones. No pongas toda tu energía en el eslogan, y luego te olvides del tono cuando pidas al usuario que haga algo.
  • Del mismo modo, al alertar al usuario de un error, un éxito o al proporcionarle información pertinente, conserva tu tono.
Probablemente este no sea el tono que buscarías
  • Además de definir la paleta de colores y mostrarla visualmente, debes identificar las conexiones simbólicas entre los colores y su significado. Por ejemplo, si tu marca asocia el rojo con la positividad, esto debe ser identificado, porque esta no es necesariamente una conexión implícita o natural. Reforzar estas conexiones y connotaciones en tu guía de estilo ayuda a tomar complejas decisiones de diseño.
Parte de la marca de Skype
  • No pienses solo en colores, formas, tipografías y otros elementos estáticos de diseño; en tu guía, valora la animación como un ciudadano de primera clase. Por ejemplo, ¿prefieres un fundido, una "slider" o pase de diapositivas lineal, un pase de diapositivas acelerado o uno con rebote? La marca requiere poca o ninguna animación, a excepción de unos pocos elementos seleccionados. Estas decisiones deben ser deliberadas. Una transición conlleva un mensaje. Para una mayor comprensión de los conceptos básicos de una animación eficaz, ten en cuenta los 12 principios de la animación.
  • Identifica todos los tipos y/o plantillas de página básicos y explica su función. Estas definiciones deben mostrar una estructura esquemática o "wireframe" del tipo de página, así como los estilos de las fuentes.
  • Identifica todos los módulos reutilizados a lo largo de todo el sitio, con wireframes que expliquen todos los aspectos del diseño, incluidas las reglas de elección de color, las restricciones de los tamaños de imagen, las respuestas de los efectos "hover" y cualquier otro aspecto interactivo del módulo.
  • Identifica no sólo los aspectos de presentación, sino también todas las restricciones relacionados con la experiencia del usuario. Considera la guía de marca una "guía de experiencia", si eso te resulta de ayuda; por ejemplo, imponer límites estrictos a la velocidad de la página, o requerir un proceso de prueba de calidad para cada diseño antes de que este sea enviado.
  • Aborda las restricciones para dispositivos móviles y el contenido de forma temprana y frecuente, y haz que sea una prioridad la definición de las diferencias de voz y tono para los usuarios que estén en dispositivos móviles frente a los usuarios que están en el escritorio. Los objetivos de estos usuarios probablemente variarán, y conocer esos objetivos debe informar la toma de decisiones de diseño.
  • Redefine las reglas de tamaño de las fuentes en los distintos tamaños de pantalla.
  • Personifica a tu usuario medio. Estudia tu base de usuarios y determina si solo existe un usuario arquetípico o si hay varios tipos de usuarios. Averigua qué usuarios son más importantes, y da forma a tu diseño en torno a lo que mejor comunique tu voz y tono a esos usuarios.
  • ¡No te olvides de las "esquinas oscuras" del sitio! Diseña los lugares de difícil acceso y las esquinas olvidadas para estar a la altura con la calidad del resto del diseño.
  • Asegúrate de tener conjuntos predeterminados sensibles y utilizables para cada estilo de elemento.
  • Al alterar los estilos de elementos integrados, asegúrate de que la accesibilidad y la facilidad de uso estén equilibrados con la estética. Tu guía de estilo debería impedirte alterar el comportamiento que se espera de las acciones básicas del usuario, como el desplazamiento, el mantenimiento del puntero sobre un elemento o la realización de un clic en un control de formulario, sin un motivo claro y determinado.

Audiencia #2. Aquello a lo que se aplica la identidad de marca

Una marca es una seña que representa a las personas, las ideas, las prácticas, la cultura y la identidad de una empresa. Esta empresa, y las personas que la componen, son el segundo público de la guía de estilo; son aquellos sobre los que se aplica la identidad de marca.

Una guía de estilo, en última instancia, es una referencia sobre cómo crear artefactos de diseño que sean consistentes con la marca. Las personas a las que representa la marca probablemente serán las que más a menudo usen la guía de estilo. Las restricciones que proporciones para aquellos que la utilicen a diario deben estar mucho más claramente descritas, con una anticipación a las preguntas que puedan surgir sobre la cohesión de la marca. La mayoría de las empresas necesitan una guía de estilo que funcione para dos tipos de personas: para aquellos conscientes del diseño y para aquellos que no lo son.

Individuos conscientes del diseño

La entrega de una guía de estilo debe implicar la capacitación de las personas conscientes del diseño con respecto a los detalles de la guía de estilo, y la creación de revisiones basadas en las preguntas realizadas por los individuos.

En general, se puede utilizar el lenguaje propio del diseño con individuos conscientes del mismo. La guía de estilo debe capacitar a los individuos conscientes del diseño para la exploración y la expansión de la voz y el tono de la marca a medida que esta crezca; las marcas deben conservar plasticidad suficiente como para que puedan cambiar y crecer a medida que cambie el mercado.

Diseñar individuos agnósticos

La entrega de una guía de estilo debe implicar la formación de los individuos que no sean conscientes del diseño en relación con el conocimiento de la marca y la importancia de mantenerse fiel a la guía. Si la mayoría de los recursos desarrollados por un personal determinado son creados por individuos agnósticos en relación al diseño, en la guía de estilo deben quedar descritas las restricciones y los requisitos más estrictos.

Por ejemplo, todos los ejemplos de ubicación de logotipos, ubicación de las tipografías, frases clave de marca o eslóganes, colores y las pruebas y/o requisitos de usabilidad deben identificarse con todo detalle.

Adobe logra que las restricciones de uso de su logotipo sean muy claras para todos (PDF)

Consejos profesionales:

  • Utiliza ejemplos de malas, correctas, buenas y óptimas prácticas para obtener la máxima claridad.
  • No confundas los que significa ser agnóstico con respecto al diseño con estar en contra del diseño; en general, las personas podrán seguir las instrucciones, y lo harán gratamente. No hagas que la guía suene como un listado de normas, en lugar de eso definela como una herramienta para el empoderamiento.
Parte de la guía de marca de Beano, la cual demuestra que las restricciones también pueden ser divertidas (PDF)
  • Lo explícito es mejor que lo implícito; para definir una guía de estilo de marca utiliza las explicaciones más obvias posibles, incluidas las capturas de pantalla si fuese necesario.
  • Las listas de verificación pueden ser algo estupendo, pero solo si no son demasiado técnicas, abrumadoras o exigentes.
  • No proporciones únicamente reglas: proporciona razones. Ofrece un lenguaje claro que no utilice terminología de diseño técnica o densa para explicar tus directrices.
  • Proporciona muestras de los colores planos muy claras de todos los colores relacionados con la marca, junto con sus códigos hexadecimales y cualquier información de codificación de color que sea pertinente, como los identificadores Pantone.
Una muestra de las pautas de color de More4 (PDF)
  • Para las guías de estilo de los campos de entrada web/HTML, proporciona un conjunto de código con el que trabajar de manera que el usuario pueda copiarlo y pegarlo. Identifica ciertas secciones con comentarios HTML.
  • Aclara todo lo que ataña a la calidad de las imagenes; proporciona a los usuarios ejemplos de buena fotografía, y valora la identificación de los rasgos básicos de una buena foto.
  • No olvides explicar a los usuarios el tono que debe primar en las conversaciones por mensajería, así como la importancia de la doble comprobación de la gramática. El tono debe estar determinado por dos o más individuos, y al menos otra persona debe revisar toda la copia en un diseño dado.

Audiencia #3. El público (Opcional)

Si tu marca va a ser utilizada por el público, es posible que tengas que proporcionarle una guía de estilo que se adapte a sus necesidades. En concreto, las guías de estilo para el público son a menudo para marcas orientadas a proveer servicios. Un ejemplo obvio de esto es Twitter; cuando añades el logotipo de Twitter o un feed de Twitter a tu sitio, a Twitter le preocupa el aspecto que este tiene.

Tomado de los recursos de la marca de Twitter

Por lo general, esto es más aplicable cuando se trata de la colocación del logotipo. Algunas reglas básicas para la colocación de logotipos, específicamente:

  • Proporciona paquetes descargables de logotipos en formatos populares, con todas las versiones aplicables (tamaños, así como variaciones)
  • Define el espaciado; utiliza una regla general que al menos defina la altura de la letra más alta en el logotipo así como los espacios alrededor del logotipo en sí.
  • Define si el logotipo debe estar centrado, alineado a la izquierda o a la derecha, o si debe colocarse de otro modo en relación con la propia página.
  • Sé claro en torno a los colores de fondo que pueden ser utilizados junto con el logotipo, con casos de uso explícitos y ejemplos.

Guías de estilo web: donde la identidad se encuentra con la interactividad

Tal vez la desconexión más desconcertante entre una guía de estilo y una experiencia web sea la brecha entre la interacción y la propia marca. A menudo se hace referencia a ello como la "sensación", esta misma brecha es la razón por la que es tan importante hacer prototipos de las interacciones. Pocas veces una guía de estilo de marca captura adecuadamente los aspectos basados en la identidad del diseño de interacción. Sin embargo, ¡este debería ser nuestro objetivo al escribir una guía de estilo! Valora la posibilidad de emplear los siguientes conceptos y consejos para tu guía de estilo en lo que se refiere a la interactividad:

  • Eleva la definición de la capa interactiva para ser un ciudadano de primera clase en la guía de diseño, es tan importante como el color y la tipografía.
  • Escribe "historias de usuario" para ayudar a definir todas las rutas que pude realizar un usuario y las acciones que pueda llevar a cabo. La lista de historias de usuario debe ayudar a comprender la interacción entre páginas de alto nivel, manteniendo los objetivos accionables en consonancia con los de la marca.
  • Describe las animaciones con dos tipos de lenguaje: primero, descriptivo, con un lenguaje uniforme que intente definir objetivamente qué hace la animación. En segundo lugar, con lenguaje subjetivo, para describir qué "sensación" debe transmitir la animación. Un buen diseñador conoce la diferencia en la sensación transmitida por una animación que dura .2 s y una que dura .3 s, pero es posible que desconozcas la descripción matemática de esa diferencia.
  • Cuando las descripciones fallen, proporciona prototipos interactivos de la interacción que estés intentando lograr. Concéntrate en los pequeños detalles de la interacción; ¿qué pasa en el transcurso de unos segundos? ¿Qué sucede en casos inesperados?

Conclusión

Esta guía para crear guías de estilo está lejos de ser completa; ciertamente existen miles de piezas de sabiduría a compartir sobre las guías de estilo. ¿Has aprendido algo increíblemente importante? ¡Compártelo con nosotros a continuación!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.