Ahora que entendimos cómo llegamos hasta aquí, vamos a empezar a entender las reglas básicas del diseño visual aplicado al contexto digital. Aquí vamos a cubrir 5 reglas básicas — con estas reglas podemos empezar a pulir el ojo crítico y entender qué funciona y qué no funciona para lograr una página bien diseñada que sea fácil de entender, usar y leer.
Regla #1: Contraste
El color del fondo y de la tipografía tienen que ser lo suficientemente diferentes para no esforzar al ojo. Texto negro sobre fondo blanco suele ser la opción más legible. Grises claros, amarillo y verde son colores complicados. Si tienes que bizquear para leerlo entonces no hay contraste suficiente.
Regla #2: Casi negro es más fácil de leer que negro
en vez de negro para texto. Negro sobre blanco crea un efecto de movimiento para el ojo y es más difícil enfocar las letras.
Regla #3: Contenido importante primero
Siempre hay que poner en contenido más importante primero para darle soporte al use case principal de tu app o página. El contenido más importante tiene que ser visible sin tener que hacer zoom o click o scroll. Esto se llama jerarquía. Miremos algunos casos de la vida real.
Instagram (izquierda) a qué le está poniendo enfasis?
Las fotos/videos de tus amigos.
Pinterest (derecha) a qué le está poniendo enfasis?
Crean jerarquia visual poniendo la barra de búsqueda hasta arriba y su grid de imágenes abajo. Es una decisión muy deliberada poner primero la búsqueda - la idea es que los usuarios busquen y descubran más imágenes.
Spotify (izquierda) a qué le está poniendo enfasis?
Están celebrando la portada del álbum y el título de la canción antes de los controles. Aunque los controles estén abajo, Spotify le da más peso al botón de play/pausa que los botones de adelantar o rebobinar.
Facebook (derecha) a qué le está poniendo enfasis?
Muy parecido a Instagram, ponen el contenido de tus amigos como lo más importante.
Regla #4: Alinear todo
La forma más rápida de arreglar algo que no se ve bien es asegurarte de que el alineamiento esté parejo. Cuando los diseñadores hablan de la necesidad de usar un “grid” están hablando de la importancia de que esté todo alineado.
Arreglar el alineamiento es una de las formas más fáciles que tenemos de mejorar una app o página e instantáneamente hacer que se vea muuuucho mejor.
Veamos otro ejemplo:
Esto es un layout modificado de Medium.com — ¿qué les parece? ¿qué no está funcionando en este layout?
Tip: mirar la justificación del lado izquierdo…¿cómo se ve?
De lado izquierdo, se ve un río visual generado por una falta de alineamiento entre todos los bloques de contenido. De lado derecho, los bloques de contenido sí están alineados.
Aquí está todo alineado al grid. Se ve más limpio y la página es más legible.
Regla #5: Tamaño del texto y espaciado interlineal
No estamos diseñando para hormigas. Agrandar el texto y darle espacio suficiente entre las líneas lo hace más fácil de leer y digerir.
Regla #6: Si el orden es importante, poner los resultados en lista
La mayoría de apps y páginas tienen algún tipo de búsqueda y hay mucho debate sobre cómo mostrar los resultados. Si el orden de los resultados es importante, entonces una lista es lo más eficaz (piensa en Google o Amazon - cuando el usuario busca algo concreto). Si el orden no importa tanto y quieres fomentar el descubrimiento (como Pinterest o AirBnB), entonces un grid fomentará un descubrimiento más orgánico.
Regla #7: Crear diseños cómodos
Hay áreas del teléfono más fáciles de alcanzar que otros. Sólo el ~10% de la población mundial es zurda entonces normalmente diseñamos pensando en diestros. Por esto, muchos apps móviles ponen la navegación y acciones principales en la parte de abajo de las pantallas móviles.
Regla #8: Diseñar primero en blanco y negro, agregar color después
Diseñar en blanco y negro ayuda a mantener el foco en resolver el problema y diseñar la experiencia principal de tu app o página.
Color evoca reacciones emotivas fuertes y muchas veces interrumpe nuestra habilidad de enfocarnos en resolver el problema de diseño.
Regla #9: Tomar paletas de color prestadas
Por lo general mantener una paleta sencilla de 2 colores es un buen punto de partida. Puedes combinar un color base que va a servir con el principal color de la app o página con un color de acento. Si es para una marca ya establecida, normalmente sería el color principal de la marca.
Lograr una paleta de color que se vea muy bien es un poco arte oscuro entonces por el momento podemos tomar paletas prestadas de