Guía de estilos

En este post me centraré en los diversos elementos y pasos que se deben tener en cuenta a la hora de desarrollar una guía de estilos.
En primera instancia es importante tener en cuanta a quién va ir dirigida y en qué plataforma vamos a trabajar (en nuestro caso una página web), pero sobretodo comprender qué es una guía de estilo.
Una guía de estilo es un conjunto de reglas y elementos gráficos prediseñados con el propósito de ofrecer los conceptos básicos a diseñadores y desarrolladores para que la experiencia en toda web sea consistente al final. Es muy importante especialmente en equipos en el que trabajan diversas personas.
El primer paso a la hora de crear la guía es analizar la imagen corporativa de la empresa (la marca) esto permitirá seguir las líneas ya existentes y ofrecer homogeneidad.
Una vez conocemos debemos definir los diversos componentes que definirán la página web:

• Tono del copy: el tono del copy es la manera con la cual la página se dirigirá a los usuarios, qué palabras y expresiones se usarán a la hora de redactar los textos. Un texto informal ofrecerá más proximidad, mientras que uno formal más seriedad (no son excluyentes).
• La paleta de colores: son aquellos colores que se usarán en los diseños. Los colores primarios son aquellos que predominarán en el sitio web; suelen estar relacionados con la imagen corporativa ya que las tonalidades suelen asociarse con las diversas marcas. Es recomendable no superar los 3 tonos predominantes.
  Añadir colores neutros permitirán enfatizar los primarios.

• La tipografía: Se deben definir una jerarquía e identificarla. Eso hará referencia a los diversos comportamientos del texto ya sean títulos, cuerpo, enlaces… y todas sus variantes negrita, cursiva, subrayado… Por norma general, tanto las fuentes, tamaño y color deben tener un aspecto familiar para el usuario. En el mundo web es recomendable nunca poner una fuente inferior a 12px.
• Iconografía: Los iconos ofrecerán una idea rápida sobre de qué trata (el contexto es esencial!), recalcar que la cultura, historia, religión juegan un papel importante a la hora de interpretar los iconos (debemos conocer nuestro público objetivo). Estos iconos deberán estar alineados con la marca de la empresa.

• Botones: Los botones son una mezcla de algunos puntos anteriores, por lo que serán consecuentes a ellos.

• Imágenes: Las imágenes producen reacciones y sentimientos en el usuario por lo que deberán escogerse con sumo cuidado, es por eso que deberemos ejemplificar que tipo de imágenes son las que deben mostrarse. Como sucede con los iconos las imágenes han de ser consecuentes con la empresa.