Netlus

Estou tendo muito contato com designers de meios impressos interessados (alguns até “forçados”) em aprender design para a web. Mas a sensação inicial de se tratar de uma transição simples e até natural vai abaixo logo no primeiro leiaute. A internet, assim como o papel, tem características que devem ser observadas, e é necessário respeitá-las para produzir um material de acordo com o meio.

Por isso, escreverei uma série de artigos para auxiliá-lo nesse caminho sem volta, passando por questões como elementos de interface, área de trabalho, tipografia, usabilidade, acessibilidade e otras cositas más. Se você já for webdesigner, pode ajudar com sua experiência nos comentários.

Área de Trabalho

Resolvi começar por aqui, pois a primeira pergunta feita por um Gráfico (vou chamar de Gráfico os “designers de impressos que estão se aventurando pelo design para web”, é mais curto) sempre é: qual formato utilizo? E a resposta é mais complexa que dizer 9×3m ou meia-página vertical porque quem define isso é o designer e não o meio. Quer dizer que eu posso fazer no formato que eu quiser? Sim e não. Não existem limites físicos no sentido de que se pode criar uma página com rolos e rolos de barra de rolagem, mas é necessário entender as condições dos usuários.

No impresso você tem quase a certeza de que todo mundo irá ver aquele pedaço de papel da mesma forma que você (descontando possíveis problemas de visão). Na internet, tenta-se compensar variáveis como resolução de tela, tamanho da janela do navegador, cores da placa de vídeo e diferenças entre monitor LCD e CRT. Falarei de cores e monitores em outro artigo.

A tinta transborda o papel

Na internet, seu leiaute não tem limites bem definidos, tendo áreas fluidas nas laterais e na base. Comparando com algo impresso seria o busdoor, cuja grade inclui uma “área de segurança” que compensa as diferenças de cada modelo. Você pode até criar algo de tamanho fixo, mas a janela do navegador não irá se adaptar (até poderia, mas hoje em dia isso é no mínimo muito chato).

Para compensar isso, algumas soluções são possíveis como:

• cor chapada no background usando a mesma paleta do site
  Não use sempre preto, internet não é CD-ROM;
• imagem que se repete verticalmente
  A sombra nas laterais é uma imagem de um pixel de altura repetida na vertical;
• imagem que se repete horizontalmente
  A imagem no topo acompanha a largura da janela;
• imagem que se repete lado-a-lado
  A textura ao fundo é repetida em ambos os eixos, efeito conhecido como pattern;
• imagem grande que mostre mais detalhes dependendo da resolução

Também é possível deformar o site para se encaixar de acordo com o tamanho da janela, criando, dessa forma, leiautes líquidos (largura sempre em 100%, independente do tamanho da janela) ou elásticos (possuem uma largura mínima e outra máxima). Sugiro que teste esses links em resoluções diferentes e veja como eles se comportam. Ah! Mesmo que o trabalho seja em Flash, também é possível que ele seja líquido.

Informação à primeira vista

Entendendo como a “periferia” do leiaute é exibida aos poucos, é preciso se concentrar no que o usuário vai ver primeiro. A “área mínima”, aquilo que surge na tela sem utilizar barras de rolagem, varia de acordo com a quantidade de barras instaladas no navegador (barra do Google, Yahoo, anti-vírus…), altura da barra de tarefas e deformidade da janela. Pelo menos uma coisa é certa: a grande maioria das pessoas navega com a janela maximizada ou próximo disso.

Thomas Baekdal fez uma pesquisa sobre isso e pôde concluir a porcentagem desses limites. Segundo Thomas, para abranger as condições de cerca de 95% dos visitantes, a área mínima deve ser de 776×424px.

Para simular essas condições no seu programa gráfico, crie um documento com uma área de trabalho grande e delimite a área mínima utilizando linhas-guia. Dessa forma você sempre lembrará que tem mais espaço a preencher além do tamanho padrão. Lembrando que você pode criar um leiaute que se encaixe perfeitamente na área mínima, mas mesmo assim terá que pensar em algo para o background.

Por enquanto é só…

Bom, espero ter ajuda de alguma forma. Os comentários estão aí para dúvidas e colaborações.

No próximo artigo: cores.

Este foi publicado em Thursday, July 12th, 2007 as 12:01 na(s) categoria(s) Design.