Novidades

Evelyn Grumach participa de matéria da revista Webdesign

11.06.2008 | A matéria de capa da edição 52 da Revista Webdesign (abril de 2008), sobre grids, teve participação de vários designers e professores de design, entre eles Evelyn Grumach. Leia a seguir a matéria na íntegra.




Grids
saiba como e quando utilizá-las na criação de sites


Já dizia Chico Science, precursor do movimento mangue beat, que “modernizar o passado é uma evolução musical”. Inspirados pelos versos de um dos ícones da música contemporânea brasileira, podemos dizer que o resgate e a compreensão de fatos históricos são etapa fundamental para o profissional garantir uma sólida base argumentativa em sua trajetória.
Quando falamos do design, então, esta característica torna-se um diferencial, principalmente pela diversidade dos meios disponíveis para a sua produção. Um bom exemplo envolve a internet, que trouxe novos paradigmas na utilização dos conceitos fundamentais deste campo do conhecimento. Dentre eles, podemos citar a aplicação de grids.
Para entendermos de que forma isso aconteceu, vamos conhecer um pouco de sua história. Segundo o designer Timothy Samara, no livro “Grid: construção e desconstrução”, o surgimento da grid no design gráfico ocidental estaria relacionado ao período da Revolução Industrial. “É muito importante, assim como aponta Samara em seu livro, entender que a utilização deste método tem uma forte e sólida história que lhe confere importância fundamental no desenvolvimento de projetos de design. Se seguirmos a história dos movimentos artísticos, desde aqueles que surgiram na Revolução Industrial em diante, perceberemos uma forte relação e influência mútua entre métodos de construção de significados e de comunicação, que se dá essencialmente na estrutura de composição dos elementos visuais. Desta forma, pode-se dizer que a grid é um destes aspectos identificados no Arts and Crafts, no Cubismo, no De Stijl, na Arte Construtivista e também nas linhas de pensamento da Bauhaus etc.”, explica José Ricardo Cereja, coordenador da Escola de Design Digital do Instituto Infnet.
“Falando do livro do Samara, é necessário lembrar que lá está muito claro, assim como nos enunciados dos anos 1960, de Josef Müller-Brockmann, que a idéia da modularização se aplica também a situações tridimensionais, não se restringindo ao plano. Por outro lado, o mundo digital viabilizou uma mídia, na qual a internet passou a ser o carro-chefe, que não se apóia nas convenções de representação com que estávamos acostumados. A mídia digital, potencialmente, rompe com a idéia de perspectiva como possibilidade de representação das coisas. As superposições e as transparências, associadas às possibilidades de luz, cor e transformação das imagens, inclusive do texto, criam um espaço diferente. Nesse sentido, a grid se oferece como um instrumento a mais para o gerenciamento desse espaço informacional, aliás, um formidável instrumento”, afirma João de Souza Leite, professor da Escola Superior de Desenho Industrial (ESDI) e da Pontifícia Universidade Católica do Rio de Janeiro (PUC-Rio).
Diante disso, o professor Cereja indica que o reflexo destas transformações reforça a importância da adoção de métodos em design. “Eles ajudam a organizar idéias, ações e intenções de projeto. Embora não seja garantia de sucesso, a aplicação de um método, precedido por um bom planejamento, auxilia a alcançar objetivos previstos. Com a grid não é diferente. Ela é um recurso muito útil e que está alinhada com os conceitos mais atuais de arquitetura de informação e usabilidade”.


Funções da grid

Entendido o contexto de seu desenvolvimento histórico, já podemos buscar as funções que as grids vão exercer na concepção de um projeto gráfico. “Qualquer espaço pode ser compreendido como um contínuo, cujo desenvolvimento interno pode ser infinito. A grid é uma forma de dividir o espaço para controlá-lo. Com o uso da grid, o espaço visual ganha características arquitetônicas: ritmo, proporções e modulações passam a dar suporte à sua ocupação. Talvez a sua principal função seja o de acomodar coisas muito diferentes sob a batuta desse ritmo geral. Imagens, textos e outros elementos passam a conversar unidos por essas ‘supercordas’ que, como na teoria física, subjazem a toda ordem universal. Daí fica fácil depreender quais são os elementos mais importantes de uma grid: a proporção e o módulo, ou seja, seu jeito de ser e a medida do menor elemento que ela pode acomodar”, diz André Stolarski, diretor de design da Tecnopop (www.tecnopop.com.br).
Nesta análise, Luiz Agner, professor de Desenho Industrial da UniverCidade, ressalta que todo trabalho de design pressupõe a solução de problemas visuais e organizativos. “As ilustrações, fotos, símbolos, massas de textos, chamadas, subtítulos, gráficos, links e botões devem ser reunidos para transmitir a informação e facilitar as tarefas do usuário. A grid é a maneira mais racional de juntar todos esses elementos. Sua função é introduzir uma ordem sistemática num layout e permitir que o designer diagrame com eficiência uma grande quantidade de informação. Também permite vários colaboradores num mesmo projeto”.
E quando trazemos esta realidade para a internet, Marcelo Gluz, gerente de criação de aplicativos da Globo.com, argumenta que o conceito de montar páginas com tabelas, linhas e colunas já introduz uma grid natural a qualquer projeto web. “Funcionalmente, a grid guia o olho do usuário em seus caminhos pela página. A quantidade de conteúdo disposto costuma ser exagerado e o grande desafio do designer é pautar o consumo dessas informações. Talvez a principal ferramenta para responder a este desafio seja a grid”.


Por que utilizá-las em projetos interativos?

Apesar de uma certa resistência por parte de alguns profissionais, os argumentos para a sua aplicação transparecem suas vantagens e a conseqüente possibilidade de oferecer um período de experiência agradável para o usuário de um determinado ambiente digital.
“Considerando que a grid é uma opção de construção de informação baseada na ordenação e na hierarquização das informações e dados, sua utilização na busca de conteúdos orienta as ações e as decisões a serem tomadas pelo usuário. Numa superfície repleta de informações e possíveis caminhos a serem trilhados, oferecer claramente uma ordem a ser percorrida otimiza e gratifica o usuário, pois o ajuda a obter mais eficientemente a informação desejada e procurada”, justifica Evelyn Grumach, sócia do eg.design (www.egdesign.com.br).
“A grid auxilia, de modo excepcional, a ordenação da informação. Inúmeros são os casos para a sua utilização, e não necessariamente por se tratar de estruturas complexas de informação. Ainda que seja utilizada somente como instrumento de projeto a ser abandonada posteriormente, pela versatilidade de seu conceito seu uso já se justifica”, complementa João.
Outra situação a ser avaliada, como bem lembra Sergio Boiteux, sócio da Plano B (www.plano-b.com.br), envolve a facilidade de se definir áreas funcionais dentro do espaço diagramado. “Seja na posição dos menus, da caixa de conteúdo principal ou da navegação secundária. Em grande parte dos casos, especialmente em páginas dinâmicas, essa previsibilidade é muito bem-vinda. A identificação direta dos elementos torna a navegação mais intuitiva”.


A constituição de uma grid

Se você continuou a leitura da reportagem até este ponto, provavelmente é porque está convencido da importância da aplicação desta metodologia na criação de interfaces digitais. Assim, vamos ajudá-lo na busca por conhecimento, trazendo algumas dicas na hora de conceber uma grid em um projeto.
Segundo Sergio, o primeiro passo é utilizá-la para atender ao tipo de informação que vai ser incorporada. “Antes de a estrutura gráfica ser definida, devemos entender o propósito do site e a natureza de seu conteúdo. Uma vez estabelecida também a estrutura de navegação e suas particularidades, teremos em mãos todos os elementos a serem considerados na diagramação. Partindo de uma grid bem planejada, fica mais simples adequar o conteúdo, seja ele composto por um texto corrido, listas, imagens, tabelas ou thumbnails”.
Em seguida, é preciso analisar três questões: o comportamento da interface, a qualidade dos limites desse espaço e os elementos utilizados. “O primeiro dá o tom básico da estrutura e sua proporção. O segundo determina se a grid vai funcionar de forma proporcional ou modular (se o espaço for fechado, proporcional; se for aberto, linear). O terceiro determina o tamanho dos módulos básicos. Na linguagem HTML, no entanto, é bom ter em mente que tudo isso pode ser destruído pelo aumento ou diminuição do tamanho das fontes de tela pelo usuário. Dessa forma, o planejamento visual de um site precisa acomodar múltiplas visualizações do mesmo raciocínio básico”, orienta André. “Ela deve preferencialmente trabalhar com uma abordagem líquida, permitindo flexibilidade para apresentação da informação em diversas resoluções e diferentes dispositivos de acesso. Deve ser orgânica na ordenação dos elementos e da informação. A largura e a altura das colunas podem variar, por exemplo, e o usuário poderá habilitar um corpo maior para o texto, para o seu maior conforto de leitura, causando um natural deslocamento do conteúdo”, complementa Luiz.
De certa forma, a concepção de uma grid em um projeto interativo vai apresentar similaridade com o processo de estruturação de um livro. “Com a capa e a quarta capa, obtemos o primeiro acesso e as primeiras informações. Somos apresentados, através do sumário, à estrutura de conteúdo; às partes do livro; aos subgrupos (capítulos); aos textos apresentados de forma hierarquizada por títulos, subtítulos, subsub e assim por diante. Encontramos nas margens das páginas, textos complementares, notas paralelas auxiliares ou portas de acesso a novas informações, permitindo acessos e leituras paralelas ao leitor”, relata Evelyn.
Para Marcelo, analisar uma interface com os olhos apertados, tentando desfocar a imagem, pode ser um exercício simples, mas muito útil para o andamento desta etapa. “Fica mais fácil separar os objetos da página. Em qualquer projeto, é possível separar quatro grupos de elementos: o identificador da página (logo ou título), o menu de navegação, o conteúdo em si e a meta-informação, ou conteúdo relacionado. Falando de outra maneira, temos: (1) em que espaço eu estou; (3) para que outros espaços eu posso ir; (2) detalhes desse espaço; (4) e o que mais eu posso explorar dentro do meu contexto atual. Cada um desses grupamentos deve conter elementos específicos, mas é importante que o usuário consiga separar os quatro grandes grupos para que seja possível decodificar seus subitens”.
Como exemplo prático, ele cita a leitura visual de matérias publicadas no site de notícias G1 (http://g1.globo.com). “A coluna lateral esquerda é onde ficam os elementos de navegação genéricos. A parte superior da página é dedicada a identificar onde estamos, com o logotipo do produto, a editoria a qual a matéria pertence e o título da matéria. A coluna central entrega o conteúdo em si, com todos os seus elementos (texto, fotos, vídeo etc.) e seu grid próprio. A coluna lateral direita e os links do fim da página listam as informações relacionadas com aquele conteúdo. A função dessa área é manter o usuário navegando a partir de seu interesse inicial”.
Outro ponto a ser considerado na concepção de grids está presente na sua diversidade de modelos. No livro “Grid: construção e desconstrução”, Samara aponta a existência de quatro tipos: retangular, de colunas, modular e hierárquico. Diante disso, seria possível apontar qual desses apresentaria a aplicação mais eficaz na web ou a solução passaria pelo uso combinado dessas opções?
“Como diriam os gurus da arquitetura da informação, cada site é um edifício único na paisagem arquitetônica da internet. Por isso, é muito difícil dizer qual desses diagramas funciona melhor. O que é possível dizer é que algumas linguagens e plataformas privilegiam alguns tipos, enquanto outras dão mais certo com outros. A linguagem HTML, por exemplo, é um típico exemplo de linguagem que privilegia fantasticamente a grid de colunas. A plataforma Flash, por outro lado, parece facilitar o desenvolvimento de projetos modulares e hierárquicos. No entanto, e muito mais do que no mundo impresso, tudo é possível e todas as combinações são desejáveis, desde que façam sentido”, argumenta André.


Violando as regras

Engana-se quem pensa que esta metodologia signifique o uso rígido de regras e uma suposta limitação ao trabalho criativo. Novamente, vamos recorrer ao livro de Samara para analisar tal pensamento. Segundo ele, “... o maior risco no uso de uma grid é o designer sucumbir à sua regularidade... Quem cria um layout sem graça não é a grid, é o designer”.
“Concordo com ele. Na web, com suas diversas camadas, há inúmeras oportunidades de o designer superar as regras clássicas da grid, desconstruindo-as a partir do uso de técnicas de programação como CSS, Actionscript e AJAX. Inclusive, pode-se colocar nas mãos do usuário a decisão final sobre a apresentação visual da informação na tela, permitindo-lhe a distribuição dinâmica dos blocos de conteúdo, através da grid ou fora dela. O único limite existente para este tipo de experimentação é o próprio usuário, pois a ‘violação’ das características tradicionais de uma grid só tem sentido na medida em que colocar maior controle sobre a apresentação do conteúdo nas mãos do usuário, facilitando as suas tarefas. Em resumo, o limite é a usabilidade e a encontrabilidade da própria informação”, destaca Luiz.
Além disso, como ressalta Evelyn, uma das conquistas da desconstrução formal, tal qual a ordenação, é que ela também é uma ferramenta de trabalho para o designer. “Considerando o fim da utopia e da idealização do universal, a grid destronada deste valor emblemático, transformando-se em um recurso de formatação, pode ser alterada em prol de um resultado mais apropriado, mais dinâmico e menos regular (se necessário). A desconstrução ou a violação de uma regra como resposta a uma necessidade, ou criando uma nova abordagem, demonstra a atenção do designer ao problema que está em evidência. O limite para estas intervenções seria, ao meu ver, o uso meramente estético, um pastiche mal feito de modismos não apropriados”.
Lembrando que o resultado destas variações dependerá da bagagem de conhecimento acumulada pelo profissional. “No fundo, lidar com a grid é valer-se de um instrumento de pensamento. Qualquer modelo oferecido para se pensar alguma coisa, seja no âmbito da tecnologia, seja no âmbito das ciências sociais, ou em qualquer outro campo do conhecimento, exige da nossa inteligência uma interpretação. Qual a origem desse modelo, em que se baseia esse modelo? Essa chamada rigidez da grid se deve a certo fundamentalismo que lhe foi atribuído - a grid tem duas ou tantas colunas e a essa estrutura devemos seguir sempre, ao longo de um projeto. Por que? O que impede o designer de lidar com uma grid composta, com sistemas modulares diferentes superpostos? O que lhe impede organizar um trabalho em torno da grid e, em certo momento, fugir dela? Pode, não pode? Quem decide? É justamente neste sentido que é fundamental que o designer tenha cultura visual, cultura em geral, referências tão imediatas no tempo quanto remotas. Sem essa capacidade própria de discernimento, nutrida pela experiência visual e cultural, não há solução. Melhor então seguir a regra, como garantia. Ser criativo ou ousado sem conhecer em profundidade os fundamentos do design gráfico - e isto não quer dizer a grid, exclusivamente, mas o que rege a linguagem visual e suas relações - não é, necessariamente, nem um nem outro, pode vir a ser puro voluntarismo, o que não é garantia nenhuma de qualidade”, alerta João.


Tecnologia em prol das grids

No artigo “Pensando fora do grid” (http://tinyurl. com/2g4h3d), a designer americana Molly Holzschlag analisa que “...os limites dos layouts baseados em tabelas nos mantiveram numa grid visual por tanto tempo” e que “...o modelo visual do CSS é muito mais conduzido para sair da grid e criar com elementos discretos e semânticos”.
Diante dessas afirmações, é preciso analisar de que maneira a tecnologia poderá auxiliar um designer numa aplicação de grids que resulte em projetos de extrema criatividade. Na opinião de Sergio, um bom caminho é explorar as novas tecnologias e realizar experimentações. “O CSS, junto com o Javascript e o Flash, nos oferece diversos recursos de interações, animações e soluções de enorme impacto visual. Com ele, podemos trabalhar o projeto gráfico paralelamente à programação, o que nos dá ainda mais autonomia para criar. O CSS, quando usado corretamente, permite criar uma estrutura rígida ou desarticular completamente os elementos, usando objetos sobrepostos, dinâmicos e de posicionamento relativo a outros objetos. Mas, independentemente da tecnologia utilizada, é o designer quem define a estética mais adequada para o projeto, e muitos projetos criativos surgem de algum tipo de restrição”.
Além disso, não podemos esquecer da efemeridade dos conceitos e das técnicas quando falamos do desenvolvimento de projetos digitais. “Tecnologia e interatividade são o que chamo de ‘conceitos elásticos’, não se pode enquadrá-los dentro de uma perspectiva temporal única, não se pode colocá-los dentro de um frame. Estes conceitos são tridimensionais, não tem apenas altura e largura; tem profundidade infinita, vão e vem e invadem nossos sentidos todo o tempo. Neste sentido, o designer pode realizar tanto com a última versão das suítes de softwares para webdesign quanto com as linguagens de programação mais cartesianas e restritas. Não é a tecnologia que determina o trabalho do designer, mas a aplicação de métodos inteligentes de produção e sua adequação às necessidades de projeto. Não resta dúvida que, em se tratando do design de sites, o uso de tecnologia é inerente ao contexto. Isto deve ser visto como um parque de diversões para a criatividade destes profissionais. Se souberem ainda trazer novos conceitos, valores, advindos de outras áreas, estou certo que os resultados serão melhores”, finaliza Cereja.


Dicas de leitura
“Design Visual 50 Anos”
Autor: Alexandre Wollner

“Grid: construção e desconstrução”
Autor: Timothy Samara

“Grid systems in Graphic Design”
Autor: Josef-Müller Brockmann

“Grid Systems: principles of organizing type”
Autora: Kimberly Elam

“Maeda at Media”
Autor: John Maeda

“Pensar com tipos”
Autora: Ellen Lupton

“The Grid: a modular system for the design and production of newpapers, magazines, and books”
Autor: Allen Hurlburt

“A tradição do moderno: uma reaproximação com valores fundamentais do design gráfico a partir de Jan Tschichold e Emil Ruder”
Autora: Suzana Valladares

Fontes: André Stolarski, Evelyn Grumach, João Leite, José Cereja, Luiz Agner e Sergio Boiteux

« Voltar