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

Apostila Comunicação Visual para Web


DisciplinaWeb para Comunicação2 materiais11 seguidores
Pré-visualização12 páginas
Quem é o público-alvo?
» Qual o objetivo do site? (Comunicar / vender / ensinar)
» Qual a identidade da empresa? Como quer ser vista? (apropriar-se da identidade 
existente)
» Índice do conteúdo. (Tópicos gerais e específicos para se poder construir a arqui-
tetura)
 Algumas empresas partem para o marketing digital, o que deve ser previsto 
aqui, mas para nosso estudo isso é outra fase.
1.1 Arquitetura de Informação (AI) 
 Temos grande parte das informações, mas: como vamos organizá-las?
1.1.1 Arquitetura? Isso é informática?
 No dicionário, a palavra arquitetura significa: \u201carte de edificar ou de projetar e 
traçar planos\u201d. Exatamente o que faremos: estruturar e planejar a informação do site, 
conteúdos relacionados entre si e a estruturação dos fluxos de navegação. 
 Aqui faremos o possível para que o usuário não se perca, navegando sem ter 
que pensar muito, de modo fácil e intuitivo.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
9
Alguns dos resultados da Arquitetura da Informação (AI) são os wireframes e o mapa 
do site.
1.1.2 Como faço isso? \u2013 O mapa
 Com as respostas do briefing em mão, vamos definir como deve ser o site. Va-
mos partir de uma empresa que queira:
\u2022 mostrar sua história, abrangência, etc. - (A empresa);
\u2022 mostrará também seus serviços e produtos - (Serviços);
\u2022 deseja dar destaque para os clientes e os casos já realizados - (Clientes);
\u2022 quer deixar um espaço para que o cliente entre em contato - (Fale conosco).
 De maneira bem simples, descrevi e organizei o que seria um agrupamento 
dos assuntos relacionados. Agora vamos ver esses mesmos procedimentos sob uma 
nova estrutura, observe a figura 1.
 Figura 1 \u2013 Mapa do site.
 Construa sempre um mapa, pense num esquema estrutural, como um fluxo-
grama, por exemplo, o que ajudará você a entender melhor o todo do site.
 Perceba que as ligações principais são feitas sob a forma de agrupamentos e 
as linhas tracejadas são links existentes entre os núcleos \u2013 no exemplo da figura 1, a
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
10
página contato. Essa é uma página importante para que o cliente tenha aproximação 
com a empresa, por isso, muitas páginas têm links diretos com ela.
Lembre-se: quanto maior o website, mais complexa será sua arquitetura de 
informação.
1.2 Wireframes: o esqueleto do site 
 Arame \u2013 essa é a definição mais próxima do que significa wireframe. Com esse 
método desenha-se o conceito, estrutura-se o resultado do briefing. Você deve pensar 
e esquematizar em que posição estará o menu, a busca, o conteúdo, a logo. É a fase 
em que você testará a organização do conteúdo a ser apresentado na página, o todo. 
Ainda não estamos falando de estilo visual, nem de cores, nem de imagens, mas de 
disposição de conteúdo. Esse é o primeiro passo antes de iniciarmos o desenvolvim-
ento do design gráfico da página.
 Para esse procedimento, podemos utilizar papel e lápis (figura 2). Como nes-
sa fase não estamos falando de cores, mas de conteúdo, devemos utilizar tons de 
cinza (variação do preto até o branco) para destacar a importância das áreas (figura 
3). Quanto mais escuro, mais importante. (Isso não é uma regra, mas pode ajudar).
 Na criação das propostas, logo após, criamos os melhores desenhos em 
qualquer ferramenta gráfica (figura 4). Se você achar melhor, pode ser o Paint 
Brush, o Corel Draw, o Fire Works. Na verdade, você deve utilizar uma ferramen-
ta em que possa desenhar linhas, textos e posicioná-los da forma que quiser.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
11
 Figura 2 \u2013 Wireframe \u2013 Caneta e Papel
 Fonte: site www.radiouniao.fm.br
 Figura 3 \u2013 Wireframe Digital
 Fonte: site www.radiouniao.fm.br
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
12
 Figura 4 \u2013 Site Final
 Fonte: www.radiouniao.fm.br
Dicas para projetar um bom \u201carame\u201d
 » Desenhe sempre pensando no tamanho das áreas em pixel, ou seja, pro-
porcional ao layout final, pois estamos falando de websites;
» Use textos o mais próximo possível do conteúdo, não escreva nononononon ou 
xxxxxxxx, isso fará com que o texto pareça falso. Existe um texto muito utilizado pe-
los designers que é o \u201cLorem ipsum dolor set amet\u201d, utilize-o para conteúdo de texto, 
não para títulos, que devem se aproximar ao máximo do real;
» Cuidado com a rolagem vertical, se você definiu áreas mais importantes na pági-
na inicial, não as deixe abaixo da rolagem.
Felipe Memória - o designer que reformulou todo o site da globo.com - em seu livro 
Design: projetando a experiência perfeita (2006), comenta que a estrutura mais uti-
lizada no mundo ocidental se aproxima do que mostramos na Figura 5.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
13
 Figura 5 - Padrão de layout definido por Felipe Memória
 Preste atenção: isto é uma convenção não uma regra, mas para sites cujo 
objetivo seja a simplicidade e a correta comunicação, serve como uma luva.
 Para mostrar que nem tudo que é fora das convenções é ruim, seguem ima-
gens de sites fantásticos, cuja estrutura convencional pode ser muito bem explorada 
com um projeto gráfico diferenciado.
 A Figura 6 mostra o site da Selbetti Gestão de Documentos, cuja navegação 
interna, do lado direito, e o menu, do lado esquerdo, fogem ao padrão tradicional, mas 
não comprometem a navegação e a organização. A logomarca, assinatura e o con-
teúdo do site mantêm o padrão.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
14
 Figura 6 - Site da empresa Selbetti
 Fonte \u2013 www.selbetti.com.br
 Figura 7 - Site do Cantor Cubano Odín
 Fonte - www.odinmudic.com
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
15
A Figura 7 demonstra que a navegação horizontal, no topo, permite liberdade ao con-
teúdo exposto, com a logomarca centralizada. A navegação interna das páginas segue 
pelo lado esquerdo.
 Figura 8 - Adobe 
 Fonte \u2013 www.adobe.com.br
 A Adobe (Figura 8), hoje uma das maiores empresas de software para com-
putação gráfica e desenvolvimento web, tem o seu layout como padrão estabelecido. 
A logo, navegação vertical e a área de pesquisa seguem o padrão. Mostra a barra su-
perior completa, assinatura no rodapé, os links principais do site, além de informações 
sobre a empresa.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
16
 Figura 9 - Café Colombo
 Fonte \u2013 www.cafecolombo.com.br
 O Café Colombo é um site mais voltado ao cultural, com artigo e podcasts (Pod-
cast é uma publicação de uma entrevista, programa de rádio, leitura, etc. em formato de áudio.) (Figura 
9) Apresenta-se graficamente com um estilo diferente, mas a sua estrutura é a mesma 
do padrão definido por Memória. Perceba, em suas navegações, que esse padrão fa-
cilita a navegação do usuário que não precisa \u201ctentar\u201d entender o site, apenas busca 
nas áreas convencionadas o que realmente deseja.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
17
 Figura 10 - Ipod Nano
 Fonte - http://www.apple.com/br/ipodnano/
 Podemos observar, na figura 10, que a Apple, uma das empresas vanguardistas 
em tecnologia, também não foge à regra. A logo, navegação