Decisiones de diseño inspiradas con Giovanni Pintori: la publicidad se convierte en una forma de arte

Con una o dos excepciones ocasionales, he pasado los últimos veintidós años diseñando para innumerables clientes. Algunos de estos proyectos duraron un año, algunos varios meses, pero la mayoría no más de unas pocas semanas.

Estar completamente absorto durante algunas semanas o meses en el diseño de una interfaz de producto o un sitio web puede ser emocionante. A menudo comienza con la gratificación que proviene de ganar el trabajo. Ganar la confianza de un nuevo cliente puede ser adictivo. Durante la fase seductora de “conocerte”, aprendes sobre el cliente y lo que espera de ti y de tu trabajo. Las personalidades adictivas como la mía anhelan la intensidad de estos sentimientos, pero, al igual que algunas relaciones, la emoción inicial pronto se desvanece en la realidad de trabajar juntos.

Esta promiscuidad creativa se ha adaptado muy bien a mi capacidad de atención, a menudo corta, y a mi curiosidad inquieta. Pero hubo momentos en los que deseé poder quedarme en una organización por más tiempo, conocerlos mejor y ser una influencia positiva en lo que hacen y crean.

Conozco a muchos diseñadores que trabajan internamente. Si bien nunca envidio su viaje al trabajo o el dinero que gastan en vivir cerca del trabajo, hay una parte de mí que envidia su capacidad para quedarse y dar forma a la dirección creativa a largo plazo de una empresa en la forma en que Giovanni Pintori ayudó a Olivetti.

“En nuestra época, la publicidad se ha convertido en una forma de arte y cada vez más necesita estar a la altura de este nombre. La publicidad es una forma de discurso que debe evitar la vaguedad en favor de la brevedad, la claridad y la persuasión. Quienes se dedican a la publicidad (escritores, pintores, arquitectos) necesitan lógica e imaginación en igual medida”.

— Giovanni Pintori

El diseñador italiano Giovanni Pintori trabajó para el fabricante de productos comerciales Olivetti durante más de 31 años. Durante este tiempo, su estilo se convirtió en el vocabulario de diseño único de la empresa. El atractivo de trabajar con una empresa durante más de unos pocos meses se ha vuelto más fuerte a medida que envejezco. Durante los últimos 18 meses, dediqué la mayor parte de mi tiempo a trabajar con una empresa suiza de ciberseguridad, con sede no lejos de Milán y donde Giovanni Pintori llamó su hogar.

Al igual que Olivetti, esta empresa valora el diseño en todas sus formas. Si bien mi principal prioridad es el diseño de los productos de la empresa, también he tenido la oportunidad de influir en su marca, marketing y dirección creativa general.

Sigo dedicando tiempo a los proyectos de otras personas cuando el trabajo me atrae, pero he aprendido lo gratificante que puede ser una relación con un cliente a largo plazo. Estoy feliz y creativamente más satisfecho de lo que he estado en años. Además, a medida que la vejez me alcanza, no tengo la energía para perseguir todos los proyectos atractivos como solía hacerlo.

Inspirado en Giovanni Pintori

Nacido en Cerdeña en 1912, Giovanni Pintori se convirtió en uno de los diseñadores gráficos europeos más influyentes del siglo XX. Se hizo conocido por el estilo distintivo que elaboró ​​en el lenguaje de diseño de Olivetti durante más de 30 años.

Pintori estudió diseño en el influyente L'Istituto Superiore per le Industrie Artistiche (Instituto Superior de Industrias Artísticas) de Italia, donde estuvo rodeado de artes creativas. ISIA era una escuela progresista donde los estudiantes estudiaban cerámica, pintura, metalistería y carpintería.

Mientras estudiaba en ISIA, Pintori conoció a Renato Zveteremich, el director de publicidad y publicista que dirigió el departamento de publicidad de Olivetti durante la década de 1930. Después de graduarse de HIAI, Pintori se unió a Olivetti para trabajar con Zveteremich y se convirtió en director artístico de la compañía en 1950.

Olivetti fabricó máquinas comerciales, siendo la más famosa su gama de máquinas de escribir. Cuando Pintori se unió a Olivetti, la empresa ya era conocida por sus diseños de productos originales. Sus productos eran inmediatamente reconocibles y, bajo la guía del diseñador industrial Marcello Nizzoli, se consideró cuidadosamente cada detalle de sus diseños, desde la forma de una barra espaciadora hasta el color de sus cubiertas exteriores.

“Si los artistas están llamados a interpretar, expresar y defender la pureza funcional de una máquina, es verdaderamente una señal de que la máquina ha entrado en el espíritu humano y que el problema de las formas y las relaciones es todavía de naturaleza intuitiva”.

— Renato Zveteremich

Pero la preocupación de Olivetti por el diseño no terminó con sus productos. La creatividad era parte esencial de la cultura de la empresa, que se evidenciaba desde la arquitectura de sus fábricas y oficinas hasta la publicidad y el diseño gráfico que utilizaba para promocionar sus productos.

Durante su carrera de 30 años en Olivetti, Pintori diseñó la publicidad, los folletos e incluso los calendarios anuales de la empresa. El estilo estético de Pintori era audaz y confiado. Usó colores brillantes de paletas de colores mínimas y los combinó con formas para llenar de energía sus diseños.

Pero el trabajo de Pintori no era solo lúdico, sino reflexivo. Su elección de formas no fue abstracta. Shapes sugirió los beneficios de usar un producto en lugar de describir sus características literalmente. Pintori no solo ilustró productos, sino que les dio vida a través de sus diseños al sugerir cómo podrían usarse y qué podrían hacer para mejorar la vida y el trabajo de las personas.

“No intento hablar en nombre de las máquinas. En cambio, he tratado de hacerlos hablar por sí mismos, a través de la presentación gráfica de sus elementos, su funcionamiento y su uso”.

Pintori definió la imagen de Olivetti mucho más allá de su paso por la empresa, y siguió trabajando en proyectos con ellos tras dejarla en 1967. Estableció su propio estudio en Milán, donde trabajó como diseñador freelance, antes de jubilarse y dedicarse a la pintura.

Giovanni Pintori murió en Milán en 1999, y hay un libro, Pintori de Marta Sironi y publicado por Moleskine, que cataloga su asombrosa carrera.

El trabajo de Pintori inspira no solo por la audacia de sus formas coloridas, sino por lo que representan. Pintori entendió que promocionar un producto requería más que enumerar sus características. La publicidad debe contar una historia que resuene en los clientes, y esa es una lección que debería inspirarnos a todos.

Creación de paletas de colores

Los colores que elegimos deben contar una historia sobre una empresa, producto o servicio con tanta elocuencia como nuestro diseño o tipografía. Nuestras elecciones de color pueden atraer la atención de alguien, influir en su percepción de lo que hacemos e incluso estimular emociones. El color juega un papel esencial para hacer que un producto o sitio web sea fácil e intuitivo de usar. Además de los colores de la marca, las paletas de colores para la web ayudan a las personas a navegar, les permiten saber qué pueden presionar y dónde han estado.

Me gusta mantener mis colores simples y mis paletas rara vez contienen más de tres tonos; un color dominante, un color secundario o de apoyo y un acento. A estos, agrego una pequeña selección de colores neutros para usar como fondos, bordes y texto.

Para agregar profundidad a mis diseños, y para darme una mayor flexibilidad, también introduzco sombras y matices de cada uno de mis tonos. Uso tonos más oscuros para los bordes, por ejemplo, alrededor de los botones, y tonos más claros para agregar luces.

Dado que los modos oscuros del sistema operativo se han vuelto más frecuentes, también altero sutilmente la luminosidad y la saturación de los colores en mis paletas, para que parezcan más vibrantes contra fondos oscuros.

Uso de colores primarios

El HTML necesario para implementar mi primer diseño inspirado en Pintori es significativo y simple como el diseño mismo. Necesito solo cuatro elementos estructurales; un encabezado que contiene dos SVG del icónico perfil de Morris Traveller, el elemento principal de mi texto en ejecución, un SVG del frente de Traveller y, finalmente, un pie de página que contiene el logotipo de la empresa Morris Motors:

 <header> <svg>…</svg> <svg>…</svg> </header> <main> <h1>…</h1> <p>…</p> </main> <figure> <svg>…</svg> </figure> <footer> <svg>…</svg> </footer>

Si bien los archivos SVG externos se almacenarán en caché y estarán listos para renderizar, ahora incorporo SVG en mi HTML siempre que sea posible. Menos archivos externos significan menos solicitudes HTTP, pero los beneficios de la integración van mucho más allá del rendimiento.

Los cambios sutiles en la saturación del color y la luminosidad entre los temas claros y los modos oscuros a menudo son necesarios para mantener la fuerza de los elementos de diseño contra los colores de fondo contrastantes. Cuando se incrusta un SVG en HTML, sus rellenos y trazos se pueden modificar sutilmente mediante CSS.

Comienzo aplicando estilos básicos de color y tipografía para la distinguida versión oscura de mi diseño. Estos incluyen Moderna Sans, un tipo de letra sans-serif versátil diseñado por Luciano Vergara y Alfonso García que elegí para evocar el estilo del trabajo de Pintori para Olivetti:

 body { padding: 2rem; background-color: #262626; font-family: "moderna_sans-light"; color: #fff; } h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; font-weight: normal; line-height: 1; }

Flexbox transforma mi encabezado en un panel de desplazamiento horizontal, una de las formas más efectivas de mantener la jerarquía visual en un diseño de pantalla pequeña:

 header { display: flex; flex-wrap: nowrap; overflow-x: scroll; }

La propiedad flex-grow con su valor de 1 asegura que todas las imágenes se expandan para llenar cualquier espacio disponible, mientras que flex-basis asegura que estos elementos flexibles comiencen desde un mínimo de 640px;

 header svg { flex-grow: 1; flex-basis: 640px; } header svg:not(:last-of-type) { margin-right: 2rem; }

Finalmente, agrego grandes cantidades de relleno horizontal y alineo el logotipo de Morris con el centro de mi pie de página:

 footer { padding-right: 8rem; padding-left: 8rem; text-align: center; }

Mi panel de desplazamiento horizontal agrega interés a una pantalla pequeña, pero el espacio adicional disponible en las pantallas de tamaño mediano me permite mostrar más de mis viajeros ingleses por excelencia.

CSS Grid ofrece la ubicación precisa y el apilamiento de elementos de los que carece Flexbox y es la opción perfecta para este encabezado en pantallas medianas y grandes. Cambio el valor de la propiedad de visualización de flex a grid, luego agrego tres columnas y filas simétricas.

Mientras que el ancho de las dos columnas exteriores se fija en 270 px, la columna interior se expande para llenar todo el espacio restante. Utilizo una técnica similar para las tres filas, fijando las dos exteriores a una altura de 100 px. Esto compensa la posición de ambas imágenes y agrega profundidad a este diseño:

 header { display: grid; grid-template-columns: 270px 1fr 270px; grid-template-rows: 100px 1fr 100px; }

Usando selectores de pseudo-clase y números de línea, coloco el primer SVG, luego reduzco su tamaño para agregar perspectiva:

 header svg:first-of-type { grid-column: 2 / 4; grid-row: 1 / 2; transform: scale(.85); }

Luego, coloco el segundo de mis dos gráficos. Lo elevo dentro del orden de apilamiento agregando un valor de índice z más alto que lo acerca visualmente al espectador:

 header svg:last-of-type { grid-column: 1 / 3; grid-row: 2 / 4; z-index: 2; }

Incluso una cuadrícula de proporción uniforme aparentemente mundana puede dar como resultado un diseño original cuando un diseño incluye muchos espacios en blanco para ayudar a guiar la vista. Para este diseño de tamaño mediano, aplico una cuadrícula simétrica de seis columnas con valores de espacio entre columnas y filas que son proporcionales al ancho y alto de una pantalla:

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 2vw; row-gap: 2vh; } }

Mi elemento de encabezado llena todo el ancho de mi cuadrícula. Luego, coloco los elementos principal, figura y pie de página, agregando proporcionalmente más espacio en blanco para reducir el ancho de mi figura y pie de página:

 header { grid-column: 1 / -1; } main { grid-column: 2 / 6; } figure { grid-column: 3 / 5; } footer { grid-column: 3 / 5; padding-right: 4rem; padding-left: 4rem; }

Este diseño se hace más distinguido con el espacio disponible en pantallas grandes.

Para ellos, aplico valores de cuadrícula al elemento del cuerpo para crear las ocho columnas de una cuadrícula compuesta de 6+4:

 @media (min-width: 64em) { body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }

Basar mi diseño de tamaño mediano en seis columnas, y luego incluir la misma cuadrícula en mi compuesto de pantalla grande, ayuda a mantener las proporciones en todos los tamaños de mi diseño. Luego, reubico los cuatro elementos estructurales en mi nueva cuadrícula:

 header { grid-column: 1 / 8; } main { grid-column: 2 / 5; text-align: right; } figure { grid-column: 5 / 7; } footer { grid-column: 4; padding: 0; }

Finalmente, para crear un bloque sólido de contenido en el centro de mi diseño, vinculo el contenido principal a su figura ahora adyacente realineando su texto a la derecha:

 main { text-align: right; } 

Paletas Monocromáticas

Incluso después de más de veinte años en el negocio, todavía considero que trabajar con color es el aspecto más desafiante del diseño. Quizás es por eso que a menudo me inclino por los esquemas de color monocromáticos porque hacen que lograr una apariencia visualmente cohesiva sea bastante simple.

Las paletas de colores monocromáticas contienen variaciones en la sombra, los matices y los tonos, al agregar porcentajes variables de negro, gris o blanco a un color base elegido.

• Tonos : oscurecer el color usando negro
• Tintes : Aclarar el color usando blanco
• Tonos : desaturar el color con gris

Cuando se usan para fondos, bordes y detalles, las sombras y los matices pueden hacer que un diseño se sienta armonioso.

El uso de sombras, matices y tonos puede ayudar a atenuar los colores vibrantes que pueden llamar la atención no deseada sobre aspectos de un diseño. Son particularmente útiles cuando se desarrolla una paleta de colores más variada a partir de un conjunto de colores de marca existentes.

A menudo elijo una paleta puramente monocromática o parcialmente monocromática que incluye un color de acento. Este color añadido actúa como contrapunto al color base y le da mayor profundidad al diseño.

Limitando la paleta

Gracias a CSS Grid, los gradientes de imagen de fondo y los pseudo elementos, este próximo diseño inspirado en Pintori logra un enorme valor a partir de un conjunto muy pequeño de elementos HTML. Solo necesito un título, un solo párrafo, más siete divisiones vacías. Le doy a cada división su propia identidad. Esto me permite darles su propio estilo distintivo:

 <h1>…</h1> <p>…</p> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

Este HTML coloca el título y el párrafo antes de los siete paneles, pero mire detenidamente el diseño de pantalla pequeña terminado y verá que este contenido se ha reordenado para colocar el logotipo de Morris, luego una imagen de la parte delantera del Traveller en la parte superior. .

Mientras que a menudo introduzco propiedades de cuadrícula en pantallas medianas y grandes, CSS Grid también es útil para reordenar contenido en pantallas más pequeñas. Para este diseño, cambio el valor de visualización del elemento del cuerpo a cuadrícula, luego introduzco un espacio basado en la altura de la ventana gráfica entre las filas intrínsecas no especificadas:

 body { display: grid; row-gap: 2vh; }

Luego, reordeno los paneles que contienen mi logotipo e imagen de Morris Motors, además del título, usando números de línea de fila:

 #panel-d { grid-row: 1; } #panel-e { grid-row: 2; } h1 { grid-row: 3; }

Debido a que las divisiones de mi panel no tienen otros elementos, su altura colapsará a cero, dejando solo sus bordes. Para garantizar que haya espacio para mostrar sus fondos y contenido generados, especifico una altura mínima para todos los paneles:

 [id*="panel"] { min-height: 380px; }

El panel que aparece primero en mi diseño de pantalla pequeña muestra el logotipo de Morris Motors, que inserto usando un URI de datos de contenido generado por CSS. Si no está familiarizado con este tipo de contenido práctico, un URI de datos es un archivo que se ha codificado en una cadena. Puede usar un URI de datos en cualquier parte de su CSS o HTML:

 <img src="data:image/png…"> <img src="data:image/svg+xml…">

 div { background-image: url("data:image/svg+xml…"); }

Cuando un navegador encuentra un URI de datos, decodifica el contenido y reconstruye el archivo original. Los URI de datos no se limitan a imágenes codificadas, sino que se utilizan con frecuencia para codificar imágenes en formato PNG y SVG. Encontrará varias herramientas para convertir imágenes en URI de datos en línea.

Primero, cambio la altura mínima de este panel para que coincida con la altura de mi logotipo, luego inserto el logotipo:

 #panel-d { min-height: 90px; text-align: center; } #panel-d:before { content: url("data:image/svg+xml…"); display: block; width: 135px; height: 90px; margin: 0 auto; }

Yo uso una técnica similar para colocar una imagen de fondo detrás de mi párrafo. Agrego propiedades de repetición, posición y tamaño que hacen que el fondo sea flexible y lo coloco siempre en el centro horizontal y vertical de mi párrafo:

 p { background-image: url("data:image/svg+xml…"); } p { background-repeat: no-repeat; background-position: 50% 50%; background-size: 50% 50%; } 

Cada uno de mis paneles tiene su propio diseño gráfico distintivo. Podría haber colocado imágenes en estos siete paneles, pero esto habría requerido al menos siete solicitudes HTTP adicionales. Entonces, en cambio, uso varias combinaciones de múltiples imágenes de fondo usando URI de datos y gradientes CSS para lograr los resultados que necesito.

El primer panel contiene un gráfico del tapacubos del Morris sobre un fondo rayado azul, blanco y negro. La imagen de fondo de la tapa del cubo proviene de un URI de datos:

 #panel-a { background-image: url("data:image/svg+xml…"); }

Luego, agrego la segunda imagen de fondo rayada usando un degradado lineal:

 #panel-a { background-image: url("data:image/svg+xml…"), linear-gradient( to bottom, #34749F, #34749F 65px, #fff 65px, #fff 80px, #262626 80px); }

Especifico dos conjuntos de valores de repetición, posición y tamaño separados por comas, recordando mantenerlos en el mismo orden que mis imágenes de fondo:

 #panel-a { background-repeat: no-repeat, repeat-x; background-position: 50% 100%, 0 0; background-size: 75% 75%, auto auto; }

El siguiente panel incluye dos imágenes SVG, seguidas de franjas negras, amarillas y blancas más complejas. Al colocar paradas de color con diferentes colores en la misma posición en mi degradado, creo un fondo rayado con líneas marcadas entre mis colores:

 #panel-b { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), linear-gradient( to bottom, #B5964D, #B5964D 125px, #262626 125px, #262626 140px, #fff 140px, #fff 155px, #262626 155px); } #panel-b { background-repeat: no-repeat, no-repeat, repeat-x; background-position: 50% 45px, 50% 190px, 0 0; background-size: 90%, 90%, auto; }

Desarrollé cada uno de mis paneles usando diferentes combinaciones de estas mismas técnicas, haciéndolos de carga rápida y flexibles. Es raro encontrar diseños en línea que se basen en una cuadrícula modular, pero es la elección perfecta para este diseño de pantalla grande inspirado en Pintori. Esta cuadrícula modular se compone de tres columnas y filas.

Agrego propiedades de cuadrícula al elemento del cuerpo, luego especifico el ancho de mis columnas para llenar todo el espacio disponible. Para asegurarme de que siempre haya suficiente altura para mostrar el contenido de cada panel, utilizo el valor minmax de Grid, estableciendo la altura mínima en 300px y la máxima en 1fr:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(300px, 1fr)); gap: 1rem; min-height: 100vh; } }

Los elementos de este diseño no se superponen, por lo que utilizo grid-template-areas por su simplicidad. Este diseño tiene nueve áreas de cuadrícula, y le doy a cada una un nombre de una sola letra, a–h. Como la letra d se usa para dos áreas adyacentes, el elemento colocado con esa letra ocupará ambas:

 body { grid-template-areas: "abc" "dde" "fgh"; }

En esta implementación de pantalla grande, el valor minmax de CSS Grid controla la altura de mis filas, lo que hace que la altura mínima que apliqué anteriormente sea redundante:

 [id*="panel"] { min-height: none; }

Coloco mis paneles usando nombres de área que me permiten cambiar dónde aparecen en mi diseño sin alterar su posición en mi HTML:

 #panel-a { grid-area: a; } #panel-b { grid-area: b; } #panel-c { grid-area: c; } #panel-d { grid-area: d; } #panel-e { grid-area: e; } #panel-f { grid-area: f; } #panel-g { grid-area: g; } p { grid-area: h; }

Si bien el diseño de mis paneles se mantiene constante en todos los tamaños de pantalla, hay un panel en el que el contenido y los fondos cambian para pantallas más grandes. Este panel contiene el logotipo familiar de Morris y lo que parece ser el titular principal, "Estilo... a lo GRANDE".

Para desarrollar este panel, primero agrego un borde sólido profundo en la parte superior, seguido de una imagen de fondo de URI de datos:

 #panel-d { border-top: 15px solid #262626; background-image: url("data:image/svg+xml…"); }

Luego, agrego una segunda imagen de fondo degradada que crea el panel negro y dos franjas amarillas verticales:

 #panel-d { background-image: url("data:image/svg+xml…"), linear-gradient( to right, #fff, #fff 280px, #B5964D 280px, #B5964D 320px, #fff 320px, #fff 335px, #262626 335px, #262626 calc(100% - 40px), #F2C867 calc(100% - 40px), #F2C867 100%); }

Anteriormente en mi proceso, usé un pseudo-elemento :before para agregar el logo de Morris a este diseño. Para pantallas grandes, cambio la posición de ese logotipo en la parte inferior izquierda de mi panel:

 #panel-d position: relative; } #panel-d:before { position: absolute; bottom: 0; left: 0; margin: 0; }

Mi título grande desciende inmediatamente del cuerpo HTML y no forma parte de este panel, lo que dificulta su posicionamiento en tamaños de pantalla flexibles. Para reproducir mi diseño con precisión, sin comprometer la accesibilidad, primero uso un método accesible para ocultar visualmente este titular para las personas que usan lectores de pantalla:

 h1 { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

Luego, restablezco el texto del título usando contenido generado y un pseudo-elemento :after. Lo coloco en la parte inferior derecha de mi panel y reproduzco su estilo en negrita, condensado y cursiva:

 #panel-d:after { content: "Style… in a BIG way"; position: absolute; bottom: 0; right: 0; font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; line-height: 1; text-align: right; } 

Paletas Complementarias

Los colores que se complementan entre sí se encuentran en lados opuestos de una rueda de colores. Pero, aunque es fácil entender su relación matemática, trabajar con colores complementarios puede ser un desafío.

Las combinaciones de colores complementarios adyacentes pueden parecer ásperas y, en lugar de complementarse entre sí, pueden sentirse discordantes. Para evitar que choquen, use sombras, matices o tonos de colores complementarios que también ayudarán a ampliar su paleta de colores utilizables.

Alternativamente, use colores complementarios divididos donde, en lugar de colores opuestos, la paleta incluye dos colores a cada lado del complementario.

Colores complementarios

Varios planos de Morris Traveler coloridos y complementarios se superponen en mi próximo diseño inspirado en Pintori. El HTML necesario para desarrollar este diseño es tan mínimo como las representaciones de este automóvil. Una división de banner incluye un SVG del logotipo de Morris, y el elemento principal contiene el título y el texto.

Sin embargo, la flexibilidad de este diseño en varios tamaños de pantalla proviene del uso de dos elementos de imagen, cada uno con tres imágenes. Incluyo un elemento de imagen en el encabezado, luego otro en mi pie de página:

 <div class="banner"> <svg>…</svg> </div> <header> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </header> <main> <h1><b>…</b></h1> <p>…</p> </main> <footer> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </footer>

Cada uno de mis proyectos de desarrollo comienza agregando los estilos básicos ahora familiares, esta vez agregando un color de fondo blanquecino y texto sans-serif casi negro:

 body { background-color: #f3f2f2; font-family: "moderna_sans-light"; color: #262626; }

Alineo el contenido de la división de mi banner al centro, luego configuro el ancho máximo del logo en un diminuto 150px:

 .banner { text-align: center; } .banner svg { max-width: 150px; }

El titular principal de este diseño está escrito en el estilo negrita, condensado y cursiva de Moderna Sans:

 h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.027rem; font-weight: normal; line-height: 1.2; }

Parte de este titular está encerrado dentro de un elemento de extensión que me permite cambiar su color para que coincida con otros aspectos de este diseño, incluido el emblema del toro en el centro del logotipo de Morris Motors:

 h1 span { color: #df4561; } #logo .emblem { fill: #df4561; }

En pantallas pequeñas, tanto el encabezado como el pie de página contienen una sola imagen de Traveler. Cuando hay espacio para colocar dos Travelers uno al lado del otro, un navegador cambia las imágenes en los dos elementos de imagen.

Para pantallas de tamaño mediano, hago uso del espacio adicional disponible e introduzco una cuadrícula simétrica de cuatro columnas:

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(4, 1fr); } }

Coloco la división del banner en las dos columnas centrales, centro mi logotipo y luego lo muevo verticalmente para que encaje entre los parachoques de mis dos Travellers:

 .banner { grid-column: 2 / 4; text-align: center; transform: translateY(2vh); }

Tanto mi encabezado como mi pie de página abarcan la cuadrícula de borde a borde, mientras que colocar el contenido principal en las dos columnas centrales crea una medida cómoda:

 header, footer { grid-column: 1 / -1; } main { grid-column: 2 / 4; }

Los cambios más significativos en el diseño de este diseño se pueden ver en pantallas de mayor tamaño. A pesar de sus nombres, no necesita colocar un elemento de encabezado o pie de página en la parte superior e inferior de un diseño. Se pueden colocar en cualquier lugar dentro de un diseño, incluso a la izquierda o a la derecha.

Para un control más preciso sobre mi diseño, aumento el número de columnas en mi cuadrícula de cuatro a ocho, luego introduzco dos filas. La primera fila tiene una altura fija de 160px, mientras que la altura de la segunda será dictada por el contenido:

 @media (min-width: 72em) { body { grid-template-columns: repeat(8, 1fr); grid-template-rows: 160px auto; column-gap: 2vw; } }

Cambio la posición de la división de mi banner en tres columnas y configuro el elemento principal a continuación para que coincida:

 .banner, main { grid-column: 3 / 5; }

Luego, coloco el pie de página en las primeras tres columnas y el encabezado en las últimas cuatro para crear un diseño asimétrico a partir de la cuadrícula simétrica:

 header { grid-column: 5 / -1; } footer { grid-column: 1 / 4; }

Tanto el encabezado como el pie de página llenan la altura de mi cuadrícula de arriba a abajo:

 header, footer { grid-row: 1 / 3; }

Mientras que la división de banners ocupa la primera fila:

 .banner { grid-row: 1; }

Y el elemento principal encaja perfectamente debajo de él:

 main { grid-row: 2 / 3; z-index: 2; }

La implementación de temas claros y diseños oscuros se ha convertido en parte del diseño cotidiano de productos y sitios web desde que Apple introdujo un modo oscuro en iOS y macOS. Desarrollar modos claros/oscuros es fácil, y ahora hay una consulta de medios ampliamente compatible para esta preferencia de usuario. Hay tres valores para elegir:

• no-preference : alguien no ha expresado una preferencia
• luz : alguien ha seleccionado un tema de luz
• oscuro : alguien ha elegido un tema oscuro

La introducción de una versión en modo oscuro de este diseño implica poco más que agregar cambios a ciertos valores de color dentro de esa consulta de medios. Por ejemplo, invirtiendo los colores del texto de fondo y de primer plano, y cambiando los colores de relleno de la ruta en mi logotipo SVG:

 @media (prefers-color-scheme: dark) { body { background-color: #262626; color: #fff; } #logo .metal, #logo .emblem { fill: #fff; } }

Decidir sobre los colores del modo oscuro a veces implica más que simplemente invertirlos, haciendo que los fondos blancos sean negros y el texto negro blanco. El texto en blanco puro sobre fondos completamente negros hace que la lectura de largos pasajes de texto sea agotadora para la vista, así que considere suavizar este contraste usando un blanco roto:

 body { color: #f3f2f2; }

A veces, incluso los colores complementarios vibrantes pueden parecer diferentes cuando se colocan sobre un fondo oscuro. Afortunadamente, los filtros CSS pueden aumentar el brillo, la saturación o ambos de un color, sin necesidad de exportar una versión diferente de un archivo para fondos más oscuros:

 header img, footer img { filter: saturate(1.5) brightness(1.1); } 

colores brillantes

En mi diseño final inspirado en Pintori, los rectángulos de colores flotan sobre el fondo gris oscuro. Este diseño necesita solo tres elementos estructurales; un encabezado que nuevamente incluye el logotipo de Morris Motors, un elemento de figura que contiene no una, ni dos, sino tres imágenes de contorno del Morris Traveller, y el elemento principal que contiene mi texto en ejecución:

 <header> <svg>…</svg> </header> <figure> <img> <img> <img> </figure> <main> <h1>…</h1> <p>…</p> <p>…</p> </main>

A este HTML mínimo, agrego cuatro imágenes SVG puramente de presentación. Como no quiero que estos sean anunciados por tecnologías de asistencia, agrego un atributo oculto ARIA a cada uno de ellos:

 <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg>

Primero, especifico estilos básicos para los colores de fondo y de primer plano, luego aplico esas mismas imágenes SVG de presentación al fondo usando URI de datos:

 body { background-color: #262626; } background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"); color: #f3f2f2; }

Luego, especifico los valores de posición y repetición del fondo, colocando cada SVG en el centro y apilándolos verticalmente en la página. Finalmente, configuré sus tamaños:

 body { background-repeat: no-repeat; background-position: 50% 20px, 50% 240px, 50% 460px, 50% 680px; background-size: 200px 200px, 300px 200px, 200px 200px, 100px 100px; }

Entonces, el logotipo en mi encabezado coincide con el tamaño del fondo SVG detrás de él, restrinjo su ancho máximo y luego lo centro usando márgenes horizontales:

 header { max-width: 200px; margin: 0 auto; }

Una vez más, un panel de desplazamiento horizontal es una forma útil de presentar mis tres imágenes de Traveler delineadas, por lo que configuro el valor de visualización de su figura para flexionar y evitar cualquier desbordamiento horizontal configurando su valor para desplazarse:

 figure { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; max-width: 100vw; overflow-x: scroll; }

Luego, especifico un valor de base flexible y una altura para que coincida:

 figure img { flex-grow: 1; flex-basis: 320px; height: 320px; }

Apliqué mis cuatro SVG coloridos como imágenes de fondo, así que no quiero que aparezcan en pantallas pequeñas. El uso de selectores de atributos para hacer coincidir con precisión la propiedad y el valor de un estilo es una forma ideal de orientar elementos sin recurrir a atributos de clase adicionales:

 [aria-hidden="true"] { display: none; }

Este diseño solo necesita un punto de interrupción de consulta de medios para aplicar estilos de diseño para pantallas medianas y grandes. Aplico ocho columnas de igual ancho y ocho filas, luego elimino las imágenes de fondo que apliqué para pantallas pequeñas:

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, auto); background-image: none; }

Luego, coloco el encabezado y los elementos principales entre los números de línea en mi cuadrícula:

 header { grid-column: 1; grid-row: 1; } main { grid-column: 5 / 8; grid-row: 5 / 7; }

Necesito colocar las imágenes y la división de la figura en mi cuadrícula, no la figura en sí, por lo que cambio su propiedad de visualización a contenidos, lo que efectivamente la elimina del DOM con fines de estilo:

 figure { display: contents; }

Luego, coloco cada imagen de Traveler en un conjunto diferente de columnas y filas de cuadrícula, lo que altera sus tamaños junto con sus posiciones:

 figure img:nth-of-type(1) { grid-column: 3 / 6; grid-row: 2 / 4; } figure img:nth-of-type(2) { grid-column: 5 / 8; grid-row: 2 / 5; } figure img:nth-of-type(3) { grid-column: 3 / 4; grid-row: 5 / 6; }

Las transformaciones CSS son herramientas ideales para ajustar el tamaño y la posición de los elementos dentro de las restricciones de las cuadrículas. También son útiles para agregar toques inusuales a un diseño. Uso rotar, escalar y traducir para ajustar con precisión estas imágenes:

 figure img:nth-of-type(1) { transform: rotate(-20deg) translateX(-12rem); } figure img:nth-of-type(2) { transform: scale(1.1); } figure img:nth-of-type(3) { transform: scale(1.25); }

Ahora revelo los coloridos rectángulos de presentación y los empujo detrás de mi contenido estableciendo un valor de índice z bajo. Donde estas imágenes se superponen, un modo de mezcla agrega aún más color a este diseño:

 [aria-hidden="true"] { display: block; z-index: 0; mix-blend-mode: multiply; }

En este paso final, coloco estas formas en mi cuadrícula, usando rotaciones para agregar aún más personalidad a este diseño ya colorido:

 .bg-1 { grid-column: 2 / 4; grid-row: 2 / 4; transform: rotate(-30deg); transform-origin: 75% 50%; } .bg-2 { grid-column: 4 / 8; grid-row: 2 / 5; } .bg-3 { grid-column: 3 / 5; grid-row: 4 / 6; } .bg-4 { grid-column: 4 / 5; grid-row: 6 / 7; transform: rotate(5deg); transform-origin: 0 0; } 

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: 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.