Una guía de estilo es un «documento vivo» completo que realiza un seguimiento de todos los elementos repetitivos de un proyecto de interfaz gráfica, tanto para aplicaciones de escritorio o dispositivos móviles, como para sitios web complejos. En este documento se abarcan desde las reglas de marca hasta la cantidad de biselado para botones de llamada a la acción, es decir, todos los detalles gráficos a tener en cuenta en el diseño de una interfaz. Las guías de estilo también deben impartir reglas y prácticas sugeridas, incluyendo lo que se debe y no se debe hacer. En un nivel más holístico, son un gran lugar para definir la filosofía de diseño de una empresa.
Es cierto que las guías de estilo requieren de un trabajo adicional para crearlas, especialmente al principio del desarrollo del proyecto, cuando el equipo de diseño ya está lo suficientemente ocupado en el desarrollo de la interfaz. Pero a la larga, ese trabajo extra temprano, ahorra tiempo más tarde: hace que las referencias sean mucho más fluidas y evita la confusión y la incomprensión entre los equipos. Cuando se usan correctamente, las guías de estilo son herramientas de colaboración que complementan aspectos del diseño y añaden múltiples ventajas.
Consistencia visual
Las buenas prácticas de diseño de la interfaz de usuario web, aconsejan que las guías de estilo nos ayudan a crear un diseño coherente que refleje un lenguaje visual común. Elementos como las paletas de colores, los tipos de letra, las animaciones y los menús de navegación contribuyen a una experiencia de usuario unificada.
Contexto
Las guías de estilo explican el razonamiento detrás de las decisiones de diseño. Por ejemplo, además de explicar los detalles técnicos de las páginas con navegación por desplazamiento y las que tienen navegación con pestañas, también debe explicar que el desplazamiento se usa para contar historias, mientras que las pestañas se usan para mostrar los productos.
Colaboración
Tener un manual de referencia establecido para cada miembro del equipo asegurará que todos trabajen con consistencia en el mismo proyecto. La colaboración es más sencilla, con menos preguntas repetidas y correos electrónicos de ida y vuelta, con aclaración de cuestiones.
El vocabulario singular
Otro rasgo colaborativo es la racionalización de la comunicación a través de un vocabulario singular (es decir, definir qué podría ser un «widget» o un «módulo»). Limitar las convenciones de nomenclatura adecuadas puede evitar muchas incomunicaciones innecesarias.
Estandarización de código
Las guías de estilo de front-end ayudan a estandarizar el HTML, CSS o JavaScript, para que los diseñadores y desarrolladores puedan ver si un nuevo diseño se desvía de los estándares establecidos. También lo ayudan a descubrir si el marcado existente se expande fácilmente.
Consolidación
Los diseñadores solo necesitan buscar un lugar para hacer referencia a todos los componentes, en lugar de perder tiempo revisando diferentes notas y cuestionando qué documentos dicen qué.
Orientación para nuevos miembros del equipo
En lugar de enseñar repetidamente los nuevos estándares a los nuevos miembros de un equipo, puede enviársele una guía de estilo a medida que aumentan. Con la guía de estilo como documento de anclaje, las conversaciones de seguimiento serán más significativas.
Ayuda con las decisiones de diseño
No olvidemos que el proceso de creación de la guía de estilo puede llamar su atención sobre algunas decisiones de diseño cruciales que de otro modo podríamos haber olvidado.
Las Guías de Estilo también pueden tener inconvenientes
Entre los inconvenientes de las Guías de Estilo nos encontramos con los siguientes:
Costo: Una guía de estilo bien documentada puede ser una inversión costosa por adelantado y, si bien muchos argumentarían que los beneficios son importantes, es posible que no sean fáciles de demostrar. Es por ello que tenemos que considerar el costo de mantener nuestras guías de estilo. A medida que se realicen las mejoras por los aprendizajes de los test A/B, casi seguramente necesitaremos actualizar las guías de nuestro proyecto con mejoras basadas en los resultados obtenidos en la etapa de Testeo.
Son conjunto inicial de suposiciones: Si bien una guía de estilo de alta calidad puede basarse en las buenas prácticas o la investigación del usuario, a menos que haya sido completamente probada en Testeo A/B, tiene inherentemente una gran cantidad de suposiciones. Un botón debería verse así, con un bise4l como ese y usando esta paleta de colores. Útil como punto de partida, pero ¿y si en un contexto específico no es lo suficientemente grande o el color no destaca? Parte de las tareas de Optimización de la Tasa de Conversión (CRO) es identificar y desafiar las suposiciones para impulsar una experiencia óptima.
Son restrictivas: Si se aplican demasiado estrictamente, pueden restringir su alcance para la experimentación. Seguir una guía de estilos al pie de la letra, puede cerrar las mentes a soluciones más innovadoras o creativas. Un cierto grado de flexibilidad y autonomía es importante para permitirle al equipo desarrollar, mejores soluciones para los problemas de diseño.
Fuentes
Great UI Design Requires Smart Style Guides, by Jerry Cao
https://www.uxpin.com/studio/blog/great-ui-design-requires-smart-style-guides/
Using brand and design style guidelines for CRO, by Matt Lacey
https://www.smartinsights.com/conversion-optimisation/conversion-optimisation-strategy/using-styleguides-cro-help-hindrance/
Style Guide Best Practices by Brad Frost
http://bradfrost.com/blog/post/style-guide-best-practices/
Photon Design System by Mozilla
https://design.firefox.com/photon/welcome.html
