La guías de estilo en el diseño web (UI/UX)

La guías de estilo en el diseño web (UI/UX)

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.

Photon Design System by Mozilla

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.

Photon Design System - Colors and Visual for Mozilla Firefox
Photon Design System - Colors and Visual for Mozilla Firefox

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

¿Quieres comentar algo?

ACERCA DE...

Soy Francisco Moreno, Diseñador Gráfico, Web (UI/UX) y Multimedia, residente a caballo entre Albacete y Begur (Girona). Colegiado Nº 606 del Col·legi Oficial de Disseny Gràfic de Catalunya. Friki, geek y metalero en decadencia. Actualmente desarrollo mi labor profesional en BUDA Business Data Software, en Sant Cugat del Vallés, Barcelona. También colaboro con Marpadal Interactive Media y con iPow e-commerce.

Compartir esta entrada

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

OTROS POST QUE TE PUEDEN INTERESAR

Un ping en tiempos revueltos

Un ping en tiempos revueltos

Hola familia. Hacía tiempo que no escribía en el blog, la verdad es que no me da la vida para ello. Hace ya mucho tiempo que vengo espaciando los post en este blog y no lo he cerrado por lástima, por no perder la documentación que he ido almacenando en él. El caso es, nunca encuentro un momento en el que escribir un post, esté por encima de todo lo demás en mi cola de prioridades.

Leer Más >>
¿En qué ando metido? Resumen del año

¿En qué ando metido? Resumen del año

Bueno, que solo hayan pasado 8 meses de mi anterior post dice mucho del tiempo libre que tengo para dedicarme a escribir en el blog. Como os contaba en mi último post, en abril me hice cargo de la dirección creativa de BUDA Business Data Software; y la verdad, desde entonces, he tenido muchas cosas que hacer y no me he aburrido ni un solo minuto.

Leer Más >>
Tiempo de cambios y nuevos proyectos

Tiempo de cambios y nuevos proyectos

Ha pasado el mes de marzo y no he tenido ni un momento para escribir unas líneas en el blog. Lo cierto es que en este mes mi vida se ha precipitado mucho y he tenido que tomar decisiones que han devenido en importantes cambios y nuevos proyectos en materia laboral y personal.

Leer Más >>
crossoverposting-febrero2019

Crossoverposting febrero 2019

Nunca os he contado el porqué de mi interés por el diseño gráfico, en especial por el diseño de interacción. Durante mis estudios de informática en la UCLM, cursé la asignatura de Interfaces y Periféricos, en la que realicé un proyecto que necesitó de una interfaz de usuario.

Leer Más >>
  • Principal
  • ¿Quién soy?
  • Blog
  • Portfolio
  • Contacto
  • Aviso Legal, Privacidad y Política de Cookies

fmkr 2.0 - Francisco Moreno Sánchez-Aguililla
Diseñador Gráfico, Web (UI/UX) y Multimedia - 2004-2020

Volver  a arriba