En otras ocasiones te he hablado de qué es el lenguaje visual y el papel que tiene dentro de la identidad de una marca para lograr un resultado final coherente y cohesivo. A propósito del tema, se me ha ocurrido que necesitas saber cómo aplicar estos conceptos a tu cuartel general en internet, por lo que hoy toca hablar de tu guía de estilo web.

Qué es una guía de estilo web

Los proyectos web (lo sé por experiencia) pueden ser complejos e involucrar a muchas personas como programadores, diseñadores, expertos en experiencia de usuario y redactores web.

Todo un universo de profesionales con sus tecnologías y opiniones que pueden terminar en un maremágnum de cosas sin rumbo definido.

La misión de la guía de estilo web es dar coherencia a todo, haciendo que la experiencia general sea fluida, que el usuario no tenga la sensación de estar en un corta-pega de cosas y que tu marca tenga la personalidad que necesita para destacar frente a los demás. 

En este artículo te voy a contar por qué necesitas una guía de estilo web y cómo se crea una. Te enseñaré ejemplos de gran calidad en los que inspirarte y truquillos para que puedas aplicar estos ejemplos en tu propio proyecto.

Plantilla de guía de estilo

¿Necesitas un punto de partida? Mi plantilla de guía de estilo (¡completamente gratis!) te ayudará a empezar rápidamente, con ejemplos de cómo debes utilizar las siguientes cosas:

  • Iconos
  • Colores
  • Tipografías
  • Llamadas a la acción
  • Botones
  •  Logotipos

Descarga la plantilla de guía de estilo

Guía de estilo vs. sistema de diseño

Como diseñador web, es probable que hayas escuchado mucho los términos «guía de estilo» y «sistema de diseño«. Aunque son conceptos relacionados, también existen algunas diferencias que debes conocer.

Guía de estilo para ilustraciones

De cierta forma, una guía de estilo es el primo menor de un sistema de diseño. Este intenta definir reglas teniendo en cuenta todos los elementos involucrados.

Una guía de diseño intenta tener un punto de partida para definir la imagen y la voz digital de tu marca. Se concentrará en los elementos más importantes, sin prestar atención a aquellos que no se utilizan en el día a día de la marca.

¿Por qué deberías crear una guía de estilo?

Cuando el diseño web depende de más de una persona es normal que surjan desviaciones o formas diferentes de abordar el mismo trabajo.

Una guía de estilo es el carril que permitirá que este proyecto llegue a buen puerto, ayudando a todos los involucrados a utilizar las mismas pautas de diseño para lograr un resultado final coherente.

Beneficios de crear una guía de estilo para tu proyecto web

Una guía de estilo bien hecha no solo te ayuda a ti, ayuda a todos los invlucrados en el diseño de tu web. Tareas como “un estilo de botón que encaja que estas necesidades” o evitar un diseño caótico o falto de coherencia te ayuda a ahorrar tiempo y dolores de cabeza.

Además, puede servirte para el futuro, cuando surjan nuevas necesidades en tu web (como una tienda, un área de recursos o una intranet). Con un estilo definido, todo será más rápido, más barato y más fácil.

También puedes ofrecer a los responsables finales del control de la marca de una imagen bastante fiel de cómo será el aspecto final de tu web y cómo se traducen a elementos visuales los valores definidos en el storytelling de la marca.

Cómo crear una guía de estilo de diseño web

Ya te he contado qué es una guía de estilo web y por qué creo que es necesario contar con una para cualquier proyecto web que tenga cierta envergadura. A continuación, voy a repasar qué pasos debes dar si deseas crear tu propia guía de estilo web o saber en qué consiste este proceso si se la vas a encargar a una agencia de diseño creativo

Paso 1: estudia tu marca

Lo primero que debes averiguar es cómo traducir los valores de tu marca y lo que atrae a tu audiencia a lenguaje visual.

Puedes usar matrices de valores, como por ejemplo, con los típicos binomios de:

  • Clásico/moderno
  • Conservador/disruptor
  • Alegre/serio
  • Abierto/cerrado

Para los diseñadores, este tipo de información es de gran valor, porque nos ayuda a saber qué elementos visuales utilizar que encajen con los valores que la marca ha definido.

Cómo diseñar un logo para tu marca es otra entrada que puedes consultar si tienes curiosidad sobre cómo funciona este proceso.

En este artículo te conté cómo la creación de una identidad corporativa necesita definir los usos correctos e incorrectos del logo, así como las pautas que ayuden a conservar su identidad intacta, independientemente de dónde se presente. Estoy hablando, por supuesto, de los colores corporativos, las tipografías, los fondos, etc.

El logo dentro de una guía de estilo web

Paso 3: define tu paleta de colores

El color no es una cuestión de gustos, por mucho que así lo afirme el refranero popular. Los colores tienen implicaciones psicológicas, por lo que no puedes elegirlos al azar en tu identidad visual.

Mi recomendación es que elijas un color fuerte que sirva como guía y otro de completo, aunque hay quien recomienda que como mínimo, tu paleta de colores debe tener 3 elementos.

Cómo elegir los colores que encajen con la personalidad de tu marca

No olvides incluir la correspondencia hexadecimal de los colores corporativos o, en su defecto, la correspondencia en RGB. Si no sabes de qué estoy hablando, consulta este artículo con lo que significan estas siglas.

Paso 4: crea reglas para las tipografías

Las tipografías, como el color, son parte esencial de tu guía de estilo web. No solo debes tomar las “oficiales” del manual de identidad corporativa, además debes estudiar y definir cómo se aplican en la web.

Es decir, considerar cosas como:

  • El tamaño de las etiquetas de título y la tipografía que se debe utilizar en cada una de ellas (H1, H2, H3, etc).
  • Qué tipografías se utilizarán en las llamadas a la acción, en los botones o en el cuerpo de texto.
  • Si vas a mezclar varias familias de tipografías, qué reglas deben seguir los diseñadores para poder abordar todos los posibles escenarios.

Diferencia entre fuentes serif y fuentes sans-serif

No olvides que los tamaños de las fuentes se escriben en píxeles, no en puntos como en algunos programas de diseño. Tus desarrolladores están trabajando en el entorno web y no querrás que tengan que perder el tiempo buscando correspondencias entre puntos y píxeles.

Paso 5: reglas de maquetación

El diseño de la cuadrícula, las reglas de espaciado y sus usos son aspectos que importan y mucho a tus desarrolladores.

La idea es que les des una orientación sobre cómo se estructuran las páginas.

Empieza creando algunas plantillas básicas con cosas como las páginas de producto, las páginas del blog o las fichas de los productos de tu ecommerce.

Hará su trabajo presente y futuro mucho más sencillo, especialmente cuando tu web crezca y se complique, que se complicará cuando tengas éxito y te quieras expandir.

Paso 6: considera los estilos de los iconos

Si eres habitual del blog de Social Media Pymes seguro que habrás nota mi querencia por los iconos. Me gustan porque expresan con la mínima información una gran cantidad de datos. 

¿Qué debe incluir una guía de estilo web cuando se trata de iconos? Cosas como:

  • Su peso visual
  • Su grado de abstracción
  • Si tienen perspectiva o son de tipo flat
  • La forma, la línea y el color 

Y muchas cosas más, pero no quiero extenderme. Puedes consultar la entrada sobre iconografía de marca en este enlace.

Sistema de ilustraciones de marca

Paso 7: define las pautas para ilustraciones e imágenes

¡Aspecto interesante! Cómo elegir las imágenes para tu marca necesitaría un capítulo aparte, pero al menos, permíteme que te explique un par de cosas cuando se refiere a la guía de estilo web.

Si quieres que tu sitio tenga personalidad, deberás utilizar imágenes que ilustren tus conceptos, así como los productos y servicios.

El problema es que contar con un fotógrafo dedicado es muy, muy, muy caro. Por eso, el común de los mortales que no somos Vogue, recurrimos a los bancos de imagen.

Se trata de un recurso maravilloso, pero deberás tener cuidado o puedes terminar sembrando el caos en tu diseño.

Para solucionar estas cosas se crearon las guías de ilustraciones e imágenes.

Ilustraciones de la aplicación Slack

Justo debajo de estas líneas tienes un buen ejemplo de Audi, con algunas pautas de cómo elegir las imágenes que representen no solo el estilo de la marca, sino su por qué.

Paso 8: define el estilo de los diferentes elementos de tu web

Y llegó el momento de descender al detalle. Me refiero a esos elementos como el tamaño y el estado de los botones, el estilo de los formularios, de los menús, de las alertas, de las notificaciones y este tipo de cosas.

Define cómo se comporta un botón, qué hace cuando está activo y qué cuando no lo está. También puedes definir qué hacen otros elementos como los formularios, cuando pasas el ratón por determinados sitios, etc.

Puedes apoyarte en la biblioteca de componentes de Google que encontrarás en  Material Design o en Ant Design de Alibaba para identificar todos los elementos importantes que debes definir con el objetivo de tener un aspecto unificado y coherente.

Paso 9: define la voz de tu marca

Una buena guía de estilo no solo presta atención a la apariencia de tu web, además debe tener en cuenta los mensajes y la voz.

Aquí deberás echar mano de redactores y especialistas en contenido que puedan ayudarte a saber si el estilo que acompaña al aspecto visual en los textos y los mensajes hablados es cordial, canalla, formal o divertido.

Ejemplo de cómo mantener una guía de estilo web

Al final el tono de tu marca y los textos, son otra forma de transmitir a las personas cuál es tu identidad y debe ser igual de coherente que todos los aspectos visuales.

Paso 10: incluye qué es correcto y qué no

A veces, la mejor parte de este tipo de guías no es en la que se definen todas las reglas que se deben seguir, sino aquella en la que se enumeran cosas que NO debes hacer.

No hay nada que corte más el rollo a un diseñador que ver plasmado con un claro NO eso que está hirviendo en su cabeza.

Paso 11: no te olvides del material para descargar

Además de todas estas reglas de la guía de estilo de tu marca, no te olvides de incorporar algunas cosas que los desarrolladores, redactores o profesionales de marketing pueden descargarse para terminar de entender qué implicaciones tiene.

Me refiero a cosas como:

  • Tu logo en el formato adecuado con los tamaños y tipografías oficiales.
  • Tu guía de estilo en formato pdf.
  • El contacto de las personas a las que pueden contactar en caso de tener dudas o si se presenta alguna necesidad que no esté prevista en la guía de estilo web.

No pierdas de vista que además de desarrolladores, debes poner la guía al alcance de la prensa, los colaboradores, los clientes, los proveedores y todos aquellos que quieran o deban hacer uso de la marca de la forma correcta, como el equipo de marketing online.

Unos cuantos ejemplos de guía de estilo

La mejor manera de saber de qué estamos hablando es que veas algunos buenos ejemplos de guía de estilo web.

La guía de estilo web de Mozilla Firefox

No se me ocurre mejor ejemplo para que comprendas toda la dimensión de qué es una guía de estilo web que la marca Mozilla Firefox.

Si estás familiarizado con el navegador del zorro, sabrás que el color es una de las primeras cosas que destaca. Está en su ADN, como vemos rápidamente con el logo de la marca.

Logo de Firefox, cómo se adapta su guía de estilo web

Como sería de esperar, este aspecto colorido y rompedor tiene su equivalencia en otras cosas, como la selección de elementos visuales y las imágenes, los iconos y los elementos de diseño.

Por último, pero no por ello menos importante, la guía de estilo del navegador nos ofrece una explicación de cuál es su personalidad y cómo se traduce a textos (y a las redes sociales).

Guía de estilo web de Mozilla Firefox

Mantén tu guía de estilo actualizada

Las tendencias de diseño web no paran, como tampoco paran los requisitos de Google en desarrollo web a los que debemos adaptarnos y que también tienen implicaciones en el aspecto visual de las webs.

Para ti como diseñador eso significa que debes estar continuamente informado y sobre todo, que debes revisar cada cierto tiempo tu guía de estilo web para que no se quede desactualizada y obsoleta.

Mantén la coherencia de tu marca con una guía de estilo web

Conseguir que tu web sea coherente cuando hay muchas personas trabajando en ella puede ser un gran desafío. Cada uno tiene su estilo y si no sujetas bien las riendas, puede terminar desbocado.

Aquí es donde entra en juego una guía visual web. Es un punto de referencia para todas sus decisiones de diseño, que sirve para mantener a todos en la misma página. Puede aumentar la eficacia y ayudar en el reconocimiento de la marca del público objetivo. 

¿Tienes alguna duda sobre los pasos que he comentado en este artículo? ¿No sabes a quién encargarle tu guía de estilo web? ¿Te han hecho una chapuza y quieres contrastar opiniones? ¡Cuenta conmigo!

Carmen Díaz es Content Marketing Manager para Pymes, o lo que es lo mismo, trabaja creando contenidos para pequeñas y medianas empresas que quieran generar más ventas y llegar a unos clientes que cada vez se interesan más por la información y menos por la publicidad invasiva.
¿QUIERES CONSULTARME ALGO?

¡No te cortes! Escríbeme con la consulta que necesites y te responderé lo antes posible.

Te informo de que los datos de carácter personal que proporciones rellenando este formulario serán tratados por Carmen Díaz Soloaga (Social Media Pymes) como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar la solicitud que realizas en este formulario de contacto. Legitimación: consentimiento del interesado.

Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Webempresa Europa, S.L. (proveedor de hosting deSocial Media Pymes) dentro de la Unión Europea. Puedes consultar la política de privacidad de Webempresa. Si no introduces los datos obligatorios, no podré atender tu solicitud. Puedes ejercer tus derechos de acceso, rectificación, limitación y supresión los datos recabados en la dirección info@socialmediapymes.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre protección de datos en mi política de privacidad.