04 Principios de diseño visual
04.01 Peso visual: Contraste, profundidad y tamaño.
La idea de peso visual es muy intuitiva. Algunas cosas se ven más “pesadas” que otras en un layout, llaman más tu atención. Eso es importante como UX Designer.
Nuestro trabajo es ayudar a que los usuarios noten las cosas que importan y eso es tan importante como no distraerlos de sus objetivos.
Añadiendo peso visual a algunas partes de tu diseño puedes incrementar la probabilidad de que un usuario lo note y puedas cambiar la dirección en la que se mueven sus ojos.
Recuerda: el peso visual es relativo. Todos los principios de diseño visual se tratan de comparar un elemento del diseño con los que lo rodean.
Sin más preámbulo, les presentamos a los patitos de hule, las estrellas de este curso express:
Contraste:
La diferencia entre cosas claras y cosas oscuras se llama contraste. Mientras algo claro sea más diferente de algo oscuro, mayor es el contraste.
En UX, quieres darle a cosas importantes mayor contraste, como el pato del centro. En caso de una imagen clara, el pato oscuro destaca más, si fuera una imagen oscura un pato claro destacaría más. Si los patos fueran botones, la gente vería más el botón oscuro sobre botones que se ven iguales.
Profundidad y tamaño
En el mundo real, notamos cosas más cerca de nosotros sobre cosas más distantes.
En el mundo digital, cosas más grandes dan la impresión de estar más cerca, como el pato del centro; y algo que es más pequeño parece estar más lejos (cómo el patito borroso del fondo).
Si estos patos fueran todos del mismo tamaño, probablemente los verías de izquierda a derecha (asumiendo que lees en esa dirección).
Si usas efectos de difuminado (blur) o sombreado hace que la percepción de profundidad sea más real. El tamaño ayuda a crear esta ilusión aunque tu diseño sea “plano”.
Cómo regla, quieres que las cosas importantes sean más grandes que las que no son tan importantes. Esto crea una “jerarquía” visual en la página que la hace más fácil de leer rápidamente (escanear) y te ayuda a escoger lo que quieres que el usuario note primero.
Por eso “hacer el logo más grande” está mal, a menos que quieras que tus usuarios vean el logo de la página que están visitando en vez de comprar algo.
04.02 Color
Cómo diseñadores de UX generalmente hacemos wireframes en blanco y negro, y eso es bueno. Nos enfocamos en la función mientras que los diseñadores gráficos o de interfaz se fijan en el estilo.
Sin embargo, a veces el color es forma. Cómo en un semáforo o el sabor de una paleta que debe coincidir con su color… ya sabes, cosas importantes.
Significado:
En la primer imagen vemos tres patos: azul, amarillo y rojo. Qué bonitos :3
Estos patos tienen diferentes tonalidades y es fácil identificar lo que cada pato “significa”. Si los patos fueran botones, podrían ser “confirmar”, “cancelar” y “borrar” o si fueran indicadores de gasolina “lleno”, “medio lleno” y “vacío”. Si fueran una estufa podría ser “frío”, “tibio” o “caliente”. Los patos son iguales pero los colores cambian el significado.
Si no necesitas indicar algo así, deja que el diseñador escoja los colores, pero si es importante, es fundamental ponerlo en tus wireframes.
Avanzar o retroceder.
Otro punto a considerar es que los colores pueden ser “silenciosos” o “escandalosos”.
En la segunda imagen aparece un pato rojo con dos azules. El rojo da la impresión de estar más cerca ¿No? Pues no, no lo está. Algo como un botón de “comprar” debe tener un color que lo haga brincar de la pantalla, más gente hará clic en un botón que “brinque”
Por el otro lado, a veces queremos que algunas cosas queden detrás, que sean visibles pero no distraigan, como los dos patos azules. Pues hacer que “retrocedan”. Esto es bueno para algo como un menú que siempre está en pantalla. Si es algo que siempre te está “gritando” es innecesario y roba foco de cosas más importantes.
Mantén tus wireframe simples.
Wireframes coloridos estorban para explicar detalles funcionales. Usa colores en dónde es importante pero no los hagas en azul y no los hagas bonitos para tus clientes, solo generan más confusión (“No, el sitio no será azul”)
Combinando principios visuales.
Los colores juegan también con el concepto de peso visual. Algo grande se nota más, pero algo grande y rojo no puede pasar desapercibido. Marca tus mensajes de error y etiquetas en rojo con alto contraste o si solo estás haciendo una confirmación, algo pequeño y en verde puede quedar perfecto.
04.03 Repetición y rompiendo patrones
Los cerebros humanos tenemos un talento particular para identificar patrones y secuencias. Cuando algo sucede repetidamente en la naturaleza lo notamos rápidamente. No solo lo notamos, sino que también pensamos diferente sobre esas cosas.
En la primer imagen no vemos 5 patos individuales, vemos una fila de patos. Son un grupo o una secuencia. Seguramente los viste e izquierda a derecha porque así es como estamos acostumbrados a leer.
Si esa fila de patos fuera un menú o una lista pensaríamos lo mismo. Puedes esperar que más gente haga clic en la primer opción, en la izquierda, que en la de hasta la derecha.
Rompiendo un patrón
En la segunda imagen vemos 5 guapos patitos, pero el de en medio ha decidido hacerse solista. Le llamaremos Beyoncé.
Eso cambia todo.
Ahora vemos una fila de cuatro envidiosos patitos y Beyoncé está sola, en el reflector, viéndose bien. Es difícil no fijarse en Beyoncé aunque los cinco patitos sean igualmente fabulosos.
Ahora, si eso fuera un menú, la opción del centro recibiría muchos más clics que las otras, porque nuestros ojos se fijan en ella. Esos clics serían robados de opciones del lado izquierdo, así que el lado izquierdo no sería tan popular cómo antes, aunque seguramente seguirá siendo más popular que las opciones del lado derecho.
Conocimiento es poder.
Puede que esto suene obvio, pero cuando aplicas este principio a tus diseños (o a tus pasos de baile) puede hacer que la gente note botones importantes (o estrellas de pop).
Ten cuidado: romper patrones también puede distraer de cosas importantes. Antes de romper un patrón, primero tienes que crearlo.
Combinando principios:
Para hacer un patrón o secuencia, mantén el peso visual y el color consistentes. Los ojos comenzarán de un lado y terminarán del otro, siguiendo el patrón.
Para romper el patrón, solo cambia el lugar dónde quieres que se fijen. Haz que el botón de “Regístrate” para que sea de otro color, tamaño, forma o estilo y mira como suben tus clics.
04.04 Tensión lineal y tensión de borde
¿Estás cansado de los patitos? Obviamente no. Eso pensé.
Tensión visual es un concepto que suena básico pero te sorprenderá lo útil que puede llegar a ser. Nuestros cerebros son demasiado buenos identificando patrones que no existen, como diseñador eso es algo que puedes aprovechar.
Tensión lineal:
En esta imagen no ves 8 patos individuales, ves una línea de patos que se interrumpe. Ves una línea, esa es tensión lineal, la percepción de un “camino” en dónde no existe tal.
Nuestros ojos siguen el camino. Esto es súper útil.
Si rompes esa línea, como en cualquier camino, el hueco llama más la atención.
Tensión de borde:
Hasta ahora hemos asumido que solo hay una línea, pero ¿Qué pasa cuando creamos tensión lineal usando más de una línea?
El resultado pueden ser figuras.
En esta segunda imagen, he acomodado los patos para que parezcan ser las esquinas de una caja. Podrías ver 12 patos o cuatro grupos de 3 patos, pero tu mente quiere ver una caja, así que eso hace.
Además, podríamos poner cosas dentro dela caja (¡más patos!) o en los espacios entre las esquinas, similar a la tensión lineal, la tensión de borde genera atención en los huecos.
En términos de layout esta puede ser una excelente manera de llamar la atención en algo pequeño, cómo una etiqueta. O puedes crear caminos visuales que lleven al botón que quieres que la gente vea. Anuncios clásicos usan frecuentemente esta técnica.
Convenientemente, hace sentir que un layout es más simple o más “cohesivo” porque el camino o la caja es un solo objeto para tu mente, mientras que 12 patos individuales son demasiado increíbles para ser asimilados.
Combinando tus principios.
En estos ejemplos he dejado huecos de “tensión” en blanco, pero no es necesario que sea así. Puede usar color para simular un camino como un gradiente en una lista de elementos. O puedes agregar peso visual a un grupo de elementos por medio de tratarlos como una sola figura en vez de figuras separadas. Es una excelente manera de dirigir la mirada de los usuarios sin agregar más contenido a tu layout.
04.05 Alineación y proximidad
Alineación:
En la primer imagen podemos ver 6 guapos patitos, pero también los vemos relacionados por que están alineados.
Vemos dos filas.
El pato de la izquierda y el de la derecha parecen estar separados. Los dos patos del centro se ven “organizados”. Todos los patos parecen estar yendo en la misma dirección. Si piensas en movimiento, el pato de la izquierda parece que se está quedando atrás y el de la derecha que va al frente.
Los 6 patos son iguales, es la alineación la que genera esa percepción.
Botones con funciones similares pueden estar alineados y diferentes contenidos de nivel pueden estar alineados. La información puede ser una tabla con filas y columnas y esto te puede ayudar a crear significados complejos.
Proximidad:
La cercanía o distancia entre dos objetos crean una sensación de que esos objetos están relacionados. Esa distancia se llama “proximidad”.
En la segunda imagen vemos 6 patos idénticos, que no están alineados pero que definitivamente forman dos grupos. Los patos en cada grupo se ven “juntos” como un grupo o familia. Lo único que está creando esa percepción es la proximidad.
En tus diseños, tu puedes poner elementos relacionados más cerca y elementos no relacionados más separados.
Por ejemplo, un encabezado, un bloque de texto un botón, todo relacionado a una acción (cómo una compra o una descarga) se diseñan en “paquete”. Eso permite al usuario entender que todo está relacionado.
