() translation by (you can also view the original English article)
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%);
Comprueba la demo.
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.
Comprueba la demo.
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.
Comprueba la demo.
Más Ejemplos
4. Selección de la Temática de la Imagen
El texto sobre una imagen es solo tan eficaz como sea lo inferido de su combinación. Por ejemplo, no escojas una imagen genérica si existe otra en concreto que comunique más adecuadamente el mensaje. Cuando selecciones imágenes, ten en cuenta las evocaciones emocionales que suscita y su contexto, y en especial su relación con el tono del mensaje que el texto pretende transmitir.
Algunos consejos:
- Escoge imágenes que representen una frase completa; el usuario debería entender claramente la temática de la imagen, y comprender la acción que en ella se está realizando, en el caso de que se dé alguna.
- No selecciones imágenes que tengan un punto central débil.
- No olvides la importancia de la claridad de la imagen. Si el objetivo de la imagen consiste en evocar sentimientos y en menor medida mostrar detalles, la superposición de capas o filtros no conllevará la pérdida de su eficacia.
Ejemplos
5. Ser Consciente de las 3 Dimensiones
Reflexiona sobre el lugar e el que aparece el texto en relación al nivel de enfoque de los distintos elementos de la imagen. ¿Da la impresión de que el texto se asienta sobre la imagen o que surge desde el fondo? ¿Se pierde el texto en el fondo, o mantiene su propia posición en el eje espacial z (profundidad)? ¿Cómo se relaciona el texto concretamente con los elementos enfocados de la imagen?
Una regla general: cuanto más pequeño sea el texto, más lejana parecerá la posición del texto en el eje espacial z.
En este ejemplo, usamos un texto que parece estar mucho más cerca de nosotros que los arbustos de la imagen del fondo. A pesar del alto detalle de la imagen, nuestros ojos identifican de forma natural las largas líneas y las amplias formas del texto, con lo cual interpretamos con más facilidad el texto que en el mal ejemplo. En el mal ejemplo, la forma de los caracteres parecen situar el texto en la misma posición z que las hojas del fondo.
Comprueba la demo.
Más Ejemplos
Proximamente
Bien, con esto cerramos nuestro debate sobre aspectos estéticos. En este artículo, hablaremos distintas formas de combinar estas técnicas con interacciones hover y animaciones.
