Decisiones de diseño inspiradas con Bradbury Thompson: el arte del diseño gráfico
Publicado: 2022-03-10La idea de esta serie, y el libro que la seguirá, surgió de una conversación informal, pero escribirla tuvo un profundo impacto en mí y en el trabajo que hago para la web.
Soy más reflexivo en mi enfoque del diseño de la página y de las formas en que una página y su contenido se adaptan a diferentes tamaños de pantalla. Tengo una comprensión mucho mayor de cómo la composición ayuda a la comunicación y puede mejorar las historias que cuento sobre los negocios, productos o servicios de mis clientes.
Descubrí cómo crear mejor un ritmo que fluye de una página a otra. Aprendí cómo ese ritmo produce diseños visuales más atractivos y experiencias atractivas, y cuán flexibles pueden ser incluso las cuadrículas más simples cuando se abordan con imaginación.
Me fascinó la forma en que los directores de arte de las revistas, incluidos Alexey Brodovitch y Bea Feitler, unían imágenes y texto. Mi conocimiento de la tipografía se desarrolló junto con mi entusiasmo por la tipografía expresiva y entretenida. Es poco probable que alguna vez haga una tipografía tan hermosa como la de Herb Lubalin, o tan desafiante como la de Neville Brody, pero tengo más confianza para experimentar.
Este proyecto me dio la confianza para, como sugirió Ruth Ansel, "salir de lo esperado", tomar decisiones seguras y confiar en mis instintos cuando algo se siente bien. Aprendí a canalizar mi actitud a menudo rebelde hacia el pensamiento de diseño convencional para desarrollar soluciones novedosas a problemas de diseño a menudo cotidianos.
Trabajamos en una industria que ahora está más dominada por los aspectos académicos, mecánicos y técnicos del diseño. Desarrollar esta serie me ha reafirmado que, si bien esas actividades son importantes, como escribió Giovanni Pintori, “necesitamos lógica e imaginación en igual medida”.
Como explicó Neville Brody, “una vez que has desglosado las reglas, literalmente todo es posible”. El pensamiento no convencional no tiene por qué ser a expensas de la usabilidad. Aprender cómo las personas interactúan con un sitio web o usan un producto no debe dictar un diseño, sino proporcionar una plataforma en la que desarrollar experiencias atractivas, entretenidas y, en última instancia, más memorables.
Aprender sobre el trabajo de diseñadores de diferentes épocas y diversos campos no solo inspiró mis propias ideas, sino que me dio entusiasmo para aprender más. Encontrar nuevas fuentes de inspiración se ha convertido en una obsesión casi diaria, y aunque las paredes de mi estudio aún no estén tan llenas como las de Ruth Ansel y Bea Feitler, mis estanterías, mesas de café y escritorio están casi rebosantes de mi colección de libros de diseño.
Durante mucho tiempo, tuve la sensación persistente de que la web puede hacer mucho más de lo que estamos haciendo. Cada uno de los diseñadores que he presentado a lo largo de esta serie desafió las percepciones, influyó en la dirección de su medio y, en última instancia, inspiró a otros, incluido yo mismo, a crear un mejor trabajo. Espero que, de alguna manera, esta serie pueda hacer lo mismo.
Inspirado por Bradbury Thompson
Estudiar a uno de los directores de arte y diseñadores gráficos más exitosos del siglo pasado parece un cierre apropiado para esta serie.
Bradbury Thompson nació en Kansas en 1911 y, aunque puede que no haya sido el más conocido, no hay duda de que fue uno de los más influyentes. Thompson estudió en Washburn College en su ciudad natal de Topeka. Desde muy temprano, se inspiró en los diseños impresos, especialmente en las revistas, y usó esta influencia para diseñar los anuarios de la universidad.
Después de graduarse de Washburn, Thompson trabajó durante cinco años en Capper Publications, una imprenta local. Este primer trabajo como junior en una imprenta no habría sido glamoroso, pero le dio a Thompson un amplio conocimiento de las técnicas de diseño e impresión que usaría a lo largo de su larga carrera.
Kansas en la década de 1930 era bien conocido por sus severas tormentas de polvo, pero no como un centro creativo, por lo que en 1938 Thompson viajó 1,200 millas al este hasta la ciudad de Nueva York. Increíblemente, para un joven recién llegado de Kansas, uno de sus primeros proyectos fue diseñar el catálogo de la Feria Mundial de 1939.
Thompson trabajó para Rogers-Kellogg-Stillson, la empresa de impresión responsable de esa Feria Mundial, y se le asignó trabajar en Westvaco Inspirations for Printers. Esta serie de folletos promocionales fue publicada por Westvaco Corporation para mostrar su línea de papeles de impresión. Cada número constaba de solo dieciséis páginas, pero le dio a Thomson una "rara oportunidad para experimentar siempre que un diseñador receptivo".
Westvaco había publicado Inspirations desde la década de 1920 y ya circulaba ampliamente entre una audiencia de 35 000 agencias, museos, imprentas, escuelas y universidades.
Thomson no recibió presupuesto para encargar obras de arte o fotografías originales para la publicación, pero en lugar de dejar que esto limitara sus ideas, lo utilizó como una oportunidad para ser creativo. Inspirations le dio a Thomson la libertad de experimentar con ideas y técnicas, y de explorar conceptos creativos. Se convirtió en “uno de los mejores scroungers de mi profesión” tomando prestadas placas impresas y separaciones de agencias, revistas e incluso museos para incorporarlas a su trabajo.
Estos elementos prestados incluyeron fotografías e ilustraciones históricas que Thomson combinó con tipografía contemporánea y colores de proceso modernos. Para Victory, una extensión de Inspirations en 1953, Thomson incorporó ilustraciones de flechas y las integró en objetivos hechos de colores sólidos. Tomó prestados elementos del arte popular y primitivo, convirtiéndolos en obras originales que mezclaban lo moderno con lo tradicional. Trabajar en Inspirations estimuló la creatividad de Thompson, y pasó a diseñar más de 60 ediciones.
Durante la Segunda Guerra Mundial, Thompson diseñó los últimos números de dos revistas de guerra, Victory y USA, que fueron publicadas por la Oficina de Información de Guerra. Luego, en 1945, se convirtió en director de arte de la revista Mademoiselle y permaneció en el cargo durante los siguientes quince años.
Las tendencias eclécticas que Thompson había desarrollado trabajando en Inspirations continuaron en Mademoiselle y ahora con un presupuesto para trabajar, encargó a los artistas emergentes Andy Warhol, Joan Miro, Willem de Kooning y mi artista pop favorito Jasper Johns que ilustraran para su sección de ficción.
El trabajo de Thomson en revistas no comenzó ni terminó con Mademoiselle y, a lo largo de su carrera, trabajó en más de treinta más, incluidas Business Week, Harvard Business Review y la revista Smithsonian.
Puede que Bradbury Thompson no se encuentre entre los diseñadores gráficos más famosos, pero fue ampliamente reconocido en su industria y recibió los tres principales premios de diseño y más. Sus premios incluyeron el Premio de la Sociedad Nacional de Directores de Arte del Año (1950) y la Medalla AIGA (1975). En 1977, Thompson fue incluido en el Salón de la Fama del Club de Directores de Arte, y durante la década de 1980 ganó por primera vez el Premio Frederic W. Goudy. y luego la Medalla del Club de Directores Tipo.
Desde sus primeras experiencias trabajando en Topeka, Thompson fue un diseñador orientado a los detalles que prestó atención a los detalles más finos de su tipografía y al recorte y ubicación precisos de sus imágenes. Su inteligente uso de paletas a menudo simples de colores de proceso junto con ilustraciones históricas en blanco y negro y formas geométricas hicieron que su trabajo fuera clásico y contemporáneo al mismo tiempo.
El tipo es algo de constante interés para mí. En resumen, el tipo puede ser una herramienta, un juguete y un maestro. Puede proporcionar un medio de subsistencia, un pasatiempo para la relajación, un estimulante intelectual y una satisfacción espiritual. Creo que un ávido interés por la tipografía incluye necesariamente un entusiasmo por la vida cotidiana.
—Bradbury Thompson
Al igual que la arquitectura, la tipografía es una mezcla de belleza con utilidad funcional y los diseños de Thompson a menudo combinaban arreglos tipográficos inusuales con formas coloridas. Para Rain, Rain, Rain, un artículo para la revista Mademoiselle en 1958, reprodujo la misma figura con impermeable y paraguas como cinco siluetas de colores.
En Futural, una extensión de Westvaco Inspirations for Printers en 1962, Thompson reflejó las formas simplificadas de los aviones en las páginas, utilizando líneas en el verso y colores sólidos en el anverso. Regularmente sobreimprimía sus formas coloridas para agregar profundidad e interés a sus diseños.
Gracias a su experiencia en tecnologías de impresión, los diseños exclusivos de Thompson suelen utilizar solo cuatro colores de proceso. En la impresión offset, los colores de proceso se componen de porcentajes de tintas cian, magenta, amarilla y clave (negra) (CMYK). Este proceso de impresión a cuatro colores es capaz de producir una amplia gama de colores.
Los diseños más conocidos de Thompson suelen utilizar estos colores en su forma más pura. Frecuentemente separaba los colores y los imprimía en diferentes zonas de sus composiciones. Usamos el modelo RGB cuando diseñamos para pantallas, pero separar esos tres colores en la forma en que Thompson separó los colores CMYK de los componentes puede crear diseños inspiradores para la web.
Thompson enseñó diseño gráfico en la Escuela de Arte de la Universidad de Yale desde 1956 hasta su muerte en Connecticut en 1995.
The New York Times Book Review dijo que su autobiografía artística, “El arte del diseño gráfico”, fue un libro en el que “el arte y el diseño se mezclan gloriosa y atrevidamente”, lo cual es una buena representación de su estrategia de diseño en general. “El arte del diseño gráfico” se publicó en 1988. Si bien la copia original en tapa dura que me gustaría tener en mi colección ahora es prohibitivamente costosa, las versiones en rústica reimpresas están disponibles a precios más realistas.
Procesando la paleta de colores
Comienzo a implementar este primer diseño considerando primero mi contenido, luego los elementos HTML más apropiados para describirlo. Para este diseño inspirado en Thompson, solo necesito algunos elementos, un encabezado, un artículo y un aparte, más dos figuras:
<header> <svg>…</svg> <h1>…</h1> <svg>…</svg> </div> </header> <article> <main>…</main> </article> <figure>…</figure> <aside>…</aside> <figure>…</figure>Como he discutido a lo largo de esta serie, mi proceso siempre comienza aplicando estilos de base, que incluyen colores y tipografía. Agrego un color de fondo azul profundo y un texto serif blanco contrastante:
body { padding: 2rem 0; background-color: #1f455f; font-family: 'serif'; color: #fff; }Diseño mis títulos en cursiva, luego agrego tamaños para los niveles de encabezado y párrafos:
h1, h2 { font-style: italic; } h1 { font-size: 2.8rem; } h2 { font-size: 2.027rem; } p { font-size: .8rem; }Finalmente, coloreo los subtítulos que acompañan a las imágenes de mis figuras con un verde vibrante y pongo el texto en cursiva para que coincida con mis estilos de titulares:
figcaption { font-size: .8rem; font-style: italic; text-align: center; color: #d2de4a; } 
CMYK en RGB
Para producir colores de proceso CMYK: cian, magenta, amarillo y clave (negro) en RGB (rojo, verde y azul) para pantallas, utilice valores máximos para dos de esos colores. Si el resultado es demasiado duro para los ojos, agregue negro para crear tintes y suavizar el efecto.
Incluso en las pantallas más pequeñas, es necesario que quede algo de espacio vacío. Esto permite que el ojo fluya alrededor del contenido. Los márgenes y el relleno suelen ser todo lo que se necesita para agregar un espacio vacío:
#logo { margin: 0 auto 1rem; } #banner { margin: 1rem 1rem 1rem 0; } main, aside { margin: 0 1rem; } figure { margin: 2rem auto; }Reducir el ancho máximo de los elementos gráficos agrega espacio en blanco e interés visual a los diseños de pantalla pequeña:
#logo { max-width: 25vw; } figure { max-width: 50vw; } 
El espacio adicional disponible en las pantallas de tamaño mediano me permite presentar el primer conjunto de estilos de diseño para este diseño. Al dividir mi texto en ejecución en dos columnas, ayudo a mantener la coherencia en su medida. Colocar mis dos figuras, una al lado de la otra, mantiene sus proporciones relativas a mi texto.
Comienzo aplicando propiedades de cuadrícula y una cuadrícula simétrica inusual de cinco columnas al elemento del cuerpo. Luego, agrego una imagen de fondo de URI de datos y la coloco a la derecha de mi diseño:
@media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; background-image: url("data:image/svg+xml…"); background-position: 120% 50%; background-repeat: no-repeat; } }Necesito colocar el contenido de mi encabezado y artículo directamente en mi cuadrícula, por lo que cambio la propiedad de visualización de esos elementos a contenidos, lo que los elimina de manera efectiva con fines de diseño:
header, article { display: contents; }Luego, coloco cada elemento de contenido en un conjunto diferente de columnas y filas de cuadrícula usando números de línea. Primero, coloco el logotipo de Ford en una sola columna. Puedo eliminar el ancho máximo que configuré anteriormente, ya que su tamaño ahora dependerá del ancho de su columna:
#logo { grid-column: 2; margin: 0; max-width: none; }El banner contiene el perfil de una furgoneta Transit y el titular principal ocupa las primeras cuatro de mis cinco columnas:
#banner, h1 { grid-column: 1 / 4; }Al dejar la primera columna vacía, el contenido de los elementos principales y secundarios se sangra desde la izquierda. Al configurar sus anchos para que coincidan con los de mi banner, agrego una asimetría agradable al diseño:
main, aside { grid-column: 2 / -1; }Aunque mis dos figuras no son elementos adyacentes en mi HTML, CSS Grid hace que colocarlas una al lado de la otra sea sencillo. Los coloco en diferentes columnas en la misma fila sin necesidad de modificar mi HTML:
figure:nth-of-type(1) { grid-column: 2 / 4; grid-row: 5; } figure:nth-of-type(2) { grid-column: 4 / -1; grid-row: 5; }En muchos de mis diseños, uso sangría en lugar de espacio entre párrafos para crear bloques sólidos a partir de mi texto continuo. Este efecto es aún más llamativo cuando se configura el texto en varias columnas:
p { margin-bottom: 0; } p + p { text-indent: 2ch; } main { column-width: 16em; }Los elementos de la figura pueden incluir una o más leyendas e imágenes. Los subtítulos suelen aparecer debajo de las imágenes que describen, pero no hay razón por la que los subtítulos deban permanecer debajo. Puedo colocarlos arriba, o también a la izquierda o derecha de una imagen.
Cuando coloco subtítulos a la izquierda o a la derecha de una imagen, inmediatamente le doy a los diseños el aspecto de una revista. Uso Flexbox y luego la propiedad flex-direction para moverlos:
figure { display: flex; }El título de mi primera figura aparece a la izquierda, así que invierto la dirección flexible de esta figura desde su fila predeterminada:
figure:nth-of-type(1) { flex-direction: row-reverse; }Flexbox me permite organizar elementos tanto vertical como horizontalmente. Para colocar mis subtítulos en el borde inferior de mis imágenes, cambio su alineación del eje transversal del estiramiento predeterminado al extremo flexible:
figure { align-items: flex-end; }Para darle un toque final a este diseño de tamaño mediano, alineo ambos títulos en direcciones opuestas:
figure:nth-of-type(1) figcaption { text-align: right; } figure:nth-of-type(2) figcaption { text-align: left; } 
El espacio vacío ayuda a guiar la vista en cada etapa de este diseño. El espacio adicional disponible en pantallas más grandes me permite desarrollar un diseño asimétrico distintivo.
El uso de una cuadrícula compuesta (dos o más cuadrículas superpuestas o apiladas) en una página puede crear composiciones llamativas. La cuadrícula compuesta de este diseño se superpone a una cuadrícula de cuatro y seis columnas que crea un patrón rítmico de 2|1|1|2. Transfiero ese patrón a unidades fr y las aplico como columnas al elemento del cuerpo:
@media (min-width: 64em) { body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }Luego, agrego cuatro filas usando una combinación de píxeles, unidades rem y tamaño intrínseco, antes de establecer la altura mínima de la página para llenar la ventana gráfica:
body { grid-template-rows: 100px 14rem 14rem auto; min-height: 100vh; }Para completar los estilos de cuerpo, agrego dos nuevas imágenes de fondo de URI de datos y especifico sus tamaños para que siempre estén contenidos dentro de la ventana gráfica:
body { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"); background-position: 0 50%, 100% 50%; background-size: contain; } 
Este diseño asimétrico está muy estructurado y cada elemento se coloca con precisión en mi cuadrícula. Utilizo números de línea para colocar los elementos estructurales, elevando el título superpuesto sobre la imagen del banner en el orden de apilamiento:
#logo { grid-column: 2 / 4; grid-row: 1; } h1 { grid-column: 1 / 5; grid-row: 2 / 4; align-self: center; z-index: 2; } #banner { grid-column: 1 / 5; grid-row: 2 / 4; z-index: 1; }Mi contenido principal ocupa las últimas dos columnas y formas e isla a la derecha de este diseño:
main { grid-column: 7 / -1; grid-row: 2 / 4; column-width: auto; } aside { grid-column: 6 / -1; grid-row: 4 / 5; }Coloco las dos figuras en esta nueva cuadrícula:
figure:nth-of-type(1) { grid-column: 5 / 6; grid-row: 2 / 3; } figure:nth-of-type(2) { grid-column: 2 / 5; grid-row: 4 / 5; }Luego, ajusto la dirección de su flexión, colocando la primera figura verticalmente, de modo que mi título aparezca sobre su imagen hermana:
figure:nth-of-type(1) { flex-direction: column-reverse; }El contenido de mi segunda figura está dispuesto horizontalmente con la imagen y el título descansando sobre la línea de base:
figure:nth-of-type(2) { flex-direction: row; align-items: flex-end; } 
Ajusto la alineación de ambos subtítulos y este primer diseño inspirado en Thompson está completo:
figure:nth-of-type(1) figcaption { text-align: center; } figure:nth-of-type(2) figcaption { flex: 1; text-align: left; }Colorido complementario
A pesar de la aparente complejidad de este diseño, solo necesito tres elementos estructurales en mi HTML: un encabezado que contenga camionetas Transit en una variedad de colores complementarios, luego dos elementos de contenido, uno principal y otro secundario:
<header>…</header> <main>…</main> <aside>…</aside>Un encabezado colorido y complementario es la pieza central de este diseño. Puede ser tentador implementar esto usando una sola imagen grande. Pero quiero desarrollar varios arreglos para diferentes tamaños de pantalla, por lo que usar nueve imágenes separadas me permite hacer un panel de desplazamiento para pantallas pequeñas y organizarlas en una cuadrícula para pantallas medianas y grandes:
<header> <img src="header-1.svg" alt="Ford Transit"> <img src="header-2.svg" alt=""> <img src="header-3.svg" alt=""> … <img src="header-9.svg" alt=""> </header> 
Tanto el elemento principal como el secundario incluyen un título, una imagen SVG de partes de Transit ampliada, además de divisiones para organizar mi contenido en columnas:
<main> <h1>…</h1> <div>…</div> <div>…</div> <svg>…</svg> </main> <aside> <h2>…</h2> <div>…</div> <div>…</div> <svg>…</svg> </aside>Comienzo aplicando un color de fondo gris oscuro al elemento del cuerpo y agrego estilo a mis titulares y párrafos:
body { background-color: #262626; font-family: 'sans-serif'; color: #fff; } h1, h2 { font-size: 2.027rem; font-style: italic; text-transform: uppercase; } p { font-size: .8rem; } 
A menudo, el flujo normal más algunos estilos básicos es todo lo que necesito para implementar una versión de pantalla pequeña de mis diseños, pero este incluye estilos de diseño desde el principio. Comienzo transformando mi encabezado y sus nueve imágenes en un panel de desplazamiento horizontal al agregar propiedades de flexión y desbordamiento:
header { display: flex; overflow-x: scroll; margin: 0 2rem 2rem; } header img:not(:last-of-type) { margin-right: 1rem; }El encabezado no es el único elemento para obtener un diseño en pantallas pequeñas, los elementos principales y secundarios también obtienen cuadrículas:
main, aside { display: grid; margin: 0 2rem; }Primero, aplico un diseño de dos columnas al elemento principal. La imagen SVG de las partes de Transit explosionadas encaja en la columna de la derecha, por lo que fijo su ancho en 100 px. La columna de la izquierda se expande para llenar cualquier espacio restante.
main { grid-template-columns: [content] 1fr [svg] 100px; }Luego, coloco los elementos del elemento principal usando líneas de cuadrícula con nombres que reflejan su contenido:
h1 { grid-column: content; grid-row: 1; } main > div:nth-of-type(1) { grid-column: content; grid-row: 2; } main > div:nth-of-type(2) { grid-column: content; grid-row: 3; } main > svg { grid-column: svg; grid-row: 1 / 4; }El elemento aparte también tiene un diseño de dos columnas, pero esta vez la columna angosta y sus partes de Tránsito explosionadas están a la izquierda. Para enfatizar la distinción entre mis áreas de contenido principal y aparte, agrego un borde sólido en la parte superior del lado:
aside { grid-template-columns: [svg] 100px [content] 1fr; padding-top: 1rem; border-top: 3px solid #b22f65; }Uso líneas con nombre para colocar su contenido en mi cuadrícula:
h2 { grid-column: 1 / -1; grid-row: 1; } aside > div:nth-of-type(1) { grid-column: content; grid-row: 2; } aside > div:nth-of-type(2) { grid-column: content; grid-row: 3; } aside > div:nth-of-type(3) { grid-column: svg; grid-row: 2 / 4; }Un encabezado y cuadrículas de desplazamiento horizontal en mi contenido demuestran cómo a veces es beneficioso usar más de un diseño de una sola columna para pantallas pequeñas. Esos mismos elementos se pueden disponer de formas muy diferentes en el espacio extra disponible en las pantallas de tamaño medio.
En esta versión de mi diseño, una cuadrícula de nueve imágenes coloridas y complementarias llena el encabezado. Aplico propiedades de cuadrícula y tres columnas simétricas:
@media (min-width: 48em) { header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; overflow-x: visible; } } 
A diferencia de otros elementos de este diseño, no es necesario colocar las imágenes en esta cuadrícula, ya que el algoritmo de colocación automática del navegador las organiza automáticamente.
De forma predeterminada, los navegadores colocan elementos horizontalmente en filas. Pero, al cambiar el valor de grid-auto-flow a column, un navegador llena cada columna verticalmente antes de pasar a la siguiente:
Con más espacio disponible para mi contenido, aumento el número de columnas de dos a cuatro:
main, aside { grid-template-columns: 1fr [svg] 1fr 1fr 1fr; gap: 2rem; }Luego, alineo el contenido de mi elemento principal hasta el final, de modo que forme un bloque sólido en el centro de mi diseño:
main { align-items: end; }Mi titular principal abarca las cuatro columnas. Aunque aparece primero en mi HTML, puedo colocarlo visualmente debajo de mi texto e imágenes en ejecución al agregarlo a la segunda fila:
h1 { grid-column: 1 / -1; grid-row: 2; border-bottom: 3px solid #b22f65; }Coloco mi primer bloque de contenido en la columna de la izquierda:
main > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }El segundo bloque abarca dos columnas a la derecha:
main > div:nth-of-type(2) { grid-column: 3 / span 2; grid-row: 1; }A continuación, coloco la división final, que contiene mi imagen SVG, en la segunda columna usando su nombre de línea:
main > div:nth-of-type(3) { grid-column: svg; grid-row: 1; }La implementación de columnas para el elemento aparte sigue un método similar. Nuevamente, modifico la ubicación visual de mi título usando números de línea de fila:
h2 { grid-column: 3 / -1; grid-row: 2; } aside > div:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; } aside > div:nth-of-type(2) { grid-column: 3 / -1; grid-row: 1; } aside > div:nth-of-type(3) { grid-column: svg; grid-row: 1 / 3; } 
Una imagen de página completa que ocupa la mitad de un pliego es una vista común en los diseños de revistas. Las imágenes grandes como estas pueden ser igualmente efectivas en pantallas panorámicas. Aplico propiedades de cuadrícula al elemento del cuerpo con dos columnas simétricas, luego nombro el verso de la columna izquierda y el recto de la columna derecha:
@media (min-width: 64em) { body { display: grid; grid-template-columns: [verso] 1fr [recto] 1fr; gap: 2rem; } }Estos términos se originan en latín donde dos páginas opuestas se denominan folium rectum y folium versum. Coloco mi encabezado en la columna del verso, y los elementos principales y secundarios se apilan en la columna del recto:
header { grid-column: verso; grid-row: 1 / 4; } main, aside { grid-column: recto; } 
Finalmente, para mejorar la legibilidad de mi texto en ejecución en pantallas muy anchas, introduzco un diseño de varias columnas. Un navegador generará automáticamente columnas de 10 em de ancho para llenar el espacio disponible:
@media (min-width: 72em) { main > div:nth-of-type(2), aside > div:nth-of-type(2) { column-width: 10em; column-gap: 2rem; } }Tipo escalable de enmascaramiento
Como alguien que disfruta de los aspectos creativos del diseño tipográfico, pero también valora la accesibilidad y el rendimiento, SVG se ha convertido en una parte tan importante de mi conjunto de herramientas de desarrollo diario como CSS y HTML.
Este próximo diseño inspirado en Thompson combina texto SVG con máscaras y formas CSS, pero necesita muy poco HTML, solo un encabezado y un elemento principal:
<header> <div> <svg>…</svg> </div> <header> <main> <svg>…</svg> </main>Antes de comenzar a desarrollar los llamativos SVG, agrego estilos básicos que le dan a la página un color de fondo azul profundo y un texto blanco contrastante:
body { background-color: #1f455e; font-family: 'sans-serif'; color: #fff; } 
Este encabezado incluye un gráfico escalable en el que el texto repetido tiene la forma del contorno de una furgoneta Transit. SVG incluye su propio método para recortar partes de una imagen. Para definir una ruta de recorte, agrego un elemento clipPath a mi SVG. Esto, a su vez, contiene una ruta que define mi área recortada. Para poder hacer referencia a este clipPath más adelante en mi SVG, le doy un identificador único:
<svg> <clipPath> <path>…</path> </clipPath> </svg>Luego, agrego las coordenadas de la ruta que componen mi texto gráfico. Le doy a este grupo de rutas de colores brillantes un valor de atributo de clase que puedo usar para vincularlo a mi clipPath:
<svg> <clipPath>…</clipPath> <g class="transit"> <path>…</path> </g> </svg>Ya sea que incluya este SVG en mi HTML usando un elemento de imagen, o inserte el SVG directamente en mi marcado, uso la propiedad clip-path de CSS para recortar mi texto gráfico usando su clipPath:
<style type="text/css"><![CDATA[ .transit { -webkit-clip-path: url(#transit); clip-path: url(#transit); } ]]></style>Con clipPath, solo se muestran las áreas dentro de un trazado de recorte. Cualquier cosa fuera del área recortada permanecerá invisible.
Pero hay otra forma de enmascarar un elemento, una que funciona con todo tipo de contenido, no solo con SVG. De forma similar a la ruta de recorte, las máscaras CSS ocultan partes de un elemento utilizando una imagen de máscara en blanco y negro.
header div { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); }Cuando se aplica una máscara, solo se mostrarán las áreas de un elemento que coincidan con las partes negras de la máscara. Todo lo que esté fuera de estas áreas desaparecerá.
Las propiedades de mask-image comparten muchas similitudes con los fondos en CSS. Al igual que las imágenes de fondo, las máscaras se pueden colocar, repetir y cambiar de tamaño, e incluso se pueden desarrollar a partir de degradados de fondo. Como no necesito que se repita la imagen de mi máscara, establezco su valor en no repetición, tal como lo haría con cualquier imagen de fondo:
header div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } 
El contenido de mi SVG en el elemento principal es completamente diferente. Este gráfico contiene líneas de colores brillantes de texto SVG que explican el pedigrí de la camioneta Transit. Envuelvo cada línea dentro de un elemento tspan, cada uno con sus propias coordenadas x e y que empaquetan el texto en un bloque sólido:
<svg> <text> <tspan x="0" y="86">BUILT AS A PASSENGER VAN, MINIBUS, </tspan> <tspan x="0" y="156">CUTAWAY VAN CHASSIS, AND A PICKUP </tspan> <tspan x="0" y="226">TRUCK. OVER 8,000,000 TRANSIT VANS </tspan> <tspan x="0" y="296">HAVE BEEN SOLD, MAKING IT THE THIRD </tspan> <tspan x="0" y="366">BEST-SELLING VAN OF ALL TIME.</tspan> </text> </svg>Los elementos de texto SVG se pueden diseñar como cualquier texto HTML, por lo que para enfatizar la solidez de este bloque, elijo un sans-serif condensado y pesado, luego ajusto su seguimiento reduciendo el espacio entre letras en -2px;
text { font-family: 'sans-serif-condensed'; font-size: 83px; font-weight: 700; letter-spacing: -2px; }Los selectores de pseudoclase CSS son tan útiles para diseñar elementos en SVG como lo son para HTML. Utilizo selectores de tipo n para dar a cada línea de texto tspan su propio color:
tspan:nth-of-type(1) { fill: #c43d56; } tspan:nth-of-type(2) { fill: #f2c867; } tspan:nth-of-type(3) { fill: #377dab; } tspan:nth-of-type(4) { fill: #fff; } tspan:nth-of-type(5) { fill: #c43d56; } 
El estilo sólido de este diseño tipográfico lo convierte en un elemento de encabezado elegante, pero hay ocasiones en las que podría necesitar agregar más contenido a esta página. Para una versión alternativa de este diseño, agrego un párrafo que explica la historia de la producción de la camioneta Transit en mi encabezado:
<header> <div> <svg>…</svg> </div> <p>…</p> </header>En mis estilos básicos, agrego un tamaño de fuente y configuro el párrafo en mayúsculas para que coincida con mi texto SVG anterior:
header p { font-size: .91rem; text-transform: uppercase; }Luego, justifico el texto del párrafo para las personas que usan navegadores que también admiten la partición automática:
@supports (-webkit-hyphens: auto) or (hyphens: auto) { header p { -webkit-hyphens: auto; hyphens: auto; text-align: justify; } }En pantallas pequeñas y medianas, este nuevo párrafo de texto sigue el SVG del encabezado como lo hace en el HTML. Pero, para pantallas más grandes, quiero que este texto flote junto al gráfico enmascarado.
Le doy al gráfico de encabezado un ancho explícito basado en la ventana gráfica, luego lo hago flotar para permitirme envolver mi texto alrededor de él usando Formas CSS. Como quiero que esta forma coincida con mi gráfico enmascarado, utilizo la misma imagen de máscara para la URL externa de la forma:
@media (min-width: 64em) { header div { float: left; width: 65vw; margin-bottom: 0; shape-outside: url(mask.svg); shape-margin: 20px; } }División de simetría
Para el último ejemplo inspirado en este número, y de hecho para toda la serie, el diseño simétrico dividido significa que solo necesito dos elementos estructurales. A estas alturas, estos encabezados y elementos principales deberían sentirse muy familiares. Mi encabezado incluye el logotipo clásico de Ford, una imagen SVG y un titular:
<header> <svg>…</svg> <img src="header.svg" alt="Ford Transit"> <h1>…</h1> </header>El elemento principal también incluye una imagen escalable, además de un solo párrafo de texto continuo:
<main> <p>…</p> <img src="main.svg" alt=""> </main>Como siempre, empiezo primero con la pantalla pequeña agregando estilos básicos de color y tipografía. Esta vez, un fondo gris claro, texto gris oscuro y un tipo de letra sans-serif:
body { background-color: #ededef; font-family: 'sans-serif'; color: #262626; } h1 { text-align: center; text-transform: uppercase; }El encabezado aparece primero en mi HTML, por lo que también lo diseñaré primero dándole un fondo gris oscuro y un texto más claro, que es el inverso de los estilos de mi cuerpo:
header { margin-bottom: 2rem; padding: 2rem; background-color: #262626; color: #ededef; } 
Finalmente, para pantallas pequeñas, centro ese logotipo horizontalmente y limito su ancho máximo a la mitad del de la ventana gráfica:
#logo { margin: 0 auto 2rem; max-width: 50vw; }Este diseño adquiere una apariencia más inspirada en Thompson con el espacio adicional disponible en las pantallas de tamaño mediano. Necesito colocar elementos en el encabezado y los elementos principales, por lo que agrego propiedades de cuadrícula y cuatro columnas simétricas a ambos:
@media (min-width: 48em) { header, main { display: grid; grid-template-columns: repeat(4, 1fr); } }Luego, agrego tres filas explícitas a mi encabezado. El primero y el último tienen una altura de 100 px, mientras que la fila del medio se expande para llenar todo el espacio restante:
header { grid-template-rows: 100px auto 100px; }Ahora es el momento de colocar esos elementos de encabezado en mis columnas y filas usando números de línea. El logotipo de Ford es lo primero y encaja en las dos columnas centrales. El título es el último y se encuentra en la parte inferior mientras abarca todo el ancho. Le doy a ambos elementos un valor de índice z más alto, para que aparezcan más cerca del espectador en el orden de apilamiento:
#logo { grid-column: 2 / 4; grid-row: 1; z-index: 2; } h1 { grid-column: 1 / -1; grid-row: 3; z-index: 2; }Luego, coloco la imagen del encabezado, de modo que cubra todas las columnas y todas las filas. Al darle un valor de índice z más bajo, me aseguro de que retrocede al final del orden de apilamiento:
header img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }Con los estilos para la imagen del encabezado en su lugar, agrego un selector que aplica exactamente los mismos estilos a la imagen en mi elemento principal:
header img, main img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }Si bien el texto vertical no se adapta a todos los diseños, puede convertir un pasaje corto en una fuerte declaración visual. Cambio el modo de escritura del párrafo a vertical-rl y aumento su interlineado usando unidades basadas en ventana gráfica:
main p { line-height: 3vw; white-space: pre-wrap; writing-mode: vertical-rl; }Para un toque final decorativo, cambio su color y aplico un modo de fusión con un valor de diferencia que también aumenta la legibilidad de este texto donde aparece sobre el fondo gráfico:
main p { color: #f4eBd5; mix-blend-mode: difference; } 
Coloco el párrafo en las dos columnas centrales, lo alineo centralmente y luego agrego un valor de índice z más alto para asegurarme de que aparezca en la parte superior del orden de apilamiento de este elemento:
main p { grid-column: 2 / 4; grid-row: 1 / 4; align-self: center; z-index: 2; } 
Hasta ahora, este contenido principal viene después de mi encabezado en el flujo del documento. Para pantallas más grandes, quiero que esos elementos se coloquen uno al lado del otro, así que aplico propiedades de cuadrícula y dos columnas simétricas al cuerpo:
@media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } }Mantenerse inspirado
Cuando me propuse producir esta serie, quería enseñar a la gente sobre la importancia de la inspiración fuera de la web. Mi objetivo era demostrar que observar los desafíos a los que se han enfrentado los diseñadores de otros medios, y cómo abordaron su solución, puede ayudarnos a crear productos y sitios web más distintivos, atractivos y, en última instancia, exitosos.
Por supuesto, esta serie apenas toca la superficie y puede encontrar ejemplos inspiradores en muchos más lugares de los que he descrito aquí. Visite la galería de arte, la librería, el museo o la tienda de discos más cercana y se encontrará rodeado de aportes e inspiración.
Espero que esta serie te haya inspirado a pensar en cómo diseñas para la web de manera diferente. ¿Los ejemplos de diseño de otros medios y períodos de la historia son relevantes para la web moderna? Por supuesto que lo son. ¿Podemos aprender del pasado mientras inventamos el futuro? Absolutamente. ¿Tenemos las tecnologías y herramientas para ofrecer diseños más inspiradores para la web? No hay duda de eso.
Me complace que la respuesta a esta serie haya sido abrumadoramente positiva, pero sé que hay mucho más que puedo hacer. Esta serie podría estar llegando a su fin, pero se ha comenzado a trabajar en un nuevo libro, Diseño inspirado para la Web. Este libro comenzará donde terminó la dirección de arte para la web, mostrará más ejemplos de diseño inspirado y profundizará en cómo podemos aprender lecciones y aplicarlas para mejorar aún más nuestros sitios web y productos.
Leer más de la serie
- Decisiones de diseño inspiradas: Revista Avaunt
- Decisiones de diseño inspiradas: Asuntos apremiantes
- Decisiones de diseño inspiradas: Ernest Journal
- Decisiones de diseño inspiradas: Alexey Brodovitch
- Decisiones de diseño inspiradas: Bea Feitler
- Decisiones de diseño inspiradas: Neville Brody
- Decisiones de diseño inspiradas: Otto Storch
- Decisiones de diseño inspiradas: Herb Lubalin
- Decisiones de diseño inspiradas: Max Huber
- Decisiones de diseño inspiradas: Giovanni Pintori
- Decisiones de diseño inspiradas: Emmett McBain
- Decisiones de diseño inspiradas: Bradbury Thompson
NB: Miembros de Smashing Los miembros de Smashing tienen acceso a un PDF bellamente diseñado de la revista Inspired Design Decisions de Andy y ejemplos completos de código de este artículo. Puede comprar el PDF y los ejemplos de este número, así como cualquier otro número, directamente desde el sitio web de Andy.