Los clientes y los diseñadores no siempre hablan el mismo idioma. Pero con estas tres herramientas, podrás traducir la marca y la visión de tus clientes en estilos visuales concretos que no solo te ayudarán a obtener su aprobación, sino que también acelerarán tu proceso de desarrollo.
Cada herramienta no se centra en el diseño de una página web completa, sino en elementos de diseño específicos que puedes aplicar directamente a tu desarrollo final o usar como inspiración. Esto ayuda a que los clientes se concentren en definir el lenguaje visual de su sitio web. De este modo, cuando empieces a maquetar las páginas, podrás centrarte en detalles de mayor nivel, como la experiencia de usuario y el flujo, en lugar de perderte en los detalles visuales. Y para ayudarte a empezar, hemos incluido una plantilla gratuita de estilo responsive que puedes usar como quieras.
¿Qué tal si conocemos estas herramientas?
1. Style tiles (mosaicos de estilo)
La diseñadora Samantha Warren escribe que los style tiles “ayudan a formar un lenguaje visual común entre los diseñadores y las partes interesadas, y sirven como catalizador para debatir sobre las preferencias y objetivos del cliente”. Lo logran creando un punto intermedio entre los moodboards, que a muchos clientes les parecen demasiado vagos, y los prototipos completos, dando a los diseñadores espacio para iterar ideas antes de comprometerse por completo con un enfoque específico.
La plantilla de style tile de Samantha ofrece espacio para:
- El logotipo del cliente
- Un titular (H1)
- Un subtítulo (H2)
- Enlace de texto
- Cuerpo de texto
- Botón
- Esquema de color
- Patrones/texturas
- Atributos de marca
A simple vista se nota que los style tiles mantienen la conversación en un nivel estratégico, sin dejar de ser prácticos. Los elementos de la plantilla de Samantha resultan especialmente útiles para sitios web con mucho texto, como un periódico: una vez aprobados, tendrás casi todo lo que necesitas.
Consejo profesional: Adapta tus style tiles al sitio que estés creando. El de Samantha es genial para un periódico, pero si trabajas, por ejemplo, en la web de un restaurante, quizás quieras incluir tratamientos de imagen para las fotografías de comida, estilos tipográficos para el menú, etc.
Ventajas de diseñar con style tiles
Claridad
Los «style tiles» (o paneles de estilo) ayudan a los clientes y a las partes interesadas a ver literalmente la estrecha relación entre abstracciones como los atributos de marca y los elementos de diseño concretos. Al observar los paneles de The Washington Examiner, resulta evidente cómo la tipografía y los colores manifiestan conceptos como «autoridad», «perspicacia» y «conservadurismo».
Practicidad
Como los paneles de estilo son, en esencia, solo muestras de elementos de diseño, mantienen a los revisores centrados en los detalles sin perder de vista el conjunto. Al mismo tiempo, facilitan la integración de esos detalles en el resultado final. Es decir, una vez que se ha aprobado el uso de Playfair Display como fuente para titulares, ya tienes luz verde para usarla en el diseño definitivo.
Independencia del dispositivo
Como dice la propia Samantha: «Los paneles de estilo no implican dimensiones ni dispositivos; solo que el diseño será digital». Esto te ayuda a evitar prometer funciones móviles que simplemente no son posibles, como la interacción de pasar página de un libro de Dan Mall (ver más abajo).
Basado en procesos
Los paneles de estilo tienen sentido como resultado del proceso de descubrimiento. Esto ayuda a los clientes y a las partes interesadas a entender cómo llegaste a este recurso y cómo ayudará a dar forma al diseño final.
Posibles desventajas de diseñar paneles de estilo
Me encantan los paneles de estilo, pero pueden generar algunos problemas que conviene tener en cuenta. Afortunadamente, una explicación clara de qué es el estilo y para qué sirve ayudará a evitar la mayoría de los inconvenientes.
Propensos al «Frankenstein»
Habrá quien intente combinar elementos de distintas versiones de tus paneles de estilo. Es cierto que es mucho más fácil crear un «Frankenstein» con paneles de estilo que con maquetas completas, pero el formato a veces parece fomentar esa clase de «improvisación».
Ambigüedad
No queda del todo claro cómo ciertos elementos de la plantilla, como los «Posibles patrones», podrían trasladarse al diseño final. Sugieren un nivel de fidelidad que los paneles de estilo intentan evitar, y he visto a clientes obsesionarse con ciertas características, dejando de lado los elementos más abstractos.
Demasiado «diseñados»
He oído hablar de clientes que confunden los paneles de estilo con maquetas reales y pasan por alto detalles sin etiquetar, como el fondo de acero cepillado del panel de arriba.
Plantilla de panel de estilo adaptable gratuita creada en Webflow
Nuestro compañero Mat Vogels ha creado esta práctica plantilla de panel de estilo y tablero de inspiración adaptable para que la uses en tus propios proyectos. Solo tienes que:
2. Personalízalo cambiando el logotipo y las imágenes, ajustando la tipografía y los botones, y actualizando las muestras de color
3. Añade tus imágenes a la plantilla del tablero de inspiración (mood board), o simplemente elimina el enlace si no estás creando uno para este cliente
4. Envíalo a tu cliente para recibir sus comentarios
Ten en cuenta que quizás quieras crear varias versiones alternativas de tus mosaicos de estilo para dar a los clientes una idea de la variedad de opciones. Solo asegúrate de explicarles claramente qué son tus mosaicos de estilo y qué tipo de comentarios te ayudarán a aprovechar al máximo los diseños.
2. Collages de elementos
El diseñador Dan Mall creó esta variante de los mosaicos de estilo de Samantha Warren debido a su pasión por el collage. Pero utiliza esta variante por algo más que motivos personales. Como señala en su publicación sobre el tema, el término "collage" aclara que:
Lo que estamos viendo no es un diseño final, sino un ensamblaje de piezas dispares sin una lógica u orden específico.
–Dan Mall, fundador de Super Friendly, cofundador de Typedia
Sus collages de elementos también encajan con su proceso de diseño. Comenta que a menudo tiene ideas repentinas, y el collage de elementos le permite capturarlas rápidamente sin tener que situarlas en un contexto más amplio. Suena genial, ¿verdad?
¿Ves cómo el collage de elementos captura detalles de diseño específicos de diversas formas, desde elementos aislados (como el botón) hasta otros en contexto (como el formulario)? Esa es una diferencia clave respecto a los mosaicos de estilo. El estilo de collage parece darle a Dan más flexibilidad para jugar con una idea e ilustrar sus diferentes estados, como ocurre con el botón.
Al fin y al cabo, se podría argumentar que un botón no es un diseño único, sino un diseño con al menos tres estados distintos: normal, al pasar el cursor y al hacer clic. Esto también permite a Dan introducir animaciones como un detalle de diseño, sin necesidad de crear un GIF animado o programar la interacción. Por supuesto, con Webflow, sería bastante sencillo hacer que ese botón fuera realmente interactivo.
Ventajas de los collages de elementos
Flexibilidad
Los collages de elementos te permiten visualizar una idea tal como te llega, y seguir esa idea hasta su conclusión lógica.
Especificidad
Los collages de elementos reflejan el entregable final (el sitio web), por lo que puedes añadir elementos digitales más específicos, como interacciones, formularios, botones, etc.
Concreción
Los collages de elementos te permiten mostrar hasta qué punto tus ideas de diseño están arraigadas en la propia marca. En los diseños de Dan para RIF, resulta evidente cuánto le inspiran los libros y la lectura: la interacción del botón parece pasar páginas, los fragmentos importantes de texto están resaltados en el clásico amarillo canario y los iconos parecen libros abiertos.
Posibles desventajas de los collages de elementos
Un paso demasiado lejos
Los collages de elementos se sitúan entre los mosaicos de estilo y las maquetas completas, extrayendo elementos de diseño del prototipo final, pero de una forma más desarrollada. Esto significa que hay más riesgo de perderse en los detalles y hacer un trabajo que terminará en la papelera (o en tu carpeta de descartes).
No son independientes del dispositivo
Como los collages de elementos son tan libres, es fácil tomar un camino que termine siendo demasiado específico para un dispositivo. Por ejemplo, la interacción del botón y el formulario en el collage de arriba están claramente enfocados al escritorio.
3. Moodboards
Posiblemente la herramienta más antigua para establecer un lenguaje visual con los clientes, los moodboards se han convertido en un recurso habitual para muchos diseñadores, incluso si no tienen intención de compartirlos con clientes o interesados. Esto se debe a que son una forma fantástica de capturar inspiración e influencias.
Lo mejor de todo es que los moodboards no requieren mucho trabajo. Entre Pinterest y un montón de aplicaciones web para crear moodboards, ni siquiera necesitas hacer capturas de pantalla o abrir una herramienta de diseño. Además, son muy divertidos de hacer, te permiten llenar tu arsenal de inspiración, estar al tanto de las tendencias actuales y tomarte un descanso que sigue siendo parte del trabajo.
Los moodboards te ayudan a entender el estilo visual (o estilos) que prefieren los clientes, el ambiente que quieren crear, e incluso pueden darte algunas metáforas de diseño concretas con las que trabajar, ya sean tarjetas al estilo de Google Now, ilustraciones hechas a mano o tipografía suiza.
Como los moodboards son tan conocidos, vamos a romper con el enfoque de pros y contras y nos centraremos en algunos consejos para utilizarlos.
Consejos para crear moodboards
Crear moodboards es súper sencillo, pero hay formas de sacarles el máximo partido. Estos consejos te ayudarán.
No diseñes tus moodboards
Los moodboards deben presentar fuentes de inspiración externas; cualquier elemento de diseño que añadas solo servirá para distraer y posiblemente confundir a tus clientes.
Lo analógico también cuenta
El mundo está lleno de trabajos de diseño increíbles, e importar elementos de una revista impresa, un periódico, una valla publicitaria o lo que sea puede ayudar a la gente a pensar "fuera del modelo de caja".
Usa las palabras
Recuerda que el texto es un elemento clave de cualquier diseño, y puedes usar lo que otros han escrito para inspirar la voz de tu propio proyecto. Además, si tu cliente ha definido los atributos de su marca, puedes vincular estos términos a elementos de diseño tal como lo haces con los mosaicos de estilo.
¿Cómo logras estar en sintonía con tus clientes?
¿Utilizas entregables de diseño como estos para ayudarte a ti y a tus clientes a estar en la misma página? ¡Cuéntanos tus experiencias en los comentarios!
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
