Pensando Fora do Grid

por Molly E. Holzschlag

"Aerials, in the sky, when you lose small mind you free your life" ("Antenas, no céu, quando você perde a mente pequena você liberta sua vida.") - System of a Down

Voando para minha cidade natal de Tucson, no Arizona, tarde de uma noite de Novembro, fiquei impressionada como o grid do layout de uma cidade é rígido. Tucson é uma das cidades americanas planejadas, e do céu, é fácil perceber que os designers de Tucson tiveram sucesso em criar uma cidade onde tudo é desenhado de acordo com um plano preciso (figura 1).

Figura 1

Eu estava voltando de Londres, que em contraste, está longe de um grid rígido. Londres tem espirais, círculos, tangentes, e é bem mais espontânea em seu design (figura 2).

Figura 2

Por estar pensando neste artigo há algum tempo, a vista aérea destas cidades me mostrou uma boa metáfora para o grid de design na web. Com as tecnologias e técnicas de hoje, estamos livres para criar grids – ou podemos escolher por nos livrarmos completamente deles. Que esta simples escolha pode impulsionar um web designer é inquestionável: o grande desafio está na maneira em que nos forçamos a "perder a mente pequena" e pensar fora do grid.

Sense and the city

Se extendermos a metáfora do planejamento urbano para web design, existem paralelos muito interessantes. Design baseado em grids pode ser extremamente útil em sites que são previsíveis, de navegação fácil e de apelo visual. Grids são realmente bons para ajudar os designers a planejar aonde as coisas vão, e fácil de usar para os visitantes (figura 3).

Figure 3: Ryan Brill

Do lado positivo, Tucson certamente é fácil de andar; você não precisaria mais do que um mínimo de senso de direção ou um mapa de ruas. Os habitantes dão as direções para suas casas dando dicas baseadas no grid: "Estou na esquina sudoeste da Avenida Campbell com a Estrada Prince." Estradas e transportes públicos geralmente vão de norte a sul, ou de leste a oeste, tornando fácil a navegação na cidade.

Por outro lado, os designers de Tucson a planejaram somente para um certo crescimento, e isto causou inúmeros problemas em manter a facilidade de navegação e usabilidade da cidade quando ela cresceu além dos limites planejados. Além disso, as restrições do grid de Tucson não estimulam o crescimento de outros bairros e comunidades. Muitos habitantes de Tucson vão concordar que, como resultado, a cidade não tem um centro movimentado – ou várias comunidades – e quando estes focos isolados existem, eles são fáceis de chegar, mas as pessoas não se empolgam em sair para procurá-los.

Londres, ao contrário de Tucson, é um labirinto. Eu conheço londrinos que carregam um guia da cidade para ajudar na navegação! O sistema de transporte da cidade é tão difícil que os pretendentes a taxistas devem passar num teste demonstrando que eles possuem "O Conhecimento" para poderem dirigir os tradicionais carros pretos. O crescimento orgânico da cidade não a fez exatamente o melhor lugar para se navegar. Mas em Londres, comunidades maravilhosas e áreas interessantes surgiram e vizinhanças com ares distintos existem em todo lugar – e podemos certamente dizer que não existem apenas uma ou duas áreas de interesse cultural e da comunidade, mas várias. Enquanto a navegação talvez seja difícil, existem mais alternativas, e consequentemente as pessoas são mais motivadas a se envolverem nas ofertas da cidade.

Ao examinar designs desconstruídos e espontâneos, a metáfora persiste. Como as pessoas deveriam navegar em espirais e alamedas com facilidade? Por outro lado, pode-se produzir material visual ao se quebrar o rígido sistema que o ambiente de design e desenvolvimento da web tem, até agora, mantido. Na figura 4, você pode ver facilmente que quebrar os rígidos grids de layout desafia os designers a manterem a facilidade de uso enquanto criam layouts diferentes do que estamos tão acostumados a ver.

Figura 4: AIGA Los Angeles

Codificando o grid fantástico

É impressionante para mim, como uma pessoa que tende a ser um pouco mais centrada-em-código do que capaz-de-criar, ver como nossos designs têm sido presos ao código. Eu acho que foram os limites dos layouts baseados em tabelas que nos mantiveram num grid visual por tanto tempo (figura 5). Acrescente que só agora existe um emergente entendimento de layouts em CSS e fica fácil entender as razões.

Figura 5: k10k

Layout em tabelas são ótimos para design em grid. O próprio código reproduz um grid específico, e a tendência é que nós simplesmente preenchamos as caixas com imagens, textos, e elementos de interface que constroem nosso design (figura 6). Se realmente criarmos um design desconstruído ou espontâneo com uma complexidade visual, temos que usar muitas imagens dentro do documento para alcançar os resultados, tornando documentos mais pesados e o código mais complicado.

Figure 6: Weightshift

Existem algumas vantagens para grids baseados em tabelas, mas, como na metáfora do planejamento urbano, um ponto forte pode virar uma fraqueza. Grids baseados em tabelas nos permitem garantir que todas as células dentro dele trabalham em conjunto. Quer que todas as colunas fiquem do mesmo tamanho? Nós nem pensamos como fazer – é o comportamento natural das tabelas. Quer colocar mais espaço entre as células? De novo, é automático. É claro, e se você não quiser esse resultado "um-serve-para-todos"? A resposta dói: você não consegue.

O CSS desafia tudo isso, e é por isso que penso, junto com muitos outros, que ainda não aprendemos a desenhar para a web. O que estamos apenas começando a entender – particularmente aqueles que vêm para os layouts em CSS depois de anos trabalhando com tabelas – é que o modelo visual do CSS é muito mais conduzido para sair do grid e criar com elementos discretos e semânticos. Não é perfeito, já que em troca dos ganhos tornados possíveis com o CSS, nós perdemos outros. Alinhar colunas é definitivamente um problema no CSS, e o espaçamento de células também.

O modelo visual do CSS é todo em linhas e caixas. Essa é a idéia dos grids, certo? Bom, com certeza, se quisermos assim. Aí é que está a diferença fundamental. O CSS nos permite pegar uma caixa – qualquer uma – e fazer o que quisermos com ela, independente das outras caixas (figura 7).

Figure 7

Podemos usar uma propriedade de posicionamento ou "flutuar" (float) a caixa, e podemos adicionar imagens leves como fundo dos elementos. Ainda que estejamos trabalhando com caixas, podemos apresentar estas caixas em inúmeras formas visuais e técnicas eficientes. Isto inclui grids, mas também permite a criação muito mais eficiente de layouts sem grid, como você pode ver no Blood Lust de Dave Shea, um dos layouts que ele criou para o CSS Zen Garden (figura 8).

Figure 8: CSS Zen Garden: Blood Lust

A figura 9 mostra as caixas que criaram o design desconstruído do Blood Lust, de novo demonstrando como o CSS nos permite criar grids desconstruídos usando caixas que estão relacionadas, mas são independentes umas das outras.

Figura 9

Assim que entendermos o que podemos fazer com uma caixa, nossa habilidade em se livrar do grid que nos aprisionou por tanto tempo se torna muito mais clara. Considere este design (figura 10), que pode ser considerado altamente desconstruído, e até espontâneo:

Figura 10: Kutztown University: Communication Design Department

E as caixas posicionadas com o uso de CSS:

Figura 11

Além do código de tornar mais simples, o CSS é muito fácil para qualquer designer familiarizado com layout em CSS. E ainda, a apresentação na tela é incomum e rica, e mostra que um design sem grid pode ser concebido e útil também.

Para dentro da grande abertura

A beleza e o desafio de trabalhar com layouts modernos é que agora temos opções. Com CSS, temos maneiras de criar designs gerenciáveis, leves e visualmente ricos que podem ser grids se quisermos. Mas podemos também facilmente desconstruir o grid ou dispensá-lo completamente. Isto abre um mundo de oportunidades para o web designer contemporâneo. Mas o desafio remanescente é pensar nestas opções ao invés de voltar para os layouts em grid só porque eles são familiares.

Para aqueles que vêm de anos trabalhando com layouts baseados em tabelas, o desafio é especialmente difícil. Para muitos web designers veteranos, mudar a maneira de pensarmos como apresentar nosso conteúdo sem tabelas significa nos livrarmos de um sistema que usamos por tanto tempo. Para alguns, isto vem facilmente, mas para a vasta maioria de nós, é difícil fazer a troca. Parte da resposta está em nos educarmos sobre a maneira que o CSS e os modelos de navegadores funcionam, mas outra parte está em ter força de vontade de deixar as convenções para trás.

Existe uma nova criança no pedaço, e seu nome é "Eu nunca criei um site com uma tabela na minha carreira." Para ela, nossos velhos métodos parecem estranhos e restritos, e é nesta geração que muito provavelmente veremos mais divergências sobre as convenções de design que emergiram na última década.

A web está ficando madura, nossas relações com ela estão mudando, nossas oportunidades de inovação e criatividade estão mais aparentes do que nunca. Não estamos limitados a uma cidade planejada; podemos criar designs únicos e fazê-los funcionar bem. Como uma força conjunta, os poderosos veteranos e a juventude espontânea de hoje inspiram uma noção provocante de que o jeito que a web se parece hoje não é nada do que ela vai parecer amanhã. E para a maior parte, tenho certeza que irá concordar que isto é muito bom.

Leitura relacionada

A autora gostaria de dar crédito aos artigos de sistema de grids de Mark Boulton e ao livro Making and Breaking the Grid , de Timothy Samara, Rockport Publishers, 2002.

-----

Este artigo foi publicado originalmente na edição 209 da A List Apart e pode ser acessado aqui.

Traduzido por Luciano Rodrigues.