La guía del diseñador web para diseñar mosaicos

Los mosaicos de estilo son una referencia visual al lenguaje de diseño de un sitio web (u otro producto de diseño). Ayudan a contar una historia a través de fuentes, colecciones de colores y estilos, y cuando se ven en combinación con wireframes, mapas del sitio y otros elementos de la interfaz de usuario, definen esa historia de una manera accesible y amigable para el cliente. En este artículo explicaré cómo sacar el máximo partido a esta práctica técnica.

01. ¿Qué contienen los mosaicos de estilo?

Un mosaico de estilo exitoso debe contener elementos de interfaz de usuario de muestra, definir un esquema de color, mostrar cómo se utilizarán los principios del diseño tipográfico y demostrar la relación entre la marca del cliente y la solución visual propuesta. Por ejemplo, si un cliente ha utilizado las palabras 'confiable' o 'confiable' para describir su negocio, el mosaico de estilo debe representar esto visualmente.

Sobre todo, los mosaicos de estilo ofrecen un punto de partida para discutir y aclarar los objetivos comerciales y las preferencias personales del cliente.

02. Cuándo usar mosaicos de estilo

Los mosaicos de estilo ofrecen un punto de partida flexible para ayudar a definir cómo se verá un sitio web, de una manera accesible que los clientes puedan entender. Piense en ellos como algo entre un tablero de humor y una maqueta: ayudan a definir y comunicar cómo se aplicará un estilo visual en un sitio web, incluidas las interfaces de usuario orientadas a dispositivos móviles y de escritorio.

Puede usarlos en lugar de las primeras maquetas tradicionales, generando ideas y comentarios del cliente para ayudar a informar el enfoque de diseño final. En Samantha Warren's Una lista aparte En este artículo, describe cómo el proceso de mosaico de estilo ayuda a 'desentrañar la pasión detrás de una marca, revelando pepitas de bondad descriptiva mientras conecta al cliente con el proyecto'.

03. ¿Qué aspecto tienen los mosaicos de estilo?

Azulejos estilo Washinton Examiner 1

Imagen cortesía de Phase2 Technology

Azulejos estilo Washinton Examiner 2

Imagen cortesía de Phase2 Technology

Azulejos estilo Washinton Examiner 3

Imagen cortesía de Phase2 Technology

No hay una forma determinada de que se vean los mosaicos de estilo. La clave es asegurarse de no confundirlos con los moodboards, que son insuficientes para establecer completamente un lenguaje visual, sin ir demasiado lejos en el sentido contrario hacia una maqueta de diseño completo.

Vea los ejemplos anteriores de Phase2 Technology, creados mientras trabajaba en un nuevo sitio web para el sitio de la campaña Washington Examiner 2012.

04. Cómo utilizar correctamente los mosaicos de estilo

Una vez que comprenda los principios de los mosaicos de estilo, deben encajar perfectamente en su proceso de diseño. Por lo general, se generarán antes en el ciclo de vida del diseño de lo que podría haber creado sus primeras maquetas y, como resultado, le permitirán obtener comentarios antes. Siga los cuatro pasos siguientes para poner Style Tiles en su flujo de trabajo:

Escuche a su cliente

Azulejos de estilo 1

Imagen cortesía de https://twitter.com/heyitsgarrett

Reúnase con su cliente al comienzo de su proyecto y recopile tanta información relevante como sea posible. A algunos diseñadores les puede resultar más fácil realizar entrevistas individuales con las partes interesadas, mientras que otros preferirán una reunión de grupo; Haz lo que te funcione. Asegúrese de hacer las mismas preguntas centrales a todos los tomadores de decisiones y partes interesadas clave.

Si ayuda, puede crear un cuestionario para sus clientes antes de la primera reunión del proyecto. Si tiene dificultades para saber qué preguntas debería hacerle a su cliente, StyleTil.es El sitio web destaca algunos recursos útiles, incluidos los de Andy Rutledge y Kim Cullen .

De Samantha Una lista aparte El artículo también ayuda a definir algunas técnicas de interrogatorio útiles para aprovechar al máximo estas primeras reuniones. Fundamentalmente, necesita recopilar adjetivos para describir de manera útil la historia que sus clientes quieren retratar a través de su sitio web.

Utilice un marco de diseño para interpretar el resumen

Azulejos de estilo 2

Imagen cortesía de https://twitter.com/heyitsgarrett

Usando los adjetivos que anotó en el primer paso, cree un conjunto agregado para identificar temas en el lenguaje de los adjetivos. Aplique estos temas a su marco de diseño, utilizando criterios de diseño como armonía y unidad para tomar decisiones sobre los elementos del diseño y su representación visual de la historia. No olvide utilizar cualquier lenguaje visual, de escritura a mano o de marca existente que ya esté en su lugar para ayudar a contextualizar el resumen de diseño y su respuesta.

Definir el lenguaje visual

Azulejos de estilo 3

Imagen cortesía de https://twitter.com/heyitsgarrett

Con la información que reunió en el paso 01 y la salida generada a través de su interpretación en el paso 02, determine los temas generales y comience a combinarlos con dispositivos estilísticos. Genere un mosaico diferente para cada interpretación visual que se le ocurra. Los mosaicos de estilo completados le permitirán establecer rápidamente si está en la misma página que su cliente desde una perspectiva de lenguaje visual.

El sitio web styletil.es, creado por Samantha Warren, proporciona una útil plantilla PSD para que pueda descargar y utilícelo como punto de partida para la salida de mosaicos de estilo.

Iterar hasta acordar el estilo

Azulejos de estilo 4

Imagen cortesía de https://twitter.com/heyitsgarrett

Trabaje con su cliente para realizar cambios en el mosaico de estilo. Debido a que está iterando fuera del contexto del diseño final del sitio web, puede concentrarse en garantizar que su enfoque estilístico continúe reflejando los objetivos comerciales y los objetivos de diseño.

05. ¿Deben los mosaicos de estilo reemplazar las maquetas?

Azulejos de estilo: reemplazo de maquetas

En lugar de crear maquetas al comienzo de un proyecto de diseño, cree mosaicos de estilo, argumenta Samantha Warren

Es un enfoque común al comienzo de un proyecto de diseño para producir maquetas de páginas, pero si alguna vez ha tenido que negociar sobre un híbrido, que comprende elementos de dos o más maquetas y compromete el enfoque de diseño, usted ' Estaremos familiarizados con la frustración que puede traer el uso de maquetas al principio del proceso de diseño.

Desde la perspectiva del cliente, una maqueta representa una solución de diseño completa, pero como suele ser la primera vez que ven su interpretación del informe de diseño, es comprensible que identifiquen los elementos que les gustan y los que no. También es una conclusión natural que los comentarios que reciba lo obligarán a reunir elementos dispares de las diversas maquetas, lo que lleva a lo que Samantha Warren califica como un Solución 'Franken-comp' .

Las maquetas pueden parecer una forma simple y obvia de definir cómo un proyecto puede iniciar el proceso de pasar del resumen de diseño a su finalización. Pero los mosaicos de estilo pueden ser una forma más inteligente de hacer las cosas, obtener comentarios y definir un lenguaje visual en colaboración con su cliente desde el principio.

Esto puede ayudar a evitar la sensación de frustración y decepción al tener que ensamblar una maqueta final de partes individuales de composiciones completamente desconectadas, y ayuda a mantener al cliente completamente comprometido y comprometido con el proceso de diseño.

06. Dónde aprender más

Palabras : Sam Hampton-Smith

¿Como esto? ¡Lee esto!

¿Qué piensas? ¿Darás una oportunidad a los mosaicos de estilo o te quedas con las maquetas de páginas tradicionales? Háganos saber sus puntos de vista en los comentarios a continuación ...