Apostila Comunicação Visual para Web
81 pág.

Apostila Comunicação Visual para Web


DisciplinaWeb para Comunicação2 materiais12 seguidores
Pré-visualização12 páginas
e assinatura se mantêm 
com as funções padrão. Além do posicionamento clássico, a grande diferença do site 
é o conteúdo, sempre diferente em cada categoria. A formatação da página permite 
desvincular o topo e a assinatura do \u201cmiolo\u201d (centro da página), totalmente liberado 
para a criatividade.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
18
Dicas » 
 O logotipo da empresa deve, preferencialmente, ser mantido à esquerda, pois 
deve ser o primeiro elemento que o usuário verá, identificando onde ele está;
» A navegação deve estar em locais acessíveis.
» Repito: Não é uma regra! Todos esses estudos são as melhores práticas que 
conhecemos hoje. O que faremos é uma convenção, mas fique à vontade para 
ser criativo a cada projeto, com os devidos cuidados.
2 USABILIDADE
 A usabilidade é um termo relacionado ao universo da Arquitetura da informa-
ção, pois é uma das formas de realizar um bom projeto de AI.
 A usabilidade pode ser definida como:
\u201c a medida de qualidade e eficiência da experiência do usuário com um de-
terminado produto, que pode ser desde um rádio-relógio até uma página da Internet. 
No conceito Web, define-se por um design que ajuda o internauta a encontrar infor-
mações, serviços e produtos de forma intuitiva.\u201d 
HP (http://h30091.www3.hp.com/pyme/dicas/glosario_2.html)
 Para conseguirmos boa usabilidade, temos que ter em mente quem vai utilizar 
o sistema, em qual mídia, com qual tecnologia e de que maneira. A usabilidade serve 
para todos os produtos que têm interface com o usuário. Chamo de interface o painel 
de botões de um liquidificador, por exemplo. A usabilidade está atrelada à ergonomia, 
outro assunto bem interessante.
 Vamos exemplificar a usabilidade com um celular. Para que tenham noção do 
que estamos falando, peguem o celular ou circulem os celulares entre vocês e nave-
guem pela agenda - chamadas recebidas. Verifique as mensagens enviadas. Todos os 
acessos são diferentes entre aparelhos e fabricantes. Pensar nesse acesso é pensar 
em usabilidade, pensar que normalmente utilizamos uma das mãos, ou menos, utiliza-
mos um dedo apenas. Essa dificuldade ou facilidade é um exemplo de usabilidade.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
19
 Pensemos em quantos botões utilizamos para chegar a cada item desses, 
quantas informações úteis vemos em tela ao mesmo tempo?
 Agora você tem idéia do que é usabilidade. Logo entraremos em mais detalhes 
para a Internet.
3 NAVEGABILIDADE
 Como vimos, a usabilidade é o modo como utilizamos os sistemas e a nave-
gabilidade é principalmente voltada para a Internet, para a navegação entre as pági-
nas. 
 Para alguns gurus, citemos dentre eles Jackob Nielsen, se o usuário tiver que 
clicar mais do que duas vezes para chegar ao destino a navegabilidade é regular, e se 
só depois de três cliques o usuário chegar ao destino, a navegabilidade é ruim. Vamos 
ser menos rigorosos, mas continuar atentos.
 Como fórmula geral e básica para uma boa navegabilidade, o usuário deve 
responder rapidamente três perguntas:
 » Onde estou?
 » De onde vim?
 » Para onde vou?
 Vamos voltar ao celular para confirmarmos os exemplos reais. Façam as mes-
mas navegações anteriores e verifiquem se há outras formas de acessar a mesma 
informação e se você sabe onde está e para onde vai. Um bom exercício é que o co-
lega da direita ou da esquerda pegue o celular e navegue por alguns menus internos 
e passe o celular para outro colega de classe. Façam estas três perguntas e vejam 
as respostas que conseguem e apresentem para os outros, ou ainda, elejam o celular 
com a melhor usabilidade e navegabilidade da classe (enviem para mim, vou adorar 
saber qual o veredicto de vocês). Vocês verão coisas muito interessantes.
 Observe os erros mais comuns cometidos pelos desenvolvedores de sites, se-
gundo Jackob Nielsen:
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
20
Os principais erros que dificultam a experiência do usuário
 » Áreas saturadas com objetos rolantes e animados, que sobrecarregam a 
visão do usuário;
» Scroll longo;
» Cores de links não-padrão;
» Longo tempo de download do website;
» Longos níveis hierárquicos dos diretórios de websites;
» Páginas órfãs, que não estão relacionadas a outras páginas;
» Quebra de consistência;
» Oferta de um link de \u201cmailto:\u201d ao invés de links para uma página com informações 
de contato;
» Grandes blocos de texto;
» Páginas linkadas a si próprias;
» Informação excessiva ou desnecessária;
» Incompatibilidade de browsers.
www.useit.com é o site de Nielsen. 
Nielsen ainda sugere algumas práticas para quem não quer falhar:
 Melhores Práticas e Regras
 » Mantenha todos os links com um estilo padrão. Eles não precisam ser azuis 
(cor padrão do navegador) e sublinhados, como sugere Jakob Nielsen, mas devem 
ser diferenciados, possuir cores e estilo que os identifiquem e os torne de fácil visu-
alização;
» Os títulos dos links devem ser auto-explicativos. Coloque os links em palavras 
significativas, evitando termos genéricos como \u201cClique aqui\u201d e \u201cMais\u201d;
» Ofereça design leve e agradável, use poucas imagens: as pessoas procuram con-
teúdo;
» Evite textos longos e redundantes. O conteúdo deve conter parágrafos curtos e 
sentenças simplificadas;
» Não ofereça muitas áreas de navegação, principalmente se os links forem seme-
lhantes;
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
21
 » Evite menus suspensos;
 » As opções e informações mais importantes devem estar acima da primeira 
rolagem de tela;
» As caixas de entrada de busca devem possuir um tamanho adequado para que os 
usuários possam ver e editar mais facilmente a sua consulta;
» Não surpreenda os usuários: não abra janelas pop-ups automaticamente; 
» Não coloque links para \u201cVoltar a Página Anterior\u201d. Não tente reproduzir controles 
do navegador;
» Os usuários não devem clicar em mais de três links para chegar até a infor-
mação que desejam;
» O usuário precisa saber: de onde veio, por onde andou e por onde pode navegar. 
Síntese da Aula
 Nesta aula iniciamos os assuntos gerais e introdutórios para um projeto de 
arquitetura da informação, para que você possa entender melhor os conceitos das 
aulas.
 Vimos como são construídos os sistemas para serem utilizados pelo usuário.
 Analisamos sites que trabalham com diferentes disposições e vimos o padrão 
de layout utilizado na grande maioria dos sites.
 Na próxima aula veremos os elementos dos projetos gráficos.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
22
Exercícios Propostos
1) Vamos partir para estudos práticos e ligados à teoria. Escolha duas das figuras 
apresentadas (entre a Fig. 6 e a Fig. 10) e faça análises das dicas de erros e acertos 
apresentados por Nielsen.
2) Construa um mapa do site de três empresas:
 1 \u2013 Da instituição de ensino que você estuda
 2 \u2013 Do grupo musical que você mais gosta
 3 \u2013 De algo que você tenha conhecimento e interesse. (Esporte, entretenimen-
to, família, etc.)
3) Eleja um dos três mapas criados acima e desenvolva um exemplo de WIREFRAME 
de como poderia ser apresentado o conteúdo dessa empresa.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
23
Aula 2
Projeto Gráfico (Design)
Objetivos da aula 
 Ao final desta aula, você deverá ser capaz de:
\u2022 Reconhecer e interpretar elementos de uma identidade visual;