Decisões de design inspiradas com Emmett McBain: direção de arte como equidade social

Juntamente com a publicidade, vender é uma habilidade que as pessoas muitas vezes desaprovam. É verdade: ninguém gosta de ser coagido ou enganado, e ninguém gosta de ser interrompido.

Mas ser bem vendido – por um vendedor que entende suas aspirações, motivações e necessidades – pode ser uma experiência que beneficia compradores e vendedores.

Aprender a vender foi uma das melhores coisas que fiz no início da minha vida profissional. Naquela época, vendia equipamentos fotográficos e, embora nunca tenha gostado do estresse de atingir metas de vendas, sempre gostei de encontrar fotógrafos.

Encontrar novos clientes muitas vezes significava fazer ligações frias, bater na porta de um estúdio e ser frequentemente rejeitado. Passei um tempo falando sobre o trabalho de alguém antes de mencionar os produtos que minha empresa me pagou para vender. Eu estava genuinamente interessado em fotografia, mas também aprendi que entender os problemas de alguém era tão crucial quanto explicar como meus produtos poderiam ajudar a resolvê-los.

O que aprendi me serviu imensamente bem desde que parei de vender câmeras e comecei a vender meu talento. Ajudou-me a lidar com as pessoas, principalmente na apresentação (leia-se: venda) das minhas ideias aos clientes.

É um fato da vida que nem sempre a melhor ideia ou a melhor execução ganha um pitch ou apresentação. Muitas vezes é a ideia que está sendo vendida pelo melhor vendedor.

Vender ideias deve se tornar uma de suas melhores habilidades, então aprenda a vender. Aprenda a falar sobre seu trabalho para que a pessoa para quem você está vendendo entenda suas ideias e por que elas deveriam comprá-las de você. Aprenda a inspirar as pessoas com suas palavras e também com seu trabalho. Faça com que eles se sintam tão parte de suas ideias que eles simplesmente devem comprar de você.

Como um designer gráfico negro americano que trabalhou em publicidade durante os anos 1950, 60 e 70, Emmett McBain não só tinha um talento incrível, ele também sabia como vender para outros afro-americanos.

Ele sabia que para vender os produtos de seus clientes, seus designs precisavam ressoar com o público negro, mostrando imagens com as quais se relacionavam e linguagem que lhes era familiar.

Como um inglês de barba grisalha, não é fácil para mim entender perspectivas culturais diferentes das minhas. Mas aprendi o valor de fazer designs que falem com as pessoas independentemente de sua aparência e onde quer que vivam. Não só para vender os produtos dos meus clientes, mas para que todos sintam que suas necessidades estão sendo ouvidas e sua importância compreendida.

Nascido em Chicago em 1935, Emmett McBain foi um designer gráfico afro-americano cujo trabalho teve um impacto notável na representação dos afro-americanos na publicidade.

McBain estudou em várias escolas de arte e se formou depois de estudar arte comercial na American Academy of Art em Chicago.

Vince Cullers and Associates – a primeira agência de publicidade de serviço completo de propriedade afro-americana nos EUA foi fundada em 1958. Cullers acreditava que “vender preto” precisava “pensar preto” se os anunciantes quisessem alcançar os consumidores afro-americanos. Ele não só vendeu para afro-americanos, mas ajudou a educá-los em publicidade e empregá-los em sua agência. Um desses funcionários era o recém-formado Emmett McBain.

Com dois anos de experiência comercial, McBain deixou a Vince Cullers e mudou-se para a Playboy Records como editor assistente de arte. Mas, ele não ficou em um papel júnior por muito tempo e rapidamente se tornou o diretor de arte de promoção da Playboy. McBain conquistou um nicho como artista de capa e, em 1958, sua arte de álbum Playboy Jazz All-Stars foi nomeada Capa da Semana da revista Billboard.

Em 1959, McBain saiu da Playboy, mas não deixou para trás seu trabalho em capas de álbuns. Seu recém-fundado estúdio de design McBain Associates trabalhou regularmente com a Mercury Records, e ele projetou mais de 75 capas de álbuns quando tinha 24 anos.

McBain retornou à Vince Cullers Advertising como diretor criativo em 1968 e fez algumas de suas contribuições mais importantes para a publicidade para negros americanos.

Antes da década de 1960, os consumidores negros eram amplamente ignorados pelos fabricantes de marca e pela indústria de publicidade convencional que os atendia. A publicidade para afro-americanos era limitada principalmente a jornais específicos para o público negro.

Os clientes brancos eram reticentes em gastar dinheiro vendendo para afro-americanos, pois os anunciantes viam os consumidores negros como tendo pouca renda disponível. Na atmosfera politicamente carregada da época, as empresas também tinham medo de associar suas marcas a afro-americanos.

Os afro-americanos também não estavam representados na indústria da publicidade, e o número de negros trabalhando na publicidade era pequeno. Mas, em meados da década de 1960, as agências de publicidade começaram a recrutar afro-americanos. Essas agências esperavam que suas experiências tornassem as mensagens dos clientes mais relacionáveis ​​ao público afro-americano que, até então, gastava quase US$ 30 bilhões por ano.

O trabalho de McBain apresentou mensagens positivas para os afro-americanos e a comunidade negra. Ele usou imagens de pessoas comuns em ambientes habituais para clientes que incluíam os cigarros mentolados da Newport, o Marlboro da Philip Morris e os produtos de beleza da SkinFood Cosmetics especificamente para a pele negra. Como Vince Cullers, McBain sabia que vender para consumidores negros significava entender suas diferentes necessidades. Ele entendeu que – como seu futuro parceiro, o redator Thomas Burrell disse – “os negros não são brancos de pele escura”.

Em 1971, Emmett McBain associou-se à Burrell para formar a Burrell-McBain Inc., que eles descreveram em um anúncio como “An Advertising Agency for the Black Commercial Market”. Em vez de explorar os negros americanos, Burrell e McBain pretendiam formar relacionamentos autênticos e respeitosos com o público negro.

Antes de Burrell e McBain, o icônico cowboy branco era o rosto dos cigarros Marlboro. Mas, o homem Marlboro de McBain era mais relacionável com os fumantes afro-americanos. Enquanto o cowboy de Marlboro foi mostrado em uma versão idealizada do oeste americano, os personagens negros de McBain foram vistos fumando no ambiente cotidiano.

A campanha da Marlboro foi um enorme sucesso e Burrell e McBain ganharam a Coca-Cola e o McDonald's como clientes, ajudando-os a se tornar a maior agência de publicidade de propriedade de negros nos Estados Unidos.

McBain deixou a agência que ele co-fundou em 1974 e iniciou uma carreira como artista. Ele abriu sua galeria de arte, The Black Eye, e formou uma consultoria – também chamada The Black Eye – que ajudou as agências a se conectarem melhor com a comunidade afro-americana.

Emmett McBain morreu de câncer em 2012 e desde então tem sido reconhecido pela AIGA, a Society of Typographic Arts e os Art Directors Clubs de Chicago e Detroit.

Infelizmente, não houve um livro publicado sobre Emmett McBain e sua contribuição para publicidade e design. Eu não ouvi seu nome mencionado em conferências de design ou o vi referenciado em artigos relacionados ao design moderno e particularmente à web.

O trabalho posterior de McBain teve um impacto profundo na publicidade a partir da década de 1960, mas gosto especialmente de seus designs de capas de discos. A explosão de energia que reflete o jazz que McBain adorava. Suas cores são emocionantes e vibrantes. Sua escolha de tipos de letra e as maneiras como ele desconstruiu e reconstruiu o tipo são inspiradoras. Há muito para nos inspirar no trabalho de Emmett McBain.

Alinhando o conteúdo vertical

Seja qual for o estilo gráfico que eu escolher, o HTML necessário para implementar esse primeiro design inspirado em McBain é idêntico. Preciso de três elementos estruturais; um cabeçalho que contém meu logotipo e títulos SVG, principal e um aparte que inclui uma tabela de números de produção do Citroen DS:

 <header> <svg>…</svg> <div> <svg>…</svg> <svg>…</svg> </div> </header> <main> <p>…</p> </main> <aside> <table>…</table> </aside>

Para escalabilidade em tamanhos de tela, uso SVGs para os dois títulos no meu cabeçalho. O uso de SVG fornece um grau extra de consistência para o texto traçado do segundo título, mas não devo esquecer a acessibilidade.

Na edição 8, expliquei como ajudar pessoas que usam tecnologia assistiva adicionando ARIA a SVGs. Eu adiciono um atributo de função ARIA, além de um atributo de nível que substitui a semântica ausente. Adicionar um elemento de título também ajuda a tecnologia assistiva a entender a diferença entre vários blocos de SVG, mas os navegadores não exibem este título:

 <svg role="heading" aria-level="1" aria-label="Citroen DS"> <title>Citroen DS</title> <path>…</path> </svg>

Para começar este design, adiciono estilos básicos de base para cada tamanho de tela, começando com as cores do primeiro plano e do plano de fundo:

 body { background-color: #fff; color: #262626; }

Eu adiciono dimensões precisas de pixel aos elementos SVG no meu cabeçalho e uso margens horizontais automáticas para centralizar o logotipo da Citroen:

 header > svg { margin: 0 auto; width: 80px; } header div svg { max-height: 80px; }

Em seu design inspirador, Emmet McBain incluiu listras pretas verticais para adicionar estrutura ao seu layout. Para obter um efeito semelhante sem adicionar elementos extras ao meu HTML, adiciono bordas escuras nos lados esquerdo e direito do meu parágrafo principal:

 main p { padding: .75rem 0; border-right: 5px solid #262626; border-left: 5px solid #262626; }

A mesma técnica adiciona um efeito semelhante à minha tabela de números de produção do Citroen DS. Eu adiciono as duas bordas externas à minha tabela:

 aside table { width: 100%; border-right: 5px solid #262626; border-left: 5px solid #262626; border-collapse: collapse; }

Em seguida, adiciono uma terceira regra à direita dos cabeçalhos da minha tabela:

 aside th { padding-right: .75rem; padding-left: .75rem; border-right: 5px solid #262626; }

Ao garantir que cada célula preencha metade da largura da minha tabela, essa faixa vertical percorre o centro, de cima para baixo:

 aside th, aside td { width: 50%; box-sizing: border-box; }

Quando alguém lê dados numéricos tabulares como esses pares de anos e números de produção, seus olhos percorrem a coluna do ano. Em seguida, eles seguem para ver quantos carros a Citroen fabricou durante aquele ano. As pessoas também podem comparar os números de produção procurando por números altos ou baixos.

Para facilitar as comparações, alinho os números de produção à direita:

 aside td { text-align: right; }

Dependendo dos recursos OpenType disponíveis na fonte escolhida, você também pode melhorar a legibilidade dos dados tabulares especificando o forro em vez de numerais de estilo antigo. Alguns numerais de estilo antigo - incluindo 3, 4, 7 e 9 - têm descendentes que podem cair abaixo da linha de base. Isso dificulta a leitura de sequências de números mais longas. Os numerais de revestimento, por outro lado, incluem números que ficam na linha de base.

Os recursos OpenType também controlam a largura dos numerais, o que facilita a comparação de sequências de números em uma tabela. Enquanto os números proporcionais podem ter tamanhos diferentes, os numerais tabulares têm a mesma largura, de modo que dezenas, centenas e milhares serão alinhados com mais precisão:

 aside td { font-variant-numeric: lining-nums tabular-nums; }

Por fim, apresento o motivo do círculo na parte inferior deste design de tela pequena. Eu não quero incluir essas imagens circulares no meu HTML, então eu uso um URI de dados de conteúdo gerado por CSS onde o arquivo de imagem é codificado em uma string:

 aside:after { content: url("data:image/svg+xml…"); }

Freqüentemente me surpreendo com a quantidade de mudanças que preciso fazer para desenvolver designs para vários tamanhos de tela. Mudar de telas pequenas para designs de tamanho médio geralmente não requer mais do que pequenas alterações nos tamanhos dos tipos e a introdução de estilos de layout simples.

Começo alinhando horizontalmente o logotipo da Citroen e os títulos SVG no meu cabeçalho. Em telas médias e grandes, este logotipo vem em primeiro lugar no meu HTML, e as manchetes vêm em segundo lugar. Mas visualmente os elementos são invertidos. O Flexbox é a ferramenta ideal para fazer essa troca, simplesmente alterando o valor padrão da flex-direction de row para flex-direction: row-reverse:

 @media (min-width: 48em) { header { display: flex; flex-direction: row-reverse; align-items: flex-start; } }

Anteriormente, dei ao meu logotipo uma largura precisa. Mas, quero que os títulos preencham todo o espaço horizontal restante, então dou à divisão pai um valor flex-grow de 1. Em seguida, adiciono uma margem baseada na janela de visualização para manter os títulos e o logotipo separados:

 header div { flex-grow: 1; margin-right: 2vw; }

Para este design de tamanho médio, desenvolvi o layout usando uma grade simétrica de três colunas, que aplico aos elementos principais e laterais:

 main, aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

Então, usando a mesma técnica que usei para o elemento lateral anteriormente, gero duas imagens para o elemento principal e as coloco na primeira e terceira colunas da minha grade:

 main:before { grid-column: 1; content: url("data:image/svg+xml…"); } main:after { grid-column: 3; content: url("data:image/svg+xml…"); }

Repito o processo para o elemento side, com este novo conteúdo :after substituindo a imagem gerada que adicionei para telas pequenas:

 aside:before { grid-column: 1; content: url("data:image/svg+xml…"); } aside:after { grid-column: 3; content: url("data:image/svg+xml…"); }

O espaço extra disponível em telas de tamanho médio me permite introduzir mais o motivo de listras verticais, que é inspirado no design original de Emmett McBain. As bordas verticais à esquerda e à direita do parágrafo principal já estão no lugar, então tudo o que resta é mudar seu modo de escrita para vertical-rl e girá-lo em 180 graus:

 main p { justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }

Alguns navegadores respeitam as propriedades da grade e estendem uma tabela até a altura total da linha da grade sem ajuda. Outros precisam de um pouco de ajuda, então, para eles, dou à minha tabela de números de produção uma altura explícita que adiciona uma quantidade uniforme de espaço entre suas linhas:

 aside table { height: 100%; }

O efeito total desse design inspirado em McBain ocorre quando as telas são amplas o suficiente para exibir os elementos principais e laterais lado a lado. Eu aplico uma grade simétrica simples de duas colunas:

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

Em seguida, coloco os elementos main e side usando números de linha, com o cabeçalho abrangendo toda a largura do meu layout:

 header { grid-column: 1 / -1; } main { grid-column: 1; } aside { grid-column: 2; }

Parecendo desestruturado

As cores brilhantes e as formas irregulares dos blocos neste próximo design são tão inesperadas quanto o jazz que inspirou o original de Emmett McBain. Embora o arranjo desses layouts possa parecer desestruturado, o código que preciso para desenvolvê-lo certamente não é. Na verdade, existem apenas dois elementos estruturais, cabeçalho e principal:

 <header> <svg>…</svg> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <small>…</small> <h2>…</h2> <p>…</p> </main>

Começo aplicando cores de fundo e de primeiro plano, além de uma quantidade generosa de preenchimento para permitir que os olhos de alguém percorram e passem pelos espaços do design:

 body { padding: 2rem; background-color: #fff; color: #262626; }

Esses blocos coloridos dominariam o espaço limitado disponível em uma tela pequena. Em vez disso, adiciono as mesmas cores brilhantes ao meu cabeçalho:

 header { padding: 2rem 2rem 4rem; background-color: #262626; } header h1 { color: #c2ce46; } header p { color: #fc88dc; }

Formas irregulares são um aspecto deste design que eu quero visível em cada tamanho de tela, então eu uso um caminho de polígono para recortar o cabeçalho. Apenas as áreas dentro da área do clipe permanecem visíveis, todo o resto fica transparente:

 header { -webkit-clip-path: polygon(…); clip-path: polygon(…); }

A atenção aos menores detalhes da tipografia permite que as pessoas saibam que todos os aspectos de um design foram cuidadosamente considerados. Uma linha horizontal no pequeno elemento no início do meu conteúdo principal muda de tamanho ao longo do texto.

Não quero adicionar uma regra horizontal de apresentação ao meu HTML e, em vez disso, optar por uma combinação de Flexbox e pseudo-elementos no meu CSS. Primeiro, estilizo o texto do pequeno elemento:

 main small { font-size: .8em; letter-spacing: .15em; line-height: .8; text-transform: uppercase; }

Em seguida, adiciono um pseudo-elemento :after com uma borda inferior fina que corresponde à cor do meu texto:

 main small:after { content: ""; display: block; margin-left: .75rem; border-bottom: 1px solid #262626; }

Adicionar propriedades flex alinha o texto e meu pseudoelemento na parte inferior do elemento pequeno. Ao dar ao pseudo-elemento um valor de flex-grow de 1, ele pode alterar sua largura para complementar strings de texto mais longas e mais curtas:

 main small { display: flex; align-items: flex-end; } main small:after { flex-grow: 1; }

Gosto de surpresas, e há mais na minha manchete de segundo nível “Champion de France” do que aparenta.

Quase dez anos atrás, Dave Rupert lançou Lettering.js, um plugin jQuery que usa Javascript para envolver letras, linhas e texto de palavras individuais com elementos span. Esses elementos separados podem ser estilizados de várias maneiras. Com apenas um elemento multicolorido neste design, aplico a mesma técnica sem servir um script:

 <h2>Champion <span>d</span><span>e</span> <span>F</span><span>r</span><span>a</span><span>n</span><span>c</span><span>e</span></h2>

Então, dou a cada letra selecionada sua própria cor:

 h2 span:nth-of-type(1) { color: #c43d56; } h2 span:nth-of-type(2) { color: #905dd8; } h2 span:nth-of-type(3) { color: #377dab; }

Sempre encarei o desafio do design responsivo como uma oportunidade de ser criativo e aproveitar ao máximo cada tamanho de tela. O espaço extra disponível em telas médias e grandes me permite introduzir os grandes blocos de cor de forma irregular, o que torna este design inesperado.

Primeiro, aplico propriedades de grade e uma grade simétrica de oito colunas ao elemento do corpo:

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

Então, coloco meu cabeçalho em três dessas colunas. Com os blocos coloridos agora visíveis, altero a cor de fundo do cabeçalho para um cinza escuro:

 header { grid-column: 4 / 7; background-color: #262626; }

Centralizar o conteúdo horizontal e verticalmente era um desafio antes do Flexbox, mas agora alinhar e justificar o conteúdo do meu cabeçalho é simples:

 header { display: flex; flex-direction: column; align-items: center; justify-content: center; }

Eu mudo a cor dos elementos de texto do meu cabeçalho:

 header h1 { color: #fed36e; } header p { color: #fff; }

Em seguida, aplico margens horizontais negativas, para que meu cabeçalho sobreponha elementos próximos a ele:

 header { margin-right: 1.5vw; margin-left: -1.5vw; }

Meu elemento principal não precisa de estilo extra e eu o coloco na minha grade usando números de linha:

 main { grid-column: 7 / -1; }

Os elementos necessários para desenvolver um design não precisam estar em HTML. Pseudo-elementos criados em CSS podem tomar seu lugar, o que mantém o HTML livre de qualquer apresentação. Eu uso um pseudo-elemento :before aplicado ao corpo:

 body:before { display: block; content: ""; }

Em seguida, adiciono uma imagem de plano de fundo de URI de dados que cobrirá todo o pseudoelemento, independentemente de seu tamanho:

 body:before { background-image: url("data:image/svg+xml…"); background-position: 0 0; background-repeat: no-repeat; background-size: cover; }

CSS Grid trata pseudo-elementos como qualquer outro, permitindo-me colocar esses blocos coloridos em minha grade usando números de linha:

 body:before { grid-column: 1 / 4; }

Enquanto os desenvolvedores usam principalmente pontos de interrupção de consulta de mídia para introduzir alterações significativas em um layout, às vezes, apenas pequenas alterações são necessárias para ajustar um design. Jeremy Keith chama esses momentos de “pontos de ajuste”.

Esse design inspirado em McBain de tamanho médio funciona bem em tamanhos maiores, mas quero ajustar seu layout e adicionar mais detalhes às telas maiores. Começo adicionando quatro colunas extras à minha grade:

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

Em seguida, reposiciono os blocos de cores, cabeçalho e elementos principais gerados usando novos números de linha:

 body:before { grid-column: 1 / 8; } header { grid-column: 7 / 10; } main { grid-column: 9 / -1; }

Esses elementos agora se sobrepõem, então, para evitar que eles formem novas linhas na minha grade, dou a todos o mesmo valor de linha de grade:

 body:before, header, main { grid-row: 1; }

Este ajuste ao meu design adiciona outro bloco de cor entre o cabeçalho e o principal. Para preservar a semântica do meu HTML, adiciono um pseudoelemento e uma imagem de URI de dados antes do meu conteúdo principal:

 main:before { display: block; content: url("data:image/svg+xml…"); float: left; margin-right: 2vw; width: 10vw; }

Desconstruindo imagens-tipo

No início de sua carreira, os designs de capas de discos de Emmett McBain mostraram que ele tinha talento para a tipografia. Ele costumava brincar com o tipo, desconstruindo e reconstruindo-o para formar formas inesperadas. Esse controle sobre o tipo nunca foi fácil online, mas o SVG torna quase tudo possível.

Este próximo design inspirado em McBain conta com SVG e apenas dois elementos HTML estruturais; um cabeçalho que contém o gráfico grande baseado em tipo, um elemento principal para o meu conteúdo:

 <header> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <h2>…<h2> <div>…</div> <svg>…</svg> </main>

Eu preciso de muito poucos estilos de fundação para começar a desenvolver este design. Primeiro, adiciono cores de fundo e primeiro plano e preenchimento dentro dos meus dois elementos:

 body { background-color: #fff; color: #262626; } header, main { padding: 2rem; }

Em segundo lugar, defino estilos para o meu tipo que inclui os títulos e o parágrafo de texto que os segue:

 h1, h2, h1 + p { letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }

Dou ao meu conteúdo principal um fundo roxo rico que combina com a cor do Citroen no painel ao lado:

 main { background-color: #814672; color: #fff; }

Este design é dominado por um grande gráfico que inclui um perfil do Citroen DS e uma imagem tipo estilizada das palavras “Champion de France”. O arranjo de suas letras seria complicado de realizar usando posicionamento e transformações CSS, tornando o SVG a escolha perfeita.

Este SVG contém três grupos de caminhos. O primeiro inclui contornos das palavras “Champion de:”

 <svg> <g> <path>…</path> </g> </svg>

O próximo grupo inclui caminhos para o arranjo de letras coloridas. Eu dou a cada letra um atributo de id exclusivo para possibilitar estilizá-las individualmente:

 <g> <path>…</path> <path>…</path> <path>…</path> <path>…</path> <path>…</path> <path>…</path> </g>

Em seguida, adiciono atributos de classe ao grupo de caminhos que compõem o perfil do Citroen DS. Com esses atributos em vigor, posso ajustar as cores do carro para complementar diferentes temas de cores e até alterá-los em pontos de interrupção de consulta de mídia:

 <g> <path class="car-paint">…</path> <path class="car-tyres">…</path> <path class="car-wheels">…</path> <path class="car-shadow">…</path> <path class="car-lights">…</path> <path class="car-stroke">…</path> </g>

Telas de tamanho médio me permitem ajustar as posições do meu perfil Citroen DS e tipo de imagem:

 @media (min-width: 48em) { header svg { margin-bottom: -6rem; transform: scale(.85) translateY(-4rem) rotate(-20deg); } }

A ordem dessas transformações é importante, pois várias combinações de rotação, escala e translação fornecem resultados sutilmente diferentes. Em seguida, adiciono colunas ao meu conteúdo principal:

 main div { column-width: 14em; column-gap: 2rem; }

Até agora, esse conteúdo principal vem depois do meu cabeçalho no fluxo de documentos. Para telas maiores, quero que esses elementos fiquem lado a lado, então aplico propriedades de grade e doze colunas ao corpo:

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

Eu coloco o cabeçalho e o main na minha grade usando números de linha. O cabeçalho abrange sete colunas, enquanto o conteúdo principal abrange apenas cinco, produzindo um layout assimétrico a partir de uma grade simétrica:

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

Dimensionamento de texto gráfico

A distinção entre SVG e HTML tornou-se confusa, quanto mais eu uso SVG em meu trabalho. O SVG é um formato baseado em XML e fica totalmente à vontade quando incorporado ao HTML. Este design final inspirado em McBain conta com SVG em HTML não apenas por suas imagens impressionantes, mas também por texto.

Para desenvolver este impressionante design vermelho e preto, preciso de quatro elementos HTML estruturais. Um cabeçalho contém uma imagem do icônico Citroen DS. A divisão de banner inclui um grande título desenvolvido usando texto SVG. O elemento principal inclui meu texto corrido e, finalmente, um aparte para conteúdo complementar:

 <svg>…</svg> <header> <svg>…</svg> </header> <div> <svg>…</svg> </div> <main> <div> <svg role="heading" aria-level="1">…</svg> </div> <div class="content"> <p class="dropcap">…</p> <p>…</p> </div> </main> <aside> <small>…</small> <svg role="heading" aria-level="2">…</svg> <p>…</p> <figure>…</figure> <svg role="heading" aria-level="2">…</svg> <p>…</p> </aside>

Eu costumava pensar que usar SVG para renderizar texto era tão inapropriado quanto definir texto dentro de imagens, mas tendo usado mais SVG, percebi que estava errado.

Na edição 8, expliquei como, assim como o texto HTML, o texto SVG é acessível e selecionável. Ele também tem a vantagem de ser infinitamente estilizado usando caminhos de recorte, preenchimentos de gradiente, filtros, máscaras e traços.

O título da divisão do banner inclui dois elementos de texto. O primeiro contém a grande palavra “Champion”, o segundo contém “de France”. Pares de coordenadas xey em cada elemento tspan colocam essas palavras precisamente onde eu quero que elas desenvolvam uma laje sólida de texto:

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 850 360"> <title>Champion de France</title> <g fill="#ff" fill-rule="evenodd"> <text> <tspan class="title__dropcap" x="0" y="240">C</tspan> <tspan class="title" x="180" y="160">hampion</tspan> </text> <text> <tspan class="title__small" x="600" y="260">de France</tspan> </text> </g> </svg>

Se eu optar por incorporar este SVG em meu HTML ou vinculá-lo como uma imagem externa, posso usar CSS para definir seu estilo. Este título é uma imagem vinculada, então adiciono meus estilos ao arquivo SVG:

 <svg> <style type="text/css"> <![CDATA[ text { color: #fff; } .title { font-family: Clarendon URW; font-size: 150px; } .title__dropcap { font-family: Clarendon URW; font-size: 300px; text-transform: lowercase; } .title__small { font-family: Obviously; font-size: 85px; text-transform: uppercase; } ]]> </style> </svg>

Começo adicionando cores de base e estilos de tipografia. Optei por recuar o início de cada novo parágrafo, então removo todas as margens inferiores e adiciono um recuo de 2 canais a cada parágrafo subsequente:

 body { background-color: #a73448; color: #fff; } .content p { margin-bottom: 0; } .content p + p { text-indent: 2ch; }

O fundo cinza escuro e o texto vermelho do meu elemento lateral são opostos aos de outras partes do meu design. Aumentar a luminosidade e a saturação faz com que as cores pareçam mais vibrantes em fundos escuros:

 aside { background-color: #262626; color: #d33c56; }

Telas de tamanho médio me permitem ajustar o design do meu conteúdo para aproveitar ao máximo o espaço extra disponível. Eu uso duas propriedades de layout de várias colunas diferentes. Primeiro, especificando duas colunas de larguras variáveis ​​para minha divisão de conteúdo. Então, qualquer número de colunas que terão uma largura de 16em:

 @media (min-width: 48em) { .content { column-count: 2; column-gap: 2rem; } aside { column-width: 16em; column-gap: 2rem; } }

A maior parte do meu estilo é visível para pessoas que usam até as menores telas, então desenvolver um layout de tela grande envolve aplicar propriedades de grade e doze colunas ao elemento do corpo:

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

Coloco o logotipo da Citroen na primeira coluna:

 body > svg { grid-column: 1; }

Em seguida, o cabeçalho que contém uma imagem do DS icônico abrange quatro colunas:

 header { grid-column: 3 / span 4; }

Tanto a divisão do banner com seu elegante título SVG quanto o texto corrido do meu conteúdo principal ocupam oito colunas:

 #banner, main { grid-column: 1 / span 8; }

E, finalmente, o elemento de lado de tema invertido ocupa três colunas à direita do meu design. Para garantir que esse conteúdo abranja todas as linhas de cima para baixo do meu layout, coloco-o usando números de linha de linha:

 aside { grid-column: 10 / -1; grid-row: 1 / 6; }

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: Giovanni Pintori
• 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.