Revista Photoshop Creative para iPad. Download gratis

Design para web sites

Postado por Redação Photoshop em 16/05/2010 às 12h 00min

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.



Por Mila Juns

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.






Página 1 de 5


ARTIGOS SEMELHANTES
Photoshop Creative 68

Nesta Edição Photoshop Creative Edição 68 Programas 3D x photoshop O que cada software tem de melhor na visão dos experts em cg Website retrô ...

em Revista 15/09/2014 13h14

Photoshop Creative 67
em Revista 18/08/2014 19h30
Photoshop Creative 66

Nesta Edição Photoshop Creative Edição 66 Tire muito mais dos brushes Um supertime de especialista e seus incríveis segredos para aplicação desta...

em Revista 15/07/2014 14h18




Deixe seu comentário
QUER UM AVATAR? Faça seu login ou cadastre-se

O comentário está desabilitado, para enviar um comentário você deve fazer login!

Últimas postagens Mais lidas