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.





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.

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.


Desenhando o projeto

1 Apanhe uma folha de papel e escreva quantos itens você vai querer em seu menu. Se passar de cinco, aconselho que faça um menu na vertical, porque assim caberão mais itens. Isso também facilitará sua vida se, no futuro, você quiser aumentar esse número. Menus na horizontal com mais de cinco ou seis itens só lhe trarão dor de cabeça, caso o cliente mude de idéia e peça para aumentar a quantidade. Isso significa que você começará a espremer o texto ou terá de trabalhar com submenus. O planejamento inicial do layout é fundamental para evitar ter de recomeçar novamente do zero. Para facilitar, em nosso exemplo, trabalharei com um menu na vertical.

2 Decida onde entrará o nome ou o logo da empresa, onde ficará o conteúdo, as informações de contato (fixas e visíveis) e de que lado ficará o menu.

3 Para fazer um layout que se encaixe bem em monitores com resolução de 1024×768 pixels, é importante preocupar-se com a largura, visto que não queremos a famigerada barra de rolagem horizontal. Já a barra de rolagem vertical é bem aceita e ajuda muito quando precisamos colocar bastante texto em uma única página. A barra de rolagem vertical ocupa cerca de 30 pixels de largura. Então, teremos uma área de 994 pixels para brincar, conforme a figura abaixo:




Usando o Photoshop

Para os próximos passos, utilizaremos o Adobe Photoshop, que, apesar de ser um editor de imagens, é um software tão rico em recursos que nos permite até montar um layout.

1 No Photoshop vá ao menu File » New para criar um novo arquivo com todas aquelas definições que rascunhamos. Após criar esse novo arquivo, sugiro definir as cores principais que serão utilizadas – fazer uma paleta de cores do site. Uma boa dica é fazer uns quadrados para ter as cores exatas sempre à mão, conforme o exemplo da figura ao lado
Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

2 Em nosso layout, a caixa do menu contém um preenchimento a que chamamos de Pattern Overlay, que você poderá alterar indo à paleta Layers e clicando duas vezes na layer (camada) específica, conforme a figura abaixo. Fazendo isso, abrir-se-á uma janela chamada Layer Style; clique na opção Pattern Overlay e escolha o preenchimento que mais lhe agradar. Depois, clique com o botão direito do mouse novamente sobre a layer. Ao visualizar um submenu de opções, escolha Rasterize Layer.


Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

3 Para criar o efeito serrilhado na caixa de menu, utilizamos a ferramenta Lasso Tool e selecionamos uma área para apagarmos, conforme a figura ao lado. Basta escolhê-la e clicar em [delete].

Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

4 Clicando, novamente, duas vezes sobre a layer da caixa do menu, abrir-se-á a janela Layer Style. Clique na opção Drop Shadow realize ajustes conforme achar melhor para criar uma sombra e dar a impressão de que a caixa de menu está solta do restante do layout. Veja a figura abaixo.


Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

5 Para criar os itens do menu, repetimos o processo: criamos um retângulo, e escolhemos o preenchimento com uma textura de madeira. Note que o Photoshop não tem essa textura pronta, de maneira que devemos criar nossa textura personalizada a partir de uma imagem de madeira. Para criar sua nova textura, abra a imagem madeira- texture-1.png, disponível no CD, e, no menu superior de opções, vá a Layer » New Fill Layer » Pattern, e escolha o nome com que deseja salvar. Veja a figura ao lado.
Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

Dica: ao escolher a imagem que você utilizará como textura, selecione uma com ótima qualidade e que não deixe seus extremos em evidência. Desse modo, não ficará clara a repetição da imagem ao fazer o preenchimento.


6 Aplicamos os efeitos de Drop Shadow para ressaltar cada uma das teclas. Usamos tambémo efeito Bevel and Emboss para criar um volume 3D, conforme a figura.

7 Depois que um item do menu estiver pronto, você só precisa duplicar a layer para criar vários itens iguais. Para isso, basta clicar com o botão direito do mouse sobre a layer e, no menu de opções que se abrirá, escolher a opção Duplicate Layer. Agora, com vários itens de menu criados, distribuímos de modo uniforme sobre a caixa do menu e criamos uma layer com texto para cada tecla. Sabendoque as teclas serão utilizadas em formato de imagem, decidimos usar uma fonte diferenciada para enriquecer o visual de nosso menu.

Textos no HTML: quando visitamos um site, nosso navegador mostra os textos com as fontes que já temos instaladas em nosso computador. Todos os computadores já vêm com um jogo de fontes instalado como padrão. Se você trabalhar com uma fonte diferente dessas, ela será automaticamente substituída por outra, e seu texto aparecerá diferente do programado, ainda com sério risco de dispor um monte carinhas, bolinhas e símbolos misturados ao que foi originalmente criado. É por isso que, ao exportar as imagens dos itens do menu, o faremos já com o texto. Dessa forma podemos usar a fonte que quisermos sem nenhum problema. Mas não abuse da técnica: é extremamente importante que o conteúdo principal do site seja texto “de verdade” para que seja indexada por robôs de busca. Para não correr riscos, use uma dessas fontes: Arial, Verdana, Courier, Courier New, Geneva, Helvetica, Sans-serif, Georgia, Times News Roman ou Times.


8 Para terminar, digitalizamos a foto de uma peça de cortiça, recortamos e colocamos abaixo do menu para usarmos como uma área de destaques de conteúdo, logo abaixo do menu, na coluna da esquerda. O resultado você confere na figura.

Fatiando a imagem

Chegou a hora de usar a ferramenta Slice Tool, localizada na paleta de ferramentas e representada por uma simpática faquinha. Basicamente, essa ferramenta serve para fatiar ou modificar as imagens como preferir.Utilizamos essa ferramenta quando desenvolvemos um layout no Photoshop e queremos exportar para HTML. Desse modo, poderemos digitar livremente em nossa caixa de texto, e por serem códigos, não imagens, as páginas ficarão muito mais leves ao serem carregadas na Internet.Observe que adicionamos um pouco de texto e alguns quadros com imagens diversas ao nosso layout.


Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.


1 Chegou a hora de exportar o arquivo para HTML. Depois de fazer todos os recortes necessários, vá ao menu File » Save for Web & Devices. Abrir-se-á uma janela que exibirá todo o conteúdo fatiado. No menu Preset, é possível escolher as opções desejadas para exportar, como na figura 09. Depois de configurar tudo a seu gosto, clique no botão Save.

2 Uma janela se abrirá para você escolher onde deseja salvar. Selecione o nome de arquivo desejado. O nome escolhido será nome.html e os nomes das imagens nome_numerodafatia.extensão. No menu Format, selecione a opção HTML and Images (.html). Escolha a pasta correta e clique em Save.


Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

Dica: usar a forma de compactação Progressive e qualidade High (60%) é em geral uma boa configuração para os padrões da Internet. Porém, esse tipo de compactação pode lhe causar alguns problemas ao usar a imagem gerada juntamente com Flash. Se essa for sua intenção, use uma qualidade superior.


3 Pronto, seu design em Photoshop virou um site HTML. Agora você poderá utilizar o programa Dreamweaver, ou outro de sua preferência, para editar os arquivos HTML e fazer a diagramação do texto como melhor lhe convir.

Adicionando movimento

Para dar um pouco de movimento ao layout, criamos um quadro contendo as molduras em madeira, aplicando os mesmos recursos anteriormente citados, conforme a figura, depois de usamos o Flash intercalar três fotos diferentes.



Finalizando seu layout
Recomendamos usar o Dreamweaver para acertar os arquivos HTML, e também criar e editar o arquivo CSS. O CSS permite que você retire da marcação HTML toda a formatação (apresentação) do documento Web. Quem determinará cores, formas, tipos, tamanhos e posicionamento, enfim, todo o “visual” da página, são as CSS (Cascading Style Sheets, ou Folhas de Estilo). Isso lhe proporcionará algumas vantagens como:

» Controle total sobre a apresentação do site;
» Mais facilidade para trabalhar com a manutenção constante;
» Saída para diversos tipos de mídia, como impressões personalizadas, visualização em Handhelds, Palmtops, Celulares etc;
» Redução considerável no tempo de carregamento dos documentos;
» Seu site será mais bem interpretado por robôs de busca e, conseqüentemente, mais bem indexado por buscadores (Google, Yahoo! etc.).

Explorando um pouco mais o Photoshop
Na construção de um site precisamos, muitas vezes, editar as imagens, e para isso, nada melhor que o programa Adobe Photoshop. Há algumas variações conforme a versão do programa utilizado, mas as ferramentas básicas são sempre as mesmas.

Barra de ferramentas
No Photoshop, existem diversas opções de ferramentas, pincéis, filtros e efeitos visuais, com as quais podemos alterar totalmente a imagem inicial. A ferramenta Marquee Tool (retangular ou elíptica) serve para selecionar uma parte da imagem. Se desejar editar detalhes (por exemplo, recortar uma pessoa e colar em outro fundo), poderá usar a ferramenta Lasso Tool. Para retocar defeitos na imagem, podemos utilizar a ferramenta Clone Stamp Tool (carimbo), que copia exatamente a imagem para onde é apontado o alvo, ou a ferramenta Healing Brush Tool (bandaid), que copia o local apontado pelo alvo e corrige a luminosidade, realizando a fusão das texturas. Para desfocar bordas ou parte da imagem, podemos utilizar a ferramenta Blur Tool (desfoque), e assim temos inúmeras possibilidades.


Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

Redução de imagens

Redução de imagensReduzir o tamanho de fotos no Photoshop é muito simples. No menu File » Open escolha a imagem que você quer abrir. Depois, clique no menu Image » Image Size. Reduza a foto para o tamanho que desejar. Para salvar, vá a File » Save for Web e escolha a forma como deseja salvar.Quando precisamos reduzir muitas imagens de uma vez (para galerias de fotos, por exemplo) utilizamos o recurso Batch, que é uma forma de agilizar nosso trabalho. Um Batch é um conjunto de ações predeterminadas por você que são aplicadas de forma automatizada à seleção de arquivos que você deseja modificar, criando um processo bem mais rápido que o descrito acima. Você já imaginou o trabalho que dá para reduzir duzentas fotos uma a uma?Você vai achar a paleta Actions no menu Window » Actions.

No rodapé da paleta, clique no pequeno ícone de pastinha para criar uma nova pasta e nomeie-a como Action Teste. Depois, clique na folhinha (ao lado da lata de lixo) para criar uma nova action. Nomeie como galeria 480×360. Depois disso, a action começa a gravar tudo o que você fizer (veja que a luzinha vermelha está acesa). Então, repita o processo com uma foto: abrir a imagem e reduzir o tamanho (menu Image » Image Size). Se quiser, pode aplicar o filtro Sharpen (foco), salvar e depois fechar a imagem. Ao terminar, basta desligar a action no botão quadrado. Com sua action criada, vamos dizer ao Photoshop para aplicá-la a várias imagens, utilizando o recurso Batch.


Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

Criando um Batch
1 Acesse o menu File » Automate » Batch. Uma enorme janela de configuração se abrirá. Escolha o nome da pasta e da action (em cima).
2 Em Source, escolha Folder.
3 Clique em Choose e indique a pasta onde estão as fotos originas (as imagens em tamanho grande devem estar todas em uma única pasta).
4 Selecione as outras opções, conforme a figura .
5 Em Destination, também escolha Folder.
6 Clique em Choose e indique a pasta em que as novas fotos reduzidas serão salvas. Deve-se escolher (ou criar) uma pasta como destino.
7 Em Errors, escolha Log errors to file; depois, clique em Save As e nomeie o arquivo a ser salvo em seu Desktop, onde estarão as informações de possíveis erros que venham a ocorrer durante o processo.


Obs: se quiser ver a imagem inteira, clica e arrasta pra barra de endereços.

8 Depois de tudo configurado, clique em OK, e o Batch começará a aplicar a action escolhida nas fotos que estiverem na pasta selecionada. Se você configurou tudo corretamente, verá que as fotos serão reduzidas rapidamente.As dicas e explicações que foram passadas aqui mostram que podemos usar inúmeros softwares para chegar a um bom resultado de layout e design de um site. Porém, design é algo que software algum faz sozinho, pois isso requer talento, estudo e muita transpiração.
Talvez você tenha pensado que eu fosse dizer bom gosto, mas gosto é muito pessoal e quando você projeta, é preciso levar em consideração muitas coisas, como público-alvo, idéia que se deseja transmitir etc. Mas isso já é tema para outro artigo…


Fonte: PhotoshopCreative


1 comentários:

Anônimo disse...

Oi tudo bem???

Bom queria melhorar a estrutura do meu site tipo colocar ele com nova cara como coloco o tamanho certo das tabelas?? faço site de html:
da uma olhada no meu site estou tentando ajusta-lá já está funcionando mais queria melhorar sua estrutura como imagem de fundo!! eu estou usando 600X800 pixels o que vc acha e tento motificar e as imagens do titulo fica despropocionado e o rodapé!!
da uma olhada por favor e me add no meu msn por favor
meu site: http://www.horiodesign.com.br e meu msn é:
kellyhorio2010@hotmail.com

Postar um comentário

Após comentar, certifique sua postagem