Mosaicos de Estilo – Un proceso de diseño visual para clientes y la web responsiva

¿Qué son los Mosaicos de estilo?

Ilustracion que son los mosaicos de estilo

Los mosaicos de estilo son un documento de diseño entregable que contiene fuentes, colores y elementos de interfaz que comunican la esencia de una marca visual para la web.

Ayudan a formar un lenguaje visual común entre los diseñadores y las personas interesadas, además de proporcionar un catalizador para el debate en torno a las preferencias y objetivos del cliente.

Los mosaicos de estilo son similares a las muestras de color de las pinturas y las muestras de telas con las que un diseñador de interiores obtiene la aprobación del cliente antes de diseñar una habitación. Un diseñador de interiores no diseña tres habitaciones diferentes para un cliente en la primera reunión de arranque, entonces, ¿por qué los diseñadores web diseñan tres maquetas de página web diferentes?

Preséntale al cliente opciones de interfaz sin hacer la inversión en múltiples maquetas de photoshop.

¿Cuándo utilizar los mosaicos de estilo?

Los mosaicos de estilo son para cuando un tablero de concepto visual (moodboard) es demasiado vago y una composición es demasiado literal. Los mosaicos de estilo establecen una conexión directa con elementos de interfaz reales sin definir la composición general. Funcionan bien para clientes que tienen marcas establecidas y necesitan trasladarlas fácilmente a la web. Aunque la palabra “concepto visual” a menudo se asocia con el diseño de imagen gráfica e identidad, se eligió la palabra “estilo” para reflejar las “hojas de estilo en cascada” y reforzar que los mosaicos de estilo son específicos del diseño Web.

Escala de fidelidad de entregable de diseño visual

Ilustracion escala de fidelidad de entregables

¿Cómo utilizar los mosaicos de estilo?

Haz de los mosaicos de estilo una herramienta integrada en tu proceso de diseño visual para ayudar a la comunicación equipo-cliente. Así es como yo lo hago:

Escucha

Escucha

Parece algo simple, pero es más fácil salir por la puerta diciéndole a tu cliente lo que piensas que ellos necesitan. Tus clientes tienen una cantidad inestimable de información. Todo lo que tienes que hacer es escuchar.

Realiza una reunión de diseño de arranque

Los diseñadores deben estar en cada reunión. Prepárate. Pídele a los participantes que completen una encuesta antes de la reunión o pídeles que te respondan a las preguntas todos juntos.

Haz preguntas

Ya sea para dársela a los participantes antes de la reunión o durante la misma, crea una encuesta con preguntas diseñadas para ellos. Luego, distribuye la encuesta, haz que los participantes la rellenen y consolida las respuestas.

Interpreta

Interpreta

Consolida adjetivos del proceso de respuestas, identifica temas y ordena las semejanzas.

Desglosa las opiniones del cliente

Interpreta cómo los adjetivos y temas que has descubierto se traducen en principios de diseño como el balance y el énfasis. Eso te ayudará a tomar decisiones sobre cómo utilizar los elementos de diseño. El objetivo final es proporcionar las pistas visuales sutiles correctas que guían las suposiciones subconscientes humanas hacia los adjetivos y los temas deseados.


Elementos de diseño

  • Línea
  • Color
  • Forma
  • Figura
  • Patrón
  • Espacio
  • Textura

Principios del diseño

  • Unidad
  • Armonía
  • Balance
  • Ritmo
  • Énfasis


Define un lenguaje visual

Define

Este es el proceso real de composición del mosaico de estilo. Determina los temas usando los adjetivos consolidados y comienza a relacionarlos con los estilos. Los mosaicos de estilo le dan al cliente un punto de referencia para determinar que tanto tú como ellos están en la misma página.

¿Buscando la plantilla?

Aquí tienes una plantilla para iniciarte con los Mosaicos de Estilo, aunque seguramente vas a querer personalizarla.

Descargala en formato Photoshop | Fireworks | Ilustrator | SVG | EPS

Repite

Repite

Hacer cambios al estilo fuera del contexto de la composición toma menos tiempo y te permite trabajar más rápido. Presentar múltiples mosaicos te da información para trabajar que puede influir en la evolución de un mosaico.

Naturaleza humana

Es naturaleza humana combinar opciones. Combinar mosaicos de estilo fomenta un proceso que permite una evolución de elementos estilísticos sin comprometer los objetivos de diseño. Hacer rondas de mosaicos de estilo es una manera más fácil y directa de refinar un diseño visual, haciéndolos una buena opción para llegar a la meta final más rápido.

Usa mosaicos de estilo cuando necesites lo siguiente:

Ejemplos

Ver ejemplo 1 en grande Ver ejemplo 2 en grande Ver ejemplo 3 en grande Ver ejemplo 4 en grande

Sitio de la Campaña de 2012 de The Washington Examiner Diseño de Phase2 Technology

Diseño responsivo y Mosaicos de estilo

Ethan Marcotte se refiere a las composiciones estáticas durante el proceso de diseño responsivo como un “catálogo de suposiciones”. Los mosaicos de estilo son el complemento perfecto para ese catálogo, ya sea que se usen en lugar de las composiciones o para reforzar los temas visuales. Los mosaicos de estilo no implican dimensiones ni dispositivo, sólo que el diseño será digital.

Además de los mosaicos de estilo, las “Guías de Estilo de Componentes” pueden ayudar en la realización de un estilo particular a través de una funcionalidad específica sin diseñar “páginas” web completas. Estas guías son muy útiles para los diseños responsivos en un amplio número de dispositivos y para implementar sistemas de diseño para una plataforma CMS. Yesenia Pérez-Cruz tiene un gran artículo acerca de las Guías de estilo de componentes en http://cognition.happycog.com/article/sweet-systems.

Desarrolla un sistema de diseño en lugar de diseñar páginas de ancho fijo.

Este artículo es la traducción al español de http://styletil.es/ [inglés] de Samantha Warren con ilustraciones de Garrett Miller

Pásalo en: Twitter Facebook Google+

Coméntalo