Un marco básico de diseño visual

El diseño visual como un conjunto de habilidades ha pasado por muchas etapas. Para aquellos nuevos en la industria, es el artefacto que nos atrajo a muchos de nosotros en el papel. Para los diseñadores experimentados, es la expresión física del trabajo reflexivo del producto. Si bien su importancia es polémica, los aspectos no son mutuamente excluyentes. El diseño visual es complejo. Debe entenderse por su amplitud, complejidad y flexibilidad.

Necesitas un buen ojo para el diseño visual.

El diseño visual se combina con el concepto de gusto: la capacidad de "saber" lo que es bueno o no. Es un rasgo que sigue a la mayoría de los diseñadores en fiestas familiares cuando se espera que decoren la sala de estar de alguien o tomen la foto familiar.

El gusto es comúnmente considerado como una disposición, un talento. Como resultado, las buenas habilidades visuales se extienden a ambos lados de esta línea, como resultado de "tener un buen ojo" o años de práctica.

Debatir si el talento es real o no es una conversación más amplia. Sin embargo, lo que es cierto es que partes del kit de herramientas de diseño visual pueden ser objetivas. Este marco tiene como objetivo clasificar estos aspectos en tres dimensiones, para que podamos mejorar nuestras habilidades visuales y crear un lenguaje para hablar mejor sobre ello.

Entonces, ¿cómo podemos redefinir el diseño visual?

Un buen diseño transmite exactamente lo que el diseñador pretendía. Para abordar un mejor diseño visual, veamos cómo criticamos el trabajo visual. No preguntamos "¿se ve bien?". Comparamos la interpretación del usuario de una interfaz con lo que se pretendía. Preguntamos cómo se relaciona el trabajo con los resultados más importantes para el producto y sus usuarios. Decimos que las interfaces se ven abarrotadas o desconocidas.

Podemos resumir que el diseño visual hace lo siguiente:

  1. Comunica y organiza información importante y compleja.
  2. Alienta comportamientos intencionados y devalúa a los demás.
  3. Mantiene legibilidad y familiaridad.

Por lo tanto, podemos asociar estos objetivos a tres preguntas que podemos hacer al evaluar el trabajo visual.

  1. ¿Es útil? ¿El diseño proporciona valor o utilidad al usuario?
  2. ¿Está limpio? ¿El diseño fomenta un comportamiento previsto? ¿Sigue una narrativa que tiene sentido?
  3. ¿Es agradable? ¿El trabajo visual se siente nativo del producto en el que está trabajando? ¿Son familiares los elementos? ¿Se siente pulido?

1. ¿Es útil?

Los productos utilizan representaciones visuales para transmitir información o funciones. El gancho de una manija de la puerta permite un tirón o un tirón. Las crestas en el almacenamiento de la batería de un control remoto permiten un arrastre.

Las interfaces digitales también tienen posibilidades. De hecho, comenzamos con posibilidades físicas similares, usando sombras duras y brillo en los botones y la iconografía que se parecía a los objetos físicos. Con el tiempo, los biseles desaparecieron y los botones se volvieron planos. Evolucionaron en una nueva familia de posibilidades que diferían en apariencia, pero presentaban una utilidad similar.

Diseño para la función de mapas de utilidad para el formulario. Primero observamos las heurísticas que mejoran la rapidez con la que recordamos lo que hará algo con solo mirarlo.

En este ejemplo, aquí hay posibilidades comunes en las interfaces de usuario digitales. El texto transmite información de consumo. Los botones transmiten las acciones que realizan los usuarios. La navegación transmite cómo los usuarios pueden moverse a través de una aplicación. Por último, también puede tener posibilidades para expresiones visuales complejas. Un actor es una representación de una persona, que es común en todos los productos que usamos todos los días.

Si bien las posibilidades mejoran la forma en que extraes las expectativas, solo te llevan a la mitad. A nivel granular, hay detalles que articulan mejor su interfaz.

  • Si un botón realiza una función específica, debe elegir un idioma que describa mejor la acción.
  • Si una etiqueta de texto tiene un estado único (es decir, mensaje no leído), puede usar color o peso para diferenciarlo.
En este ejemplo, Agregar al carrito y Comprar ahora permite a los usuarios avanzar a través de un canal de compras. Sin embargo, el lenguaje implica dos resultados diferentes. Agregar al carrito permite a los usuarios tomar decisiones más tarde y comprar varios artículos al mismo tiempo, como en una tienda de ropa. Comprar ahora permite a los usuarios finalizar una compra como cuando compra un boleto de avión.

2. ¿Está claro?

Barra de herramientas de Microsoft Word 2010

Hace 10 años, herramientas como Microsoft Word y Adobe Photoshop proporcionaron buenos precios dentro de sus productos. Tenían botones obvios, etiquetas e iconografía. Acomodaron diferentes casos de uso con varias características. Sin embargo, algunas características apenas se usaban, pero otras se usaban todo el tiempo.

Los diseños visuales, ahora, son reductivos y obstinados. Permiten que los problemas de las personas y los objetivos comerciales fortalezcan acciones e información específicas. Mapean componentes a modelos mentales intuitivos, pero también fomentan modelos mentales que son beneficiosos para el producto.

En esencia, la claridad entrelaza las posibilidades en una narrativa. Las narrativas le permiten comprender más claramente el flujo de una interfaz y la intención del producto. Algunos de los más comunes provienen de la Psicología Gestalt.

  1. Prominencia: use tratamientos visuales más fuertes para hacer que los componentes se sientan más importantes y tratamientos más livianos para aquellos que son menos.
  2. Proximidad: coloque el contenido relacionado más de cerca.
  3. Similitud: mantenga similitudes entre los componentes que tienen un comportamiento similar.
  4. Cierre: Adjunte componentes relacionados.
  5. Continuidad: coloque el contenido linealmente (por ejemplo, en un feed) para mostrar similitud en varios componentes.
Este es un ejemplo de prominencia. Toma el componente básico de un botón, pero luego usa un relleno de fondo pesado en comparación con un contorno claro. Ambos, llaman la atención sobre lo que probablemente haría un usuario y lo que el producto quiere que haga: completar una transacción.

3. ¿Es agradable?

Los componentes útiles que se agrupan de manera clara transmiten una función y una opinión de lo que un usuario debería estar haciendo. Nuestros cerebros procesan esa información en cada caso. Recupera ejemplos similares de interfaces pasadas, y buscamos patrones y aquellos que los rompen, cada uno de los cuales hace que nuestro cerebro procese más energía. Muchos de estos momentos se manifiestan como frustración o confusión. También vemos estos problemas en la vida real, cuando hay una pequeña mancha en la cara o cuando el cabello está fuera de lugar. En una interfaz, si bien no podemos identificar explícitamente la diferencia entre una fuente de 24pt y una de 25pt, podemos detectarla. No podemos discernirlo exactamente, pero nuestro cerebro sabe que algo se siente mal.

Para diseñar experiencias visuales agradables, necesitamos establecer reglas reductivas y significativas sobre lo que es diferente y lo que es similar para crear patrones que sean simples, reconocibles y consistentes.

¿Cómo podemos mostrar la diferencia?

En psicología, la diferencia justamente notable (JND) es la cantidad de cambio para que una diferencia sea notable. Hay un valor JND para notar un peso más pesado o notar cuando un color tiene un tono diferente. Si bien podemos crear cambios de tamaño de paso para el tamaño y el color que son ligeramente distintos, todavía queremos enfatizar la distinción sin exagerar.

Los diferenciadores visuales deben ser modestos y significativos. ¿Realmente necesitamos otro tipo de letra para indicar contenido menos importante? Probablemente no. ¿Necesitamos usar una foto de perfil circular y una cuadrada en todo el producto? Probablemente no. Con demasiados diferenciadores visuales, las señales visuales son más difíciles de notar y atribuir significado.

Este es un ejemplo de una disposición reductora de tratamientos de texto y colores. Cada tamaño de paso debe ser distinto y único y atribuir un cierto significado.

¿Cómo podemos mostrar similitud?

Cuando escribe en papel de hojas sueltas, puede escribir fácilmente en la línea siguiente sin siquiera mirar. Las líneas usan un espaciado constante para reducir el esfuerzo de encontrar la siguiente línea, creando un ritmo visual. Los productos digitales hacen lo mismo. Crean una expectativa repitiendo elementos visuales y organizaciones como colocar una imagen de perfil en la parte superior izquierda de los tipos de contenido.

La similitud, en general, se puede atribuir a los diseñadores que usan tratamientos similares en formas simples como dos tamaños de encabezado diferentes para secciones y subsecciones. Pueden crear los mismos comportamientos esperados para formas complejas como personas y empresas.

Incluso en un nivel granular, también puede ser tan simple como usar siempre rojo cuando hay un error, o usar un tratamiento consistente para información sobre herramientas y texto educativo. También puede usar reglas de espaciado consistentes entre elementos.

Arriba hay un ejemplo de un tratamiento visual que utiliza un tamaño de paso de 4 puntos para crear márgenes y relleno entre elementos. Le impide ser arbitrario, pero también le da a su producto espacios en blanco consistentes.

Poniendo todo junto

Ningún principio puede vivir sin los demás. Si bien no es exhaustivo, aborda grandes problemas con el diseño visual a un nivel novato. Combate el impulso de llenar el espacio negativo con información inútil o de crear nuevos paradigmas visuales "porque se ve bien". Advierte contra la sobrecarga de decisiones al dar a muchas acciones el mismo peso. También fomenta la consideración y la coherencia al aplicar hexadecimales, tamaño de fuente y espaciado.

El marco de tres pasos te obliga a recorrer cada principio y a profundizar. Le permite identificar en qué parte del diseño visual es más débil y permite que otros critiquen su trabajo de manera más precisa. Todos estamos tratando de mejorar, pero solo necesitamos el mismo vocabulario para hacerlo. Entonces, la próxima vez que esté evaluando el trabajo visual, haga las preguntas:

¿Es útil? ¿Está limpio? ¿Es agradable?

___

Los marcos no prescriben lo que es correcto, sino que crean un vocabulario que alinea los conceptos que todos usamos pero que no etiquetan. Todos tenemos alguna opinión sobre lo que significa que el trabajo visual sea útil, claro o agradable. Por lo tanto, si no está de acuerdo, desempaquete sus definiciones, comience una discusión y alineemos. Cuanto más rápido podamos encontrar los puntos en común, más fácil será desempaquetar las verdades y más personas podremos entrenar para construir mejores experiencias.

¡Gracias a Brad Birdsall por sus pensamientos y comentarios!