Imagem

Quando se trabalha com imagens para impressão existe a necessidade de criar arquivos em alta resolução, isso faz com que os arquivos fiquem pesados, muitas vezes deixando o computador lento.

Diferente de imagens para impressão, as imagens para web devem tem o menor tamanho em pixels possível, mas mantendo a qualidade visual. Manter o arquivo reduzido influência diretamente na velocidade de carregamento do site e consequentemente na percepção do design do mesmo.

Enquanto a mídia impressa exige resolução em torno de 300 ppi (pixels por polegada), na web as imagens são de 72 ppi e compactadas. O monitor só pode exibir 72 ou 96 pixels por polegada, ou seja, manter as imagens com maior resolução não vai mudar a forma como elas serão exibidas na tela se comparadas com imagens que tenham 72 ppi de resolução (WILLIANS; TOLLETT, 2001).

Mas mesmo estando com 72 ppi, muitas vezes as imagens demoram a ser carregadas nos sites. Então, quando o site tiver tantas imagens que demore mais de 30 segundos para carregar, elas devem ser divididas e colocadas em outras páginas. Outra opção também é usar miniaturas e disponibilizar um link para que a mesma possa ser vista maior em outra página. Mesmo que as imagens tenham seu tamanho reduzido existe a necessidade de tomar cuidado, pois quando colocadas juntas podem acarretar lentidão no carregamento das páginas (WILLIANS; TOLLETT, 2001).

Os formatos de imagem mais indicados são GIF ou JPEG. GIF para artes finais e texto com alto contrate e JPEG para fotos e imagens com tons contínuos. O

formato PNG é indicado quando não a necessidade de compactar o arquivo e ainda permite o uso de fundo transparente.

O formato GIF (Graphic Interchange Format) foi desenvolvido especificamente para web. Pode ser visto em qualquer tipo de computador, pois é de plataforma cruzada. Além disso, são compactados, o que torna o arquivo menor ser modificar suas dimensões, permitindo serem transferidos rapidamente e que a página seja carregada sem demora. A compactação do arquivo acorre sem perdas, ou seja, sem perda de qualidade, entretanto quando GIFs são feitos muitos pequenos, a qualidade da imagem fica prejudicada (WILLIANS; TOLLETT, 2001).

O formato JPEG (Joint Photographic Experts Group) também é de plataforma cruzada5 e compactados, mas é mais indicado para fotografias e imagens com bastante variação de profundidade, cores, tonalidades e etc. Uma diferença em relação ao formato GIF é que no processo de compactação do arquivo JPEG, há perda de dados da imagem. Quando esse processo é feito com cuidado, quase não nota-se diferença, comparado ao original. JPEG podem conter 16,7 milhões de cores (24 bits) e podem ser escolhidos vários níveis de compactação, onde quanto maior for a compactação, menor será o arquivo e a qualidade do mesmo (WILLIANS; TOLLETT, 2001). No quadro 4 são apontadas as diferenças em os formatos GIF e JPG.

5 _{Formato de arquivo que pode ser visualizado independente do sistema operacional que o usuário esteja}

Característica GIF JPEG

Tipo de compactação

O formato GIF possui 256 cores ou menos. Esse formato é indicado para as imagens ou desenhos com cor lisa ou em poucas cores e não gradientes.

Esse formato suporta 16,7 milhões de cores, por essa razão e indicado para

fotos e imagens com gradiente. Entretante deve-se tomar cuidado,pois quando mal manipulado

pode ficar serrilhado.

Transparência Suporta arquivos com transparencia. Não há suporte.

Animação

A animação GIF é atualmente criticada pelo seu uso exagerado. Mas esse formato pode ser prático e se utilizado

com bom senso pode representar um objeto visual interessante

Não há suporte para animação.

Quando escolher

Para imagens com grande área de cor sólida, tais como logos, texto,

ilustrações ou gráficos.

Funciona melhor para fotografias e imagens com silimares.

Quadro 4 - Diferenças entre os formatos GIF e JPEG. Fonte: Holzschlag (2004)

Na web existe uma opção chamada “alt label” definida na linguagem de programação, na qual pode ser inserido um texto alternativo à imagem. Esse texto é importante para as vezes que a imagem não poder ou demore a ser carregada na página, assim o usuário saberá o que esperar da imagem. Esse texto aparece quando o usuário passa o mouse em cima da imagem (WILLIANS; TOLLETT, 2001). Algumas imagens são muito grandes para serem colocadas em uma página com mais elementos, sendo assim, é disponibilizado um link onde a imagem pode ser vista em dimensões maiores. Contudo, deve haver planejamento para que esta não seja uma página órfã, onde não existe nada além da imagem. Também é importante não vincular a miniatura a uma página em que contenha todas as imagens. É interessante ter nessa página da imagem um título e alguma explicação sobre ela.

Se forem levadas em conta as características de cada formato de imagem, bem como suas indicações quanto a sua utilização, há grandes chances da página ficar agradável, onde todas as imagens são visualizadas com qualidade e a

velocidade no carregamento da página não faça com que o usuário perca o interesse em visualizá-lo. Se tratando de design, a imagem torna-se um dos aspectos mais importantes a ser pensado e onde se deve ter mais cuidado com o uso correto.

3 DESENVOLVIMENTO

Neste capítulo primeiramente, será apresentada uma visão geral dos cursos oferecidos pelo Dadin. Em seguida, serão apresentas as análises e resultados obtidos com a pesquisa com o público-alvo. A pesquisa com o usuário foi dividida em duas etapas: a primeira foi elaborada com base em conceitos do design de interação, a qual buscou identificar as necessidades dos usuários e a relevância de um espaço interativo entre alunos e professores do Dadin, como também suas funcionalidades e conteúdos para compor a rede. Já a segunda etapa, pretendeu conhecer as preferências gráficas dos usuários, a fim de melhor atender as expectativas visuais dos mesmos.

Depois de apresentados os resultados das pesquisas, será apresentada a etapa de estruturação das informações na rede, a construção dos wireframes e a fase da criação e progresso dos layouts.