Direção de arte para a Web com áreas de modelo de grade CSS

( Este artigo foi gentilmente patrocinado pela CoffeeCup Software .) Certo, vou direto ao ponto. CSS Grid é importante, muito importante, muito importante para ser uma daquelas propriedades "Usarei quando todos os navegadores suportarem". Isso porque, com CSS Grid, agora podemos ser tão criativos com layout na web quanto na impressão, sem comprometer a acessibilidade, capacidade de resposta ou usabilidade.

Se você é sério sobre web design ou desenvolvimento, você precisa ser sério sobre aprender e usar CSS Grid também. Neste artigo vou explicar como usar um aspecto, grid-template areas , uma forma de organizar elementos que até mesmo uma grande e burra como eu pode entender, e que não recebe atenção suficiente.

Agora, você quer ver alguma ação e algum código, eu sei disso, mas espere um maldito minuto. Antes de você aprender "como", eu quero te ensinar "por que" é importante fazer o tipo de layout que vimos em outras mídias por décadas, mas que na maioria das vezes estão ausentes da web.

Sentindo frustrado

Acho que você já viu aqueles "qual desses dois layouts você está projetando hoje?" tweets, lamentando o estado atual do design na web. Até eu falei sobre como o web design perdeu sua "alma". Aposto que você também já viu pessoas usarem CSS Grid para recriar pôsteres ou páginas de revistas. Essas demonstrações técnicas são legais e mostram o quão fácil pode ser a implementação de layouts complexos com CSS Grid quando comparado a outros métodos, mas eles não chegam ao fundo de por que fazer essas coisas é importante.

Então qual é o motivo? Por que o layout é uma parte tão importante do design? Bem, tudo se resume a uma coisa, e isso é comunicação.

Pelo que parece uma eternidade, os web designers criaram modelos e depois os preencheram, com pouca consideração da relação entre conteúdo e layout. Suponho que isso seja inevitável, dadas as considerações para sistemas de gerenciamento de conteúdo, nossa necessidade de tornar os designs responsivos e as limitações das propriedades CSS que usamos até agora. Claro, criamos designs que são flexíveis, utilizáveis, mas estamos perdendo uma peça-chave do quebra-cabeça, o papel que o layout desempenha na entrega de uma mensagem.

Se você já esteve no quarteirão algumas vezes, saberá o papel que a cor desempenha na definição do tom certo para um design. Não preciso dizer que esse tipo também desempenha seu papel. Escolha o tipo de letra errado e você corre o risco de se comunicar de forma ineficaz e deixar as pessoas se sentindo de forma diferente do que você pretendia.

O layout — intimamente ligado a aspectos da tipografia como a 'medida' — desempenha um papel igualmente importante. Simetria e assimetria, harmonia e tensão. Esses princípios atraem as pessoas para o seu conteúdo, as orientam e as ajudam a entendê-lo com mais facilidade. É por isso que criar o layout certo é tão importante quanto escolher o tipo de letra mais apropriado. Os designers de impressão sabem disso há anos.

Contando histórias através da direção de arte

A direção de arte importa tanto na web quanto em outras mídias, incluindo a impressa, e o que vou cobrir se aplica tanto à promoção de produtos digitais quanto à contação de histórias.

O que você pensa quando ouve o termo 'direção de arte'? Você pensa em imagens responsivas, apresentando cortes, tamanhos ou orientações alternativas para vários tamanhos de tela usando o elemento <picture> ou 'sizes' em HTML? Eles se tornaram ferramentas úteis de design responsivo e direção de arte, mas há mais no web design do que ferramentas.

Você pensa naqueles designers como Jason Santa Maria e Trent Walton, que às vezes dirigem a arte de sua escrita, dando a uma entrada uma imagem, layout e tipografia próprios e distintos. Isso nos aproxima da compreensão da direção de arte, mas imagens, layout e tipografia são apenas o resultado da direção de arte, não o significado dela.

Então, se a direção de arte não é exatamente essas coisas, o que exatamente é? Em uma frase, é a arte de destilar um significado ou propósito essencial e preciso de um conteúdo – seja um artigo de revista ou uma lista de motivos para usar o aplicativo mais legal da startup mais badalada – e transmitir esse significado ou propósito melhor usando o design. Não ouvimos muito sobre direção de arte na web, mas ela está bem estabelecida em outro meio, talvez o mais memorável sejam revistas e até certo ponto jornais.

Não tenho idade suficiente para lembrar em primeira mão o trabalho de Alexey Brodovitch na revista Harpers Bazaar de 1934 a 1958.

Eu me lembro da direção de arte artística de Neville Brody para a revista Face e ainda me inspiro nela todos os dias.

A direção de arte é tão raramente discutida em relação à web que você pode ser perdoado por pensar que não é relevante. Talvez você veja a direção de arte como uma atividade mais adequada ao mundo impresso do que à web? Algumas pessoas podem pensar na direção de arte como elitista de alguma forma.

Não acho que nada disso seja verdade. Histórias são histórias, não importa onde sejam contadas ou por qual meio. Eles podem ser instigantes como os publicados na ProPublica, ou podem ser a história de sua empresa e por que as pessoas deveriam fazer negócios com você. Há a história de como sua instituição de caridade apoia uma boa causa e por que as pessoas deveriam doar para ela. Depois, há a história do novo aplicativo da sua start-up e por que alguém deveria baixá-lo. Com todas essas histórias, há uma mensagem mais profunda além de apenas contar os fatos sobre o que você faz ou vende.

A direção de arte trata de entender essas mensagens e decidir a melhor forma de comunicá-las por meio da organização e apresentação de palavras e recursos visuais. A direção de arte é relevante para a web? Claro. Os diretores de arte usam o design para ajudar as pessoas a entender melhor o significado de um conteúdo, e isso é tão importante na web quanto na impressão. Na verdade, os princípios básicos da direção de arte não mudaram entre o impresso e o digital.

Eu iria além, dizendo que a direção de arte é essencial para criar experiências coesas em vários canais, para que o significado de uma história não se perca nas lacunas entre dispositivos e tamanhos de tela.

David Hillman, ex-The Guardian e New Statesman e designer de muitas outras publicações, disse:

"Em sua melhor forma, (direção de arte) envolve o diretor de arte tendo uma compreensão completa e profunda do que a revista diz, e através do design, influenciando como ela é dita."

Meu amigo Mark Porter, coincidentemente o ex-diretor de criação do The Guardian também disse:

"O design é responsável pela distribuição dos elementos no espaço."

CSS Grid torna mais possível do que nunca ser responsável pela distribuição de elementos.

Direção de Arte Uma História Hardboiled

Acho que agora é a hora de ir direto ao assunto, então vou lhe dizer como colocar um pouco disso para funcionar em uma série de exemplos Hardboiled . Vou mostrar o layout e como isso ajuda a contar histórias e, em seguida, explicarei como desenvolver um desses designs usando CSS Grid.

Primeiro, a história de fundo. Na capa da minha edição de 2010 do Hardboiled Web Design (1), uma misteriosa mulher de vestido vermelho (sempre há uma mulher de vestido vermelho) está apontando uma arma para o nosso pau. (Caramba, eu conheço esse sentimento.) Na edição do quinto aniversário em 2015 (2), a história mudou e uma sombra se move ameaçadoramente pela porta do escritório do nosso detetive. A porta se abre, dois vilões irrompem (3), e uma briga começa (4). Nossa mulher misteriosa com certeza sabe como dar um soco e antes que você possa dizer "me beije, mortal" um vilão está amarrado a uma cadeira e pronto para derramar o feijão (5).

Capítulo três

Vou começar a contar essa história no momento explosivo quando esses dois vilões abrirem a porta. Agora, se você leu o livro de Scott McCloud 'Understanding Comics' você saberá que o tamanho do painel afeta quanto tempo as pessoas passam olhando para uma área, então eu quero tornar a imagem de nossos bandidos o maior possível para maximizar seu impacto (1). O que os capuzes não sabem é que nossa mulher está esperando por eles. Eu uso o layout para adicionar tensão conectando suas linhas de visão, (2) ao mesmo tempo atraindo os olhos do leitor para onde o conteúdo começa.

Capítulo quatro

À medida que o primeiro vilão entra em cena, utilizo a margem esquerda da página, sem margens, para representar a porta aberta (1). Como a maior parte da ação ocorre à direita, crio uma grande zona espacial usando a maior parte da altura e largura da página (2).

Agora, quando os punhos voam em todas as direções, nosso layout precisa fazer o mesmo, então meu conteúdo vem de cima – onde o espaço em branco chama a atenção para o parágrafo em negrito (3) – e da esquerda com o enorme título (4) . Você pode estar se perguntando por que não mencionei essa imagem menor no canto superior direito, mas chegarei a isso em um minuto.

Capítulo Cinco

A luta acabou e nosso detetive está de volta ao controle, então nesta página final eu uso um layout mais estruturado para refletir a ordem que é retornada. Colunas sólidas de texto justificado (1) com bastante espaço em branco ao redor delas aumentam a sensação de calma. Ao mesmo tempo, a legenda alinhada à direita (2) parece nervosa e desconfortável, como o interrogatório à mão armada que está ocorrendo.

Deixando meu Dands sujo

É hora de uma confissão. Eu não vou te ensinar tudo o que você precisa saber sobre o desenvolvimento de layouts usando CSS Grid, pois existem muitas pessoas mais inteligentes que já fizeram isso antes:

• Grade por Exemplo de Rachel Andrew
• Aprenda CSS Grid com Wes Bos
• Um guia completo para grade por Chris House em truques de CSS

Em vez disso, mostrarei a inspiração para uma grade, como eu a traduzi em um layout (tela grande) usando colunas e linhas em CSS Grid e, em seguida, coloquei elementos nas zonas espaciais criadas usando a propriedade grid-template areas . Por fim, vou desconstruir e alterar o design para tamanhos de tela menores.

A batida perfeita

Minha inspiração para o layout que uso veio deste design de 1983 de Neville Brody para a revista The Face . Fiquei atraído pela forma como Brody criou habilmente os eixos horizontal e vertical e o grande espaço ocupado pela imagem principal.

Fiz o mesmo aplicando as seguintes propriedades CSS Grid ao elemento <body> sem margem da minha página, onde as colunas com uma unidade de fração de largura repetem cinco vezes com um intervalo de 2vw entre elas:

 body { margin: 0; padding : 0; display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); } 

No CSS Grid, definimos um módulo de grade dando-lhe um nome e, em seguida, colocamos um elemento em um único módulo ou em vários módulos adjacentes - conhecidos como zonas espaciais - com a propriedade grid-template-areas . Parece complicado né? Não, na verdade não. É uma das maneiras mais fáceis e óbvias de usar CSS Grid, então vamos ao trabalho.

Primeiras coisas primeiro. Tenho cinco elementos para posicionar, e eles são meu título "Kiss Me, Deadly", a maior imagem do 'banner', conteúdo principal, parágrafo ao lado e duas imagens, fig-1 e fig-2. Meu HTML está assim:

 <body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img class="fig-2"> </body>

Eu escrevi essa marcação na ordem que faz mais sentido, assim como faria ao construir uma narrativa. Parece um sonho em telas pequenas e mesmo sem estilos. Dou a cada elemento um valor de área de grade que em um momento usarei para colocá-lo em minha grade:

 [role="banner"] { grid-area: banner; } .title { grid-area: title; } main { grid-area: main; } aside { grid-area: aside; } .fig-1 { grid-area: fig-1; } .fig-2 { grid-area: fig-2; }

Seus valores de área de grade não precisam necessariamente refletir seus tipos de elemento. Na verdade, você pode usar qualquer valor, até mesmo letras simples como a, b, c ou d.

De volta à grade, adiciono três linhas às colunas que criei anteriormente. A altura de cada linha é definida automaticamente pela altura do conteúdo dentro dela:

 body { grid-template-rows: repeat(3, auto); }

Aqui é onde a mágica acontece. Eu literalmente desenho a grade em CSS usando a propriedade grid-template-areas, onde cada ponto (.) representa um módulo vazio:

 body { grid-template-areas: ". . . . ." ". . . . ." ". . . . ."; }

Agora é hora de posicionar os elementos nessa grade usando os valores da área da grade que criei anteriormente. Eu coloco o valor de cada elemento em um módulo na grade e se eu repetir esse valor em vários módulos adjacentes - seja em colunas ou linhas, esse elemento se expandirá entre eles para criar uma zona espacial. Deixar um ponto (.) criará um espaço vazio:

 body { grid-template-areas: ". aside . fig-2 fig-2" "title title banner banner banner" "fig-2 main banner banner banner"; }

Mais um pequeno detalhe antes de terminar o layout CSS. Eu quero que o conteúdo do elemento side fique na parte inferior - perto do título e deixando um amplo espaço em branco acima dele para chamar a atenção de alguém - então eu uso uma propriedade align-self que pode ser familiar ao aprender Flexbox, mas com um novo valor de 'fim'.

 aside { align-self: end; } 

Tudo o que resta é adicionar alguns outros estilos para dar vida ao design, incluindo um esquema de cores inverso impressionante e um sotaque vermelho brilhante que liga a palavra "Deadly" no título à cor do vestido da nossa mulher:

 <h1 class="title">Kiss Me, <em>Deadly</em></h1> .title em { font-style: normal; color : #fe3d6b; }

Subindo na fumaça

Agora, eu sei que você está se perguntando sobre aquela imagem de luta menor, e eu preciso admitir uma coisa. Natalie Smith fez apenas uma ilustração de punhos acabados voando para minhas capas de Hardboiled Shot , mas seus esboços eram bons demais para serem desperdiçados. Usei CSS Grid para posicionar uma versão invertida de um esboço a lápis acima da arma e girei-o com uma transformação CSS para formar uma nuvem de fumaça.

Quebrando isso

Neste artigo, mostrei como criar um layout para telas grandes, mas, na realidade, começo com um pequeno e depois aprimoro, usando pontos de interrupção para adicionar ou alterar estilos. Com CSS Grid, adaptar um layout a vários tamanhos de tela é tão fácil quanto posicionar elementos em diferentes áreas do modelo de grade. Existem duas maneiras de fazer isso, primeiro alterando a própria grade:

 body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 48em) { body { grid-template-columns: repeat(5, 1fr); } }

A segunda, posicionando os elementos em diferentes áreas do modelo de grade na mesma grade:

 body { grid-template-areas: "fig-1 aside aside aside aside" "fig-1 title title title title" "banner banner banner banner banner" ".... main main main main"; } @media screen and (min-width : 64em) { body { grid-template-areas: ".... aside .... fig-2 fig-2" "title title banner banner banner" "fig-1 main banner banner banner"; } } 

Usando CSS Grid Builder

As áreas de modelo de grade tornam o desenvolvimento de layouts dirigidos à arte tão fácil que até um pé chato como eu pode fazê-lo, mas se você é do tipo que gosta de ferramentas para fazer o trabalho sujo, CSS Grid Builder da CoffeeCup Software pode ser a coisa certa para tu. Você pode ter usado editores WYSIWYG antes, então você pode estar se lembrando de quão ruim era o código que eles cuspiram. Deixe-me parar você aí. CSS Grid Builder produz CSS limpo e marcação acessível. Talvez não tão limpo quanto você escreve, mas muito perto, e a pequena equipe que o desenvolveu planeja torná-lo ainda melhor. Meu HTML manuscrito se parece com isso:

 <picture role="banner"> <source media="(min-width: 64em)"> <img src="banner-small.png" alt="Kiss Me, Deadly"> </picture>

O elemento CSS Grid Builder <picture> vem envolto em uma divisão extra, com alguns outros elementos adicionados para uma boa medida:

 <div class="responsive-picture banner" role="banner"> <picture> <!--[if IE 9]><video><![endif]--> <source media="(min-width: 64em)"> <!--[if IE 9]></video><![endif]--> <img alt="Kiss Me, Deadly" src="banner-small.png"> </picture> </div>

Como eu disse, perto o suficiente, e se você não acredita em mim, baixe um conjunto de arquivos exportados do meu exemplo Hardboiled . Talvez isso te convença.

As ferramentas de desenvolvedor dos navegadores estão melhorando na inspeção de grades, mas o CSS Grid Builder ajuda você a construí-las. Obviamente. Em sua essência, o CSS Grid Builder é um navegador baseado em Chromium envolto em uma interface de usuário e é executado no macOS e no Windows. Isso significa que se o navegador pode renderizá-lo, as ferramentas de interface do usuário podem escrevê-lo, com uma ou duas exceções notáveis, incluindo CSS Shapes.

Na verdade, o CSS Grid Builder cria mais do que grades, e você pode usá-lo para criar estilos para planos de fundo — incluindo gradientes , o que é muito útil — bordas e tipografia . Ele até lida com layouts Flexbox e multi-colunas , mas você está aqui porque quer aprender sobre CSS Grid.

Olhando ao redor da interface

A interface no CSS Grid Builder é praticamente como você esperaria, com uma ampla área para o design que você está fazendo à esquerda e controles à direita. Esses controles incluem elementos comuns; texto, imagens, botões interativos e controles de formulário e contêineres de layout. Se você precisar de um desses elementos, arraste e solte-o em sua área de trabalho.

Pressione para revelar a guia Estilos e você encontrará controles para nomear atributos de classe e ID, aplicando estilos em pontos de interrupção específicos e em estados específicos. Tudo muito útil, mas é a seção de layout - um tanto inconvenientemente escondida na parte inferior do painel - que é a mais interessante.

Nesta seção você pode projetar uma grade. Configurar colunas e linhas para formar um layout sem representação visual pode ser uma das partes mais difíceis de aprender como a 'grade' funciona. A capacidade do aplicativo de definir visualmente a estrutura da grade é um recurso útil, especialmente quando você é novo no CSS Grid. Esta é a seção que vou explicar.

Usando CSS Grid Builder, adicionei uma divisão de contêiner. Ao selecionar isso na área de trabalho, tenho acesso ao Editor de Grade. Ative isso e todas as ferramentas necessárias para construir visualmente uma grade estão lá:

• Adicionar colunas e linhas
• Alinhar e justificar conteúdo e itens dentro de cada módulo
• Dimensione colunas e linhas usando todos os tipos de unidade, incluindo fr e minmax
• Especificar lacunas
• Nomear áreas de modelo de grade
• Especificar pontos de interrupção

Quando estiver satisfeito com essas configurações, "OK" as alterações e elas serão aplicadas ao design na área de trabalho. Lá atrás, use controles deslizantes para visualizar os resultados em vários pontos de interrupção, e se você é uma daquelas pessoas que está preocupada com a diminuição da porcentagem de pessoas usando navegadores incapazes, CSS Grid Builder também oferece configurações onde você pode descobrir fallbacks. Em seguida, basta copiar e colar estilos CSS em outro lugar em seu projeto ou exportar todo o kit e caboodle.

Atualmente, o CSS Grid Builder é gratuito enquanto o CoffeeCup o desenvolve e, se você gosta do que eles estão fazendo, pode investir alguns dólares para ajudar a financiar seu desenvolvimento.

Limpando

Estou achando difícil conter minha empolgação com CSS Grid. Sim, eu sei que deveria sair mais, mas eu realmente acho que isso nos oferece a melhor chance de aprender lições de outras mídias para tornar os sites que criamos melhores na comunicação do que pretendemos transmitir ao nosso público. Quer façamos sites para empresas que desejam vender mais, instituições de caridade que precisam arrecadar mais dinheiro por meio de doações para boas causas ou agências de notícias que desejam contar histórias de maneira mais eficaz, CSS Grid mais conteúdo atencioso e direcionado à arte torna tudo isso possível.

Agora isso é Hardboiled .

Espero que tenha gostado deste artigo, agora veja os arquivos do projeto no CodePen ou baixe os arquivos de exemplo.

'Direção de Arte para a Web' de Andy Clarke, a primeira 'fotografia' de Hardboiled Web Design. Shots é uma série de livros curtos sobre 'Direção de arte para a web', 'Designing with a Browser' e 'Venda de ideias criativas' a serem publicados ao longo de 2018.