Comunicação Visual para Web I AULA 4

Prévia do material em texto

Aula
04Comunicação Visual para Web - UNIGRAN
USABILIDADE APLICADA 
A ELEMENTOS DE 
INTERFACE
Caros(as) alunos(as), nessa aula, veremos conceitos e diretrizes 
de usabilidade aplicadas e elementos de interface, tais como imagens, 
animações, vídeos, etc. Se ao final desta aula tiverem dúvidas, vocês 
poderão saná-las através das ferramentas “fórum” ou “quadro de 
avisos” e “chat”.
Comecemos, então, analisando os objetivos e verificando as 
seções que serão desenvolvidas ao longo desta aula.
Bom trabalho!
Objetivos de aprendizagem
Ao final desta aula, vocês serão capazes de:
• entender a definição de Design e Web Design;
• conhecer os principais conceitos sobre a Teoria de Gesltalt;
• aplicar os conceitos das Leis da Gestalt para construir leiautes;
• possuir embasamento teórico para construir pecas gráficas para 
ambientes digitais.
63
Comunicação Visual para Web - UNIGRAN
Seções de estudo
• Seção 1 - Usabilidade Aplicada a Elementos de Interface
• Seção 2 - Imagens
• Seção 3 - Ícones
• Seção 4 - Animações
• Seção 5 - Vídeos
• Seção 6 - Barras de Rolagem
• Seção 7 - Formulários
Seção 1 - Usabilidade Aplicada a Elementos de Interface
Nesta aula, serão apresentados conceitos e diretrizes aplicadas aos 
principais elementos de interface que compõe o conteúdo editorial de um web site. 
Seção 2 - Imagens 
O uso de imagens na Web torna o ambiente mais agradável e interativo, 
no entanto estas devem ser empregadas com muito critério, pois o uso de imagens 
em excesso e inadequadas a temática do site, podem comprometer a função 
estética e informativa, como também podem causar morosidade no carregamento 
da página. 
Façam uma análise da interface do website abaixo. Perceba que há 
alguns problemas de usabilidade, como o excesso de imagens e informações que 
“disputam” a atenção do usuário. 
64
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Neste exemplo, podemos perceber claramente que o excesso de 
imagens comprometem a comunicação e a estética do site. Ao observarmos este 
leiaute percebemos que a estrutura informacional não está organizada de forma 
hierárquica, pois a maior parte das imagens possuem o mesmo grau de destaque, 
assim nenhuma informação de fato está destacada, sendo necessário observar 
todos os elementos que compõe a interface para sabermos quais são os assuntos e 
informações mais relevantes.
Na web os usuários navegam de forma não linear e observam as principais 
informações na página, ignorando o restante do conteúdo, desta forma a interface 
deve transmitir os assuntos prioritários de forma clara e precisa, sem que o usuário 
tenha que observar todos os elementos que a compõem para assimila-los. 
Imagens Bitmaps e Vetoriais:
Na computação gráfica, há dois tipos de arquivos de imagem: bitmap e vetorial. 
Imagens bitmap ou mapa de bits: são imagens desenhadas na tela por 
uma matriz de pixels, que juntos compõem imagem vista. As imagens bitmaps são 
manipuladas por programas editores de imagens. Os programas mais conhecidos 
que criam arquivos bitmap são: Adobe PhotoShop, Corel Photopaint, Corel 
Painter, Corel Paint Shop Pro, Gimp e outros
Imagens Vetoriais: as imagens são compostas por vetores matemáticos, 
tais como curvas, elipses, polígonos, texto, entre outros elementos e podem se 
redimensionar sem perder qualidade. Essas imagens são criadas em programas 
como Corel Draw, Adobe Ilustrator, Macromedia FreeHand, flash entre outros. 
65
Comunicação Visual para Web - UNIGRAN
Os programas mais conhecidos que criam arquivos vetoriais são: CorelDRAW, 
Illustrator, Freehand, RealDraw, Xara , Inkscape, entre outros. 
Quanto à ampliação: bitmap x vetorial:
Quando ampliamos uma imagem bitmap ela perde qualidade, pois este tipo 
de arquivo é constituído por um número fixo de pixels e ao ampliarmos a imagem, 
o número de pixels continuará o mesmo, o que acarretara na perda de qualidade. Já 
as imagens vetoriais refazem os cálculos matemáticos que descrevem suas linhas 
curvas quando a imagem é ampliada, assim a imagem sempre permanecerá nítida, 
sem perda de qualidade. Vejam o exemplo de uma imagem vetorial e bitmap 
ampliadas. Notem que ao ampliarmos a imagem vetorial este não perderá qualidade, 
o mesmo não acontece com a imagem bitmap, que ficará “pixelada”. 
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
As imagens vetoriais são amplamente utilizadas em produtos de mídia 
impressa, já arquivos bitmaps são mais adequados para serem utilizados na web, 
embora os formatos vetoriais como SVG e SWF são suportados pelos navegadores.
Formatos de arquivos mais populares na Web
Na web, há uma grande variedade de formatos de arquivos, para diferentes 
finalidades, especificações técnicas e tipos de compressão. Nesta sessão serão 
apresentados somente os formatos mais populares e amplamente utilizados na web, 
tais como SVG, PNG, GIF, JPGE e BMP. 
SVG - Scalable Vector Graphics ou, em português, Vetor Gráfico 
Redimensionável. Podemos definir SVG como um mapa XML que descreve 
matematicamente formas vetoriais e gráficos bidimensionais estáticos ou dinâmicos. 
Para saber mais sobre o assunto faça leitura do arƟ go “Diferença 
entre Arquivo Bitmap e Arquivo Vetorial” postados na plataforma 
em Materiais de Aula.
XML, do inglês 
Extensible Markup 
Language, é 
uma linguagem 
de marcação 
recomendada 
pela W3C para 
a criação de 
documentos com 
dados organizados 
hierarquicamente, 
tais como textos, 
banco de dados 
ou desenhos 
vetoriais. 
66
Comunicação Visual para Web - UNIGRAN
Exemplo: a figura abaixo foi criada no software Ilustrador, que é um 
programa de edição de imagens vetoriais, e salva no formato SVG. Ao salvarmos 
a imagem podemos verificar o código XML gerado.
SVG é um padrão open source proposto pela W3C, e é uma das 
grandes tendências no momento devido ao aumento na qualidade de resolução 
de dispositivos digitais e o uso de design responsivo para projetar interfaces. O 
SGV é redimensionável, ou seja, se comporta como uma imagem vetorial, assim 
ícones e imagens se ajustarão a qualquer interface sem perder qualidade, desta 
forma uma imagem poderá ser exibida perfeitamente em um smartphone ou um 
aparelho de TV de 48 polegadas.
O formato SVG pode ser utilizado em imagens, filtros, animações, 
scripts e outros elementos interativos. Recomenda-se a utilização do formato 
SVG em ícones e logomarcas, pois quando utilizado em imagens grandes o tempo 
de carregamento da página ficará comprometido. 
No entanto, somente os navegadores modernos aceitam o formato SVG 
de forma nativa ou através de bibliotecas JavaScript. 
Imagem vetorial: Código XML gerado:
<?xml version="1.0" encoding="uƞ -8"?>
<!-- Generator: Adobe Illustrator 15.0.0, 
SVG Export Plug-In . SVG Version: 6.00 
Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD 
SVG 1.1//EN" "hƩ p://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" 
xmlns="hƩ p://www.w3.org/2000/svg" 
xmlns:xlink="hƩ p://www.w3.org/1999/
xlink" x="0px" y="0px" width="200px" 
height="200px" viewBox="0 0 200 200" 
enable-background="new 0 0 200 200" 
xml:space="preserve">
<circle fi ll="#00D1FF" stroke="#4291E2" 
stroke-width="16" stroke-miterlimit="10" 
cx="99.677" cy="99.935" r="75.244"/>
</svg>
Atenção! Para criar designs responsivos em que as imagens devem se redimensionar 
é necessário a uƟ lização de medidas relaƟ vas como EM e porcentagem.
O termo Open 
Source ou em 
português, Código 
Aberto, foi criado 
pela OSI (Open 
Source IniƟ aƟ ve) 
e refere-se a 
soŌ ware também 
conhecido por 
soŌ ware livre.
67
Comunicação Visual para Web - UNIGRAN
PNG - Portable Network Graphics, é um padrão opensource e possui 
alta compressão, ou seja, permite comprimir as imagens sem que haja a perda 
de qualidade. O formato PNG possui uma compressão de imagem mais eficiente 
em comparação com o formato JPEG, não gerando perda de qualidade a cada 
salvamento, mantendo-se fiel a imagem original. 
O formato PNG também é capaz de salvar imagens com fundo transparente 
através do canal alfa. Diferentemente da transparência do GIF, o canal alfa permite 
definir o nível de opacidade de cada pixel, adequando-se a qualquer plano de 
fundo, deixando os contornos mais suaves e evitando serrilhados. Ex: 
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
WebP é um novo formato de imagens do Google que utiliza técnicas do 
codec de vídeo VP8 para compressão com até 34% a menos de perda de qualidade 
em comparação com os formatos PGN e JPGE. O formato webP também suporta 
transparência através do canal alfa (lossless) com apenas 22% de bytes adicionais. 
Veja o comparativo entre as imagens abaixo:
Fonte: https://developers.google.com/speed/webp/?hl=pt-BR&csw=1
Para saber mais sobre o assunto faça leitura dos seguintes 
arƟ gos postados na plataforma em Materiais de Aula:
• Imagens em alta resolução uƟ lizando SVG
• Como Inserir SVG no HTML
68
Comunicação Visual para Web - UNIGRAN
Fonte: https://developers.google.com/speed/webp/?hl=pt-BR&csw=1
Segundo o Google, 65% dos dados trafegados pela Web correspondem a 
imagens, neste contexto o novo formato visa reduzir o trafego de dados e aumentar 
a velocidade de carregamento, já que há redução do tamanho dos arquivos.
Para converter imagens PNG e JPEG em WebP a empresa disponibilizou 
um conversor em sua página no endereço: https://developers.google.com/
speed/webp/download?hl=pt-BR
GIF (Graphic Interchance Format) – é um formato de armazenamento 
de imagens que trabalha com uma paleta de 256 cores. A utilização desse formato 
é recomendável para imagens com cores chapadas , como: desenhos, animações, 
imagens de textos e gráficos, etc. 
JPEG (Joint Photographic Experts Group) – é um formato de 
armazenamento de imagens que trabalha com uma paleta de 16,8 milhões de cores. 
A utilização desse formato é recomendável para imagens com várias tonalidades 
de cores como: fotografias e imagens 3D. 
Qual formato deve ser usado na web?
Ao avaliar qual o formato uma imagem deve ser salva considere o tipo 
de imagem, a finalidade e o tamanho final (kb) do arquivo. Em uma fotografia 
grande, por exemplo, podemos optar por JPEG ou PNG, no entanto o tamanho 
final do arquivo do segundo pode ficar muito maior que o primeiro e a qualidade 
da imagem será similar. Ex: 
Para saber mais sobre o assunto, acesse o arƟ go WebP o Novo 
Formato para Web, disponível em: <hƩ ps://developers.google.
com/speed/webp/?hl=pt-BR&csw=1 >.
Cores chapadas: 
Cor pura, conƟ nua 
ou uniforme. 
69
Comunicação Visual para Web - UNIGRAN
Seção 3 - Ícones
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Quanto a opção pela densidade, a maioria do dispositivos ainda utiliza 
72 PPI, no entanto os dispositivos modernos possuem uma densidade cada vez 
maior, neste caso é melhor avaliar qual dispositivo a imagem será visualizada e o 
perfil do público-alvo.
O ícone deve transmitir a mensagem com bastante clareza, sem gerar 
ambiguidade na interpretação do símbolo para que o usuário possa associá-lo a 
ação que será realizada. 
Os ícones são essenciais para a interação e navegação do usuário no 
website. O correto emprego de ícones na interface potencializa a experiência de 
uso de um site, agilizando a navegação e tornando-a prazerosa.
Alguns ícones possuem a simbologia bem aceita como, por exemplo, o 
envelope para designar o “e-mail”, pois a sua função é intuitivamente assimilada 
pelo usuário, desta forma utilize ícones que já possuem convenções consolidadas 
apenas para exercerem as funções que estão dentro das expectativas dos usuários. 
A utilização de ícones na interface pode ser extremamente útil, no entanto 
utilize com moderação, pois em excesso pode poluir visualmente a página. 
Os tamanhos mais comuns de ícones são: 512 x 512 | 256 x 256 | 64 x 64 
| 48 x 48 | 32 x 32 | 24 x 24 | 20 x 20 | 16 x 16
JPEG PNG
Tamanho do arquivo: 475 kb Tamanho do arquivo: 815 kb
CONCEITO
Na Semiologia ícone é uma imagem que mantém com um determinado objeto 
uma relação de semelhança ou propriedade. Em síntese ícone é símbolo gráfi co que 
representa algo concreto ou abstrato do mundo real.
Semiologia: é 
a ciência geral 
dos signos e da 
semiose que 
estuda todos 
os fenômenos 
culturais como se 
fossem sistemas 
sígnicos, isto 
é, sistemas de 
signifi cação. 
Fonte: hƩ p://
pt.wikipedia.org/
wiki/Semiologia 
acessado em 
(29/11/13)
70
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Os formatos de imagens e ícones que podem ser utilizados na web são: 
PNG, ICO, ICNS e SVG.
Seção 4 - Animações
Animações quando empregadas de forma adequadas, são excelentes 
recursos visuais para orientar a navegação e deixar o ambiente mais lúdico ou 
interativo, tornando a experiência mais enriquecedora. Como qualquer recurso 
gráfico a animação deve atender as expectativas do público-alvo do site. 
Recomendações para o uso de animações: 
A palavra é moderação: evite excessos de animações e efeitos sonoros, 
pois esses recursos podem causar cansaço ou distrair o usuário, fazendo com que 
este perca o foco da navegação no conteúdo. 
Usem preloader: principalmente nas animações mais pesadas que 
requeiram tempo maior de carregamento. 
Evitem repetições: evitem que as animações sejam executadas 
repetidamente no site, principalmente quando o conteúdo for voltado a leitura. O 
uso de animações é mais aceito em sites com conteúdo lúdico ou em sites de jogos.
Dicas! Veja alguns sites que disponibiliza galerias de ícones grátis 
para downloads.
SmashingMagazine (www.smashingmagazine.com/2008/07/02/55-free-
high-quality-icon-sets/ ) disponibiliza galerias de ícones para download.
IconShock (hƩ p://www.iconshock.com/) disponibiliza galerias de ícones 
para download.
IconFinder (hƩ p://www.iconfi nder.net) Neste site o usuário faz uma busca 
textual e o site retorna os resultados encontrados. Excelente!
71
Comunicação Visual para Web - UNIGRAN
Dê oportunidade de escolha: quando as animações são exibidas em 
páginas inicias ou splash pages, permitam que o usuário faça a escolha em ver ou 
não a animação.
Não animem: logotipo, slogan e títulos de sessões.
Para visualizar conteúdos multimídias (vídeos ou arquivos em flash) é 
preciso à instalação de plug-ins , nesta situação é importante que o usuário tenha 
a opção de aceitar ou não a instalação do programa. 
O uso de recursos multimídias no site, principalmente em áreas criticas 
como menus de navegação, deve ser muito bem projetado, pois nem todas as 
pessoas podem efetuar downloads dos plug-is, por acessarem a internet de cafés 
ou lan houses. Uma alternativa para amenizar tal problemática é oferecer aos 
usuários a opção de acessar páginas que não precisam de plug-ins. 
Seção 5 - Vídeos
O uso de vídeos no conteúdo do site estreitam relações entre usuário e site 
humanizando o ambiente digital. Por meio dos vídeos, é possível demonstrar produtos 
e ambientes de maneira mais realista. 
O YouTube, popular site de vídeos, é o segundo site mais acessado na web, 
o que denota claramente a predileção dos usuários por este formato de conteúdo. 
Disponível em: <http://www.tecmundo.com.br/internet/39476-veja-uma-lista-com-
30-dos-sites-mais-acessados-na-internet.htm>, acessado em: 29/11/2013.
Segundo uma pesquisa realizada pela Cisco VisualNetwork Index, o acesso 
à vídeos em dispositivos móveis ultrapassou os 50% pela primeira vez em 2012. 
Disponível em: <http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/
ns537/ns705/ns827/white_paper_c11-520862.html>, acessado em: 29/11/2013.
O uso de vídeos nos sites integrado ao conteúdo editorial e ao modelo de 
negócio, agregam valor a comunicação digital e tornam a experiência interativa muito 
mais agradável ao usuário.
Assim como as imagens e animações, o uso de vídeos deve estar adequado 
a temática do site. Já o tempo de download é um fator crítico que deve ser observado 
com critério, pois a morosidade no carregamento deste tipo conteúdo pode gerar 
expectativas negativas no usuário. 
Plug-ins: são 
pequenos 
programas que 
oƟ mizam as 
funcionalidades 
do browser 
necessários 
para exibição de 
arquivos como 
vídeo e áudio. 
72
Comunicação Visual para Web - UNIGRAN
Seção 6 - Barras de Rolagem
Algumas interfaces apresentam barras de rolagens customizadas tal prática 
é aceitável desde que está não fique totalmente descaracteriza e não comprometa sua 
funcionalidade. As barras de rolagens verticais nos permite visualizar os conteúdos que 
estão abaixo da dobra da página. Sempre quando o conteúdo da página exceder a área 
de visualização, a barra de rolagem deve ser disponibilizada, evitando deslocamento 
automático da página, pois os usuários se sentem mais seguros durante a navegação 
quando controlam suas ações. 
As barras de rolagem devem ser ocultas apenas quando todo o conteúdo 
estiver visível. Recomenda-se essa prática, pois a exibição da barra fará com que 
usuário subentenda que existem mais conteúdos abaixo da dobra da página.
Seção 7 - Formulários
O preenchimento de formulários na Web é extremamente delicado, pois é 
nesse momento que o usuário se dispõe a se relacionar com o canal ou empresa. 
Qualquer falha ou situação inesperada pode gerar frustração, levando o usuária a 
interromper o preenchimento e abandonar o canal. 
Programadores e designer ao projetarem um formulário devem observar cada 
detalhe para que nenhuma falha ocorra, por isso é importante o máximo de cuidado 
ao elaborá-los, prevendo todas as situações para sanar e/ou minimizar os possíveis 
incômodos para que o preenchimento seja feito de forma segura e confortável. 
Dica!
Mostre todas as informações importantes acima da dobra da página. 
Os Usuários muitas vezes decidem permanecer ou não no com base no 
conteúdo que eles podem ver sem se deslocar. 
As barras de rolagem horizontais não são usuais e devem ser evitadas,pois 
podem comprometer a acessibilidade do conteúdo para os usuários 
que possuem uma má visibilidade espacial. Pessoas
com defi ciências motoras ou idosas tem difi culdade em deslocar-se uƟ lizando itens 
pequenos de deslocamento como a barra de rolagem ou o teclado. 
No entanto, em algumas soluções como, por exemplo, sites de agências de 
publicidades, que trazem uma proposta mais ousada de interface direcionada a um 
público específi co é aceitável o uso da barra de rolagem horizontal. 
Acessibilidade é 
a possibilidade 
e condição de 
alcance, percepção 
e entendimento 
para a uƟ lização 
com segurança 
e autonomia 
de edifi cações, 
espaço, mobiliário, 
equipamento 
urbano, e 
informações. 
73
Comunicação Visual para Web - UNIGRAN
Pontos críticos: 
1) Tempo de preenchimento do formulário: As maiorias dos usuários 
não gostam de preencher formulários, principalmente se eles forem extensos. 
Formulários que excedem a dobra da página só serão preenchidos quando forem 
imprescindíveis. Quanto maior a interesse de estreitar relações com usuários ou 
clientes, menor deverá ser o tempo de preenchimento.
2) Solicitação de informações desnecessárias: Não solicite aos usuários 
informações que não terão relevância na relação que está sendo estabelecida. 
Jamais solicite duas vezes a mesma informação, pois tornará o preenchimento 
moroso e acarretará em armazenamento de informações desnecessárias. 
3) Formulários extensos: para não tornar o preenchimento exaustivo, o 
formulário deve ser dividido, pois ao seccioná-lo o preenchimento se tornará mais 
fácil e menos susceptível a erros. 
4) Formatação dos campos: O tamanho dos campos input deve corresponder 
ao tamanho da informação que será inserida, por Ex.: não configure o campo estado 
que precisa apenas de 2 dígitos com um tamanho que poderia caber uma palavra com 
6 dígitos, isso poderá causar confusão no usuário e induzi-lo ao erro. 
5) Falta de sinalização em campos obrigatórios: Informe as pessoas 
no começo do formulário que os campos sinalizados devem ser obrigatoriamente 
preenchidos. Comumente os campos obrigatórios possuem um (*) na frente ou 
são destacados por cores. 
Caso o usuário não tenha preenchido um campo obrigatório e tentar 
preencher o próximo campo, o ponteiro do mouse deve ser redirecionada para 
campo de preenchimento obrigatório, assim como uma mensagem deve ser 
enviada informando ao usuário que ele deverá preencher esse campo antes de 
preencher o próximo campo. Não deixem o usuário concluir o formulário para 
somente assim validar os campos obrigatórios, essa prática não é aconselhada.
6) Não enviar mensagens de erro e alerta: As mensagens devem ser 
enviadas sempre quando necessárias, e devem ser cordiais e sucintas explicando 
claramente qual o erro cometido pelo usuário.
Mensagens que informam apenas um código de erro devem ser evitadas. 
Muitas vezes nem o desenvolvedor saberá imediatamente do que se trata o erro 
quanto mais o usuário. 
74
Comunicação Visual para Web - UNIGRAN
Após o envio de mensagens de alerta, os dados informados anteriormente no 
formulário não dessem ser apagados. As informações preenchidas corretamente devem 
ser mantidas, pois será muito desagradável forçar o usuário a refazer o preenchimento. 
7) Campos não validados: a validação adequada dos campos do formulários 
reduz a possibilidade de erros acidentais e garantem boa usabilidade aos formulários. 
Parece óbvio que os campos devem ser validos, mas não é o que acontece 
na maioria das vezes; se os campos são destinados a Texto, permita somente texto; se 
o campo for destinado a Números permita somente a números; se houver um limite 
para a inserção desses números, façam-no; no caso de campos Data especifique o 
formato da data que você deseja utilizando máscara, por exemplo: dd/mm/aa ou dd/
mm/aaaa; no caso de número de telefone forneça a máscara para indicar a necessidade 
ou não do usuário informar o DDD. 
O desenvolvedor de prever todas as possíveis situações que podem 
permitir que o usuário erre e validá-las. Conscientize-se de que se o usuário 
conseguiu preencher algum campo incorretamente certamente o sistema não está 
validado suficientemente, deixando o usuário suscetível a falha. O sistema sempre 
deverá adequar-se ao usuário e nunca o contrário. 
8) Não emitir mensagem de conclusão de cadastro: é importante que, 
ao concluir o preenchimento de um formulário, o usuário receba uma mensagem 
informado se o cadastro foi efetivado ou não, assim, o usuário terá certeza de que 
conclui a ação corretamente, caso contrário este ficará inseguro se realizou ou não 
a ação corretamente. 
Retomando a conversa inicial
Atenção! Atente-se as diferenças regionais que implicam em tratamentos especiais 
para alguns campos, tais como o campo Telefone.
Parece que estamos indo bem. Então, para encerrar esse tópico, 
vamos recordar:
75
Comunicação Visual para Web - UNIGRAN
• Seção 2 - Imagens
O uso de imagens na Web torna o ambiente mais agradável e interativo, no 
entanto estas devem ser empregadas com muito critério, pois o uso de imagens em 
excesso e inadequadas a temática do site, podem comprometer a função estética e 
informativa, como também podem causar morosidade no carregamento da página.Na computação gráfica há dois tipos de arquivos de imagem: 
• Imagem Bitmap: são imagens desenhadas na tela por uma matriz de pixels.
• Imagem Vetorial: as imagens são compostas por vetores matemáticos, 
tais como curvas, elipses, polígonos, texto, entre outros elementos e podem se 
redimensionar sem perder qualidade.
Os formatos mais indicados para serem utilizados na web são: SVG, 
PNG, WebP, GIF e JPEG.
• Seção 3 - Ícones
Ícone é símbolo gráfico que representa algo concreto ou abstrato do 
mundo real. O ícone deve transmitir a mensagem com bastante clareza, sem gerar 
ambiguidade na interpretação do símbolo para que o usuário possa associá-lo a 
ação que será realizada. 
Os tamanhos mais comuns de ícones são: 512 x 512 | 256 x 256 | 64 x 64 
| 48 x 48 | 32 x 32 | 24 x 24 | 20 x 20 | 16 x 16
• Seção 4 - Animações
Animações quando empregadas de forma adequadas, são excelentes 
recursos visuais para orientar a navegação e deixar o ambiente mais lúdico ou 
interativo, tornando a experiência mais enriquecedora. Como qualquer recurso 
gráfico a animação deve atender as expectativas do público-alvo do site. 
Recomendações para o uso de animações: 
• utilizem animações com moderação; 
• usem preloader; 
• evitem repetições intermitentes;
• dêem oportunidade de escolha para que o usuário decida ver ou não a animação. 
• não animem logotipo, slogan e títulos de sessões.
• Seção 5 - Vídeos
O uso de vídeos no conteúdo do site estreitam relações entre usuário e 
site humanizando o ambiente digital. Através dos vídeos é possível demonstrar 
produtos e ambientes de maneira mais realista, tornam a experiência interativa 
muito mais agradável ao usuário. Cuidado com o tamanho, pois a morosidade no 
carregamento deste tipo conteúdo pode gerar expectativas negativas no usuário. 
76
Comunicação Visual para Web - UNIGRAN
• Seção 6 - Barras de Rolagem: 
Algumas interfaces apresentam barras de rolagens customizadas, tal prática 
é aceitável desde que está não fique totalmente descaracteriza e não comprometa 
sua funcionalidade.
Sempre quando o conteúdo da página exceder a área de visualização, a barra 
de rolagem deve ser disponibilizada, evitando deslocamento automático da página. As 
barras de rolagem devem ser ocultas apenas quando todo o conteúdo estiver visível. 
• Seção 7 - Formulários
O preenchimento de formulários na Web é extremamente delicado, pois é 
nesse momento que o usuário se dispõe a se relacionar com o canal ou empresa. 
Qualquer falha ou situação inesperada pode gerar frustração, levando o usuária a 
interromper o preenchimento e abandonar o canal. 
Pontos críticos: 
• tempo de preenchimento do formulário
• solicitação de informações desnecessárias
• formulários extensos
• formatação dos campos 
• falta de sinalização em campos obrigatórios
• nNão enviar mensagens de erro e alerta 
• campos não validados
• não emitir mensagem de conclusão de cadastro
Sugestões de leituras e sites
• Leituras:
TIDWELL, Jennifer. Designing interfaces. Editora: O'Reilly.
KALBACH, James. Designing Web Navigation. Editora: O'Reilly.
MEMÓRIA, Felipe. Design para a Internet - Projetando para a Internet. Editora: 
ED Campus.
• Sites:
Diferença entre Arquivo Bitmap e Arquivo Vetorial: <http://www.olhonudesign.com.
br/materias/vetorxbitmap.htm>.
Inserir SVG na HTML: <http://maujorsvg.com.br/fundamentos/inserir-svg-na-html.php>
WebP o Novo Formato para Web: <https://developers.google.com/speed/webp/?hl=pt-
BR&csw=1>.
77
Comunicação Visual para Web - UNIGRAN
Obs.: Se ao fi nal desta aula Ɵ verem dúvidas, vocês poderão saná-
las através das ferramentas “fórum” ou “quadro de avisos” e 
“chat”. Ou ainda poderão enviar para o e-mail renata@unigran.br?
?
78