Design para web sites

Fazer design para a Web não é a mesma coisa que fazer design para mídia impressa. O meio define as características do trabalho.

Fazer layouts para websites e fazer layouts para trabalhos impressos (revistas, catálogos, folhetos, posters etc.) fundamentam- se na mesma sintaxe visual: forma, cor, tom, composição, equilíbrio, harmonia, tensão etc. Mas as diferenças entre as tecnologias usadas produzem diferenças profundas na maneira de trabalhar em cada um dos dois meios.

O design gráfico para impressos – também conhecido como design offline – está limitado ao tamanho do papel em que será impresso, ao número de cores que serão utilizadas e a tiragem (quantidade de cópias impressas). Outros fatores importantes são o armazenamento e o transporte. Tudo isso tem um custo definido e deve ser balanceado dentro do orçamento do trabalho.

O design para a Web está visualmente limitado pela resolução do monitor do cliente e quantidade de cores que ele pode exibir. Dependendo da complexidade do site, entram em consideração também questões de infra-estrutura, como a velocidade da conexão e a do computador do cliente.

O armazenamento na Web é mais simples por ser virtual e não físico, e admite revisões constantes das páginas, enquanto o papel precisa ser completamente reimpresso a cada revisão. A página Web pode ser acessada por um número indefinido de pessoas a partir de qualquer lugar, enquanto o impresso tem uma quantidade finita de cópias e o transporte possui um custo proporcional à distância.

Cada cópia do seu folheto impresso é idêntica à outra, mas cada computador usado para acessar o seu site tem características diferentes dos outros, o que afeta a visualização. Essa variação deve ser levada em conta no design. Ao projetar o layout, se você tentar escapar às limitações do meio, estará fazendo uma escolha entre atender à maior quantidade possível de pessoas que visitar o seu site, ou apenas ao perfil de pessoa que você determinou como sendo o seu público alvo.

RESOLUÇÃO

A principal característica limitadora é a quantidade de pixels que podem ser exibidos pelo monitor. Isso é chamado de resolução. Há monitores com maior e com menor resolução, e você não tem como saber de antemão qual é a resolução do seu cliente. Nos dias atuais, usamos como referência a medida de 1024×768 pixels, pois ela é o padrão para a maioria dos computadores atualmente conectados (pouco mais de metade do total). Nessa tela cabe uma fotografia de aproximadamente um megapixel. A segunda resolução mais usada é um pouco menor, de 800×600 pixels, presente em aproximadamente 20% dos computadores. Designers gráficos que criam peças para impressão estão habituados a resoluções mais elevadas em monitores maiores. Existem pessoas, como eu, que trabalham com uma resolução de 1680×1050, bem como pessoas como minha mãe, que por dificuldade visual comum à idade, utiliza 800×600. “Os textos ficam maiores”, ela justifica.

Densidade

Outra diferença é com relação à nitidez das imagens. Quando você trabalha um layout para ser impresso em gráfica offset, existe uma máxima que diz: “quanto maior o número de dpi, melhor”, embora 300 dpi já seja suficiente para a maioria dos trabalhos.(DPI, literalmente “dots per inch” ou pontos por polegada, é um valor usado como medida de densidade – no caso, a quantidade de pixels representados em cada polegada do material impresso.)

No caso de websites, a máxima da gráfica não funciona, porque os pixels do monitor têm um tamanho maior que os impressos, e esse tamanho é determinado pela resolução da tela. Por exemplo, imagine medir com uma régua a quantidade de pixels que cabem numa polegada em um monitor de 17 polegadas na resolução de 1152×864 pixels. Obterá algo em torno de 92 pixels por polegada. Mas um monitor do mesmo tamanho a 800×600 pixels dará em torno de 64 pixels por polegada. A densidade de pixels menor que a impressa significa que seus materiais serão um pouco menos nítidos na tela. E em monitores de resoluções menores, as imagens parecerão maiores que nos de resoluções maiores.

Por padrão, os softwares usados pelo webdesigner assumem que a imagem na tela tem sempre 72 pixels por polegada. Acabamos de ver que na prática não é bem assim; a densidade real varia de um monitor para outro. O valor de 72 é apenas uma convenção. Se você colocar no seu site duas fotos idênticas de 200×150 pixels, sendo uma com 72 dpi e outra com 300 dpi, verá duas coisas exatamente iguais, já que cada pixel de cada imagem corresponde a exatamente um pixel exibido na tela. Assim, o que vale em imagens para a Web é somente a medida em pixels de largura e altura.

Peso dos arquivos

Você não precisa esperar para visualizar um impresso: é só pegar na mão e ler. Uma página de Web, porém, sempre exige algum tempo para se carregada pelo computador.

Páginas de Web “pesadas” – muito complexas, com grandes volumes de informação e imagens muito grandes – carregarão mais lentamente. Isso pode não ser um grande problema quando o seu público alvo dispõe de conexão rápida, mas todos os demais sofrem por isso e devem ser levados em conta.

Um arquivo de imagem fica mais pesado, isto é, maior em tamanho de bytes, conforme aumenta seu tamanho em pixels. Isso é óbvio. O que não é óbvio é que o peso da imagem aumenta exponencialmente com a dimensão. Assim, uma foto que ocupa a tela cheia fica muitíssimo mais pesada do que uma foto pequena no meio da página. Um site leve faz o uso inteligente de imagens menores.

O outro truque é saber fazer a compressão das imagens. Os formatos de arquivo de imagem usados na Web – GIF, JPG e PNG – têm esquemas de compressão capazes de reduzir muito o tamanho do arquivo final, à custa de uma parcela da qualidade da imagem. Quanto maior a compressão, menor a qualidade. Saber escolher o grau de compressão, balanceando um tamanho de arquivo aceitável com uma qualidade visual aceitável, é fator fundamental no peso da página.

RGB versus CMYK

Outra importante diferença entre o impresso e o monitor é o sistema de representação das cores. Na mídia impressa, o sistema básico é o CMYK – Cyan, Magenta, Yellow , blacK (azul-ciano, magenta, amarelo e preto). Essas quatro tintas são suficientes para reproduzir uma enorme gama contínua de cores naturais. (Utiliza-se tintas adicionais para obter as chamadas cores “especiais”, como as metálicas e fluorescentes comuns em capas de revistas e embalagens.)

Na tela do computador, e por extensão em toda a Web, usa-se o sistema RGB – Red, Green, Blue (vermelho, verde e azul). A partir da mistura dessas três cores fundamentais, o monitor forma todas as demais na tela. Num monitor moderno estão disponíveis cerca de 17 milhões de tons de cores individuais.

O correto para um layout de Web, no entanto, não é o uso indiscriminado de qualquer uma das 17 milhões de tonalidades possíveis, pois a representação das cores pelos monitores mundo afora pode variar, e você quer estar seguro de que todos verão o seu trabalho do jeito que ele foi criado. Por exemplo, um monitor mais antigo, com 10 anos de idade, exibirá somente 256 cores simultâneas. Para assegurar a visualização correta nesses monitores, foi criada uma escala padronizada de cores indexadas, que são as consideradas seguras para qualquer aplicação. Assim, aquele azul clarinho que você escolheu no layout não corre o risco de se tornar um cinza claro para outras pessoas. A paleta de cores indexadas possui 216 cores. As 40 cores excluídas da escala de 256 são as que dariam problemas ao visualizar um site. Se você não usar as cores indexadas, a cada 6 cores diferentes que você escolher haverá uma chance de uma delas dar problemas num monitor de 256 cores.

Monitores de 256 cores já são bastante raros atualmente, mas o uso de uma paleta de cores restrita facilita muito a escolha, pois é fácil se perder na paleta completa de milhões de cores.

Existem outras diferenças entre tela e impresso, mas, de forma resumida, essas são as que merecem mais destaque.

Modo Cores Indexadas: ao exportar uma imagem GIF, o Photoshop cria uma tabela de busca de cores (CLUT – Color Look Up Table), que armazena e indexa as cores da imagem. Se uma cor na imagem original não for exibida na tabela, o programa escolherá a cor mais próxima ou utilizará o efeito de pontilhamento (dither) para simular essa cor com as disponíveis. (Os formatos JPEG e PNG não têm essa limitação, empregando livremente toda a gama de cores possível em RGB.)

Criando um site

Quando falamos de design de sites, costumo ressaltar que o designer é um artista, mas isso não lhe dá o direito de “viajar na maionese” e fazer um layout que só ele conseguirá entender, deixando a navegação confusa, por exemplo. O designer trabalha para atender o cliente, para ajudá-lo a alcançar seus objetivos, sejam eles comunicação, vendas, informações etc.

A navegação de um site deve ser clara; o usuário precisa identificar, rapidamente, a empresa cuja página ele está visitando, localizar facilmente a informação que busca e ter uma forma clara de contato com a empresa ou com o dono do site.