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
SOCIESC - Sociedade Educacional de Santa Catarina 
29
seguem alguns deles:
a) Proximidade - Se algo é da mesma família, assuntos, imagens etc., devemos 
aproximá-los. Caso contrário, se forem assuntos diferentes, devemos separá-los.
b) Alinhamento - Para alguns estudiosos devemos criar uma malha (como uma ma-
triz) para distribuir logicamente o conteúdo. É um exercício bem útil para você que 
está iniciando. Veja exemplos de malhas em sites conhecidos:
c) Repetição - A repetição faz com que você referencie rapidamente algo da mesma 
família. Por exemplo, se temos um ícone para fotos \u2013 uma máquina digital \u2013 que se 
repete várias vezes, já clicamos em um ou dois deles e sabe-mos que nos leva a uma 
página só de fotos. Claro que, se eu observar mais vezes esse ícone, sempre associa-
rei com a página extra de fotos, por isso, cuidado com a similaridade dos ícones para 
não causar o que chamamos de ruído na comunicação.
d) Proporção - Se você colocar um título em tamanho 15px, o link ao lado \u2013 próximo, 
com a mesma cor e tamanho 15px \u2013 o usuário vai acreditar que os dois são links, ou 
os dois são títulos.
 Portanto, tamanhos de áreas, fontes, imagens, etc., são sim uma forma de i-
dentificar famílias. Cuidado para não confundir o seu usuário.
1.3.2 Estudo de aplicação dos conceitos gráficos
 Vamos verificar o site a seguir (figuras 13 e 14) e a análise que podemos faz-
er:
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
30
 Figura 13 - Globo Esporte \u2013 Site do portal globo.com
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
31
Figura 14 - Portal G1 \u2013 Globo.com e seu portal de notícias
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
32
 Analisando as figuras 13 e 14, podemos observar, em duas páginas diferen-
tes, uma de esportes e outra de notícias gerais, que a estrutura é igual, muda a iden-
tidade de cada uma.
 Vamos analisar os pontos enumerados nas imagens:
» 0 \u2013 A logomarca da página está na mesma área, ou seja, ao mudar de página, o 
usuário sabe exatamente onde está.
» 1 \u2013 A Busca está EXATAMENTE no mesmo formato e posição, fazendo com que o 
usuário se familiarize com o ambiente.
» 2 \u2013 O menu interno sofre pequenas alterações. Na página de notícias se torna 
complicado criar muitos níveis de diferenciação, já na página de esportes as funções 
são agrupadas \u2013 no exemplo, um dos grupos é de campeonatos.
» 3 \u2013 A barra principal de navegação é horizontal e padrão. Tem a função de mostrar 
ao usuário onde ele está. Lembram-se quando comentamos sobre onde estou? Pois 
bem, as cores dos botões dessa navegação vão dar o tom das páginas internas. 
Como você pode perceber, o link da página de notícias é vermelho, e o fundo da 
página é vermelho. Na página de esportes é verde, como no link.
» 4 \u2013 O conteúdo encontra-se na mesma posição e com as mesmas dimensões. O 
conteúdo sofre alterações, mas o formato não.
» 5 \u2013 A área do plantão segue a mesma estrutura e posicionamento e se adapta à 
cor de cada área. Quando olhamos para esse tipo de estrutura, sabemos que se tra-
ta das últimas notícias.
Síntese da Aula
 Nesta aula verificamos a existência de elementos da identidade visual e anali-
samos os diferentes tipos de reprodução das cores, o significado psicológico e sua 
aplicação em códigos.
 Analisamos também as variações que existem entre as diferentes tipografias 
e conhecemos características gráficas, que auxiliam na estruturação de um layout, 
analisando todos os tópicos em dois sites de grande acesso. 
 Na próxima aula estudaremos sobre arquivos e tipos de imagens.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
33
Exercícios Propostos
1) Defina o que é identidade visual.
2) Quais são os tipos de sistemas de cores e onde usá-los?
3) O que são Serifas?
4) Com base no item 2.2, encontre um site e faça as análises e encontre os números 
de 0 a 5 (se existirem todos).
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
34
Aula 3
Fundamentos Sobre Imagens
Objetivos da aula 
 Ao final desta aula, você deverá ser capaz de:
\u2022 Identificar imagens raster;
\u2022 Identificar imagens vetoriais;
\u2022 Investigar sobre a utilização dos diferentes tipos de arquivo de 
imagens;
\u2022 Produzir imagens adequadas a diversas finalidades.
Conteúdos da aula 
 
 Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
\u2022 Raster vs Vetorial;
\u2022 Imagens na Web;
\u2022 GIF;
\u2022 JPG;
\u2022 PNG;
\u2022 Utilização das imagens;
\u2022 Profundidade de cor;
\u2022 Formato de Arquivos.
Prezado(a) Aluno(a)!
Vamos definir algumas premissas para o nosso trabalho: 
Partamos do ponto que para se trabalhar com computação gráfica 
é necessário conhecer, no mínimo, como funcionam as imagens e 
seus tipos. Pronto, agora você entendeu por que vamos estudar os 
temas seguintes.
Boa Aula!
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
35
1 INTRODUÇÃO 
 Anos atrás, a Web não passava de texto na cor preta sobre um fundo cinza. As 
poucas imagens demoravam \u201ctrês semanas\u201d para carregar, um pão francês custava 
dois centavos e eu tinha que caminhar na lama quando chovia para ir à escola. Os 
tempos mudaram, o pãozinho se cobra pelo peso e a Web tornou-se um lugar onde 
os visitantes esperam encontrar imagens profissionais.
 Se você não souber como tirar vantagem do potencial da Web, a história vai se 
repetir: Sua página levará três semanas para carregar e você vai receber um bilhete 
para ser entregue aos seus pais convidando-os a uma reunião de pais e mestres, para 
falar sobre o seu \u201cmau rendimento em aula\u201d, pois não assimilou nada do que deveria 
aprender sobre os assuntos até aqui ministrados!
 O primeiro passo para você entender como criar e gerenciar gráficos para a 
Web é compreender o que propriamente são as imagens. As imagens eletrônicas são 
feitas de milhares de pequenos pontinhos coloridos chamados de \u201cpixels\u201d. Os pixels 
são tão pequenos que um deles sozinho não pode ser captado pelo olho humano, por 
isso eles dão a ilusão de uma imagem contínua. É assim que todas as imagens que 
você vê em seu computador funcionam. Claro, você já olhou na tela da TV com uma 
lupa quando era criança. Se não, vá e faça isso agora mesmo.
 Algumas telas têm pontos, outras têm linhas, mas o princípio é o mesmo. En-
tão, continue lendo e eu vou ajudar a preparar você para manejar seus pixels corre-
tamente.
2 RASTER X VETORIAL 
 A possibilidade de utilizarmos imagens, gráficos, desenhos e textos artísticos 
nas nossas publicações revolucionaram a forma da escrita tradicional. Uma publica-
ção, atualmente, cativa o leitor pelo seu charme natural, sua descontração para a 
leitura e a facilidade de assimilação do conteúdo. As imagens ajudam muito para esta 
nova atitude. A qualidade do gráfico depende da sua resolução.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
36
 Resolução. A resolução ou nitidez gráfica é medida pelo número de pon-
tos ou pixels - elementos de figura - que podem ser colocados em uma polegada 
quadrada (dots per inch, ou DPI).
 Apesar da variedade de formatos de arquivos gráficos, todos caem em uma 
dentre duas categorias: mapas de bits ou imagens e gráficos de vetor ou line art.
 A arte de mapa de bits é composta de milhares de pequenos pontos e os de-
senhos de vetor compreendem linhas calculadas por fórmulas matemáticas. Os grá-
ficos