3 herramientas para impulsar su proceso de diseño

Cada una de las herramientas se enfoca no en el diseño de una página web completa, sino en elementos de diseño específicos que puede aplicar directamente a su construcción final o utilizar como inspiración. Eso hace que los clientes se centren en ayudarlo a desarrollar un lenguaje visual para el diseño de su sitio web. De esa manera, cuando comience a construir las páginas del sitio web, puede enfocarse en detalles de nivel superior, como la experiencia y el flujo del usuario, en lugar de atascarse en los detalles visuales. Y para ayudarlo a comenzar con ellos, hemos incluido una plantilla de mosaico de estilo receptivo gratuita que puede usar como desee.

Conozcamos las herramientas, ¿de acuerdo?

1. Herramientas Style tiles

Herramientas
Los mosaicos de estilo le permiten detallar elementos de diseño visuales.

La diseñadora Samantha Warren escribe que los mosaicos de estilo “ayudan a formar un lenguaje visual común entre los diseñadores y las partes interesadas y proporcionan un catalizador para las discusiones sobre las preferencias y objetivos del cliente”. Lo hacen creando un punto medio entre los paneles de humor, que muchos clientes encuentran demasiado vagos, y maquetas completas, dando a los diseñadores espacio para iterar sobre las ideas antes de enfocarse en un enfoque específico.

La plantilla de mosaico de estilo de Samantha ofrece espacio para:

  • El logo del cliente
  • Un titular (H1)
  • Un subtítulo (H2)
  • Enlace de texto
  • Copia de cuerpo
  • Botón
  • Esquema de colores
  • Patrones / texturas
  • Atributos de marca

Puede ver de un vistazo que los mosaicos de estilo mantienen la conversación en un nivel alto, mientras se mantienen procesables. Los elementos de la plantilla de Samantha resultan ser unas herramientas particularmente útiles para un sitio web con mucho texto como un periódico; una vez que se apruebe, tendrá casi todo lo que necesita.

Consejo profesional: adapta tus mosaicos de estilo al sitio que estás creando. Samantha’s es ideal para un sitio de periódico, pero si está trabajando en, por ejemplo, un sitio de restaurante, es posible que desee incluir tratamientos de imágenes para fotografía de alimentos, estilos de tipo para el menú, etc.

Ventajas de diseñar en Style tiles

Claridad

Los mosaicos de estilo ayudan a los clientes y partes interesadas a ver literalmente la relación íntima entre abstracciones como los atributos de la marca y los elementos de diseño concretos. Cuando miras los mosaicos de The Washington Examiner, es obvio cómo la tipografía y los colores manifiestan ideas como “autoritario”, “perspicaz” y “conservador”.

Sentido práctico

Obviamente, las herramientas de mosaicos de estilo son solo elementos de diseño de muestra, por lo que mantienen a los revisores enfocados en los árboles, no en el bosque. Al mismo tiempo, facilitan el trabajo de esos árboles en el bosque. Es decir, una vez que haya finalizado la sesión en Playfair Display como fuente de título, puede usarlo en el diseño final.

Independencia del dispositivo

Como lo expresa la propia Samantha, “las losetas de estilo no implican dimensiones ni dispositivos; solo que el diseño será digital “. Eso le ayuda a evitar implicar que sucederá algo en el móvil que simplemente no puede, como la interacción del botón de giro de libros de Dan Mall (ver más abajo).

Basado en procesos

Los mosaicos de estilo tienen sentido como resultado del proceso de descubrimiento. Eso ayuda a los clientes y partes interesadas a comprender cómo llegó a este artefacto y cómo ayudará a dar forma al diseño final.

Posibles desventajas de diseñar mosaicos de estilo

Me encantan los mosaicos de estilo, pero pueden presentar algunos problemas que querrás tener en cuenta. Afortunadamente, una explicación cuidadosa de qué es el estilo y para qué sirve ayudará a evitar la mayoría de los problemas.

Propenso a Frankenstein

Algunas personas intentarán combinar elementos de diferentes versiones de sus mosaicos de estilo. Por supuesto, es mucho más fácil hacer un monstruo con estas herramientas si tus fichas de estilo que cuando consigues paletas de colores de web, pero el formato a veces parece alentar esa “improvisación”.

Vago

No está muy claro cómo ciertos elementos de la plantilla, como “Posibles patrones”, podrían traducirse en el diseño final. Indican un nivel de fidelidad que los mosaicos de estilo intentan evitar, y he visto a los clientes fijarse en ciertas características excluyendo los elementos más abstractos.

Demasiado “diseñado”

He oído que los clientes confunden los mosaicos de estilo con las maquetas reales y faltan detalles sin etiquetar, como el fondo de acero cepillado del mosaico de arriba.

2. Herramientas de Element collages

Element collages
Los collages de elementos le permiten explorar detalles visuales y de diseño de UX fuera del contexto de una página completa o diseño de sitio.

El diseñador Dan Mall creó esta variación de herramientas en los mosaicos de estilo de Samantha Warren debido a su amor por el collage. Pero usa esta variante por algo más que razones 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 más bien un conjunto de piezas dispares sin lógica u orden específico.

Fuente: Dan Mall, fundador de Super Friendly, cofundador de Typedia

Sus collages de elementos también se ajustan a su proceso de diseño. Él dice que a menudo tiene ideas en ráfagas, y el collage de elementos le permite capturar rápidamente esas ideas sin tener que ubicarlas en un contexto más amplio. Suena bien, ¿verdad?

¿Ves cómo el collage de elementos captura elementos de diseño específicos de varias maneras, desde aislados (como el botón) hasta contextuales (como el formulario)? Esa es una diferencia clave de 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 con el botón.

Después de todo, podría argumentar que un botón no es un diseño único, sino un diseño con al menos tres estados diferentes: normal, al pasar el mouse y al hacer clic. Esto también le permite a Dan introducir animaciones como un detalle de diseño, sin crear un GIF animado o codificar la interacción.

Ventajas de las herramientas de collages

Flexibilidad

Los collages de elementos le permiten visualizar una idea tal como se le presenta, y seguir esa idea hasta su conclusión lógica.

Especificidad

Las herramientas collages de elementos reflejan la entrega final, el sitio web, para que pueda agregar elementos digitales más específicamente, como interacciones, formularios, botones, etc.

Concreción

Los collages de elementos le permiten mostrar cuán profundamente se basan sus ideas de diseño en la propia marca. En los diseños de Dan para RIF, es muy obvio cuán inspirado está por los libros y la lectura: la interacción del botón parece pasar las páginas, las partes importantes de la copia se resaltan en amarillo canario clásico, y los iconos parecen libros abiertos.

Possible disadvantages of element collages

Un paso muy lejos

Los collages de elementos se interponen entre mosaicos de estilo y simulacros completos, abstrayendo elementos de diseño de la maqueta completa, pero de una manera más detallada. Lo que significa que hay más espacio para atascarse en los detalles y hacer un trabajo que terminará en su papelera (o archivo de deslizamiento).

No es independiente del dispositivo

Debido a que los collages de elementos son de forma libre, es fácil viajar por un camino en particular que podría terminar siendo demasiado específico para el dispositivo. Por ejemplo, la interacción del botón y la forma en el collage anterior obviamente están centrados en el escritorio.

3. Herramientas Moodboards

Moodboards
‍“Earthy Feminine” moodboard creado por Brianna Burton

Posiblemente una de las herramientas más antigua para establecer un lenguaje visual con los clientes, los paneles de humor se han convertido en una opción para muchos diseñadores, incluso si no tienen la intención de compartirlos con clientes o partes interesadas. Eso es porque son una excelente manera de capturar la inspiración y la influencia.

Lo mejor de todo es que las tablas de humor no requieren mucho trabajo. Entre Pinterest y un montón de aplicaciones web de estado de ánimo, ni siquiera necesita tomar capturas de pantalla o iniciar una herramientas de diseño. Además, son muy divertidos de construir, lo que le permite almacenar su arsenal inspirador, estar al tanto de las tendencias actuales y tomar un descanso que todavía está relacionado con el trabajo.

Moodboards lo ayuda a comprender los estilos visuales que les gustan a los clientes, el estado de ánimo que desean establecer e incluso puede darle algunas metáforas de diseño concretas para trabajar, ya sean tarjetas de estilo Google Now, ilustraciones dibujadas a mano o tipografía suiza.

Dado que los paneles de humor son tan conocidos, rompamos con el enfoque pro / con y sigamos con algunos consejos sobre el uso de paneles de humor.

Consejos para anotar

Moodboarding es súper simple, pero hay formas de aprovecharlos al máximo. Estos consejos te ayudarán.

No diseñe sus moodboards las herramientas necesarias

Moodboards debe presentar fuentes externas de inspiración: cualquier elemento de diseño que agregue distraerá y potencialmente confundirá a sus clientes.

Importancia de las herramientas

El mundo está lleno de asombrosos trabajos de diseño y la importación de elementos de una revista impresa, periódico, cartelera o lo que sea pueda ayudar a las personas a pensar “fuera de la caja (modelo)”.

Usa tus palabras

Recuerde que la copia es un elemento clave de cualquier diseño, y puede usar la escritura de otros para inspirar la voz de su propio proyecto. Además, si su cliente tiene atributos de marca definidos, puede vincular estos términos a elementos de diseño como lo hace con mosaicos de estilo.

¿Cómo llegas a la misma página con tus clientes?

Para Raiweb eres importante por eso queremos las mejores herramientas para ti, ¡Hagamos esto juntos!

¿Utilizas algunas Herramientas entregables de diseño como estos para ayudarlo a usted y a sus clientes a estar en la misma página? ¡Cuéntanos tus experiencias en los comentarios!

Deja un comentario