Comunicação Visual para Web I AULA 1

Prévia do material em texto

Aula
01Comunicação Visual para Web - UNIGRAN
DESIGN NA WEB
Caros(as) alunos(as), nessa aula veremos a importância do design 
aplicado na web e os conceitos que constituem esta área multidisciplinar. 
Se ao final desta aula tiverem dúvidas, vocês poderão saná-las através das 
ferramentas “fórum” ou “quadro de avisos” e “chat”.
Comecemos, então, analisando os objetivos e verificando as 
seções que serão desenvolvidas ao longo desta aula.
Bom trabalho!
Objetivos de aprendizagem
Ao final desta aula, vocês serão capazes de:
• entender a definição de Design e Web Design;
• conhecer os principais conceitos sobre a Teoria de Gesltalt;
• aplicar os conceitos das Leis da Gestalt para construir leiautes;
• possuir embasamento teórico para construir pecas gráficas para 
ambientes digitais.
11
Comunicação Visual para Web - UNIGRAN
Seções de estudo
• Seção 1 - Projetando Websites
• Seção 2 – Design na Web
• Seção 3 – Gestalt
• Seção 4 - Gestalt Aplicada na Web
• Seção 5 - Leis da Gestalt
Seção 1 – Projetando Websites
Para criamos um web site, é necessário fazer um levantamento de todas as 
informações pertinentes ao projeto por meio de um questionário chamado Briefing. 
A análise desse questionário nos permite identificar corretamente os objetivos 
do projeto; perfil do público-alvo assim como suas necessidades e definição do 
planejamento estratégico para atingir as metas estabelecidas. 
Definidos os objetivos do site, Público-alvo e o Planejamento Estratégico, 
é necessário projetar a estrutura do site, ou Arquitetura da Informação. Nessa fase é 
importante a observância e o emprego de conceitos de Usabilidade e Acessibilidade 
para que a estrutura do site seja fácil e intuitiva, permitindo ao usuário encontrar 
facilmente as informações ou serviços desejados. 
Após definirmos como as informações serão arquitetadas, é hora de 
iniciarmos o projeto de leiaute que nada mais é que a concretização de todas as 
outras etapas e conceitos que constituem um projeto de web site, pois o leiaute é o 
elo de comunicação com o usuário, por isso é uma das fases mais importantes do 
projeto. Assim, é de suma importância que a imagem que o leiaute transparece seja 
de acordo com os objetivos e a imagem editorial pretendida. 
Jakob Nielsen relata sobre a experiência do usuário na web, e aponta 
que os internautas gastam 1 minuto e 49 segundos visitando um website antes de 
decidir abandoná-lo.
 “Você tem menos de dois minutos para se comunicar na primeira vez em 
que um potencial cliente visita seus Website. Este é o fato básico sobre a experiência 
Web: no que diz respeito a usuários, cada página deve justificar sua importância 
quando chamada. Se uma página não fizer isso imediatamente e de maneira clara, 
eles vão para outros sites.” (NIELSEN, LORANGER; 2007 p. 21)
12
Comunicação Visual para Web - UNIGRAN
Outro dado interessante apontado por Nielsen é que um site tem apenas 
12% de probabilidade de ser revisitado, ou seja, depois de perder um usuário, quase 
sempre o perderemos para sempre (NIELSEN, LORANGER; 2007 p. 27). Quanto 
ao design Nielsen afirma que se este não for agradável o tempo de permanência do 
usuário em um site será pensando em qual o próximo site irá visitar. Tais dados 
nos denotam a importância do design e da usabilidade em um website, sendo estes 
os principais diferenciais de sucesso entre websites. Desta forma, a composição 
e disposição dos elementos em uma interface e a velocidade com que o usuário 
realiza uma ação, inferem no tempo de observação e permanência do usuário no 
web site. 
A infinidade de dispositivos de acesso, como: TV, celulares, monitores, 
assim como o uso de diferentes navegadores como: Firefox, Internet Explorer, 
dentre outros, desafia os projetistas a criarem sites que possam ser vistos em 
diferentes dispositivos e navegadores, sem que o leiaute apresente diferenças. Nos 
primórdios da web os sites eram projetados em tabelas, o que não é apropriado, pois 
hoje os profissionais projetam os sites em tableless, ou seja, sites projetados sem o 
uso tabelas conforme padrões sugeridos pela W3C. 
Vimos os principais conceitos que serão abordados para nas disciplinas de 
Comunicação Visual para Web I e II tais como: design, usabilidade, acessibilidade, 
navegação, cores, dentre outros temas que estão intrinsecamente relacionados 
para dar embasamento teórico para que vocês estejam aptos a projetar interfaces 
de sites e softwares eficientes e amigáveis ao usuário.
?
VOCÊ 
SABIA
Tabelas devem ser uƟ lizadas em um web site apenas para exibir dados 
tabulados, e não para projetar leiautes.
World Wide Web 
ConsorƟ um (W3C) é o 
órgão responsável por 
recomendar padrões 
de desenvolvimento 
para a internet. O 
grande objeƟ vo de 
seguir os padrões do 
W3C é de possibilitar 
que a informação 
veiculada pelo 
site permaneça 
independente do 
disposiƟ vo uƟ lizado 
pelo visitante e 
que seja acessível. 
(Disponível em: 
<hƩ p://pt.wikipedia.
org/wiki/W3C> acesso 
em 24/06/2013 às 
13h07.)
13
Comunicação Visual para Web - UNIGRAN
Seção 2 – Design na web
O dicionário Aurélio define o design como "concepção de um projeto 
ou modelo". Já o International Council of Industrial Design – ICSID, faz a 
seguinte definição: 
Design é uma atividade criativa cujo propósito é estabelecer um conjunto 
multifacetado de qualidades nos objetos, processos, serviços e sistemas na 
totalidade do seu ciclo de vida. (Disponível em: <http://www.icsid.org/about/
about/articles31.htm> acesso em 24/06/2013 às 8h57.)
Design é projetar conceitos, estabelecendo as qualidades dos objetos, 
equilibrando estética e funcionalidade, sendo fundamental para interação 
homem-máquina, humanizando as novas tecnologias. Em síntese o design 
são características que deixam um objeto cotidiano mais usável e desejável, 
combinando forma e função, qualidade e estilo, arte e técnica. A composição 
harmônica destas características diferencia o produto da concorrência, em 
particular, junto a consumidores mais exigentes. Na nossa cultura, o “belo” e 
a “estética” são supervalorizados, assim o design tornou-se vital e estratégico 
para a economia moderna. A empresa Apple é um bom exemplo em que o design 
foi determinante para o sucesso de seus produtos. O seu fundador Steve Jobs 
resume importância do design no mundo atual: "O design é a alma das criações 
humanas". (Disponível em: <http://veja.abril.com.br/260504/p_084.html> acesso 
em 24/06/2013 às 13h07.)
Os principais grupos de atuação do design são: 
• Design de Interfaces: profissionais habilitado a projetar interfaces 
gráficas de sistemas operacionais, softwares, games, animação 2D e 3D e web sites. 
• Design Gráfico: possui um campo de atuação muito amplo e envolvem 
tarefas como logotipos, identidades visuais, editoração de revistas, jornais, etc.
• Design de produto: profissionais habilitado a criar produtos industriais. 
Dentro de cada grupo existem várias subgrupos nas mais diversas áreas 
de atuação. 
No ambiente digital o design é fundamental para a capacidade de 
comunicação de um web site, entra em cena então o web design, que é uma 
extensão do design, cujos conceitos são empregados na construção de web 
sites e documentos disponíveis no ambiente da web. Web design é uma área 
multidisciplinar, pois utiliza conceitos de diferentes áreas como Arquitetura 
da Informação, Usabilidade, Acessibilidade, Navegação, dentre outros temas. 
Tais conceitos são importantes para projetarmos interfaces de sites e softwares 
eficientes e amigáveis ao usuário, permitindo que este atinja seus objetivos de 
forma intuitiva e agradável.
14
Comunicação Visual para Web - UNIGRAN
Segundo SILVA (2008) apud SANTAELLA (1993, p.11): “ [...] 75% 
da percepção humana é visual. A segunda em importância cabe ao ouvido, com 
20%, e aos demaissentidos, representados por olfato, paladar e tato, 5%. Fica 
evidente o domínio absoluto do sentido visual como elemento mediador das 
atividades do homem.”
Independente das áreas de atuação, cada qual com suas particularidades 
e especificidades, é fundamental o entendimento de alguns conceitos sobre 
percepção visual. 
Seção 3 – Teoria da Gestalt
A psicologia da forma, ou simplesmente Gestalt é uma teoria da psicologia 
que surgiu no final do século XIX na Áustria e Alemanha que possibilitou o estudo 
da percepção. A Gestalt trata-se de um processo, no qual ao observarmos um objeto 
damos forma e configuramos este. Por exemplo: A lermos as letras L.I.V.R.O não 
criamos em nossa mente apenas a palavra “Livro”, mas visualizamos a imagem 
de um livro, sua forma, textura, dentre outras características inerentes a aparência 
deste objeto, que não estão relacionadas simplesmente a palavra livro, mas sim a 
sua forma. Essa percepção que fazemos é a Gestalt.
3.2 Os principais conceitos da Gestalt são: Supersoma e Transponibilidade. 
Supersoma: segundo a teoria gestáltica, uma imagem é constituída pela 
integração de suas partes e não simplesmente a soma destas, opondo-se a soma 
do todo. "(...) "A+B" não é simplesmente "(A+B)", mas sim um terceiro elemento 
"C", que possui características próprias". [fonte Revista Mente e Cérebro, 179, pgs. 
88-93. Editora Duetto. São Paulo (dezembro de 2007)]. A aplicação deste conceito 
nos permite entender porque alguns leiautes são mais agradáveis que outros. 
15
Comunicação Visual para Web - UNIGRAN
Fonte: < http://www.ceebp.org/>
Transponibilidade: A forma de um objeto sempre se sobressai, 
independente dos elementos que o constituem. Observe as imagems seguintes:
O que você vê nas imagens? Três vasos. Correto! Um vaso sempre será um 
vaso independente se este for feito de porcelana, metal, madeira ou qualquer tipo de 
material, em consonância assim com o conceito de que a forma sempre se sobressai. 
Fonte: < https://www.google.com.br 
<imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Observe a obra do pintor italiano Arcimboldo.
O que vemos? O busto de um homem, certo? 
O princípio da teoria da Gestalt nos afi rma que o nosso cérebro visualiza primeiro um 
objeto por inteiro e depois as suas partes individuais. As relações entre os objetos, que 
neste caso são os livros, formam a silhueta do busto. Em um leiaute de web site acontece 
o mesmo, pois o vemos como um todo e não enxergarmos separadamente os elementos 
que compõe este leiaute, tais como: menus, caixa pesquisa, logomarca etc.
16
Comunicação Visual para Web - UNIGRAN
Seção 4 – Gestalt aplicada na web
Nosso cérebro cria relações e interações entre os elementos através de 
estímulos e princípios de organização perceptual. A percepção visual de um site, 
segundo a Gestalt, pode ser influenciada pela natureza do projeto, a mensagem que este 
remete, o posicionamento dos elementos visuais no leiaute (imagens, texto, animações, 
etc.), contraste de cores, configurações de texto (família tipográfica, corpo do texto, cor 
etc.), aspectos que influenciam na legibilidade e na clareza da mensagem. 
Para vocês entenderem melhor, vou citar um exemplo: imagine o 
momento exato em que você entra em um restaurante. Sabe aquela primeira 
impressão, seja ela de “sujo”, “deslocado”, “desaconchegante”, mas que você não 
sabe explicar exatamente por que sentiu isso ao entrar no ambiente? Da mesma 
forma, nós externamos emoções ao acessar um site, e os princípios da Gestalt nos 
ajudam a entender por que algumas formas agradam mais e outras não. 
Segundo Gomes (2006, p.20), A hipótese da Gestalt atribui ao sistema 
nervoso centrar um dinamismo auto-regulador para explicar a origem dessas 
forças integradoras que, à procura de sua própria estabilidade, tende a organizar 
as formas em todos coerentes e unificados. Essas constantes das forças de 
organização são o que os gestalistas chamam de padrões, fatores, princípios 
básicos ou leis de organização da forma perceptual. São essas forças ou esses 
princípios que explicam por que vemos as coisas de uma determinada maneira e 
não de outra. 
Dessa maneira, devemos nos preocupar com a relevância das partes e 
como a composição irá afetar o cérebro do usuário (receptor). 
Seção 5 – Leis da Gestalt
Ao estudar a Gestalt, os psicólogos encontraram padrões de comportamento 
visual. Tais padrões são a base para as Leis da Gestalt ou Princípios da Gestalt. As leis 
da Gestalt são fundamentadas no comportamento do cérebro e como este assimila 
as formas visuais, o comportamento do olhar, à organização e a relacionamento dos 
elementos, e os atalhos mentais . 
Para entender como a Gestalt pode nos ajudar a projetar bons leiautes 
consistentes, organizados e com design que transmita a mensagem correta ao 
Atalhos mentais: 
O cérebro assimila 
e decodifi ca a 
imagem pelo todo, 
a supersoma, e 
não pelas suas 
partes individuais 
separadamente. Ao 
observar uma fl or 
não visualizamos o 
caule e as pétalas 
separadamente, 
mas sim o objeto do 
conjunto fi nal que 
é a fl or. 
17
Comunicação Visual para Web - UNIGRAN
usuário, melhorando a sua experiência durante a navegação vamos estudar as 
leis da Gestalt: Continuidade, Segregação, Semelhança, Unidade, Proximidade, 
Pregnância e Fechamento.
Lei da Continuidade:
A Continuidade refere-se ao alinhamento de uma composição. O alinhamento 
dos elementos produz um efeito harmônico, causando a impressão de que os elementos 
estão relacionados, ou seja, o nosso cérebro conecta os pontos de uma imagem por 
meio de uma linha reta ou curva, seguindo a linearidade da composição. 
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Note que, ao observamos a imagem, não visualizamos pontos separados 
e sim uma linha continua de pontos. A continuidade dos componentes permite 
que nosso cérebro decifre melhor o código visual de uma composição facilitando 
a compreensão e comunicação da composição.
Quando os elementos estão alinhados de maneira harmônica sem 
interrupções, pode-se afirmar que a composição possui uma boa continuidade. 
Tal fluidez pode ser feita através de formas, cores, texturas etc. 
Vejamos um exemplo na prática:
Fonte: < https://www.google.com.br 
<imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
1° Ponto: Notem que o recuo do 
resultado da pesquisa sugere um 
movimento e ao mesmo tempo 
conecta os subtópicos ao tópico 
principal.
2° Ponto: Os resultados da 
pesquisa são dispostos de forma 
conƟ nua indicando a existência de 
mais conteúdo. Caso houvesse um 
espaçamento maior o resultado 
(2) poderia fi car abaixo da barra de 
rolagem causando a impressão de 
que não haveria mais dados sobre 
o termo pesquisado.
18
Comunicação Visual para Web - UNIGRAN
Vejamos mais um exemplo na prática:
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Observem que os itens que estão alinhados e causam o efeito de que 
estão relacionados. 
Lei da Semelhança:
Segundo a lei da semelhança, ao observarmos os objetos semelhantes, 
nossa percepção irá agrupá-los. A semelhança pode ser na cor, forma e tamanho.
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Observem a imagem. Quando observamos a imagem, vemos quatro grupos de 
objetos e não uma linha horizontal com intercalação de dois círculos e dois triângulos. 
Vejamos um exemplo na prática:
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
19
Comunicação Visual para Web - UNIGRAN
Notem que os temas das chamadas estão categorizados pela cor, dessa 
forma, o usuário ao navegar pelo site identificarapidamente os blocos de texto 
sobre o mesmo assunto. Neste caso, o papel funcional sobrepõe o papel estético 
das cores. A semelhança quando bem empregada em um projeto de web ajuda 
o usuário a navegar com mais facilidade e rapidez uma vez que explicita as 
funcionalidades do web site.
Lei da Proximidade:
Ao observarmos uma imagem o nosso cérebro tende a agrupar elementos 
que estão próximos e que possuem cor e forma semelhantes. Vejam que ao 
observamos a imagem seguinte nosso cérebro cria grupos e subgrupos visuais 
que farão parte de uma composição visual.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Vamos analisar um exemplo prático:
Fonte: < http://clickinfi nity.com.br>
Observem a imagem e note que há alguns grupos de elementos que são 
semelhantes em suas formas, cores e funcionalidades, como, por exemplo, o menu 
interativo na forma de bolinhas. Imagine se cada item desse menu tivesse cor e 
forma diferentes e estivesse espalhado por toda a extensão da imagem. A navegação 
ficaria comprometida, não é mesmo? 
20
Comunicação Visual para Web - UNIGRAN
Na organização a semelhança é dos fatores mais fortes. Assim, nos web 
sites, os elementos que possuem as mesmas funcionalidades devem estar próximos 
e ter características semelhantes para garantir maior fluidez na navegação.
Lei da Pregnância:
A lei da pregnância também é conhecida como a lei da simplicidade, que 
afirma que as formas são percebidas em seu caráter mais simples, ou seja: quanto 
mais simples o objeto for, mas facilmente este será assimilado. É o princípio da 
simplificação natural da percepção. Observe os seguintes objetos:
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
O e-mail pode ser visto por duas formas geométricas: um retângulo e um 
triangulo. Todos os elementos possuem formas pregnantes, pois com traços simples 
conseguem transmitir muitas informações e de fácil compreensão. 
Veja como exemplo o site do Walmart que utiliza design flat nos seus ícones:
Querem saber mais sobre Design Flat? Confiram o link postado na 
plataforma O que é flat design?
Fonte: < http://www.walmart.com.br>
21
Comunicação Visual para Web - UNIGRAN
Fonte: < http://www.walmart.com.br>
Notem que o leiaute do site apresenta poucas informações dispostas em 
formas geométricas simples, no entanto estas são bastante descritivas e transmitem 
corretamente a proposta e as informações do web site. Um erro comum que 
os designers cometem é colocar muitas informações na página principal, a não 
ser que a complexidade seja a opção do conceito do site. Muitas informações 
causam ruídos na comunicação e poluem o leiaute, comprometendo a velocidade 
de leitura, a clareza e a integridade da mensagem. Lembrem-se da velha máxima: 
mais é menos! Mensagens claras são de fácil compreensão e rápida leitura.
Vejamos um símbolo que é ícone no que se diz respeito a pregnância: a 
logomarca da empresa Apple.
Fonte: < https://www.pixellogo.com/evolution-famous-logos-
apple-pepsi-microsoft-xerox-and-more
Lei do Fechamento:
A lei do fechamento funda-se no princípio de que nossa percepção visual 
une intervalos e estabelece ligações, fechando as formas e deixando-as delimitadas, 
mesmo com a ausência de contornos. Vejam o exemplo:
22
Comunicação Visual para Web - UNIGRAN
Ao observar a imagem, que figura vocês vêem? Três círculos incompletos 
ou o contorno de um triângulo? Tal sensação ocorre pela continuidade numa ordem 
estrutural definida. Nosso cérebro tende estabelecer ligações e agrupar elementos, 
como se completássemos visualmente um objeto incompleto.
Observe a logomarca da WWF. Notem que mesmo que a forma esteja aberta esta 
sugere continuidade e sentido. Formas abertas é um recurso visual interessante, 
pois são dinâmicas e sugerem um envolvimento ativo do expectador. 
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Fonte: < http://yalosbranding.com/expertise/sharing/picture-19/>
23
Comunicação Visual para Web - UNIGRAN
Observem a imagem do site. Veja que não há linhas delimitando os objetos 
da composição, no entanto pela proximidade e semelhança nós delimitados os 
elementos em blocos.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Fonte: < https://www.google.com.br 
<imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Lei da Segregação:
Nosso cérebro possui a capacidade de perceber, identificar, separar e 
destacar um elemento dentro de uma composição visual por forma, dimensão e 
posição. Observe a imagem: 
Observe que na imagem os elementos possuem a mesma forma, no 
entanto um deles se destaca pela sua cor, devido o seu alto contraste.
A segregação é um princípio muito importante, pois nos permite destacar 
elementos e definir hierarquias. Observem a imagem seguinte:
24
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Neste site podemos ver que as informações estão organizadas em blocos, 
e dentro de cada bloco há informações que estão segregadas. No cabeçalho, o 
botão "acesse sua conta" destaca do restante das informações no corpo do site 
acontece o mesmo com a área de destaque.
Quando projetamos um leiaute temos que “ajudar” os usuários a encontrar 
as informações, criando um percurso visual por meio da disposição dos elementos na 
composição. Nota-se a importância do conceito de segregação, pois o uso adequado no 
web site nos permite direcionar o olhar do usuário e conduzi-lo a realizar ações, como 
ler e/ou clicar. Quanto ao texto, podemos realçá-lo utilizando recursos como mudança 
de fonte, variações no estilo como negrito e itálico, alinhamento, corpo da fonte e cores. 
Lei da Unificação: 
 A unificação refere-se à igualdade e semelhança de estímulos produzidos por 
objetos ou campos visuais. Quanto mais harmoniosa e equilibrada for a relação dos 
elementos dentro de uma composição, maior será a sensação de unificação. 
Segundo João Gosmes Filho “A unificação se verifica quando os fatores 
de harmonia, equilíbrio, ordenação visual e, sobretudo, a coerência da linguagem ou 
estilo formal das partes ou do todo estão presentes no objeto ou composição (GOMES, 
FILHO. Pag.31 )
Analisando a imagem seguinte, percebe-se que as figuras estão ordenadas 
simetricamente e possuem o mesmo estilo e linguagem visual, assim como os pesos das 
imagens estão distribuídos homogeneamente. 
A segregação gera hierarquia e ordem de leitura.
25
Comunicação Visual para Web - UNIGRAN
Fonte: < http://www.fotolog.com/lluna_keta/36336570/>
Vamos analisar a imagem do web site. Há outras leis da Gestalt presentes neste 
leiaute, mas a lei predominante é a unificação. Vejam que há uma cor predominate no 
site e a paleta de cores usada no restante do site harmoniza-se com a cor principal. As 
linhas e formas possuem o mesmo estilo gráfico, e as imagens transmitem a mesma 
comunicação. Os textos mais pesados (welcome e photo gallery) dão equilíbrio aos 
traços mais sutis presentes no restante dos textos na composição. 
A unificação estabelece relação entre as paginas do web site. Muitas vezes, 
as páginas internas não mantêm o mesmo padrão gráfico e organizacional da página 
principal, e quando o usuário as acessa tem a sensação de que “saiu” do site que estava 
navegando ou sente-se desorientado pela quebra de expectativa por não encontrar o 
mesmo contexto gráfico e informacional. 
Fonte: < https://www.google.com.br 
<imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
26Comunicação Visual para Web - UNIGRAN
Retomando a conversa inicial
• Seção 1 - Projetando Websites:
Nesta seção, vimos que, para se projetar um web site, é necessário realizar 
o levantamento de dados através do briefing e do planejamento estratégico antes 
de iniciar a produção do leiaute. Também falamos sobre a importância do design 
e de uma boa usabilidade na web, tendo em vista que temos menos de dois 
minutos para se comunicar na primeira vez em que um potencial cliente visita 
um Website. O design e a facilidade com que os usuários realizam uma ação no 
website (usabilidade) são fatores decisivos para que a permanência e a fidelização 
dos usuários. 
• Seção 2 – Design na Web
Nesta seção, aprendemos que design é projetar conceitos, estabelecendo 
as qualidades dos objetos, equilibrando estética e funcionalidade, sendo 
fundamental para interação homem-máquina, humanizando as novas tecnologias. 
Já web design é uma extensão do design, cujos conceitos são empregados na 
construção de web sites e documentos disponíveis no ambiente da web.
• Seção 3 – Gestalt 
Nesta seção, aprendemos que Gestalt é uma teoria da psicologia cujo 
objeto de estudo é a percepção visual humana. O princípio da teoria da Gestalt 
nos afirma que o nosso cérebro visualiza primeiro um objeto por inteiro e depois 
as suas partes individuais. 
Os principais conceitos da Gestalt são: Supersoma e Transponibilidade.
• Seção 4 – Gestalt Aplicada na Web
Nesta seção, vimos como a Gestalt é importante para a elaboração 
de leiautes, uma vez que a percepção visual de um site pode ser influenciada 
pela natureza do projeto, a mensagem que este remete, o posicionamento dos 
elementos visuais no leiaute (imagens, texto, animações, etc.), contraste de cores, 
configurações de texto (família tipográfica, corpo do texto, cor etc.), aspectos que 
influenciam na legibilidade e na clareza da mensagem.
Parece que estamos indo bem. Então, para encerrar esse tópico, 
vamos recordar:
27
Comunicação Visual para Web - UNIGRAN
• Seção 5 – Leis da Gestalt
Nesta seção, vimos como a Gestalt é importante para a elaboração 
de leiautes, uma vez que a percepção visual de um site, pode ser influenciada 
pela natureza do projeto, a mensagem que este remete, o posicionamento dos 
elementos visuais no leiaute (imagens, texto, animações etc.), contraste de cores, 
configurações de texto (família tipográfica, corpo do texto, cor etc.), aspectos que 
influenciam na legibilidade e na clareza da mensagem.
CONCLUSÃO
A aparência de um Web site deve ser harmônica e equilibrada. Ao 
projetar a interface certifique-sem de que as informações estejam distribuídas 
corretamente no contexto do site. Evitem concentrações ou espaços em branco 
que criam “buracos” no site. Lembrem-se de que a distribuição das informações 
será vista como um todo, conforme os princípios da teoria da Gestalt.
Sugestões de leituras e sites
• Leituras:
Gestalt como processo de alfabetização visual. Revista Webdesign, Rio de Janeiro, n. 
37, p. 31-37, Janeiro, 2007.
GOMES FILHO, João. Gestalt do objeto - sistema de leitura visual da forma. São 
Paulo: Escrituras Editora, 2000.
KOHLER, Wolfgang. t. Belo Horizonte: Itatiaia, 1968.
• Sites:
<http://designculture.com.br/apresentacao-do-estudo-da-gestalt%E2%80%8F/>.
<http://www.portaldapsique.com.br/Artigos/Gestalt.htm>.
<http://imasters.com.br/artigo/16630/teoria-do-design/gestalt-do-objeto-em-
-websites-parte-01/>.
Obs.: Se ao fi nal desta aula Ɵ verem dúvidas, vocês poderão saná-las 
através das ferramentas “fórum” ou “quadro de avisos” e “chat”. Ou 
ainda poderão enviar para o e-mail renata@unigran.br?
?
28