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
\u2022 Identificar a aplicabilidade de diferentes tipografias;
\u2022 Distinguir elementos gráficos.
Conteúdos da aula 
 
 Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
\u2022 Identidade Visual
\u2022 Cores
\u2022 Tipografia
\u2022 Gráficos
Prezado(a) aluno(a)!
Já temos o esqueleto \u2013 o wireframe. Temos os órgãos 
\u2013 o briefing. Agora precisamos da musculatura e da pele.
Parece papo de cientista maluco, tipo Frankenstein ou Eduard´s-
mãos-de-tesoura, mas vamos realmente dar uma cara adequada 
ao projeto, vamos dar vida ao que já planejamos.
Boa aula!
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
24
1 IDENTIDADE VISUAL
 Assim como o seu documento de identidade \u2013 o RG \u2013 o(a) identifica, a marca, 
ou conceito gráfico é a identidade da empresa, organização, instituição de ensino, 
etc. A identidade visual é importante para o projeto web, pois trata da adequação aos 
padrões da empresa e permite que o cliente, ao acessar o site, não encontre outra 
empresa e que faça a ligação do mundo real com o virtual.
 A maioria das empresas possui marcas e elementos definidores de sua iden-
tidade visual \u2013 representação constante nos sites \u2013, indicativo de que a empresa que 
está no site é a empresa que está na rua.
 Veja-se o exemplo da Tim, Fiat, Ipiranga ou Nike. Todas têm a sua marca e um 
identidade que se compõe de elementos diferentes, mas com uma gama de possibili-
dades muito parecidas.
 Alguns elementos que formam essa identidade vão ser abordados, ainda que 
superficialmente, a seguir:
1.1 Cor
 Cores são elementos de identificação, mas, algumas vezes, podem fazer com 
que seus usuários fujam do site.
 Inconscientemente nos sentimos bem com algumas cores e mal com outras, 
depende do usuário, porém, podemos criar algumas regras para que isso não fuja 
tanto dos padrões.
 Verifique nesses dois sites possibilidades de combinação de cores interes-
santes para se utilizar.
» http://wellstyled.com/tools/colorscheme2/
» http://kuler.adobe.com/
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
25
 Significados de cores (Convenções)
 » Preto: muito mórbido para ser usado como plano de fundo na Internet, mas 
é válido de acordo com a idéia que será transmitida. De certa maneira representa 
requinte, se combinado a outras cores como tons pastéis, mas ainda assim é muito 
pesado.
» Branco: cor básica, suaviza o layout e combina muito bem com cores claras ou 
escuras. Ideal para plano de fundo.
» Vermelho: transmite calor, vida, inovação. Chama a atenção para o tema.
» Azul: passa certa seriedade, confiança, calma e é uma cor que consegue expres-
sar \u201ctecnologia\u201d.
» Pastel: cores delicadas, ideal para sites femininos, de culinária, ou sites sobre 
antiguidades.
» Laranja: jovialidade, positividade, vida, muito bom para sites teen e lazer, assim 
como o amarelo e o rosa.
» Verde: ideal para sites de saúde, medicina, natureza.
 Nos computadores, as cores são representadas por números hexadecimais e 
podem ser RGB, CMYK (figura 11) e tabelas específicas como a PANTONE.
 
 Figura 11 - Cores aditivas [a] e Subtrativas [b]
 As cores que utilizamos para a Internet são RGB \u2013 cores aditivas. Com a soma 
das três cores (red, green, blue) chega-se ao branco, ao contrário do CMYK \u2013 cores 
subtrativas (cyan, magenta, yellow) \u2013 cuja soma nos dá o preto (K).
 Cores aditivas são aquelas cuja soma de TODAS as cores do espectro nos dá
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
26
a cor branca, ou seja, essas cores são emissoras de luz, pois são utilizadas em moni-
tores, televisões, celulares e todos os tipos de monitores de imagem. As subtrativas 
são as reflexivas, pois somadas chegam à cor preta. São utilizadas em impressões 
como livros, revistas, cartazes, etc. 
 Pense nos sistemas de cores aditivos como as cores que são luz e as sub-
trativas, que não são luz. Se você estiver em uma sala sem nenhuma luz, nenhuma 
mesmo, e estiver vendo uma cor, ela está num sistema aditivo. Caso você nada veja, 
então é subtrativo, pois precisam de luz para poder existir.
 Falando em luz, você já viu uma luz negra? 
 Observe:
 » PRETO = RGB #000000 e CMYK 100,100,100,100
 » BRANCO = RGB #FFFFFF e CMYK 0,0,0,0
 » VERDE = RGB #00FF00 e CMYK 100,0100,0
 » ROSA = RGC #CC6666 e CMYK 0, 40, 20, 0
Definição
 » RGB = Red, Green & Blue \u2013 Vermelho, Verde e Azul
» CMYK = Cian, Magent, Yellow & Black \u2013 Ciano, Magenta, Amarelo e Preto
1.2 TIPOGRAFIA
 Conhecidas como fontes, a tipografia é uma família de caracteres com um de-
senho particular, ou seja, todas as letras são representadas seguindo um mesmo 
estilo.
 Para a Internet, temos que tomar cuidado, pois fontes \u201cdiferentes\u201d podem não 
estar instaladas no computador do usuário, o que implica na utilização de fontes con-
sideradas padrão como a Arial, Verdana, Tahoma e Times New Roman.
 As fontes podem ser encontradas em sites, mas a maioria das fontes de qua-
lidade é paga, você precisa comprá-las para poder utilizá-las.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
27
 Seguem alguns links para encontrar fontes interessantes:
 » www.dafont.com
» www.fontface.com
» www.1000fonts.com
Principais famílias de fontes:
 » Serifadas (ex.: Times new Roman, Geórgia, Courrier New): possuem ares-
tas nas extremidades das letras. São adequadas para impressão, mas não para 
corpo de texto na web. No caso de títulos ou textos de tamanhos grandes, oferecem 
elegância.
» Não serifadas (ex.: Arial, Tahoma, Verdana, Trebuchet MS): são as mais adequa-
das para a leitura on-line, a maioria possui alta legibilidade.
» Cursivas (ex.: Monotype Cursiva, Staccato): são fontes que apresentam o estilo 
manuscrito;
» Fantasy (ex.: Comic Sans): são fontes decorativas, com o intuito apenas de en-
feitar. Cuidado ao usá-las. Normalmente são mais usadas para desenvolver logoti-
pos.
 
 A figura 12 apresenta algumas tipografias que se enquadram nas nossas de-
finições:
 Podemos observar que os números 1 e 2 são fontes serifadas, comparadas, 
apresentam uma diferença bem acentuada. Já os números 6 e 7 são fontes sem se-
rifa, ou ainda, bastões.
 As fontes 3 e 4 são semiserifadas, têm elementos de serifa, mas não se com-
portam totalmente assim.
 Como forma script temos as de número 4 e 5. Veja que a 5 deriva da marca de 
um seriado para TV, você adivinha qual?
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
28
 As tipografias são opostas, mas do mesmo grupo. Elas são decorativas e a 
primeira é relacionada ao passado e a segunda ao futuro.
1.3 GRÁFICOS
 Nem só de textos vivem os sites, afinal, imagens também são conteúdo. O uso 
de gráficos deve ser adequado ao contexto. Imagens usadas como detalhes de layout 
devem ajudar a ilustrar a interface e envolver as pessoas. Ícones e símbolos ajudam a 
referenciar e a identificar a informação visualizada ou requerida. Por exemplo: ícones 
de impressão, botão fechar, \u201ccasinha\u201d (ir para a página principal), ícone de áudio e/ou 
vídeo, marcadores de listas, etc.
1.3.1 Estrutura Gráfica
 A \u201cGestalt\u201d, ramo da psicologia que compreende a teoria da percepção visual, 
baseia-se na psicologia da forma e é uma fonte de estudos bem interessante, talvez 
a única, que nos sugere um conceito mais próximo de como devemos criar padrões 
visuais. Alguns deles podem parecer óbvios, mas muita gente esquece, portanto
Comunicação Visual Para WEB