Decisões de design inspiradas com Bea Feitler: uma força criativa imparável

Mesmo que você não tenha estudado design gráfico na escola de arte, talvez conheça alguns nomes famosos. Com mais de um século de direção de arte comercial, há muito mais nomes para descobrir. Pessoas que fizeram um trabalho surpreendente que pode nos encorajar e inspirar a pensar sobre a web de forma mais criativa.

Descobrir pessoas com um talento incrível tem sido um dos aspectos mais gratificantes de estudar direção de arte. Aprender sobre um designer muitas vezes me leva a outro, e quando encontro alguém cujo trabalho admiro, quero entender não apenas o que eles fizeram, mas por que o fizeram.

Depois de conhecer o influente trabalho de Alexey Brodovitch na Harper's Bazaar até a década de 1950, queria saber o impacto que seu legado teve na revista. Isso me levou a Bea Feitler e sua parceira criativa Ruth Ansel, que dirigiu a Harper's Bazaar durante os anos 1960.

Feitler foi descrita como “a diretora de arte pioneira da qual você nunca ouviu falar”. Eu nunca a ouvi ser mencionada em uma conferência de design ou a vi referenciada em um artigo sobre web design.

Mas, os designs confiantes e energéticos de Feitler são apenas parte do que torna sua vida e trabalho fascinantes. Ainda mais importante foi como seu trabalho refletiu as mudanças na sociedade americana durante a década de 1960 e as escolhas que ela fez para influenciá-la.

Apenas uma exposição foi realizada sobre seu trabalho e um livro retrospectivo publicado. “O Design de Bea Feitler”, escrito por seu sobrinho, foi publicado em seu Brasil natal em 2012. Levei meses para encontrar um exemplar, mas acabei encontrando um. É o livro mais caro que comprei.

Feitler tem tanto a ensinar às pessoas que projetam para a web quanto aos designers de revistas que a seguiram. Espero que, de alguma forma, eu possa ajudar as pessoas a se apaixonarem pelo trabalho de Bea Feitler do jeito que eu fiz.

Inspirado em Bea Feitler

Bea Feitler nasceu no Rio de Janeiro em 1938. Depois de trabalhar em capas de álbuns, capas de livros, revistas e desenhos de cartazes, deixou o Brasil e mudou-se para Manhattan. Em 1961 - e ainda com apenas 25 anos - ela se tornou assistente de arte, então uma das mais jovens e primeiras co-diretoras de arte da Harper's Bazaar ao lado de Ruth Ansel.

Assim como Alexey Brodovitch - que deixou a Harper's Bazaar antes de sua mudança para os Estados Unidos - as colaborações de Feitler com artistas e fotógrafos ajudaram a definir seu trabalho. Na Harper's Bazaar, a fotografia de Richard Avedon da modelo Jean Shrimpton em seu famoso capacete espacial rosa, depois o John Lennon nu de Annie Leibovitz na capa da Rolling Stone.

Embora Feitler nunca tenha conhecido Brodovitch, é fascinante ver como ela respeitou e desenvolveu seu legado. Feitler entendia que as páginas das revistas deveriam ser construídas deliberadamente e individualmente, mas ao mesmo tempo deveriam estar conectadas umas às outras para formar um ritmo harmonioso.

Uma revista deve fluir. Deve ter ritmo. Você não pode olhar uma página sozinho, você tem que visualizar o que vem antes e depois. Um bom design editorial tem tudo a ver com criar um fluxo harmônico. — Bea Feitler

Feitler combinou o domínio de Brodovitch da página dupla com suas escolhas de cores fortes, inspiradas nos artistas pop Jasper Johns, Roy Lichtenstein e Andy Warhol, bem como na moda de rua e na cultura jovem.

Ela não tinha medo de experimentar cores ou romper com convenções, duas vezes colocando um texto verde lúgubre em um fundo rosa neon, primeiro para uma capa da Harper's Bazaar em abril de 1965 e depois para a revista feminista Ms. em dezembro de 1972.

No estúdio da Harper's Bazaar que ela dividia com Ruth Ansel, uma colagem em constante mudança preenchia sua parede de inspiração; algo que eu gostaria de ter espaço no meu pequeno estúdio. Feitler não tinha medo de misturar mídias e, quando sentiu que uma de suas páginas mais icônicas não estava funcionando, ela combinou uma das fotografias mais conhecidas de Avedon com um painel de uma revista em quadrinhos que havia comprado em uma banca de jornal em a rua abaixo.

Os projetos de Feitler influenciaram e refletiram as mudanças na sociedade americana na década de 1960. As revistas que ela dirigiu tinham uma qualidade frenética, quase cinematográfica, que se adequava perfeitamente à cultura da época, mas também é relevante para o nosso trabalho online hoje. Feitler acreditava que um bom design editorial consiste em criar um fluxo harmonioso. Isso é tão relevante para projetar experiências de usuário envolventes e jornadas de clientes quanto páginas de revistas.

Embora algumas pessoas continuem a recitar o mantra de que a web não é impressa, há muito que podemos aprender com o trabalho de Feitler. Seus designs podem nos ajudar a melhorar não apenas o design editorial online, mas também sites de comércio eletrônico e designs de produtos digitais.

Feitler disse que um livro era “50/50 imagem para texto”. Na web, precisamos permitir recursos interativos e vídeo também. Entender como combinar com sucesso esses componentes para criar uma experiência consistente e envolvente é uma habilidade fundamental que todo designer digital deve desenvolver.

Como mentor e professor, Feitler compartilhou muitos princípios com Alexey Brodovitch. Ela encorajou seus alunos a desenvolver sua própria direção, e muitos se tornaram proeminentes diretores de arte. Feitler era exigente e aceitava nada menos que os mais altos padrões de excelência em design de todos.

Agarre-se às suas paixões e mergulhe fundo enquanto confia em seus instintos. Saia do que é esperado. Abrace os acidentes e saiba que eventualmente você descobrirá a solução perfeita para um dilema criativo e ficará muito feliz ao fazê-lo. — Ruth Ansel

Infelizmente, Bea Feitler morreu de câncer em 1982 com apenas 44 anos. Acredito que ela tem tanto a ensinar para nós que projetamos para a web quanto para os diretores de arte de revistas que a seguiram. Espero que sua vida e obra nos influenciem a ter coragem em nossas convicções e fazer nossas próprias escolhas corajosas e confiantes.

#### Explosão de beleza

A Harper's Bazaar's não tinha um editor convidado antes, mas para sua edição de abril de 1965, o colaborador de longa data Richard Avedon editou e fotografou a edição inteira.

Dentro, Avedon fotografou Donyale Luna – a primeira mulher negra a aparecer na capa de uma revista de moda mainstream – e Paul McCartney vestindo um traje espacial emprestado da NASA. Para a capa, Avedon escolheu uma imagem da supermodelo contemporânea Jean Shrimpton usando um capacete espacial que havia sido feito por um dos modistas mais famosos de Nova York.

Mais tarde, Avedon lembrou que às 23h – após o prazo ter expirado – a fotografia que ele havia tirado para a capa não estava funcionando. Então, Feitler cortou a forma de um capacete de papel Day-Glo rosa e o colocou sobre a fotografia de Avedon. Sem grupos de foco, sem pesquisa, sem testes de público, apenas uma decisão de design corajosa e intuitiva.

O resultado foi uma capa que ganhou a medalha do New York Art Director's Club e foi colocada no número quinze na lista das 40 melhores capas de revistas da American Society of Magazine Editor de 2005.

⁵⁰ ⁄ ₅₀ imagem para texto

Para implementar meu primeiro projeto inspirado em Feitler, meu objetivo é usar o conjunto mínimo de elementos estruturais; um header mais elementos main e aside para o conteúdo. Meu cabeçalho contém a imagem dividida de um icônico Fusca e uma manchete que inclui um logotipo SVG Volkswagen em linha. Como este título não contém texto, uso um rótulo ARIA para descrevê-lo. Isso ajudará as pessoas que usam tecnologias assistivas:

 <header> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <picture>…</picture> </header> <main>…</main> <aside>…</aside>

Para telas menores, preciso apenas de estilos de base, pois o fluxo normal lida com meu layout de coluna única. Primeiro, adiciono um gradiente linear atrás da imagem do cabeçalho. Os gradientes são incrivelmente flexíveis, mas, apesar de sua utilidade, são surpreendentemente subutilizados:

 header { padding: 1rem 2vw; background-image: linear-gradient( to right, #444 0%, #444 50%, #fff 50%, #fff 100%); text-align: center; }

Meu gradiente começa à esquerda com um cinza escuro e termina à direita com branco. Sem paradas de cor, o resultado seria um gradiente suave entre essas cores, mas eu quero uma linha dura no centro do meu cabeçalho. Para conseguir esse efeito, coloco dois stops de cor na mesma posição de 50% . Para alterar a direção do meu gradiente, não preciso ajustar essas porcentagens. Eu posso simplesmente mudar a direção do gradiente da to right para to left .

É importante manter um equilíbrio consistente de peso visual enquanto adapta os designs a telas de vários tamanhos. Não quero que minha imagem de cabeçalho seja tão alta que empurre meu texto em execução para fora da primeira tela, então defino uma altura máxima de 75vh ou três quartos da altura de uma tela pequena:

 header img { max-height: 75vh; }

Para completar meu design de tela pequena, estabeleço o header como um contexto de posicionamento. Então, eu absolutamente posiciono o emblema da Volkswagen e garanto que sua largura se adaptará à tela usando uma unidade de largura da janela de visualização de 5vw :

 header { position: relative; } h1 { position: absolute; top: 1rem; left: 1rem; width: 5vw; }

Minha imagem de orientação retrato se encaixa bem em telas altas, mas preciso de uma imagem de formato mais amplo para telas mais largas do que altas. A orientação é uma consulta de mídia fabulosa, mas raramente usada, que testa a orientação de uma viewport. Essa consulta de mídia pode ser usada em folhas de estilo como uma alternativa às consultas de largura mais convencionais. Também pode ser aplicado à source de um elemento de picture . Esta consulta troca minha imagem de retrato por uma alternativa de paisagem sempre que a largura exceder a altura, seja em um telefone pequeno ou em uma tela de tamanho de desktop:

 <picture> <source media="(orientation: landscape)"> <img src="portrait.png" alt="Volkswagen Beetle"> </picture>

Para meu projeto de paisagem alternativo, uso Grid para colocar os elementos header , main e aside . Existem várias opções para colocar esses elementos - incluindo colunas e linhas e áreas de modelo - mas optei por usar grid-template-columns para definir uma grade simétrica de duas colunas no body . Eu aplico o gradiente linear novamente e defino sua altura mínima para corresponder à janela de visualização completa:

 @media screen and (orientation: landscape) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; min-height: 100vh; background-image: linear-gradient( to right, #444 0%, #444 50%, #fff 50%, #fff 100%); } }

Na orientação paisagem, meu header preenche toda a largura da tela. Como não preciso mais da imagem de fundo gradiente linear neste elemento, posso simplesmente removê-la:

 header { grid-column: 1 / -1; background-image: none; }

Agora, como essa grade é tão simples, coloco meus elementos main e aside na grade usando linhas nomeadas:

 main { grid-column: main; } aside { grid-column: aside; }

O resultado final é um design que adapta seu layout dependendo se a tela do navegador ou do dispositivo está na orientação paisagem ou retrato.

#### Arte em Quadrinhos

Bea Feitler combinava regularmente fotografias com ilustrações, e a arte dos quadrinhos aparece no trabalho ao longo de sua carreira.

Para a Harper's Bazaar, ela colocou uma das fotografias de Avedon de Jean Shrimpton vestindo um traje espacial em um fundo de quadrinhos. Mais tarde, ela contratou a lendária quadrinista Marie Severin para criar esta capa para a Ms. Magazine em 1973.

Escala de ênfase

O Volkswagen Beetle era um carro pequeno com uma grande personalidade. Eu quero que meu próximo design tenha um personagem para combinar. O design da tela grande usa uma imagem enorme da roda do Fusca para enfatizar a pequenez daquele pequeno carro. Mas, antes de chegar a telas grandes, quero ter certeza de manter um contraste semelhante em escala em telas pequenas.

Três elementos estruturais compõem a marcação que preciso para implementar este projeto; um header para a imagem da roda grande, uma figure que contém a imagem menor do carro e um main para o meu texto em execução. Como o header não tem significado para quem usa um leitor de tela, escolho escondê-lo usando um atributo aria-hidden :

 <header aria-hidden="true"> <img src="header.png" alt=""> </header> <figure> <img src="figure.png" alt="Volkswagen Beetle"> </figure> <main>…</main>

Estilos de base e fluxo normal cuidam da maioria dos aspectos do meu design de tela pequena, mas isso não significa que eu possa ignorar o que torna o conceito geral distinto; o contraste entre a roda grande e o pequeno Volkswagen. Para garantir que meu header sempre ocupe um terço da altura da janela de visualização com espaços em branco idênticos entre ele e meu conteúdo, uso unidades de altura da janela de visualização para altura e margem:

 header { margin-bottom: 33vh; height: 33vh; } 

Um problema que frequentemente encontro ao desenvolver layouts flexíveis é o redimensionamento não intencional de imagens. Com uma altura fixa no header e 100% de largura na imagem, a roda gigante pode distorcer. Felizmente, existe uma maneira de preservar sua proporção usando a propriedade object-fit . Existem quatro opções possíveis, mais none :

1. contain
   Preserva a proporção de uma imagem ao caber dentro da caixa de conteúdo de um pai.
2. cover
   Preserva a proporção de uma imagem, mas desta vez preenche toda a caixa. Quando isso acontecer, partes da imagem fora da caixa de conteúdo serão ocultadas.
3. fill
   Uma imagem será distorcida para que sua largura e altura correspondam ao seu pai.
4. scale-down
   Semelhante a conter, reduz o tamanho de uma imagem ou vídeo para caber dentro de seu pai.

Eu quero que minha roda grande preencha o cabeçalho completamente sem alterar sua proporção. Também não estou preocupado que algumas partes da imagem sejam cortadas, o que torna a cover a escolha certa para object-fit :

 header img { object-fit: cover; object-position: center bottom; width: 100%; height: 100%; }

Agora que a imagem da roda está em posição, forneço escala contrastando seu tamanho grande com uma imagem pequena do carro inteiro. Restrinjo o tamanho máximo do Beetle à metade da largura da janela de visualização e centralizo-o horizontalmente usando suas margens:

 figure { margin: 0 auto; max-width: 50vw; }

Este design usa um fundo cinza sólido para representar a estrada, então eu adiciono uma cor de fundo e movo a figure para baixo em 10px , para que as rodas do Fusca fiquem firmemente no asfalto:

 main { padding: 2rem; background-color: #f0f0f1; } figure { transform: translateY(10px); }

Telas maiores oferecem a oportunidade de causar uma grande impressão e, para esse design, quero que a imagem do header ocupe metade da largura e da altura total de uma tela grande. Eu aplico a mesma grade composta 6+4 que usei para muitos projetos desta série. Tem oito colunas às quais adiciono três linhas. Eu dou às linhas do meio e de baixo uma altura fixa e permito que a primeira linha ocupe todo o espaço vertical restante:

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; grid-template-rows: 1fr 155px 155px; grid-column-gap: 2vw; } }

Eu quero que o body sempre preencha a altura total da janela de visualização, então eu aplico uma altura mínima de 100vh e uso um gradiente linear para criar a ilusão de uma estrada:

 body { min-height: 100vh; background-image: linear-gradient( to top, #f0f0f1 0%, #f0f0f1 155px, #fff 155px, #fff 100%); }

Usando números de linha, coloco o header na grade, de modo que ocupe metade das colunas e todas as linhas. O alinhamento da pequena figure a coloca no final de seu módulo de grade. Em seguida, o main forma uma única coluna estreita de texto corrido:

 header { grid-column: 5 / -1; grid-row: 1 / 4; margin-bottom: 0; height: auto; background-color: #444; } figure { grid-column: 1 / 4; grid-row: 2; align-self: end; max-width: auto; } main { grid-column: 4; grid-row: 1 / 3; align-self: center; background-color: transparent; } 

Saber como a escala influencia a compreensão de uma história é essencial para contá-la bem. O tamanho puro raramente é suficiente por si só, portanto, para causar um impacto significativo, a grandeza deve ser relativa ao tamanho de outros elementos.

Bea Feitler entendia a escala e a usava bem. Ela frequentemente contrastava grandes elementos de primeiro plano com menores no fundo para criar designs que continham uma profundidade incrível. Agora podemos seguir seus passos usando escala para adicionar impacto aos designs de produtos e sites.

Escolhas de cores confiáveis

A escolha confiante de cores de Bea Feitler foi uma das marcas de seu trabalho e me atraiu imediatamente. Para o meu próximo design inspirado em Feitler, contraste um vermelho profundo com um amarelo vibrante e inverto essas cores em ambos os lados do design.

Embora esta página seja grande em cores, também é pequena em marcação. Preciso apenas de dois elementos estruturais; um header e main . Dentro de ambos há uma figure e uma divisão:

 <header> <figure>…</figure> <div>…</div> </header> <main> <figure>…</figure> <div>…</div> </main>

As cores de fundo e de texto são o ponto de partida para a implementação deste design. Eu posso deixar todo o resto para o fluxo normal:

 body { background-color: #ba0e37; color: #f8d72e; } main { background-color: #f8d72e; color: #272732; } 

Para telas de tamanho médio, quero que as figuras e divisões dentro do meu header e main ocupem metade da altura e largura de qualquer viewport, então aplico uma grade simétrica de duas colunas e uma altura mínima:

 @media screen and (min-width : 48em) { header, main { display: grid; grid-template-columns: 1fr 1fr; min-height: 50vh; } }

Coloco a figure do cabeçalho na segunda coluna e a divisão na primeira. Como isso é o oposto da ordem do conteúdo, preciso atribuir ambos à mesma linha para evitar que uma coluna fique abaixo da outra:

 header figure { grid-column: 2; header div { grid-column: 1; grid-row: 1; }

A figure e a divisão do elemento principal seguem a ordem do conteúdo, então não preciso especificar uma grid-row para eles:

 main figure { grid-column: 1; align-self: end; } main div { grid-column: 2; }

Quero preencher as telas com cores de ponta a ponta. Para telas maiores, aplico uma grade assimétrica de duas colunas que estende toda a altura do meu body :

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } }

Neste design de tela grande, a figure e a divisão no meu header e pilha main verticalmente em vez de horizontalmente. Eu mudo a propriedade display de grid para flex e defino a direção para column . Mas, a ordem visual do main é oposta à sua ordem de conteúdo, então eu mudo sua direção de coluna para coluna inversa:

 header, main { display: flex; flex-direction: column; } main { flex-direction: column-reverse; }

Em seguida, para melhorar a legibilidade do meu texto em execução, uso o layout de várias colunas e especifico uma largura de coluna de 18em . Um navegador irá gerar tantas colunas dessa largura quantas couberem dentro de seu elemento pai:

 main div { column-width: 18em; column-gap: 2vw; }

Grandes blocos de cor sólida podem ser cansativos para os olhos, então eu quero quebrá-los adicionando um padrão de imagem de fundo divertido e repetitivo ao body usando SVG:

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

Dentro do SVG, especifico a cor de preenchimento e defino uma baixa opacidade de preenchimento para um efeito sutil:

 fill='#f8d72e' fill-opacity='0.1'

Eu aplico a mesma imagem SVG no fundo amarelo do meu main , desta vez mudando sua cor de preenchimento para branco e aumentando a fill-opacity :

 main { background-image: url("data:image/svg+xml"); } fill='#fff' fill-opacity='0.2'

Padrão e textura desempenham um papel importante em muitas das icônicas revistas de Bea Feitler, e ainda assim eles caíram em desuso na web. Em seguida, mostrarei como usar padrões CSS e SVG que adicionarão profundidade aos seus designs.

Padrão e textura adicionam profundidade

Neste próximo design inspirado em Feitler, quero transmitir a curvatura do Volkswagen Beetle usando círculos. Eu preciso de HTML mínimo para implementar este design bem torneado, apenas três elementos; um header , main e aside :

 <header aria-hidden="true"> <picture>…</picture> </header> <aside> <div><img></div> <div><img></div> </aside> <main> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <p>…</p> </main>

Não quero que o header seja anunciado pelos leitores de tela, então adiciono um atributo aria-hidden com um valor true . Eu quero que os leitores de tela descrevam meu título de nível superior, então adiciono um atributo aria-labelledby a isso.

Pontos de estilo de meio-tom adicionam textura a esta página e é fácil implementar padrões como este usando vários gradientes de plano de fundo e combinações de background-size de background-position :

 body { background-color: #ba0e37; color: #fff; background-image: radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%), radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%); background-size: 6vw 6w; background-position: 0 0, 3vw 3vw; }

Vou dividir esse estilo em três etapas:

1. Dois gradientes radiais, separados por uma vírgula. Cada gradiente inclui duas etapas de cores, a primeira em 15% e a segunda em 16% que formam os pontos.
2. Ao usar unidades de largura da janela de visualização para dimensionar o padrão resultante, mantenho o tamanho do ponto proporcional à largura da página.
3. Posicione o primeiro gradiente radial no canto superior esquerdo da janela de visualização ( 0 0 ), e o segundo usando unidades de largura da janela de visualização que são metade do tamanho do plano de fundo.

Lea Verou esteve ocupada compilando uma galeria de padrões úteis que ela desenvolveu usando gradientes lineares e radiais. Por mais inteligente que a galeria de Lea seja, há algo sobre gradientes complicados sendo usados ​​para produzir padrões semelhantes a imagens que me incomodam.

Os padrões SVG parecem muito mais apropriados. Eles são tão leves e são muito mais flexíveis. Adicione SVG a uma imagem de plano de fundo usando um URL e, se estiver preocupado com solicitações HTTP, incorpore um SVG em uma folha de estilo como data:image :

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

O aside neste projeto inclui duas divisões, cada uma contendo fotos da fabulosa frente do Fusca. Eu corto essas divisões em círculos para complementar suas curvas:

 aside div { -webkit-clip-path: circle(); clip-path: circle(); } 

Ao tornar os fundos das fotos totalmente transparentes, posso alterar a cor de suas divisões pai sempre que precisar. Eu adiciono cores de fundo ligeiramente transparentes que permitem que as dicas do padrão de pontos apareçam:

 aside div:first-child { background-color: rgba(57,135,106,.9); } aside div:last-child { background-color: rgba(248,215,46,.9); }

Com tanta cor e textura neste design, meu layout precisa ser simples, então aplico uma grade assimétrica de duas colunas onde a coluna mais estreita nunca pode encolher abaixo de 260px:

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 4fr minmax(260px, 1fr); } }

Para melhorar a acessibilidade e a legibilidade dos meus parágrafos de texto em execução no padrão vermelho, adiciono uma sombra sutil em uma cor que corresponda ao meu plano de fundo:

 p { filter: drop-shadow(0 0 5px #ba0e37); } 

No passado, filtrar uma imagem para aplicar um desfoque, mudança de cor ou sombra projetada exigia a adição de efeitos destrutivos em um editor de imagens, mas hoje muitos desses mesmos filtros estão disponíveis em CSS. Você também pode aplicar filtros a outros elementos HTML.

A aplicação de um filtro CSS é simples. Primeiro, declare a função de filtro e depois um valor entre parênteses. Para reduzir a opacidade de um elemento para 25% usando um filtro — em vez da propriedade opacity — eu uso o filtro de opacity :

 .ihatetimvandamme { filter: opacity(.25); }

Esses valores diferem com cada filtro. Alguns filtros usam graus, aceitam pixels de uso, porcentagens ou seu decimal equivalente. Por exemplo, .25 é igual a 25% e 1 é o equivalente a 100% .

Há dez filtros CSS padrão para escolher: blur , brightness , contrast , drop-shadow projetada , escala de greyscale , hue-rotate , invert , opacity , saturate e sepia . Você também pode usar a função URL para usar um filtro personalizado do SVG.

Quero remover todas as cores do meu header e reduzir sua opacity para 80% . Posso combinar qualquer número de filtros separando-os com um espaço. É importante lembrar que um navegador aplicará os filtros na ordem em que forem especificados, portanto, para meu header , a cor será removida antes que a opacity seja alterada:

 header { filter: grayscale(1) opacity(.8); }

Quando preciso de uma mudança suave entre filtros e valores CSS, posso adicionar uma transição entre estados, talvez aumentando a opacity do meu header para uma pseudo-classe : :hover :

 header { filter: grayscale(1) opacity(.8); transition: filter 1s linear; } header:hover { filter: grayscale(1) opacity(1); }

Eu posso usar CSS para desenvolver uma animação mais elaborada entre filtros primeiro definindo meus quadros-chave, definindo valores de filtro em qualquer porcentagem entre 0 e 100% da duração da animação:

 @keyframes beetle { 0% { filter: grayscale(1) opacity(.8) blur(5px); } 50% { filter: grayscale(1) opacity(1) blur(0); } 100% { filter: grayscale(1) opacity(.8) blur(5px); } }

Em seguida, atribuo essa animação ao meu header , usando os valores animation-name plus para animation-duration , animation-delay e outras configurações opcionais:

 header:hover { animation-name: beetle; animation-delay: 0s; animation-direction: alternate; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: linear; }

Una Kravets recriou efeitos de filtro do Instagram usando filtros CSS e modos de mesclagem para sua biblioteca CSSgram. Com base no trabalho de Una, o desenvolvedor Indrashish Ghosh criou o cssFilters, uma ferramenta para controle granular sobre esses efeitos no estilo Instagram, aplicando-os a uma imagem carregada e gerando valores CSS. Ferramentas como a do Indrashish facilitam o uso de filtros CSS como qualquer editor de imagens.

Uma reação aos designs excessivamente ornamentais, o design plano tem sido a estética dominante por quase uma década. À medida que gradientes, padrões, sombras e skeuomorfismo tridimensional saíram de moda, os designers adotaram cores sólidas, cantos quadrados e bordas afiadas.

O antiskeuomorphism sem dúvida ajudou os designers a se concentrarem no design de recursos e na usabilidade sem a distração do que alguns ainda podem ver como floreios. Mas, reduzir ao mínimo os designs de produtos e sites teve repercussões infelizes. Com pouco para diferenciar seus designs, produtos e sites adotaram uma lamentável uniformidade que dificulta a distinção entre eles.

Embora não esteja defendendo um retorno aos piores excessos do skeuomorphism, espero que os designers de produtos e sites percebam o valor de uma abordagem mais vibrante ao design; aquele que aprecia como o design pode distinguir uma marca de sua concorrência. Um método que usa gradientes, padrões, sombras de forma adequada para contar histórias e proporcionar maior affordance. Isso tornará os produtos e sites não apenas mais fáceis de usar, mas também mais agradáveis.

Desenvolva com filtros SVG

Para este projeto final inspirado, preciso apenas de dois elementos estruturais; um header que contém seis besouros coloridos e um main para o meu texto:

 <header> <div><img src="car-red.png" alt=""></div> <div><img src="car-green.png" alt=""></div> <div><img src="car-cyan.png" alt=""></div> <div><img src="car-magenta.png" alt=""></div> <div><img src="car-yellow.png" alt=""></div> <div><img src="car-black.png" alt=""></div> </header> <main>…</main>

O fluxo normal cuida da maior parte desse design para telas pequenas, mas isso não significa que não haja nada a fazer. Eu perderia o impacto daqueles carros coloridos se os encolhesse para caber em uma tela pequena. Também não quero que as pessoas passem por todos os seis antes de ver meu conteúdo, então minha solução é alinhá-los horizontalmente em um painel de rolagem.

O Flexbox é a escolha óbvia para organizar essas imagens, mas a ordem padrão da esquerda para a direita significaria mostrar a traseira do carro final, em vez da frente do primeiro. Isso é facilmente resolvido alterando o flex-direction da linha padrão para row row-reverse :

 header { display: flex; direction: row-reverse; max-width: 100%; overflow-x: scroll; }

Eu quero que todos esses carros apareçam no mesmo tamanho, então eu uso a propriedade flex-grow e um valor de 1 . Como quero mostrar a frente de cada carro para indicar que há mais para ver fora da janela de visualização, defino o valor flex-basis para 80% ;

 header div { flex-grow: 1; flex-grow: 0; flex-basis: 80%; /* flex: 1 0 80%; */ }

Em telas de tamanho médio, há espaço para um layout mais elaborado para minha coleção de carros. Para este projeto, organizo meus Beetles em uma grade modular de 8x12, onde cada módulo é um retângulo de proporção de 16:9. O Fusca preto mais distante do espectador ocupa um único módulo, e os carros aparecem progressivamente maiores até que o Fusca vermelho em primeiro plano ocupa a maior zona espacial.

Para implementar essa grade modular, aplico Grid ao meu elemento de cabeçalho, seguido por oito colunas repetidas de tamanho uniforme e doze linhas que se adaptam à altura mínima de seu conteúdo. Ao alinhar os itens ao end , em vez do start , de cada linha, o resultado parece mais realista:

 @media screen and (min-width : 48em) { header { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(12, min-content); grid-row-gap: 10px; align-items: end; } } 

My next task is to place each Beetle onto the grid. I use a combination of child ( > ) and nth-child selectors to place each element using line numbers:

 header > :nth-child(1) { grid-column: 3 / -1; grid-row: 10 / -1; } header > :nth-of-type(2) { grid-column: 3 / 7; grid-row: 7 / 9; } header > :nth-of-type(3) { grid-column: 1 / 4; grid-row: 5 / 7; } header > :nth-of-type(4) { grid-column: 2 / 4; grid-row: 3; } header > :nth-of-type(5) { grid-column: 6 / 8; grid-row: 2; } header > :nth-of-type(6) { grid-column: 3; grid-row: 1; }

A design like this cries out for typographic details. Padding on the main element adds space around my running text, so to add interest to my type, I set column widths of 24em , and a browser will automatically create the right number of columns to fit the viewport:

 p { column-width: 24em; column-gap: 2vw; }

To add extra interest to my type, I combine a first-of-type pseudo-class selector with a first-line pseudo-element to transform that first line into uppercase letters:

 p:first-of-type::first-line { text-transform: uppercase; }

To implement my design for larger screens, I double the number of columns from eight to sixteen and reposition my images to the new line numbers:

 @media screen and (min-width : 64em) { header { grid-template-columns: repeat(16, 1fr); } header > :nth-child(1) { grid-column: 8 / 15; grid-row: 9 / 13; } header > :nth-of-type(2) { grid-column: 6 / 11; grid-row: 5 / 8; } header > :nth-of-type(3) { grid-column: 1 / 5; grid-row: 4 / 6; } header > :nth-of-type(4) { grid-column: 4 / 6; grid-row: 3; } header > :nth-of-type(5) { grid-column: 11; grid-row: 2; } header > :nth-of-type(6) { grid-column: 5; grid-row: 1; } }

Compared to today's Beetle — which weighs almost 3000lbs — the Volkswagen Type 1 was a lightweight and speedy little car for its time. I'd like to create the impression these cars are speeding past the viewer by adding motion blur. Blurring an element using a CSS filter is straightforward:

header > div { filter: blur(5px); }

Este filtro me permite desfocar um elemento em qualquer quantidade usando vários valores de comprimento, incluindo pixels que me parecem ser a unidade mais adequada. Mas os filtros CSS só me permitem desfocar um elemento usando a mesma quantidade horizontal e verticalmente, muito parecido com o desfoque gaussiano de um editor de imagem. Para adicionar movimento realista ao meu design, preciso trocar CSS por um filtro SVG.

Eu abordo apenas uma pequena quantidade de detalhes sobre filtros SVG nesta edição, mas a especialista em SVG Sara Soueidan escreveu sobre eles extensivamente. Comece com o tutorial SVG Filters 101 da Sara.

Embora seus dez filtros de ações sejam uma adição relativamente recente ao CSS, sua história remonta às origens do SVG. Os filtros em SVG oferecem muito mais flexibilidade com mais seis filtros disponíveis e incríveis possibilidades de personalização. Considerando que CSS blur permite apenas um valor para ambos os eixos horizontal e vertical (X/Y), em SVG eu posso usar dois valores; um para o eixo X, o outro para Y.

No SVG, cada filtro tem sua própria identidade, então, para desfocar um elemento HTML, faça referência ao seu ID usando o valor da URL na propriedade do filtro de uma folha de estilo:

 .blur { filter: url(#blur); }

Os filtros têm seu próprio elemento em SVG, é o elemento do filter . Mesmo que um filtro não seja visível em um navegador, dar ao SVG uma altura de 0 garantirá que ele não ocupe espaço:

 <svg height="0"> <filter>…</filter> </svg>

Cada primitivo de filtro SVG tem seu próprio nome que é prefixado por fe, uma abreviação de “efeito de filtro”. Sem surpresa, o nome de um desfoque é feGaussianBlur . A quantidade de desfoque é aplicada como um stdDeviation usando um valor uniforme ou dois valores separados para horizontal e vertical. Para reproduzir o desfoque gaussiano uniforme de 5px anterior em SVG, adiciono um valor:

 <filter> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter>

Estou procurando um efeito de movimento mais realista, onde a imagem é borrada apenas no eixo horizontal. Eu aplico desfoque apenas no eixo X, deixando o eixo Y em zero:

 <filter> <feGaussianBlur in="SourceGraphic" stdDeviation="15, 0"/> </filter>

Agora meu carro está acelerando pela janela de visualização, mas quando você olha mais de perto. o resultado não é totalmente realista. Isso porque as bordas dos meus elementos desfocados são cortadas pela caixa delimitadora. Este é o retângulo que envolve cada elemento.

Para tornar todo o efeito de filtro visível, preciso aumentar o tamanho da minha região de filtro usando os valores x , y , width e height . Eu uso valores negativos de -10% nos eixos horizontal e vertical e, em seguida, aumento a width e a height para 120% , o que permite mais espaço visível para as bordas desfocadas das minhas imagens:

 <filter x="-10%" y="-10%" width="120%" height="120%"> … </filter>

Quando você observa carros passando em alta velocidade ou olha pela janela de um trem em movimento, os objetos mais próximos de você parecem se mover mais rápido do que os mais distantes. Para tornar meu design mais realista, preciso de um conjunto diferente de valores de desfoque para objetos em primeiro plano, meio-termo e plano de fundo.

Elementos de primeiro plano, como o besouro vermelho do armário, precisam da maior quantidade de desfoque horizontal. Eu dou a este filtro uma identidade de blur-foreground :

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="15,0"/> </filter>

Então, os Besouros no meio termo recebem um stdDeviation ligeiramente menor de 10 :

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="10,0"/> </filter>

Finalmente, os objetos em segundo plano recebem menos desfoque. Eu dou a este filtro uma identidade de blur-background para que eu possa aplicá-lo na minha folha de estilo:

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5,0"/> </filter>

Com todos os meus filtros especificados, na minha folha de estilo eu os aplico aos besouros em primeiro plano, meio-termo e plano de fundo:

 <img src="car-red.png" class="blur-foreground"> <img src="car-green.png" class="blur-medium"> <img src="car-cyan.png" class="blur-medium"> <img src="car-magenta.png" class="blur-medium"> <img src="car-yellow.png" class="blur-background"> <img src="car-black.png" class="blur-background"> .blur-foreground { filter: url(#blur-foreground); } .blur-medium { filter: url(#blur-medium); } .blur-background { filter: url(#blur-background); }

Meu conjunto de seis besouros coloridos agora está correndo pela janela de visualização e meu design final inspirado em Feitler também é um vencedor.

NB : Os membros do Smashing têm acesso a um PDF lindamente projetado da revista Andy's Inspired Design Decisions e exemplos de código completos deste artigo.

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