01/01/2021 Comunicação visual para web

(#myCarousel)

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 1/24

01/01/2021 Comunicação visual para web

COMUNICAÇÃO VISUAL PARA WEB

A comunicação visual para web está relacionada com o uso de cores e de
imagens de maneira correta. Essa comunicação visual deve considerar padrões
estabelecidos com relação ao desenvolvimento de sites.

O uso de cores e imagens na web é muito importante, pois elas são

utilizadas não apenas para a criação de sites visualmente interessantes e
bonitos, mas também para informar, divertir e despertar o interesse dos
usuários.

Para construir uma imagem ou deixá-la de acordo com a nossa necessidade,

devemos utilizar softwares desenvolvidos para esse propósito específico.
Atualmente há uma variedade de opções de softwares que trabalham com edição de
imagens. Nessa unidade curricular, as rotinas de edição de imagens serão
desenvolvidas a partir do GIMP.

O GIMP é um software livre, multiplataforma e disponível para GNU/Linux,

Windows e OS X. Esse software oferece ferramentas sofisticadas para edição de
imagens, as quais podem ser utilizadas por ilustradores, fotógrafos ou designers
gráficos. Essa qualidade acontece a partir de uma variedade de plug-ins.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 2/24

01/01/2021 Comunicação visual para web

CONCEITOS E PRINCÍPIOS DE
IMAGEM DIGITAL
Para compor uma versão da imagem utilizável pelo computador, os tons
precisam ser convertidos para o formato digital. O processo envolve a leitura
da imagem em intervalos regulares e a atribuição de cor e brilho específica para
cada amostra (Andrews, 2002). Com isso, uma grade de cores e tons é criada
de forma que, quando as corem forem vistas a distância, aparecerão como a
imagem ou a cena original. Cada seção de grade individual é chamada de
elemento de imagem, ou pixel.

Podemos inferir que, para obtermos uma imagem com qualidade digital,
são necessários dois fatores: o número de pixels - que influi na quantidade de
detalhes - e o número de cores - que define a faixa reproduzida na imagem.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 3/24

01/01/2021 Comunicação visual para web

PIXELS E RESOLUÇÃO
O termo pixel deriva do elemento de imagem, sendo pix uma
abreviação da palavra picture. Pode ser constituído como o menor elemento
de uma imagem.

Esse elemento pode receber uma cor e, neste caso, não

se refere estritamente a uma composição de uma imagem
totalmente colorida, pois uma foto em branco e preto ainda
apresenta várias tonalidades da escala de cinza - do preto ao
branco. Podemos afirmar que um pixel é o menor ponto de
formação de uma imagem digital.

A resolução de vídeo refere-se à definição da imagem a ser mostrada

em uma tela. A unidade padrão que utilizamos para as medir esse tipo de
resolução, são pontos por polegadas. A partir daí podemos exemplificar
como um monitor exibe uma resolução de 800x600; isso significa a exibição
de 800 pontos, em sentido horizontal, e 600 pontos, em sentido vertical.
Esse conceito é aplicado para qualquer outro valor. Portanto, quanto maior a
resolução do monitor, melhor a definição da imagem.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 4/24

01/01/2021 Comunicação visual para web

BITMAP E VETOR
Uma imagem gráfica, composta por elementos de imagem ou pixels,
em um grid, significa que cada pixel contém informações de cor. Um bitmap
é essencialmente uma ilusão de ótica, pois são vários pixels dispostos em
conjunto, representando uma imagem. A qualidade dessa imagem depende
da quantidade de pixels, sendo caracterizado, portanto, como resolução da
imagem.

Os gráficos de bitmap não podem ser ampliados porque

têm uma resolução fixa, ou seja, quando você redimensiona a
imagem, ela pode ficar distorcida e irregular. Qualquer
ampliação causará redução da qualidade da imagem.

Um vetor é feito de muitos objetos individuais, os quais podem ser

ampliados. Definidos então por uma fórmula matemática e não por pixels, o
que os torna ampliáveis ou de resolução independente. As fontes, por
exemplo, são vetores. A principal desvantagem de um vetor é não ser
adequado para reproduzir imagens realistas, porque não consegue
descrever os tons contínuos e sutis de uma fotografia.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 5/24

01/01/2021 Comunicação visual para web

PRODUÇÃO DE IMAGENS BITMAP

As imagens bitmap são produzidas por escâneres ou programas como
o Photoshop, por exemplo. São maiores que as imagens vetoriais e não
podem ser redimensionadas além do seu tamanho original, podendo ser
recomendada a sua ampliação máxima em até 20%. Dependendo da
ampliação, perdem suas características. São formadas pelos pequenos
quadrados dos pixels ou por pontos. A qualidade de sua impressão é
determinada principalmente pela resolução da imagem.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 6/24

01/01/2021 Comunicação visual para web

MODOS DE COR
Um modo de cor determina como um modelo de cor será usado para exibir
e imprimir mensagens. O modo RGB (Red, Green e Blue) é representado pela
mistura das cores vermelho, verde e azul em diferentes proporções e
intensidades. Esse modo é o mais utilizado atualmente, pois ele atribui valores
entre 0 e 255 a cada componente, os quais podem ser representados no
formato decimal ou hexadecimal.

• O branco puro é obtido para R=255 G=255 B=255, ou seja, 255,

255, 255.

• O verde é representado por 0,255,0 e assim por diante. Com essas

três cores básicas é possível reproduzir 16,7 milhões de cores.

• O modo grayscale representa tonalidades do cinza, feito com base

no brilho dessas cores, sendo encontrados 256 tipos de tom de cinza.

• O modo bitmap utiliza os padrões de preto e branco.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 7/24

01/01/2021 Comunicação visual para web

TIPOGRAFIA
Podemos definir tipografia como sendo um conjunto de procedimentos
artísticos, utilizando técnicas que abrangem as diversas etapas da produção gráfica,
portanto, desde a criação gráfica, passando pela diagramação, até o acabamento.
Na computação gráfica, cada um dos caracteres representa: letra do alfabeto,
número, sinal de pontuação, símbolo e outros.

O caractere tipográfico é normalmente parte de uma família de tipos com

design coordenado. Os tipos mais conhecidos, individualmente, pela família a que
pertencem são, por exemplo: o itálico, o negrito ou o condensado. O estilo itálico
pertence à família Times e é uma referência de um determinado tipo de fonte.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 8/24

01/01/2021 Comunicação visual para web

USO DE CAMADAS
Os primeiros programas de edição de imagem usavam um formato de
arquivo simples. Todas as informações do arquivo estavam contidas em um
único plano e todas as alterações eram feitas na imagem, sendo que ficavam
permanentes e armazenadas nesse arquivo. Não levou muito tempo para os
usuários e fabricantes de software perceberem que uma maneira mais eficiente
de trabalhar seria criando uma imagem, a partir de uma série de partes da
figura, cada qual contida em sua própria camada.

A aplicação de camadas acontece da seguinte forma:

quando uma imagem é criada pela primeira vez e aberta no
pacote de edição, por padrão, ela se torna o plano de fundo.
Todas as outras imagens ou textos que serão copiadas e coladas
na imagem, acabam se tornando uma camada mais alta e
visualizadas primeiro. As outras camadas e o plano de fundo
serão exibidos por meio das áreas transparentes de cada uma
das outras camadas.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/i… 9/24

01/01/2021 Comunicação visual para web

FILTROS
A aplicação de filtros tem como finalidade obter efeitos gráficos em um
elemento, os quais modificam a apresentação final. Os editores de imagens
possuem ferramentas nativas, destinadas à aplicação de filtros. Ao aplicar um
filtro são adicionados efeitos na imagem que manipulam seus pixels,
utilizando cálculos matriciais. De acordo com o tipo de filtro, os valores
numéricos, constantes dessas matrizes, são usados como fatores de cálculo,
os quais manipulam canais de cores RGB e afetam a opacidades de cada
pixel da imagem, produzindo um efeito.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 10/24

01/01/2021 Comunicação visual para web

PRODUÇÃO DE GRÁFICOS
VETORIAIS
Os elementos de gráficos vetoriais são compostos de linhas e curvas
definidas por objetos matemáticos chamados vetores. Eles conservam a nitidez
mesmo se movimentados, redimensionados ou se sofrerem alterações de
cores. A imagem abaixo apresenta a aplicação de vetor em uma imagem

inicialmente salva em JPEG, GIF ou PNG.

Gráficos vetoriais são apropriados para ilustrações, texto e elementos

gráficos, como logotipos que podem ser dimensionados em diferentes
tamanhos. Ao contrário do bitmap, os elementos gráficos vetoriais conservam
suas bordas nítidas, quando ampliados para qualquer tamanho.

Figura 01 – Aplicação de vetor na imagem

Fonte: Disponível em: <http://cristinajungdesign.blogspot.com.br/2013/02/svg-graficos-vetoriais.html>. Acesso
em: 10 abr. 2017.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 11/24

01/01/2021 Comunicação visual para web

TRANSFORMAÇÃO DE OBJETOS
A transformação de objetos gráficos consiste em mover (fazer a
translação) um objeto de uma posição para outra, dentro da área de criação
gráfica. A translação poderá ser segundo o eixo x, o eixo y ou ambos os eixos.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 12/24

01/01/2021 Comunicação visual para web

OTIMIZAÇÃO E EXPORTAÇÃO DE
IMAGENS PARA WEB
(JPG, GIF,PNG)
Existe uma variedade de formatos para salvar imagens, após a edição.
Conheça os principais:

JPG
O formato JPEG tem as suas extensões em .JPG ou .JPEG. Esse é
um formato lossy, normalmente utilizado para comprimir imagens
fotográficas com centenas ou até milhões de cores ou tons de cinza.
Esse formato comprime fotografia muito bem. Porém, não é a melhor
opção para textos, tabelas, gráficos e desenhos. Este formato não
suporta a técnica de transparência e animação.

GIF
O formato GIF suporta 8 bits color e tem compreensão baixa.
Geralmente utiliza como extensão .GIF. As imagens GIF suportam o
conceito de transparência, entrelaçamento e animação.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 13/24

01/01/2021 Comunicação visual para web

PNG
O formato PNG tem todas as características do formato GIF,
adicionando algumas vantagens, por exemplo, o uso da técnica de
transparência, o que permite o uso de mais de 256 cores e o suporte de
animação. O problema relacionado a esse formato é que ele pode
apresentar uma variação de cores de um sistema operacional para outro.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 14/24

01/01/2021 Comunicação visual para web

DESENVOLVIMENTO DE
WIREFRAME E PROTÓTIPOS
INTERATIVOS
O desenvolvimento do wireframe é considerado uma parte importante
quando tratamos de planejamento de desenvolvimento web. A utilização de
wireframe possibilita ao cliente visualizar, de maneira detalhada, quais são as
ideias do desenvolvedor ou do analista. A sua construção pode surgir de
esboços feitos em papel ou a partir do uso de ferramentas gráficas mais
sofisticadas. Podemos definir wireframe como sendo uma estrutura de uma
página web, ou seja, um planejamento e um projeto de como ficará o layout de
uma página web.

Geralmente é o primeiro passo no processo de design (depois da

concepção mental, obviamente). Basicamente o wireframe deve incluir todas
as informações pertinentes ao desenvolvimento de site. Incluindo o que deve
aparecer no cabeçalho, no rodapé e nas demais áreas do site.

Outra etapa que devemos levar em consideração durante o

desenvolvimento do projeto de site é o desenvolvimento de protótipos. Assim
como wireframe, protótipos são layouts que servem como preview das algumas
funcionalidades do site. Essa fase é desenvolvida antes da programação do
site, portanto na fase de planejamento.

Enquanto eles não podem ter toda a funcionalidade, eles geralmente

fornecem aos clientes a capacidade de interagir com os elementos e simular a
forma como o site irá, eventualmente, trabalhar. Protótipos podem ou não
incluir elementos de design finalizado.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 15/24

01/01/2021 Comunicação visual para web

Figura 02 – Wireframe
Fonte: Disponível em: <http://desenvolvimentoparaweb.com/ux/wireframe-web-guia-completo/>. Acesso em: 10 abr. 2017.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 16/24

01/01/2021 Comunicação visual para web

DESENVOLVIMENTO DE LAYOUT
O layout consiste na apresentação e disposição dos elementos em um
documento ou site na internet. Na maioria das vezes define o sucesso ou não de
um site, pois no layout estão definidos conceitos como por exemplo: de
usabilidade. O conceito de usabilidade deve permitir que o visitante possa
encontrar com facilidade o que procura. O conceito de acessibilidade define
recursos que visam permitir o acesso ao conteúdo e/ou à informação.

O conceito de tableless é muito usado no desenvolvimento de layout. Ele

consiste na criação de layouts sem uso de tabelas (Table = Tabela e Less = Sem)
para disposição de conteúdo. Todo o desenvolvimento acontece através de códigos
HTML utilizando de DIVs.

Os layouts podem ser classificados a partir de dois critérios: número de

colunas e largura de página. O critério de largura de páginas é considerado o mais
importante. Vamos conhecer quais são eles:

Clique ou toque para visualizar o conteúdo.

LARGURA FIXA

LARGURA FIXA
A página e seus componentes tem largura fixa, normalmente definida em
pixel. Esse tipo de layout não se acomoda ao tamanho de janela e à resolução
do monitor. As desvantagens desse tipo de layout estão representadas pelo

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 17/24

01/01/2021 Comunicação visual para web

mau aproveitamento do espaço horizontal em altas resoluções, e a

necessidade de rolagem horizontal em resoluções abaixo da largura definida
(Samy Silva, 2015).

Figura 03 – Layout Fixo

Fonte: THE SMASHING NEWSLETTER TEAM, 2017.

LÍQUIDO OU FLUIDOS

LÍQUIDO OU FLUIDOS

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 18/24

01/01/2021 Comunicação visual para web

As larguras são definidas em porcentagem. Esse tipo de layout se

acomoda em qualquer tamanho de janela e resolução do monitor.

As desvantagens desse tipo de layout estão relacionadas diretamente

com o comprimento das linhas de texto. Em tamanhos de janela menores,
especialmente nos layouts multicolunares, as larguras das colunas podem ser
reduzidas a comprimentos mínimos dificultando a leitura (Samy Silva, 2015).

Responsivos: o layout responsivo pode ser

considerado fluido, porém tende a responder ao tamanho
da tela do usuário, enquanto que o layout fluido, flui
conforme o tamanho da tela.

Figura 04 – Layout Fluido

Fonte: THE SMASHING NEWSLETTER TEAM, 2017.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 19/24

01/01/2021 Comunicação visual para web

ELÁSTICO OU
HÍBRIDO

ELÁSTICO OU HÍBRIDO
Esse tipo de layout segue o mesmo padrão do líquido com medidas em
porcentagem, porém há limitação de largura máxima e mínima, com medidas
em pixel.

Em função da variedade de dispositivos conectados à internet, grande parte

dos desenvolvedores optam pelo desenvolvimento de layouts líquidos, em função
da fácil adaptação e das diversas resoluções e tamanhos de tela.

Neste conteúdo abordamos o tema da comunicação visual para web. Para fundamentar
esse assunto, foram apresentados os principais conceitos relacionados a essa temática e

também as principais ferramentas que compõem um software de editoração gráfica.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 20/24

01/01/2021 Comunicação visual para web

Veja a seguir o vídeo das

ferramentas abordadas neste conteúdo.

Neste conteúdo abordamos o tema

da comunicação visual para web. Para
fundamentar esse assunto, foram
apresentados os principais conceitos
relacionados a essa temática e também
as principais ferramentas que compõem
um software de editoração gráfica.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 21/24

01/01/2021 Comunicação visual para web

LARGURA FIXA

A página e seus componentes tem largura fixa, normalmente definida em

pixel. Esse tipo de layout não se acomoda ao tamanho de janela e à resolução
do monitor. As desvantagens desse tipo de layout estão representadas pelo
mau aproveitamento do espaço horizontal em altas resoluções, e a necessidade
de rolagem horizontal em resoluções abaixo da largura definida (Samy Silva,
2015).

Figura 03 – Layout Fixo

Fonte: THE SMASHING NEWSLETTER TEAM, 2017.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 22/24

01/01/2021 Comunicação visual para web

LÍQUIDO OU FLUIDOS

As larguras são definidas em porcentagem. Esse tipo de layout se

acomoda em qualquer tamanho de janela e resolução do monitor.

As desvantagens desse tipo de layout estão relacionadas diretamente com

o comprimento das linhas de texto. Em tamanhos de janela menores,
especialmente nos layouts multicolunares, as larguras das colunas podem ser
reduzidas a comprimentos mínimos dificultando a leitura (Samy Silva, 2015).

Responsivos: o layout responsivo pode ser

considerado fluido, porém tende a responder ao tamanho
da tela do usuário, enquanto que o layout fluido, flui
conforme o tamanho da tela.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 23/24

01/01/2021 Comunicação visual para web

Figura 04 – Layout Fluido

Fonte: THE SMASHING NEWSLETTER TEAM, 2017.

ELÁSTICO OU HÍBRIDO

Esse tipo de layout segue o mesmo padrão do líquido com medidas em

porcentagem, porém há limitação de largura máxima e mínima, com medidas
em pixel.

https://senac.blackboard.com/bbcswebdav/pid-6357130-dt-content-rid-64404581_1/institution/Senac RS/INF/UC15/conteudos/conteudo/visual/… 24/24