---

Al igual que desarrollamos una guía visual en la creación de imágenes corporativas para una marca, si esta va a convivir en el terreno digital en forma de sitio web o aplicación móvil es necesario crear una guía de estilo en la que se especifiquen las reglas y normativas para que diseñadores y desarrolladores puedan aplicarla a productos digitales.

¿Qué es una guía de estilo?

La guía de estilo es una pequeña parte de un sistema de diseño que consta de un conjunto de reglas relacionadas con la marca y el estilo visual de los productos.

La mayoría de los equipos o empresas de diseño crean una guía de estilo de la interfaz de usuario antes de comenzar a crear un producto web o de aplicación.

La guía de estilo esta formada por una serie de pautas o referencias visuales para ayudar a los diseñadores a definir o configurar la tipografía, los elementos de la interfaz de usuario y las interacciones, evitando cualquier tipo de duda que pueda surgir. Es esencial para que los diseñadores y equipos de productos mantengan el mismo estilo de diseño visual durante un largo período de tiempo.

¿Qué beneficios aporta una guía de estilo?

La mayoría de los equipos o empresas de diseño crean una guía de estilo de la interfaz de usuario antes de comenzar a crear un producto web o de aplicación. ¿Por qué? Estas son las principales ventajas que las guías de estilo de la interfaz de usuario:

• Promueve el marketing y las ventas con marcas consistentes.
• Ayuda a los diseñadores y desarrolladores a comunicarse y colaborar mejor.
• Ayuda a crear UI y UX consistentes en todos sus productos.
• Facilita el aprendizaje para los nuevos miembros del equipo, clientes o partes interesadas.
• Es fácil actualizarse en función de los nuevos estándares y tendencias de diseño a lo largo del ciclo de vida del producto.

Elementos de una guía de estilo para apps y sitios web

Antes de comenzar a crear una guía de estilo desde cero, lo primero que debemos hacer es decidir junto con el resto del equipo la identidad visual de la marca, sentando las bases sobre las que funcionará la guía de estilo.

Logotipo

El logotipo es uno de los elementos más importantes que ayudará a construir la marca y promover sus productos sin problemas. Por lo tanto, en su guía de estilo, se deben incluir las pautas del logotipo, como sus tamaños, colores, el espacio en blanco que lo rodea, «qué hacer y qué no hacer», etc. También incluya algunos ejemplos para que quede claro para todos.

Tipografía

El texto y las fuentes son una gran parte de su interfaz de usuario. Para crear una experiencia de usuario mejor y más cómoda, debe incluir todas las fuentes y explicar cómo usarlas en su guía de estilo.

Paleta de colores

Las paletas de colores definen el efecto visual general de un sitio web / aplicación y evocan las emociones de los usuarios de manera efectiva. Por lo tanto, no debe olvidar incluir las paletas de colores, como los colores primarios y secundarios, el diseño de la tipografía sobre fondos de colores, los colores primarios para resaltar, los colores de los enlaces y botones, etc.

Pautas de visualización de imágenes y datos

Su guía de estilo debe incluir las pautas para las visualizaciones de imágenes y datos. Por ejemplo, es necesario crear algunas pautas para todas las imágenes y formas involucradas, como fotos, iconos, gráficos, infografías, etc…

Otros elementos

Los mensajes de error, las alertas y la información sobre herramientas son métodos importantes para que los diseñadores guíen a los usuarios y mejoren la UX. En su guía de estilo, debe definir las pautas para estos elementos para una mejor consistencia del producto.

Ejemplos de guía de estilo

En dribbble puedes encontrar buenos ejemplos sobre guías de estilo, tanto para sitios web como para apps. Aquí os dejo algunos ejemplos que os pueden servir de apoyo para la creación de vuestras propias guías de estilo, en función de las necesidades de cada proyecto.

Ver ejemplo

Ver ejemplo

Descarga guías de estilo

También podemos descargarnos modelos de guías de estilo en forma de mockup para distintas aplicaciones como Sketch o UX Design de Adobe con las que podremos editarlas.

Categoría/s: Diseño y desarrollo web