El patrón en el que se emplea texto sobre un fondo formado por una imagen ha sido muy popular durante años. Originado con anterioridad al diseño web, los textos sobre las imágenes pueden proporcionar una experiencia más rica en contexto y más atractiva a nivel emocional. En tiempos pasados, las imágenes tenían que ser mucho más pequeñas debido a la baja velocidad del ancho de banda. Conforme las velocidades de conexión y las densidades de pantalla aumentaron velozmente, tenemos la posibilidad de usar imágenes mucho más grandes en nuestros diseños.
Es realmente importante considerar las decisiones de diseño relacionadas con esta técnica, y desarrollar las mejores prácticas para gobernarla es imperativo si queremos mantener una alta calidad en nuestro diseño. Uno no puede simplemente colocar texto sobre cualquier imagen y esperar sin más que tenga un buen aspecto.
En este artículo, explicaremos cinco aspectos distintos relativos al emplazamiento de texto sobre imágenes que te ayudarán a combinar adecuadamente textos e imaginería.
Nota: a través de este artículo, veremos cómo los mismos principios son válidos cuando usamos vídeo y texto.
1. Contraste a través del color y la luminosidad
Usar imágenes que crean un buen contraste entre el texto y la imagen es algo imperativo. En particular, usar imágenes más oscuras con un texto más claro, u oscurecer las imágenes mediante filtros o elementos superpuestos, puede ser una fórmula efectiva para asegurarte de que estás utilizando suficiente contraste.
Algunos consejos para conseguir un contraste de color y luminosidad apropiado:
- Si no puedes ver inmediatamente las letras, tu contraste es insuficiente.
- Un buen contraste no es siempre sinónimo de oscuridad frente a luminosidad; los colores complementarios también proporcionan contrate de forma natural.
- Si la imagen es compleja y está totalmente enfocada, el empleo de una capa superpuesta o la edición de la imagen serían opciones eficaces y viables para aumentar el contraste.
En este ejemplo, hemos usado los filtros WebKit para manipular el contraste y la luminosidad de una imagen, la cual hemos manipulado a través de un <div> extra. El filtro, sin prefijo, tiene el siguiente aspecto: filter: brightness(40%) contrast(70%);
Más ejemplos
2. Contraste a través del tamaño y el posicionamiento
El color no es el único medio para mejorar el contraste entre una imagen y el texto superpuesto. Seleccionar un tamaño y una posición adecuada para el texto en relación con los elementos enfocados de la imagen es esencial, ya que esto está relacionado con la legibilidad del texto en sí.
En este ejemplo, hemos elegido una imagen con un área relativamente homogénea de cielo. Es un área perfecta para ubicar el texto. En contraposición, una ubicación mucho menos legible para el texto sería el centro de la imagen, donde empieza a aparecer el cielo.
Más ejemplos
3. Legibilidad a través de la profundidad
Escoge una imagen que emplee la profundidad de campo. Esto creará un fondo más homogéneo o suavizado para el texto, lo que incrementará la legibilidad. Coloca tu texto en la parte desenfocada de la imagen, y asegúrate de que el color del texto tiene un contraste idóneo respecto al color predominante en el área fuera de foco.
Podemos conseguir esto fácilmente al colocar el texto en las áreas menos enfocadas, como se hace en este ejemplo.
Más ejemplos
Lo que te queda por leer:
-
4. Selección de la temática de la imagen
-
5. Ser consciente de las 3 dimensiones
Deja una respuesta