CSS Grid: Sim, nós podemos ser criativos em layouts web
Gostaria de mostrar um pouco das possibilidades que o css grid nos trouxe em termos de experiência, direção de arte e criação de interfaces nos dias de hoje.
Meu background já entrega que flutuei por diferentes áreas e eu coloquei propositalmente minha formacão para que voces ja sintam o rumo que eu quero levar este artigo.
Como fazíamos até uns dias atrás?
Hoje em dia fazemos piadas ou brincadeiras, mas já foi coisa séria criar layouts utilizando tabelas por exemplo.
Apesar desse passado obscuro eu quero levar um pouco mais adiante o nosso marco zero:
Do 960 GS ao Bootstrap
A primeira proposta organizada que eu adotei foi o 960gs, tanto em projetos de criação de interfaces do usuário como designer, quanto ao aplicar em projetos front-end. A evolução mais tradicional e popularizada desse projeto foi o Bootstrap.
O que resolviam
Dar nome aos bois não é exatamente o que nos avançará na discussão. Vamos focar no que eles resolviam: Layouts de colunas.
Não tínhamos solucões nativas para resolver este problema, o que nos levava a soluções manuais inconsistentes, principalmente para calcular gaps entre as linhas das colunas. Então estes frameworks nos proviam soluções aceitáveis para estes resultados.
O que isso resultou
Apesar do problema estar resolvido: 12 colunas, responsividades, media queries etc… em termos de design gráfico ficamos presos a esta forma das 12 colunas (ou algo do tipo).
A criatividade em interfaces de sites foi esmagadas pelos jumbotrons de 12 colunas ou ultra-wides, galerias de fotos de quatro imagens que cada uma ocupava três colunas do grid blá bla blá.
Será que não temos mais espaço para o design gráfico em meios digitais?
Não tínhamos. O Css grid veio para nos proporcionar uma solução nativa para organizar o posicionamento dos itens em nossas telas. E nós podemos combinar duas coisas para fazer isso, que na minha opinião norteiam o design gráfico: Engenharia e Criatividade.
Vamos abstrair um pouco e definir um grid em termos de design gráfico:
Muller-Brockmann (um dos pais do conceito de grid, ou grelha como traduzido para português) declara “o uso do sistema de grelha implica a intenção de sistematizar, de buscar a clareza, a intenção de penetrar ao essencial, de concentrar, a intenção de cultivar objetividade ao invés de subjetividade, a intenção de racionalizar os processos criativos e técnicos de produção, a intenção de integrar elementos de cor, forma e material, a intenção de alcançar domínio arquitetural sobre a superfície e o espaço […]”
Ou de maneira sintética: Ordenar superfícies e espaços dentro do quadro do grid significa dispor textos, fotografias e diagramas segundo critérios objetivos e funcionais.
Dá pra dizer que o conceito de layout responsivo depende em sua raiz de um grid bem pensado. Veja bem: bem pensado, não é impostamente estabelecido (bootstrap, 960gs etc…).
Muller-Brockmann foi um designer suíço talentosíssimo, com muitos pôsteres publicados. Utilizava o grid de forma criativa. Hoje em dia, podemos comparar diversas páginas web com pôsteres que podem apresentar uma camada adicional de interatividade e flexibilidade que seus primos impressos. O CSS grid veio nos proporcionar através de combinação de técnicas que sejamos criativos em nossas intefaces.
Breaking changes do CSS Grid.
Unidades de medida: Não precisamos mais de %, podemos utilizar frações calculadas pelo próprio grid com fr, ems e rems (preferencialmente) para referências de tamanho proporcionais às telas que estamos trabalhando.
Breakpoints: Não precisamos mais utilizar os breakpoints da maneira tradicional, funções do grid como auto fill, auto fit e minmax nos trazem flexibilidade para resolver questões de responsividade e utilizar media queries para situações específicas e personalizadas.
Colunas independentes: Não estamos mais presos a 12 colunas fixas ou algo do tipo, abrimos as portas para uma colaboração ainda mais ativa com direção de arte, voz de marca e experiência do usuário.
A designer Jen Simmons, no exemplo acima, mostra como é fácil fazer o que outrora foi complicadíssimo.
Possibilidades criativas!
As portas da criatividade em termos de composição de layouts foram abertas pelo CSS Grid que nos encoraja a criar layouts contextuais e experiências adaptadas de acordo com a tela que está mostrando nossas interfaces.
Tecnicamente o meu jeito preferido de criar experiências adaptáveis, e não ter tantas desavenças com variações e propostas criativas da equipe de design e marketing, é através das grid areas.
Onde queremos chegar
Temos em nossas mãos a possibilidade de pensar, junto a designers de experiência do usuário e designers de interface, novas aproximações de construção de layouts que possam quebrar o paradigma das 12 colunas fixas e oferecer interações mais ricas e contextualizadas, aproximando o design gráfico da experiência do usuário e sua materialização através do front-end!
