10 códigos de trucos para diseñar interfaces de usuario

Probablemente suponga que la mayoría de nosotros comenzamos en el diseño de la interfaz de usuario con el conocimiento más pequeño o nada en absoluto. Pero a pesar de que las probabilidades estaban en contra de nosotros al principio, manejamos nuestro camino a través de numerosos libros y artículos de diseño para comprender cómo funcionan los colores, la tipografía, el diseño, etc. Recuerdo cómo se establece en nosotros en Make Technology, una empresa impulsada por UX, que el diseño no puede explicarse simplemente por colores, formas y texto. Es un proceso que tiene un "Por qué" detrás de él, que cada vez que creamos un texto más grande, agregamos una sombra o cambiamos el color, tiene que haber una razón de por qué las cosas tienen que ser así.

Por lo tanto, en este artículo, compartiré una lista de cosas que aprendí de diferentes compañías, diseñadores, cosas que aprendí al diseñar interfaces de usuario y nuevos descubrimientos que encontré en el camino:

* Descargo de responsabilidad: Las siguientes muestras "No" proporcionadas no necesariamente significan que están equivocadas. Es nuestra base de cómo podemos mejorar desde una buena solución de diseño a una mucho mejor

1. Este texto es importante, ¡hazlo más grande!

Cuando se enfrenta a contenido que necesita jerarquía de fuentes, agrandar el texto para dar énfasis e importancia generalmente no resuelve el problema, como el siguiente:

La jerarquía de fuentes no se trata de tamaños de fuente pequeños a grandes. Se trata de la combinación correcta de tamaño, pesos y colores que crea contraste. Mayor contraste, mejor.

Disculpas si la foto viene en formato de baja resolución ️

Entonces, ¿cómo creo un mejor contraste?

  • No use un tipo de peso con diferentes tamaños de fuente para crear contraste y jerarquía.
  • En su lugar, use un estilo más audaz y oscuro para el contenido primario, o más pequeño y más claro para el contenido secundario (menos importante).
  • Cree tres tipos de colores de texto que varían de oscuro a claro (vea el ejemplo a continuación). Usualmente uso mi color base como color de texto del cuerpo.
  • No tenga miedo de aplicar grandes espacios de fuente a sus elementos (es decir, encabezado de 24 píxeles, texto del cuerpo de 16 píxeles, meta de 10 píxeles, etc.). Mayor brecha = mejor contraste.
  • Echa un vistazo a Modularscale, una calculadora en línea que puedes usar para crear una mejor jerarquía de fuentes.
  • Recuerde, el contraste es = tamaño + peso + color.
  • Por último, asegúrese de verificar su relación de contraste. Puede usar esta calculadora para verificar su accesibilidad.
desde mi color base, me muevo de más oscuro para los titulares a más claro para el contenido auxiliar.

2. No crees múltiples tonos de negro

No dificulte su vida moviendo su selector de color hacia arriba y hacia abajo para producir diferentes tonos de texto negro sobre fondo blanco.

Todos sabemos que el uso del color de texto negro (# 000) provoca fatiga visual en los lectores, por lo que nuestra solución es crear variantes más oscuras como alternativa. Pero en lugar de elegir 3 o más valores de color hexadecimales, podemos usar negro con diferente opacidad como solución:

En mi ejemplo anterior, utilicé el negro como mi color primario (# 000) y disminuí su opacidad dependiendo de dónde se aplicará (es decir, contenido primario, contenido secundario, etc.)

3. Haz los cálculos para entender los colores

La mayoría de nosotros apestamos al elegir las combinaciones de colores correctas, y cada vez que vemos un diseño con una paleta de colores bien orquestada, nos preguntamos "¿Cómo lo hicieron?" (Al igual que el siguiente):

tomado de momoandspirits

Hasta que aprendí que comprender los colores no es solo para aquellos que tienen el don del diseño desde el principio de los tiempos, que una simple suma y resta en Tono, Saturación, Brillo (HSB) hará la magia (usaremos HSB para esto fórmula en lugar de RGB). Puede deshacerse fácilmente del aburrido blanco sobre fondos de colores y convertirlo en un trabajo de Picasso como el siguiente:

Entonces, ¿dónde entra la suma y la resta en HSB?

Dos enfoques para entender los colores.

En realidad, hay dos enfoques que podemos hacer, y como podemos ver, ambas opciones tienen el mismo color base # B9F4BC (fondo del círculo) pero difieren cuando se trata del color de Carpeta y Franja. Al comenzar, recuerde siempre que el primer número corresponde a Hue, seguido de Saturación y, por último, Brillo.

Opcion A

Opcion A

En la Opción A, podemos ver que mantuvimos el valor de Tono 123 en todas las formas (círculo, carpeta, tira) mientras que la Saturación y el Brillo es donde ocurre el cambio.

Ahora, al centrarnos en la Saturación de la base, que es 24 y su Brillo, 96, ambos valores cambiaron cuando creamos un verde más oscuro para la Carpeta. Desde Saturación de 24 se convirtió en 40 (incremento de +16) y desde Brillo de 96 se convirtió en 82 (disminución de -14), lo que nos muestra que un cambio en la saturación ya sea incremental o decremental necesita un ajuste inversamente proporcional al brillo, en orden para crear un buen contraste (viceversa). Y lo mismo sucedió en Strip, usando la Saturación y el Brillo de la Carpeta como valor base, pasamos de 40 a 44 (incremento de +04), y disminuimos de 82 a 75 (disminución de -07) para Brillo. a la fórmula:

Valor más oscuro = Incremento en la saturación es una disminución en el brillo
Valor más claro = Disminución en la saturación es un incremento en el brillo

Esta fórmula me ayudó cada vez que me pregunto qué colores correctos debería usar en mis diseños. Aprendí que el mejor punto de partida es tener un color base y, a partir de ahí, comenzar los ajustes en Saturación y Brillo, manteniendo el valor de Matiz igual.

Opcion B

Opcion B

En la Opción B, el mismo principio todavía se aplica (la fórmula que teníamos arriba) pero los valores de Hue cambian. Y las terminologías RGB y CMY que solíamos pasar en varios materiales de diseño, ahora tendrán sentido para nosotros.

RGB significa rojo, verde y azul, mientras que CMY es cian, magenta y amarillo. Estas terminologías no han tenido ninguna importancia para mí cuando comencé, hasta que descubrí el uso de RGB y CMY para combinaciones de colores.

Ahora, en la opción B, si queremos tener una variación más oscura del color base, todo lo que tenemos que hacer es mover nuestro selector de color a la dirección donde se encuentra el RGB más cercano en nuestra paleta de colores, o moverlo en la dirección de CMY para Variación más ligera. Por ejemplo:

Selector de color

Dado que queremos crear una variación más oscura de nuestro color base # B9F4BC (fondo del círculo) que se aplicará en nuestro icono de Carpeta, debemos mover nuestro selector de color a la dirección donde se encuentra el RGB más cercano (que es Azul en este caso). Pero si queremos tener una versión más ligera de nuestra Carpeta, estaremos moviendo nuestro selector hacia la izquierda, cerca de CMY (en este caso, Amarillo).

* Más a menudo RGB conduce a una variación más oscura y CMY para una más clara

Después de mover el selector de color a nuestra variación deseada, ahora aplicamos la fórmula en la Opción A, lo que nos hace tener esta combinación de colores:

Rojo, Verde, Azul (RGB) + Opción A fórmula = Variación más oscura
Cian, Magenta, Amarillo (CMY) + Opción A fórmula = Variación más ligera

4. Use espaciado para separar grupos

Sé un generoso donante espacial

Además de agregar una línea entre dos grupos para mostrar la separación, usar un espacio generoso entre ellas es una solución mejor y más fácil.

Como dice la Ley de Proximidad:

Los objetos cercanos o próximos entre sí tienden a agruparse.

De mi ejemplo anterior, mi objetivo es crear una separación entre mi título y su escritor mediante el uso de un gran espacio entre ellos que es de 24px.

5. Usa colores para separar las filas

Colores como separadores

Hacer interfaces de fila puede ser aburrido a veces para diseñar, ya que solo requiere duplicar el componente por n veces. Pero del lado del usuario, leerlos puede ser difícil, especialmente si no hay una gran distinción entre una fila y la otra. Por lo tanto, además de usar líneas, agregar fondo de color en filas puede ser muy útil para los usuarios en la lectura, y también será más divertido para nosotros los diseñadores

6. Multiplicar en lugar de soltar texto de sombra

Diseño de encabezado

Es bastante difícil diseñar componentes de encabezado o agregar texto sobre una imagen, especialmente si el fondo de la imagen será dinámico (o se puede cambiar de vez en cuando).

Por lo general, la solución común para texto con fondo de imagen dinámico es agregar sombra paralela, pero no ayuda a la legibilidad del usuario. Agrega más desorden visual alrededor de las letras y las palabras porque llenan los espacios entre ellas.

Para algunos, la superposición de color blanco / negro es la solución que es un truco útil para este tipo de diseños. Pero recientemente, descubrí el uso de Multiplicar como herramienta de mezcla para un relleno de degradado.

Especificaciones para las opciones de mezcla Multiplicar

Hacerlo es mucho más fácil que crear un fondo negro sobre la imagen y disminuir su opacidad. Además, tener una escala de grises hace que la otra parte de la imagen conserve su color natural, y hace que la parte donde se encuentra el texto sea un poco más oscura, para facilitar la lectura del texto.

7. Longitud de línea

Lo común que hacen la mayoría de los diseñadores es alargar la longitud de la línea para que se ajuste a su contenedor. Pero al hacerlo, crea fatiga visual para nuestros usuarios, a diferencia de tener 45 a 65 caracteres por línea, lo cual es ideal.

Si alguna vez se encontró con el dilema de acortar la longitud para hacerlo ideal, pero dará como resultado un gran espacio en blanco en el lado derecho como el siguiente:

con un gran espacio en blanco a la derecha

No dude en hacerlo y alinee el centro de la columna de texto completo con su contenedor para que pueda eliminar el espacio en blanco.

contenido centrado

8. No reinventes la rueda

Lo que hace que un diseño sea inconsistente es cuando no está basado en componentes. Es cuando te das cuenta de que has creado 5 tipos de interfaz de tarjeta, 10 botones, 5 estilos de título de encabezado, etc.

Antes de comenzar a crear una interfaz para un contenido específico, intente mirar alrededor de sus diseños creados previamente, ya que puede ver un patrón que puede reciclar y usar.

En lugar de reinventar la rueda y crear otra tarjeta para un grupo de arte (ejemplo anterior), podemos usar la tarjeta de artículo y reemplazarla con el contenido del grupo de arte. Esto ahorrará tiempo para los diseñadores y también hará que la interfaz sea coherente.

9. Usa colores de marca como acentos

Por lo general, pensamos que los colores de marca deben ocupar una gran parte de los colores de nuestra interfaz. Estamos teniendo dificultades para mostrar los impactantes colores de marca de neón amarillo, naranja y rosa de nuestro cliente en nuestro diseño limpio y minimalista. ¿La respuesta? Úselos como colores de acento.

10. Cuelga las balas

Y, por último, si está creando un diseño de lista como el anterior, haga que las viñetas, los glifos o el número se asienten en el margen para resaltar la lista. Esto hará que la legibilidad del usuario fluya sin interrupciones y sea más legible.

Todavía me gustaría agregar una larga lista de fichas de diseño, pero por ahora espero que estos 10 consejos de diseño lo ayuden a crear interfaces de diseño. Además, siéntase libre de agregar sus códigos de trucos en las respuestas

Este artículo está inspirado en 7 consejos prácticos para hacer trampa en el diseño y en toneladas de artículos de diseño que he leído :)

Otras historias mias

Para cualquier pregunta, envíeme un correo electrónico a mhariellmosqueriola@gmail.com

giphy