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

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

Informa de patrones oscuros

Dark Patterns Tip Line, una web para informar del uso de patrones oscuros

Todos los días nos explotan en la web con fines lucrativos a través de patrones oscuros, en inglés dark patterns: tácticas de diseño utilizadas en sitios web comerciales y aplicaciones para persuadirte de que hagas cosas que probablemente no harías de otro modo. Los patrones oscuros son comunes en los sitios web y las aplicaciones que usamos a diario, pero a veces son difíciles de detectar porque están diseñados para engañarnos.

Leer Más >>
Últimos dias para adquirir la licencia del software de diseño Affinity a mitad de precio.

Últimos dias para adquirir la licencia del software de diseño Affinity a mitad de precio

Desde hace un tiempo le vengo siguiendo la pista a la serie de programas de diseño de Affinity, compuesto por Affinity Photo, Affinity Designer y Affinity Publisher; una estupenda suite de software de diseño que, si no me equivoco, va a hacerle una gran sombra a la omnipotente Creative Suite de Adobe que ha dominado de forma inmisericorde durante años el panorama del diseño gráfico y la producción multimedia. Así que, después de unos meses de probar las herramientas, me he decidido y ya tengo mi licencia de estos tres programas.

Leer Más >>
3ymedia school o cómo hacer las cosas bien en cuanto a divulgación y formación tecnológica.

3ymedia school o cómo hacer las cosas bien en cuanto a divulgación y formación tecnológica

Desde hace un tiempo me he convertido en fan acérrimo del Live Podcast Vídeo “Un billete a Chatanooga” que, con mucha simpatía, buen rollo y tono distendido, mis amigos Ana Cirujano y Pablo Moratinos tienen a bien grabar en riguroso directo los lunes a las 10:30h de la mañana. Y aunque no puedo asistir en directo a la emisión del programa en algunas ocasiones debido a mis obligaciones laborales, siempre que puedo, lo escucho o veo después en diferido.

Leer Más >>
"La Caza", una novela de Joseba Alfaro

Leyendo: La Caza, de Joseba Alfaro

La semana pasada terminé de leer “La Caza”, una novela de Joseba Alfaro, un prometedor escritor y director de cine que viendo cómo en tiempos de pandemia, cuando empezó el confinamiento allá por marzo del año pasado, no podía contar historias de la forma a la que nos solía tener acostumbrados, decidió ponerse a escribir esta novela repleta de adrenalina, acción y demasiadas coincidencias con la realidad.

Leer Más >>
Leyendo: Los Dioses Muertos. Canto de Prometeo.

Leyendo: Los Dioses Muertos. Canto de Prometeo

Hace tiempo os hablé de José Antonio Fideu, autor albaceteño de fantasía y ciencia ficción; y de su libro “Los últimos años de la magia”, que fue premio Minotauro 2016, galardón más alto que puede obtener un libro del género fantástico en España. Ayer terminé de leer su última novela “Los Dioses Muertos. Canto de Prometeo” y aún siento los efluvios que emanan de la sangre de Ares, gracias a una novela que me ha hecho disfrutar y fantasear a partes iguales.

Leer Más >>
Leyendo: "El Problema de los Tres Cuerpos" de Cixin Liu, 2006

Leyendo: “El Problema de los Tres Cuerpos” de Cixin Liu, 2006

Hace unas semanas terminé de leer (bueno, más bien escuchar vía Audible) el último de los tres volúmenes de la Trilogía “El recuerdo del pasado de la Tierra” o mejor conocida por “El Problema de los Tres Cuerpos” con el título “El fin de la muerte”, y he necesitado unos pocos días para reposar y trasegar estas novelas que, si bien en algunos pasajes me ha llegado a resultar soporíferas, en una visión general me han gustado mucho, y me han mantenido enganchado.

Leer Más >>
Vídeo demostrativo de net2rent

Presentacion de net2rent Software Alquiler Vacacional

Os invito a ver un trabajo en el que llevamos liados unas semanas en net2rent. Un vídeo demostrativo de nuestra plataforma para gestionar alojamientos turísticos. Mi compañero Alex Peñuela, Sales & Marketing de net2rent, es el encargado de presentar en este vídeo las principales funcionalidades de net2rent, y yo he estado a cargo de la grabación y la post-producción. ¡Espero que os guste el resultado!

Leer Más >>
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 >>

Francisco Moreno Sánchez-Aguililla - Diseñador Gráfico, Web (UI/UX) y Multimedia
www.fcomoreno.net - 2004-2021 - ¡17 años online!

Volver  a arriba