Los diseñadores visuales trabajamos día a día en proyectos grandes (portales de noticias, de ecommerce, transaccionales, comunidades online, etc) que se prolongan a lo largo del tiempo e implican cientos de plantillas de diseño. En este tipo de proyectos el mayor reto (aparte de tener paciencia y no aburrirte) es mantener la coherencia de la línea gráfica a lo largo de todas y cada una de las plantillas, más aún si se forma parte de un equipo de diseño que trabaja en paralelo.

El problema

Es fácil ser constante y mantener invariables los elementos más evidentes como la cabecera, el pie, la navegación… que al final vamos duplicando de un PSD a otro. Más complicado sin embargo es ser igual de rígido con los iconos, tamaños y colores de botones, tamaños y estilo de textos. etc. Más de una vez he terminado un proyecto y el maquetador ha tenido que indicarme amablemente que había definido 10 estilos de módulos para el mismo contenido en diferentes maquetas.

Los problemas que surgen de una falta de coherencia son múltiples y comprometen la calidad del resultado final

• Dificulta incorporar un nuevo diseñador al proyecto o que el equipo trabaje en paralelo en varias plantillas. Las dudas sobre qué solución gráfica aplicar a cada componente surgen continuamente.
• Aumenta el tiempo que se tarda en diseñar cada plantilla, pues olvidamos o ignoramos que ya se ha definido un elemento y nos encontramos reinventando la rueda una y otra vez
• Afecta a la calidad del código HTML/CSS pues se necesita declarar nuevos estilos para elementos que no comparten el diseño. El código crece de manera exponencial y acaba repercutiendo en los tiempos de carga de la web

Si tienes suerte y el proyecto se desarrolla “in house” pueden detectarse a tiempo las incoherencias y enmendarse directamente en maquetación aunque evidentemente esto provoca un retraso en los tiempos planificados. Por desgracia es algo que no siempre es posible.

La solución

La solución más sencilla a este problema es mantener un único archivo con todos los patrones de diseño que van surgiendo a lo largo del proyecto. Aunque supone un esfuerzo adicional a la hora de afrontar el trabajo nos ayuda principalmente en dos aspectos:

1. Actúa como memoria colectiva (y propia) del proyecto, reduciendo las desviaciones de la línea gráfica
2. Seremos más reacios a desarrollar una nueva solución gráfica si hacerlo implica tener que trasladarla a este archivo. En este caso la pereza nos hace mejores diseñadores.

Otras ventajas que obtenemos manteniendo este archivo son

• Funciona como una biblioteca de todos los elementos de diseño, agilizando la creación de nuevas plantillas que se pueden montar como si de un puzzle se tratara
• Ayuda a definir y unificar los estados de interacción (rollover, pulsado, activo, desplegado…) de todos los elementos. Un requerimiento en cualquier proyecto interactivo que suele olvidarse y resolverse de mala manera en el último momento.
• Facilita la tarea de los maquetadores que pueden ver de un vistazo todos los elementos que van a tener que definir en el código y qué estilos pueden ser reutilizados sin tener que bucear en distintos archivos y capas ocultas.
• Agiliza el desarrollo de una guía de estilo, un documento imprescindible para desarrollar nuevas plantillas o secciones, mantener la calidad del diseño a lo largo del tiempo y más aún si el proyecto será mantenido por el cliente.

Aunque lo más cómodo es comenzar con este archivo al inicio del proceso de diseño ningún momento es tarde para empezar a utilizarlo. Y vosotros ¿qué métodos empleais para no perderos a lo largo de un proyecto?

Recursos

• Modular Web Design: Creating Reusable Components for User Experience Design and Documentation
• Standards, Reuse, Consistency, & Libraries

El mejor ejemplo que he visto nunca de este tipo de archivo, por Yaron Schoen para Kontain

Etiquetas: coherencia, diseño, grandes proyectos, metodología, plantillas, proyectos, psd, trabajo, ui