Consejos para usar el contraste para mejorar la legibilidad

El buen diseño es un diseño legible. Sin un mensaje claro, que se muestre de manera fácil de digerir, es fácil perder el significado de cualquier trabajo de diseño. Por eso es tan importante que cualquier diseño debe ser fácil de leer.

Diseñar para facilitar la lectura es una lección de tipografía, pero también en contraste. El contraste es la clave para mejorar la legibilidad y ayudar a crear un flujo a través del texto de una manera lógica para que los usuarios entiendan exactamente lo que quiere decir.

Contraste de color

Las letras deben sobresalir del lienzo. Necesita tener una presencia que llame la atención.

Hay muchas formas de crear contraste de color, pero la más popular es el texto negro sobre un lienzo blanco o claro. Y es popular porque funciona. (La combinación opuesta funciona igual de bien.)

Al colocar texto, es vital pensar en cómo aparecerán las letras en el fondo. ¿Son fáciles de ver? Esta consideración es de particular importancia cuando se trabaja con letras sobre imágenes o videos, donde los colores en el fondo pueden colocarse de manera diferente según el tamaño de la pantalla o el movimiento en el contenido.

Una forma en que los diseñadores superan este problema es con una superposición de color en imágenes o videos que crean un poco de seguro de legibilidad. Ya sea una transparencia oscura o un tono brillante, una superposición puede garantizar que el texto aparezca como está previsto, independientemente de lo que ocurra en el fondo.

La otra opción, y una que está ganando terreno, es eliminar el texto de las imágenes o videos y emparejarlos uno al lado del otro. Esto proporciona espacio para ambos elementos sin sacrificar el contenido de ninguno de los dos.

Estilos de tipografía contrastantes

Las variaciones en los tipos de letra o estilos pueden llamar la atención sobre las letras de forma inmediata. El interés visual aumenta con los tipos de letra que son bastante diferentes, como el script y serif emparejados en el tratamiento del logotipo principal para Le Farfalle.

Cada tipo de letra es interesante por sí solo, pero la diferencia entre los dos crea bastante la composición.

El emparejamiento de tipos de letra de esta manera puede ser un poco complicado, ya que algunos pares de estilos claramente diferentes pueden hacer que los usuarios se sientan sacudidos. Opte por tipos de letra con algunas similitudes que no sean tan obvias para el usuario común, como las alturas de x comunes, las formas de letras (verifique la minúscula? O? Para ver si los estilos son redondeados o más ovalados) o inclinados. Al mantener una sensación similar en estas áreas, los estilos se pueden mezclar y combinar de una manera que crea mucho contraste sin interrumpir el flujo del diseño.

Variabilidad de tamaño

Una forma de sorprender a los usuarios con el contraste es con letras demasiado grandes o demasiado pequeñas.

Una tipografía de gran tamaño puede ser muy divertida de diseñar y es una forma sorprendente de atraer a los usuarios para que sigan moviéndose a través de un sitio web. Si bien las letras de tamaño insuficiente pueden ser igualmente efectivas, es mucho más difícil de usar.

Combine las opciones de gran tamaño con bloques de texto en un tamaño más tradicional para resaltar la variación entre los tamaños de texto. Ayudará a proporcionar un punto focal en el diseño y hará que las palabras grandes sean imposibles de evitar. Continúe con el tema más allá de las letras en pantalla y considere los subtítulos que son un poco más grandes de lo normal también, de modo que el mismo concepto sobredimensionado en su cara siga a los usuarios en todo el diseño.

Considerar alineaciones

Muchas personas se olvidan de la alineación cuando se trata de legibilidad.

Hay dos escuelas de pensamiento:

  • Utilice alineaciones contrastantes para la visualización y los encabezados frente al texto.
  • Usa la misma alineación para todo.

Ambas ideas son correctas a su manera. Piense en la alineación del texto en relación con el resto del diseño. ¿La alineación proporciona suficiente contraste para sobresalir del fondo? Esto puede incluir desde el espaciado entre el borde del lienzo y el texto hasta la ubicación en relación con otros elementos.

Cuando se trata de la alineación, la mejor manera de pensar es imaginar un botón. ¿Cómo se alinea el texto dentro del botón? La mayoría de los diseñadores optarían por el centro, pero eso no significa que el resto del sitio web incluya texto centrado. La alineación es dictada por el propio elemento. Ahora amplíe eso pensando en todo el diseño.

Flujo de texto

El flujo de texto se vuelve más importante cuanto más texto se incluye en un diseño. Si los elementos de texto no fluyen a la perfección de manera jerárquica, los usuarios pueden perderse o perder información al leer de una manera ilógica.

Las consideraciones clave cuando se trata de flujo de texto incluyen:

  • Tamaño de los bloques de texto
  • Balas y listas
  • Alturas de línea y longitudes
  • Negrita o cursiva
  • Color

Cada uno de estos atributos de texto ayuda a diferenciar palabras clave, información y frases del resto. Proporcionan puntos de entrada visuales para escanear texto, de modo que la información más importante salta para el usuario.

El uso de diferentes estilos dentro de largos bloques de texto (esto es particularmente importante para los blogs o contenido de formato largo) puede disminuir la fatiga del lector. Si el usuario se cansa de leer la copia porque es engorroso mirar y digerir, no consumirá el contenido. Divídalo en partes que lo hagan más fácil de leer.

Mantenlo consistente

La clave final para la legibilidad es la consistencia. Hagas lo que hagas en la página de inicio o para el encabezado o en la copia del cuerpo para crear contraste, quédate con él.

El uso de los mismos colores, o estilos o tratamientos de tipo a través de los mismos mostrará a los usuarios que no están perdidos en el diseño. No importa a dónde los lleve la navegación, aún se verá y se sentirá como su sitio web.

Ntgrate hace un gran trabajo al establecer una combinación de bloques de texto y fondo en blanco y negro desde el principio. La combinación de colores yin y yang se muestra arriba de la imagen del héroe en el encabezado y los cuadros de texto subsiguientes a través de la característica del sitio con el mismo texto y patrón de color.

Conclusión

El contraste es una de las herramientas que ayuda a establecer el interés visual en cualquier proyecto de diseño.También es importante cuando se trata de crear una tipografía legible con jerarquía.

Alto contraste es la opción más legible. Los colores apagados o los estilos demasiado similares casi siempre pueden presentar problemas en términos de legibilidad. Facilite a los usuarios comprender lo que quiere decir con un diseño altamente legible que proporciona mucho contraste entre el texto y otros elementos.