Cuando te imaginas poner una imagen en una novela (como un artículo, un estudio de caso o un informe), el enfoque estándar es en línea el rectángulo, desglosando bloques de texto. ¿Funcional? ciertamente. Inspirador? Casi nada.
¿Por qué tantos artículos de formato largo se sienten planos visualmente? ¿Por qué las imágenes a menudo parecen estar en la historia en lugar de ser parte de la historia? ¿Cómo afecta esto a la participación, la comprensión o el tono?
Las imágenes en contenido de formato largo pueden (y generalmente deberían) hacer más instrucciones. Pueden dar forma a cómo las personas se las arreglan, interactúan y explican lo que están leyendo. Ayudan a establecer el ritmo, influir en los sentimientos del lector y agregar carácter que las palabras individuales no siempre pueden transmitir.
Entonces, ¿cómo se usa imágenes para agregar personalidad, ritmo o incluso sorprender a alguien? Eso es lo que hago.
Mi perfil: Patty Meltt es una floreciente sensación de música country y necesita un sitio web para lanzar su nuevo álbum y viaje. Ella quería que se viera único y memorable, así que llamó Cosas y tonterías. Patty no es real, pero el desafío de diseñar y desarrollar un sitio web como ella es.
Primero, una revisión no demasiado larga.
Como probablemente ya sepa, la cuadrícula hace que el diseño se sienta predecible, rítmico y estructurado, lo que ayuda a los lectores a sentirse cómodos al comer contenido a largo plazo. La cuadrícula trae equilibrio. Ayudan a mantener las cosas consistentes, organizadas y fáciles de seguir, lo que hace que la información compleja sea menos abrumadora.
Pero una vez que construyo una cuadrícula, ocasionalmente romperla puede ser una forma poderosa de atraer contenido clave, agregar personalidad y evitar que los diseños se sientan el camino o el plano.
Por ejemplo, en contenido de forma larga, podría sacar las imágenes al borde o ponerlas en alineación para crear una sensación más informal y vibrante. Puedo usar valores de margen negativo para extender el tamaño en línea de la imagen desde sus columnas:
figure {
inline-size: 120%;
margin-inline-start: -10%;
margin-inline-end: -10%;
}Estos descansos rara vez se usan y son signos de puntuación que guían los ojos del lector y agregan momentos de interés visual al flujo del texto.
Ancho de texto o cantidad completa
Una vez que comenzamos a pensar creativamente sobre las imágenes en contenido a largo plazo, a menudo pensamos en una pregunta: ¿Cuáles deberían ser estas imágenes?
¿Deberían estar al ras con los bordes de la columna de texto?
img {
inline-size: 100%;
max-inline-size: 100%;
}
O expandirse para llenar todo el ancho de la página?
figure {
inline-size: 100vw;
margin-inline-start: 50%;
transform: translateX(-50%);
}Ambos métodos funcionan, pero es importante comprender cómo logran diferentes propósitos.
Tradicionalmente, el diseño de libros y periódicos restringe las imágenes a columnas de texto, mejorando así el flujo de palabras. Por otro lado, las revistas rompen regularmente la cuadrícula con imágenes de todo el flujo, lo que resulta en efectos dramáticos.
En artículos, noticias e informes, las imágenes se establecen en columnas en copias, dando a las personas un sentido de orden y ritmo. Esto es especialmente efectivo para gráficos, cuadros e infografías, y es muy importante mantenerlo claro y fácil de leer aquí. Pero en el contexto del error, este enfoque puede sentirse predecible y la falta de energía
Extruir una columna de contenido fuera de la imagen para llenar el ancho completo de la ventana gráfica tiene un impacto inmediato. Estos momentos actúan como pausas dramáticas: rompen a propósito el ritmo de lectura, restablecen el enfoque y cambian el foco de las palabras a los efectos visuales. Es decir, estas imágenes siempre deben tener un propósito. Si usan en exceso o se sienten como relleno, perderán el impacto muy rápidamente.
Múltiples imágenes con cuadrícula modular
Hasta ahora me he centrado en una sola imagen en un flujo de texto. Pero, ¿qué pasa si quiero presentar una sala de recolección? ¿Cómo organizar una serie de imágenes que pertenecen?
En lugar de apilar verticalmente, podría usar una malla modular para crear una disposición cohesiva con un control preciso de la ubicación y la escala. ¿Qué es una malla modular? Esta es una estructura construida a partir de unidades repetidas (generalmente cuadrados o rectángulos) que se puede organizar horizontal y verticalmente para llevar órdenes a varios contenidos. Puedo colocar una sola imagen en un solo módulo, o abarcar múltiples módulos para crear áreas más grandes e impactantes.
figure {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
figure > *:nth-child(1) {
grid-column: 1 / -1;
}
Modular Mesh también puede ayudarnos a deshacernos de los diseños regulares basados en columnas, agregar diversidad y mantener contenido visualmente interesante sin depender de una imagen de venta completa cada vez. Me dan la flexibilidad de mezclar imágenes de paisajes y retratos en el mismo espacio. Puedo cambiar el tamaño para hacer que algunas imágenes sean más grandes para el enfoque, mientras que otras son más pequeñas. Esta es una técnica de diseño que agrupa los efectos visuales relevantes, fortaleciendo así su relación.
CSS Forma y posibilidades de expresión
Independientemente de la forma del sujeto, cada imagen se encuentra dentro de la caja. Por defecto, el texto fluye por encima o por debajo del cuadro. Si flote la imagen a la izquierda o a la derecha, el texto adyacente está envuelto alrededor del rectángulo independientemente de lo que haya dentro. Esta envoltura se siente natural cuando un objeto llena los bordes de su caja.
Sin embargo, cuando se elimina el sujeto o tiene un contorno irregular, la envoltura rectangular puede sentirse incómoda.
Las formas de CSS pueden resolver el problema al permitir que el texto envuelva cualquier forma personalizada que defina. Dejar que el texto fluya alrededor de las formas es más que solo decorativo: agrega energía y mantiene la página viva. usar shape-outside Impactar la experiencia de lectura. Raliona ligeramente a las personas, crea ritmos visuales y agrega un contraste constante del desfile de bloques de texto regulares. También lleva texto e imágenes a relaciones más cercanas, haciéndolos sentir composición compartida en lugar de elementos aislados.
mayoría shape-outside La explicación comienza con círculos o elípticos, pero creo que deberían comenzar con algo más expresivo: envolver texto en el canal alfa de la imagen.
img {
float: left;
width: 300px;
height: auto;
shape-outside: url('patty.webp');
shape-image-threshold: .5;
shape-margin: 1rem;
}Sin camino de recorte. Sin polígonos. Simplemente deje que el esquema natural del texto del formulario de la imagen. Este es un pequeño detalle que hace que el diseño se sienta más considerado, más refinado y más humanizado.
Integre los subtítulos en su diseño
Los subtítulos no tienen que sentarse en silencio debajo de la imagen. Pueden desempeñar un papel más expresivo en la configuración de la forma en que se perciben y entienden las imágenes. Para mí, la mayoría de los subtítulos parecen pensamientos posteriores: texto pequeño, gris, escondido debajo de la imagen.
Pero cuando pienso más sobre su posicionamiento y estilo, los subtítulos se convierten en una parte activa del diseño. Pueden ayudar a guiar la atención, resaltar puntos de vista importantes y aportar más personalidad a la página.
No existe una regla de que los subtítulos deben ubicarse debajo de la imagen. ¿Por qué no considerarlos como elementos de diseño ellos mismos? Podría colocar el título a la izquierda o a la derecha de la imagen.
figure {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
}
figure img {
grid-column: 1 / 6;
}
figcaption {
grid-column: 6;
}
O deja que se superponga a la imagen en sí:
figure {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
}
figure img {
grid-column: 1 / 6;
grid-row: 1;
}
figcaption {
grid-column: 5 / -1;
grid-row: 1;
}
Los subtítulos conectan imágenes y texto. Bien hecho, pueden ser promovidos y explicados. Tampoco tienen que ver la rutina. Puede diseñar el estilo, que parece extraer citas o notas laterales.
Podría diseñar un título para hacer eco de la cita, o combinarlo con el elemento gráfico para que sea menos como una etiqueta, pero más como parte de una historia que ayuda a contar.
El poder de los espacios
Hasta ahora, me he centrado en las imágenes: sus títulos, posicionamiento y tamaños. Pero hay otras cosas igualmente importantes: espacio Acerca de a ellos.
Un espacio no es un espacio vacío; está activo. Forma la sensación de contenido, cómo fluye y cómo se lee. Los bordes alrededor de la imagen, el relleno y el espacio negativo pueden afectar la atención que atrae y lo cómodo que está en la página.
El espacio más estricto al agrupar imágenes es útil, pero también crea tensión. En contraste, los espaciosos márgenes proporcionan más espacio para respirar para la imagen.
figure {
margin-block: 3rem;
}
Al igual que la esclavitud en la poesía o la pausa en la conversación, los espacios ralentizan las cosas y dejan que las personas se detengan naturalmente al leer.
en conclusión
Las imágenes en contenido de forma larga son más que ilustraciones. Dan forma a cómo las personas experimentan lo que están leyendo: cómo se sienten y recuerdan a través de él. Al ir más allá del rectángulo predeterminado, podemos usar imágenes para crear ritmo, personalidad e incluso momentos sorprendentes.
Ya sea por romper la cuadrícula, elegir irradiarla en el texto completo, empacar o diseñar subtítulos lúdicos, se trata de intencionalidad. Entonces, la próxima vez que escriba un artículo largo, no se sorprenda «,¿Dónde puedo poner la imagen?» preguntar, «¿Cómo ayuda esta imagen a dar forma a la experiencia de alguien?transparente
