Decisões de design inspiradas com Giovanni Pintori: a publicidade se torna uma forma de arte

Com uma ou duas exceções ocasionais, passei os últimos vinte e dois anos projetando para inúmeros clientes. Alguns desses projetos duraram um ano, alguns vários meses, mas a maioria não mais do que algumas semanas.

Estar completamente absorvido por algumas semanas ou meses no design de uma interface de produto ou site pode ser emocionante. Muitas vezes começa com a gratificação que vem de ganhar o trabalho. Ganhar a confiança de um novo cliente pode ser viciante. Durante a fase sedutora de “conhecer você”, você aprende sobre o cliente e o que ele espera de você e do seu trabalho. Personalidades viciantes como a minha anseiam pela intensidade desses sentimentos, mas – assim como alguns relacionamentos – a excitação inicial logo desaparece na realidade do trabalho em conjunto.

Essa promiscuidade criativa se adequou muito bem à minha capacidade de atenção muitas vezes curta e à minha curiosidade inquieta. Mas, houve momentos em que desejei poder permanecer em uma organização por mais tempo, conhecê-la melhor e ser uma influência positiva no que ela faz e produz.

Conheço muitos designers que trabalham internamente. Embora eu nunca inveje seu deslocamento ou o dinheiro que gastam para morar perto do trabalho, há uma parte de mim que inveja sua capacidade de permanecer e moldar a direção criativa de longo prazo de uma empresa da maneira que Giovanni Pintori ajudou a Olivetti.

“Em nossos dias, a publicidade tornou-se uma forma de arte e cada vez mais precisa fazer jus a esse nome. A publicidade é uma forma de discurso que deve evitar a imprecisão em favor da brevidade, clareza e persuasão. Aqueles que se dedicam à publicidade (escritores, pintores, arquitetos) precisam de lógica e imaginação em igual medida”.

— Giovanni Pintori

O designer italiano Giovanni Pintori trabalhou para a fabricante de produtos empresariais Olivetti por mais de 31 anos. Durante esse tempo, seu estilo se desenvolveu no vocabulário de design exclusivo da empresa. O apelo de trabalhar com uma empresa por mais de alguns meses tornou-se mais forte à medida que envelheci. Nos últimos 18 meses, dediquei a maior parte do meu tempo a trabalhar com uma empresa suíça de segurança cibernética, sediada não muito longe de Milão e onde Giovanni Pintori chamava de lar.

Tal como a Olivetti, esta empresa valoriza o design em todas as suas formas. Embora minha principal prioridade seja o design dos produtos da empresa, também tive a oportunidade de influenciar sua marca, marketing e direção criativa geral.

Ainda gasto tempo em projetos de outras pessoas quando o trabalho me atrai, mas aprendi o quão gratificante pode ser um relacionamento de longo prazo com o cliente. Estou feliz e mais criativamente satisfeito do que estive em anos. Além disso, à medida que a velhice me alcança, não tenho energia para perseguir todos os projetos atraentes como costumava fazer.

Inspirado por Giovanni Pintori

Nascido na Sardenha em 1912, Giovanni Pintori tornou-se um dos designers gráficos europeus mais influentes do século XX. Ele se tornou conhecido pelo estilo distinto que criou na linguagem de design da Olivetti por mais de 30 anos.

Pintori estudou design no influente L'Istituto Superiore per le Industrie Artistiche da Itália (Instituto Superior de Indústrias Artísticas), onde foi cercado pelas artes criativas. A ISIA era uma escola progressista onde os alunos estudavam cerâmica, pintura, serralheria e marcenaria.

Enquanto estudava no ISIA, Pintori conheceu Renato Zveteremich, diretor de publicidade e publicitário que chefiou o departamento de publicidade da Olivetti na década de 1930. Depois de se formar no HIAI, Pintori ingressou na Olivetti para trabalhar com Zveteremich e tornou-se diretor de arte da empresa em 1950.

A Olivetti fabricava máquinas de negócios, mais famosa sua linha de máquinas de escrever. Quando Pintori ingressou na Olivetti, a empresa já era conhecida por seus designs originais de produtos. Seus produtos eram imediatamente reconhecíveis e, sob a orientação do designer industrial Marcello Nizzoli, todos os detalhes de seus projetos - desde a forma de uma barra de espaço até a cor de suas caixas externas foram cuidadosamente considerados.

“Se os artistas são chamados a interpretar, expressar e defender a pureza funcional de uma máquina, é realmente um sinal de que a máquina entrou no espírito humano e que o problema das formas e das relações ainda é de natureza intuitiva.”

— Renato Zveteremich

Mas a preocupação da Olivetti com o design não se esgota nos produtos. A criatividade era parte essencial da cultura da empresa, que se evidenciava desde a arquitetura de suas fábricas e escritórios até a publicidade e o design gráfico usado para promover seus produtos.

Ao longo de seus 30 anos de carreira na Olivetti, Pintori desenhou a publicidade da empresa, folhetos e até seus calendários anuais. O estilo estético de Pintori era ousado e confiante. Ele usou cores brilhantes de paletas de cores mínimas e as combinou com formas para preencher seus projetos com energia.

Mas o trabalho de Pintori não era apenas lúdico, era pensativo. Sua escolha de formas não era abstrata. As formas sugeriram os benefícios de usar um produto em vez de descrever seus recursos literalmente. Pintori não apenas ilustrava produtos, ele os trazia à vida através de seus projetos, sugerindo como eles poderiam ser usados ​​e o que eles poderiam fazer para melhorar a vida e o trabalho das pessoas.

“Eu não tento falar em nome das máquinas. Em vez disso, tentei fazê-los falar por si mesmos, através da apresentação gráfica de seus elementos, suas operações e seu uso.”

Pintori definiu a imagem de Olivetti muito além de seu tempo na empresa, e continuou a trabalhar em projetos com eles depois de sair em 1967. Estabeleceu seu próprio estúdio em Milão, onde trabalhou como designer freelancer, antes de se aposentar e se dedicar à pintura.

Giovanni Pintori morreu em Milão em 1999, e há um livro, Pintori de Marta Sironi e publicado pela Moleskine que cataloga sua carreira surpreendente.

O trabalho de Pintori inspira não só pela ousadia de suas formas coloridas, mas pelo que elas representam. Pintori entendia que promover um produto exigia mais do que listar suas características. A publicidade deve contar uma história que ressoe com os clientes, e essa é uma lição pela qual todos devemos nos inspirar.

Criando paletas de cores

As cores que escolhemos devem contar uma história sobre uma empresa, produto ou serviço de forma tão eloquente quanto nosso layout ou tipografia. Nossas escolhas de cores podem atrair a atenção de alguém, influenciar sua percepção do que fazemos e até estimular emoções. A cor desempenha um papel essencial para tornar um produto ou site fácil e intuitivo de usar. Além das cores da marca, as paletas de cores para a Web ajudam as pessoas a navegar, informam o que podem pressionar e onde estiveram.

Gosto de manter minhas cores simples e minhas paletas raramente contêm mais de três tons; uma cor dominante, uma cor secundária ou de apoio e um acento. A estes, adiciono uma pequena seleção de cores neutras para uso como plano de fundo, bordas e texto.

Para adicionar profundidade aos meus designs – e para me dar maior flexibilidade – também apresento tons e matizes de cada um dos meus matizes. Eu uso tons mais escuros para bordas – por exemplo – ao redor de botões – e tons mais claros para adicionar realces.

Como os modos escuros do sistema operacional se tornaram mais predominantes, também altero sutilmente a claridade e a saturação das cores em minhas paletas, para que pareçam mais vibrantes contra fundos escuros.

Usando cores primárias

O HTML necessário para implementar meu primeiro design inspirado em Pintori é significativo e simples como o próprio design. Preciso de apenas quatro elementos estruturais; um cabeçalho que contém dois SVGs do perfil do icônico Morris Traveller, o elemento principal do meu texto corrido, um SVG da frente do viajante e, finalmente, um rodapé que contém o logotipo da empresa Morris Motors:

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

Embora os arquivos SVG externos sejam armazenados em cache e prontos para renderização, agora incorporo SVG em meu HTML sempre que possível. Menos arquivos externos significam menos solicitações HTTP, mas os benefícios da incorporação vão muito além do desempenho.

Mudanças sutis na saturação de cor e luminosidade entre temas claros e modos escuros são muitas vezes necessárias para manter a vivacidade dos elementos de design em contraste com as cores de fundo. Quando um SVG é incorporado em HTML, seus preenchimentos e traços podem ser sutilmente alterados usando CSS.

Começo aplicando estilos de base de cor e tipografia para a distinta versão escura do meu design. Estes incluem Moderna Sans, um tipo de letra sans-serif versátil desenhado por Luciano Vergara e Alfonso Garcia que escolhi para evocar o estilo do trabalho de Pintori para a 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; }

O Flexbox transforma meu cabeçalho em um painel de rolagem horizontal, uma das maneiras mais eficazes de manter a hierarquia visual em um design de tela pequena:

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

A propriedade flex-grow com seu valor de 1 garante que todas as imagens se expandam para preencher qualquer espaço disponível, enquanto flex-basis garante que esses itens flexíveis comecem com um mínimo de 640px;

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

Por fim, adiciono grandes quantidades de preenchimento horizontal e alinho o logotipo da Morris ao centro do meu rodapé:

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

Meu painel de rolagem horizontal adiciona interesse a uma tela pequena, mas o espaço extra disponível em telas de tamanho médio me permite mostrar mais dos meus viajantes ingleses por excelência.

CSS Grid oferece o posicionamento preciso e empilhamento de elementos que o Flexbox não possui e é a escolha perfeita para este cabeçalho em telas médias a grandes. Eu mudo o valor da propriedade de exibição de flex para grid e adiciono três colunas e linhas simétricas.

Enquanto a largura das duas colunas externas é fixada em 270px, a coluna interna se expande para preencher todo o espaço restante. Eu uso uma técnica semelhante para as três linhas, fixando as duas externas a uma altura de 100px. Isso compensa a posição de ambas as imagens e adiciona profundidade a este design:

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

Usando seletores de pseudoclasse e números de linha, coloco o primeiro SVG e o reduzo em tamanho para adicionar perspectiva:

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

Então, coloco o segundo dos meus dois gráficos. Eu o elevo dentro da ordem de empilhamento adicionando um valor z-index mais alto que o aproxima visualmente do visualizador:

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

Mesmo uma grade de proporção uniforme aparentemente mundana pode resultar em um layout original quando um design inclui bastante espaço em branco para ajudar a chamar a atenção. Para este design de tamanho médio, aplico uma grade simétrica de seis colunas com valores de intervalo de coluna e linha que são proporcionais à largura e altura de uma tela:

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

Meu elemento de cabeçalho preenche toda a largura da minha grade. Em seguida, coloco os elementos main, figure e footer, adicionando proporcionalmente mais espaço em branco para diminuir a largura da minha figura e rodapé:

 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; }

Esse design fica mais diferenciado com o espaço disponível em telas grandes.

Para eles, aplico valores de grade ao elemento body para criar as oito colunas de uma grade composta 6+4:

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

Basear meu design de tamanho médio em seis colunas e incluir a mesma grade no meu composto de tela grande ajuda a manter as proporções em todos os tamanhos do meu design. Então, reposiciono os quatro elementos estruturais em minha nova grade:

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

Por fim, para criar um bloco sólido de conteúdo no centro do meu design, vinculo o conteúdo principal à sua figura agora adjacente realinhando seu texto à direita:

 main { text-align: right; } 

Paletas Monocromáticas

Mesmo depois de mais de vinte anos no ramo, ainda acho que trabalhar com cores é o aspecto mais desafiador do design. Talvez seja por isso que muitas vezes gravito em torno de esquemas de cores monocromáticos, porque eles tornam a obtenção de uma aparência visualmente coesa bastante simples.

As paletas de cores monocromáticas contêm variações de tonalidade, matizes e tons, adicionando porcentagens variadas de preto, cinza ou branco a uma cor base escolhida.

• Tons : escurecer a cor usando preto
• Tons : Clarear a cor usando branco
• Tons : Desaturar a cor usando cinza

Quando são usados ​​para planos de fundo, bordas e detalhes, tons e matizes podem fazer um design parecer harmonioso.

O uso de tons, matizes e tons pode ajudar a atenuar cores vibrantes que podem chamar atenção indesejada para aspectos de um design. Eles são particularmente úteis ao desenvolver uma paleta de cores mais variada a partir de um conjunto de cores de marca existentes.

Muitas vezes escolho uma paleta puramente monocromática ou parcialmente monocromática que inclui uma cor de destaque. Esta cor adicionada atua como um contraponto à cor base e confere maior profundidade ao design.

Limitando a paleta

Graças ao CSS Grid, gradientes de imagem de fundo e pseudo elementos, este próximo design inspirado em Pintori alcança um valor enorme a partir de um conjunto muito pequeno de elementos HTML. Preciso apenas de um título, um único parágrafo, mais sete divisões vazias. Eu dou a cada divisão sua própria identidade. Isso me permite dar a eles seu próprio estilo distinto:

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

Este HTML coloca o título e o parágrafo antes dos sete painéis, mas olhe atentamente para o design de tela pequena finalizado e você verá que este conteúdo foi reordenado para colocar o logotipo Morris e, em seguida, uma imagem do front-end do Traveller na parte superior .

Enquanto eu frequentemente introduzo propriedades de grade em telas médias e grandes, CSS Grid também é útil para reordenar conteúdo em telas menores. Para este design, altero o valor de exibição do elemento do corpo para grade e, em seguida, introduzo uma lacuna baseada na altura da janela de visualização entre as linhas intrínsecas e não especificadas:

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

Em seguida, reorganizo os painéis que contêm meu logotipo e imagem da Morris Motors, além do título, usando números de linha de linha:

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

Como minhas divisões de painel não possuem outros elementos, sua altura será reduzida a zero, deixando apenas suas bordas. Para garantir que haja espaço para exibir os planos de fundo e o conteúdo gerados, especifico uma altura mínima para todos os painéis:

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

O painel que aparece primeiro no meu design de tela pequena mostra o logotipo da Morris Motors, que eu insiro usando um URI de dados de conteúdo gerado por CSS. Se você não estiver familiarizado com esse tipo de conteúdo útil, um URI de dados é um arquivo que foi codificado em uma string. Você pode usar um URI de dados em qualquer lugar em seu CSS ou HTML:

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

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

Quando um navegador encontra um URI de dados, ele decodifica o conteúdo e reconstrói o arquivo original. Os URIs de dados não se limitam a imagens codificadas, mas são frequentemente usados ​​para codificar imagens no formato PNG e SVGs. Você encontrará várias ferramentas para converter imagens em URIs de dados online.

Primeiro, altero a altura mínima deste painel para corresponder à altura do meu logotipo, depois insiro o 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; }

Eu uso uma técnica semelhante para colocar uma imagem de fundo atrás do meu parágrafo. Eu adiciono propriedades de repetição, posição e tamanho que tornam o plano de fundo flexível e o coloco sempre no centro horizontal e vertical do meu parágrafo:

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

Cada um dos meus painéis tem um design gráfico distinto. Eu poderia ter colocado imagens nesses sete painéis, mas isso exigiria pelo menos sete solicitações HTTP adicionais. Então, em vez disso, uso várias combinações de várias imagens de plano de fundo usando URIs de dados e gradientes CSS para obter os resultados de que preciso.

O primeiro painel contém um gráfico da calota do Morris sobre um fundo listrado azul, branco e preto. A imagem de fundo do hub cap vem de um URI de dados:

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

Em seguida, adiciono a segunda imagem de fundo listrada usando um gradiente linear:

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

Eu especifico dois conjuntos de valores de repetição, posição e tamanho separados por vírgula, lembrando de mantê-los na mesma ordem que minhas imagens de fundo:

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

Este próximo painel inclui duas imagens SVG, seguidas por listras pretas, amarelas e brancas mais complexas. Ao colocar paradas de cores com cores diferentes na mesma posição no meu gradiente, crio um plano de fundo listrado com linhas duras entre minhas cores:

 #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; }

Desenvolvi cada um dos meus painéis usando diferentes combinações dessas mesmas técnicas, tornando-os de carregamento rápido e flexível. É raro encontrar designs online baseados em uma grade modular, mas é a escolha perfeita para esse design de tela grande inspirado em Pintori. Esta grade modular é composta por três colunas e linhas.

Eu adiciono propriedades de grade ao elemento do corpo e, em seguida, especifico as larguras das minhas colunas para preencher todo o espaço disponível. Para garantir que sempre haja altura suficiente para mostrar o conteúdo de cada painel, uso o valor minmax do Grid, definindo a altura mínima em 300px e a máxima em 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; } }

Os elementos neste design não se sobrepõem, então eu uso grid-template-áreas por sua simplicidade. Este design tem nove áreas de grade, e dou a cada uma uma única letra, a–h. Como a letra d é usada para duas áreas adjacentes, o item colocado usando essa letra ocupará ambas:

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

Nesta implementação de tela grande, o valor minmax do CSS Grid controla a altura das minhas linhas, tornando redundante a min-height que apliquei anteriormente:

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

Eu coloco meus painéis usando nomes de área que me permitem alterar onde eles aparecem no meu layout sem alterar sua posição no meu 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; }

Embora o design dos meus painéis permaneça consistente em todos os tamanhos de tela, há um painel em que o conteúdo e os planos de fundo mudam para telas maiores. Este painel contém o familiar logotipo Morris e o que parece ser a manchete principal, “Estilo… de uma maneira GRANDE”.

Para desenvolver este painel, primeiro adiciono uma borda sólida profunda na parte superior, seguida por uma imagem de plano de fundo do URI de dados:

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

Em seguida, adiciono uma segunda imagem de fundo gradiente que cria o painel preto e duas listras amarelas verticais:

 #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%); }

No início do meu processo, usei um pseudo-elemento :before para adicionar o logotipo Morris a este design. Para telas grandes, reposiciono esse logotipo no canto inferior esquerdo do meu painel:

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

Meu título grande é imediatamente descendente do corpo HTML e não faz parte deste painel, dificultando o posicionamento em tamanhos de tela flexíveis. Para reproduzir meu design com precisão, sem comprometer a acessibilidade, primeiro uso um método acessível para ocultar este título visualmente para pessoas que usam leitores de tela:

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

Em seguida, restabeleço o texto do título usando o conteúdo gerado e um pseudo-elemento :after. Eu o posiciono no canto inferior direito do meu painel e replico seu estilo negrito, condensado e itálico:

 #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 Complementares

As cores que se complementam ficam em lados opostos de uma roda de cores. Mas, embora seja fácil entender sua relação matemática, trabalhar com cores complementares pode ser um desafio.

Combinações de cores complementares adjacentes podem parecer duras e, em vez de se complementarem, podem parecer desarmônicas. Para evitar que eles entrem em conflito, use tons, matizes ou tons de cores complementares que também ajudarão a expandir sua paleta de cores utilizáveis.

Como alternativa, use cores complementares divididas onde, em vez de cores opostas, a paleta inclui duas cores de cada lado da complementar.

Cores Complementares

Vários projetos coloridos complementares do Morris Traveler se sobrepõem no meu próximo design inspirado em Pintori. O HTML necessário para desenvolver este design é tão mínimo quanto as representações deste carro. Uma divisão de banner inclui um SVG do logotipo Morris, e o elemento principal contém o título e o texto corrido.

Mas, a flexibilidade desse design em vários tamanhos de tela vem do uso de dois elementos de imagem, cada um contendo três imagens. Incluo um elemento de imagem no cabeçalho e outro no rodapé:

 <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 um dos meus projetos de desenvolvimento começa adicionando os estilos de base agora familiares, desta vez adicionando uma cor de fundo esbranquiçada e um texto sans-serif quase preto:

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

Eu alinho o conteúdo da minha divisão de banner ao centro e defino a largura máxima do logotipo para um diminuto de 150px:

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

O título principal deste design é definido no estilo negrito, condensado e itálico de Moderna Sans:

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

Parte deste título está dentro de um elemento de extensão que me permite alterar sua cor para combinar com outros aspectos deste design, incluindo o emblema de touro no centro do logotipo da Morris Motors:

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

Em telas pequenas, tanto o cabeçalho quanto o rodapé contêm uma única imagem do Traveler. Quando há espaço para colocar dois Viajantes lado a lado, um navegador altera as imagens nos dois elementos de imagem.

Para telas de tamanho médio, aproveito o espaço extra disponível e introduzo uma grade simétrica de quatro colunas:

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

Coloco a divisão do banner nas duas colunas centrais, centralizo meu logotipo e o desloco verticalmente para caber entre os pára-choques dos meus dois Travellers:

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

Tanto meu cabeçalho quanto meu rodapé abrangem a grade de ponta a ponta, enquanto colocar o conteúdo principal nas duas colunas centrais cria uma medida confortável:

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

As mudanças mais significativas no layout deste design podem ser vistas em tamanhos de tela maiores. Apesar de seus nomes, você não precisa colocar um elemento de cabeçalho ou rodapé na parte superior e inferior de um layout. Eles podem ser colocados em qualquer lugar dentro de um design, inclusive à esquerda ou à direita.

Para um controle mais preciso sobre meu layout, aumento o número de colunas em minha grade de quatro para oito e, em seguida, introduzo duas linhas. A primeira linha tem uma altura fixa de 160px, enquanto a altura da segunda será ditada pelo conteúdo:

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

Eu reposiciono minha divisão de banner em três colunas e defino o elemento principal abaixo para corresponder:

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

Em seguida, coloco o rodapé nas três primeiras colunas e o cabeçalho nas quatro últimas para criar um layout assimétrico a partir da grade simétrica:

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

Tanto o cabeçalho quanto o rodapé preenchem a altura da minha grade de cima para baixo:

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

Enquanto a divisão do banner ocupa a primeira linha:

 .banner { grid-row: 1; }

E o elemento principal se encaixa perfeitamente embaixo dele:

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

A implementação de temas claros e designs escuros tornou-se parte do design diário de produtos e sites desde que a Apple introduziu um modo escuro no iOS e no macOS. O desenvolvimento de modos escuro/claro é fácil e agora há uma consulta de mídia amplamente suportada para essa preferência do usuário. Existem três valores para escolher:

• no-preference : Alguém não expressou uma preferência
• light : Alguém selecionou um tema claro
• dark : Alguém escolheu um tema sombrio

A introdução de uma versão de modo escuro desse design envolve pouco mais do que adicionar alterações a determinados valores de cores nessa consulta de mídia. Por exemplo, invertendo as cores do texto de fundo e primeiro plano e alterando as cores de preenchimento do caminho no meu logotipo SVG:

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

A decisão sobre as cores do modo escuro às vezes envolve mais do que simplesmente invertê-las, tornando os fundos brancos pretos e o texto preto branco. Texto em branco puro em fundos totalmente pretos torna a leitura de longas passagens de texto cansativa para os olhos, então considere suavizar esse contraste usando um off-white:

 body { color: #f3f2f2; }

Às vezes, até cores complementares vibrantes podem parecer diferentes quando colocadas contra um fundo escuro. Felizmente, os filtros CSS podem aumentar o brilho, a saturação ou ambos de uma cor, sem a necessidade de exportar uma versão diferente de um arquivo para fundos mais escuros:

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

Cores de brilho

No meu design final inspirado em Pintori, retângulos coloridos flutuam sobre o fundo cinza escuro. Este projeto precisa de apenas três elementos estruturais; um cabeçalho que novamente inclui o logotipo da Morris Motors, um elemento de figura que contém não uma, não duas, mas três imagens de contorno do Morris Traveller, e o elemento principal contendo meu texto corrido:

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

A esse HTML mínimo, adiciono quatro imagens SVG puramente de apresentação. Como não quero que sejam anunciados por tecnologias assistivas, adiciono um atributo oculto ARIA a cada um deles:

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

Primeiro, especifico estilos de base para cores de fundo e primeiro plano e, em seguida, aplico essas mesmas imagens SVG de apresentação ao fundo usando URIs de dados:

 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; }

Em seguida, especifico os valores de repetição e posição do plano de fundo, colocando cada SVG no centro e empilhando-os verticalmente na página. Por fim, defino seus tamanhos:

 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; }

Portanto, o logotipo no meu cabeçalho corresponde ao tamanho do plano de fundo SVG atrás dele, restrinjo sua largura máxima e o centralizo usando margens horizontais:

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

Novamente, um painel de rolagem horizontal é uma maneira útil de apresentar minhas três imagens de Traveler delineadas, então defino o valor de exibição da figura para flex e evito qualquer estouro horizontal definindo seu valor para rolar:

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

Em seguida, especifico um valor de base flexível e uma altura para corresponder:

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

Apliquei meus quatro SVGs coloridos como imagens de fundo, então não quero que apareçam em telas pequenas. Usar seletores de atributo para corresponder precisamente à propriedade e ao valor de um estilo é uma maneira ideal de direcionar elementos sem recorrer a atributos de classe adicionais:

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

Esse design precisa de apenas um ponto de interrupção de consulta de mídia para aplicar estilos de layout para telas médias e grandes. Aplico oito colunas de largura igual e oito linhas e, em seguida, removo as imagens de fundo que apliquei para telas pequenas:

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

Em seguida, coloco o cabeçalho e os elementos principais entre os números de linha na minha grade:

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

Eu preciso colocar as imagens e a divisão da figura na minha grade, não na figura em si, então eu mudo sua propriedade display para contents, o que efetivamente a remove do DOM para fins de estilo:

 figure { display: contents; }

Em seguida, coloco cada imagem do Traveler em um conjunto diferente de colunas e linhas de grade, que altera seus tamanhos junto com suas posições:

 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; }

As transformações CSS são ferramentas ideais para ajustar o tamanho e a posição dos elementos dentro das restrições das grades. Eles também são úteis para adicionar toques incomuns a um design. Eu uso girar, dimensionar e traduzir para ajustar essas imagens:

 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); }

Agora revelo os retângulos coloridos de apresentação e os empurro para trás do meu conteúdo definindo um valor de índice z baixo. Onde essas imagens se sobrepõem, um modo de mesclagem adiciona ainda mais cor a este design:

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

Nesta etapa final, coloco essas formas na minha grade, usando rotações para adicionar ainda mais personalidade a esse design já 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; } 

Leia mais da série

• Decisões de design inspiradas: Avaunt Magazine
• Decisões de design inspiradas: questões urgentes
• Decisões de design inspiradas: Ernest Journal
• Decisões de design inspiradas: Alexey Brodovitch
• Decisões de design inspiradas: Bea Feitler
• Decisões de design inspiradas: Neville Brody
• Decisões de design inspiradas: Otto Storch
• Decisões de design inspiradas: Herb Lubalin
• Decisões de design inspiradas: Max Huber
• Decisões de design inspiradas: Emmett McBain
• Decisões de design inspiradas: Bradbury Thompson

NB: Membros Smashing Os membros Smashing têm acesso a um PDF lindamente projetado da revista Andy's Inspired Design Decisions e exemplos de código completos deste artigo. Você pode comprar o PDF e os exemplos desta edição, bem como todas as outras edições, diretamente do site de Andy.