Comunicação Visual para Web I AULA 2

Prévia do material em texto

Aula
02Comunicação Visual para Web - UNIGRAN
INTERFACE
Caros(as) alunos(as), nessa aula, estudaremos os conceitos 
básicos sobre interface e diagramação, assim como os princípios 
básicos para se construção de websites. 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:
• conhecer a definição de Interface;
• possuir embasamento teórico para construir interfaces para 
diferentes dispositivos;
• distinguir tipos de leiaute;
• discernir qual é o leiaute mais apropriado para atender as 
singularidades de cada projeto;
• diagramar sites priorizando as informações mais importantes;
• conhecer os princípios básicos para construir um site.
29
Comunicação Visual para Web - UNIGRAN
Seções de estudo
• Seção 1 – Interface
• Seção 2 - Interface em Diferentes Dispositivos
• Seção 3 - Tipos de Leiaute
• Seção 4 - Diagramação
• Seção 5 - Princípios Básicos para Construir um Site
Seção 1 – Interface 
 A interface é o ponto de interação entre o usuário e o computador. Por 
meio da interface o usuário poderá visualizar as informações como imagens, 
cores, textos e navegar pelo site. O leiaute não está atrelado apenas a aparência 
do site, mas possui conotação emocional, pois assim que o usuário visualiza o 
site atribui a ele sentimentos de empatia ou rejeição. Se a primeira impressão 
for positiva, o usuário é estimulado a navegar e o entendimento da interface e 
funcionalidades dos sites torna-se muito mais claras. 
Segundo Nilsen (2007), o tempo médio que os usuários levam para 
reconhecer o site e tomar a decisão se irão permanecer nele ou ir para outro site é 
em média 1minuto e 49 segundos.
Vocês têm menos de dois minutos para se comunicar na primeira vez que 
um potencial cliente visita seu website. Este é o fato básico sobre a experiência 
Web: no que diz respeito aos 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 outro sites. A maioria deles nem mesmo se dá ao trabalho de usar 
o scroll para ver o que ela contém. (NIELSEN, 2007. p. 21)
Segundo Chak (2004), a página principal de um website deve fornecer 
informações para que o usuário identifique imediatamente o proprietário do site, 
o que ele oferece ou para quem ele está destinado, e o que o usuário deve fazer 
ali. ColoqueM-se sempre no lugar do usuário, estrutureM o site de acordo com 
que os seus usuários pensam. 
A página principal de um web site deve apresentá-lo respondendo às 
seguintes questões: 
30
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
É fundamental que a página principal apresente as seguintes características 
e informações:
Seção 2 - Interface em diferentes dispositivos
O acesso à internet por meios de dispositivos móveis, tais como tabletes 
e smartphones, faz parte de nosso cotidiano, no entanto a experiência do usuário 
ao navegar nestes aparelhos ainda precisa ser melhorada. É preciso considerar os 
diferentes tamanhos de resoluções para desenvolvermos leiautes compatíveis em 
qualquer formato.
1 - LogoƟ po: o site deve apresentar o logoƟ po claro e visível para que o usuário 
idenƟ fi que sua empresa, principalmente se esta, exisƟ r fora da internet.
2 - Apresentem-se: Ao menos que o site seja da empresa Coca-Cola ou de qualquer 
outra empresa consolidada, é necessário apresentar informações sufi cientes 
para que o usuário idenƟ fi que a aƟ vidade da empresa ou a temáƟ ca do site. Tais 
informações pode ser expressas no slogan, imagens e textos que compõe o leiaute 
da página principal.
3 - UƟ lizem imagens representaƟ vas: as imagens dizem muito sobre seu site, e 
devem ser condizentes com o conceito e a temáƟ ca do site ou soŌ ware. Lembre-se: 
a correta uƟ lização das imagens pode atrair ou afastar os usuários.
4 - Mostrem as sessões principais: as sessões principais, tais como menus e ơ tulos 
principais, explanam como as informações foram estruturadas e organizadas no 
website. A correta organização destas sessões esƟ mula os usuários a navegarem 
pelo website, desta forma estas sempre devem estar posicionadas em áreas de 
visualização privilegiadas e acimada da barra de rolagem. O uso excessivo de imagens 
e animações devem ser evitados nas sessões principais.
5 - Considerem os recursos tecnológicos do usuário: Ao projetar a interface de um 
website é importante considerar a velocidade da banda do seu público alvo, assim 
como a diversidade de disposiƟ vos digitais que os usuários uƟ lizam, uma vez que o 
leiaute deverá se ajustar a diversos formatos e resoluções.
31
Comunicação Visual para Web - UNIGRAN
Fonte: <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Fonte: < http://goo.gl/wrxMFK>
Quando passamos por esta situação buscamos imediatamente descobrir o 
que foi que aconteceu. Mas onde estaria o problema? no monitor? No browser? 
Foi falha do projetista? Para sanar tais questionamentos precisamos estudar alguns 
conceitos sobre monitores e browsers que inferem na compatibilidade das interfaces 
para diferentes dispositivos móveis. A velocidade das conexões é uma das principais 
problemáticas de acesso, e segundo uma pesquisa realizada em 2009, pela em 
empresa Gomez, Inc. ainda atual, as principais problemáticas que comprometem a 
experiência navegacional dos usuários são: 
• incompatibilidade da interface, que era exibida muito pequena ou grande 
para o tamanho da tela do dispositivo, o que dificultava a utilização do programa;
• o conteúdo não estava adaptado para ser usado em movimento;
• o excesso e proximidade das informações dificultavam o toque (com os 
dedos) assertivo na área desejada. 
• muitos sites projetados para dispositivos móveis apresentam apenas a 
versão simplificada não exibindo a URL para a versão completa. 
Quero que seja criada uma imagem semelhante a está para ser utilizada no guia.
Já projetou a interface de um website e 
quando foi visualizá-la em outro monitor o 
seu leiaute estava todo bagunçado, as fontes 
e cores estavam diferentes, e os blocos de 
informações todos bagunçados???
Atenção! Para projetarmos websites e aplicações web efi cientes e compaơ veis para 
usuários desktop e/ou mobiles é preciso conhecer alguns conceitos sobre resolução, 
navegadores e diagramação.
32
Comunicação Visual para Web - UNIGRAN
2.1 Resolução em diferentes dispositivos digitais
No mercado, há diferentes tipos de monitores, tais como CRT, mais 
conhecido como monitor de tubo, LCD e LED, que podem ser monocromáticos 
ou coloridos.
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Nos monitores CRT, as imagens são formadas por feixes de elétrons 
sobre os pontos de fósforo. Quando ocorre essa incidência, um ponto de luz é 
gerado. A tela de um monitor é um matriz de pontos de luz chamados de pixels, 
assim as imagens dos dispositivos de exibição (como por exemplo, um monitor) 
são compostas por pixels (menor ponto de uma imagem), e as junções desses 
pixels formam a imagem. Nos monitores coloridos cada Pixel é composto por um 
conjunto de 3 pontos: verde, vermelho e azul.
A exibição de cores nos monitores varia de acordo com a configuração 
pessoal de cada usuário. Atualmente a intensidade da cor pode variar de 1 bit (preto-
e-branco) a 32 bits (mais de 16,7 milhões de cores). Bit, neste caso, é uma unidade 
de medida que se refere a intensidade da cor, sou seja: é o número de valores de cor 
que podem ser atribuídos a um único pixelde uma imagem. (Disponível em: <http://
windows.microsoft.com/pt-br/windows/getting-best-display-monitor#getting-best-
display-monitor=windows-7> acesso em 01/11/2013 às 21h23.)
A resolução da tela de um dispositivo móvel é definida pela quantidade de 
pontos (pixels) que compõe uma imagem. Para calcularmos quantos pixels tem um 
monitor com a resolução definida para 1280 x 800, ou seja, 1280 pontos em cada uma 
?
VOCÊ 
SABIA Quanto maior a quanƟ dade de pontos por polegada quadrada (PPI) 
melhor será a resolução da tela e a aparência dos textos e imagens 
que são exibidos na tela, assim em resoluções maiores, como 1900 x 
1200 pixels, os itens parecem mais .
33
Comunicação Visual para Web - UNIGRAN
das 800 linhas, multiplique ambos. Nesse caso, a resolução do monitor é composta 
por 1.024.000 pontos. A qualidade da resolução está relacionada com o número de 
pixels por dpi (polegada quadrada), e o tamanho do monitor. Quanto maior o monitor 
maior a resolução que pode ser aplicada. 
O formato da tela dos dispositivos está cada vez mais diversificado. Há 
telas grandes para uso de PCs desktop e as telas menores para uso em movimento. O 
tamanho destas telas variam entre 320 a 2560 pixels ou mais, desta forma, devemos 
considerar estas diferenças para projetarmos o leiaute de interfaces e publicação de 
conteúdo em sites e plataformas online, assim como a proporção entre largura e altura 
dos monitores. 
Em aparelhos de TV E PCs a proporção é de 4:3, comum nas larguras de 
1024 a 1280dpi, até a proporção dos monitores de HDTV, wide screen (16:9, resolução 
1280x720 ou 16:10, resolução 1280x800, chegando a 1680x1050 e 2560x 1600). 
(Disponível em: <http://www.avellareduarte.com.br/projeto/interface/interface2/
interface2c.htm> acesso em 02/11/2013 às 08h40.)
Quando a densidade de "pixels por polegada", em inglês pixels per inch 
(ppi), a maioria do dispositivos utiliza 72 PPI, no entanto os dispositivos modernos 
possuem uma densidade cada vez maior. O iPhone 3GD, com resolução de 320x480, 
possui 264 ppi de densidade. Os iPhones 4 e 4S, iPods Touch, com resolução de 
960x640, possuem 326 ppi de densidade. Atualmente os MacBook Pro possuem a 
maior densidade com 200ppi.
Para construir uma interface, sempre considerem que o usuário pode 
aplicar diversas resoluções com variações nas proporções de largura e altura dos 
dispositivos digitais, optem sempre pela resolução que atenda a maioria do seu 
público-alvo.
Consulte a tabela de Resolução x Profundidade, postado 
em Material de Aula para saber mais informações sobre 
os demais disposiƟ vos. 
DICA: No planejamento do seu projeto gráfi co consulte as 
resoluções que estão sendo mais uƟ lizadas pelo seu público-alvo. 
Site sugerido: www.marketshare.hitslink.com.
34
Comunicação Visual para Web - UNIGRAN
Determinar a resolução da interface é uma decisões mais importantes e 
desafiadoras em um projeto de interface devido as múltiplas possibilidades de 
configuração e situações de acesso. As necessidades do público-alvo devem ser 
atendidas prioritariamente, no entanto é importante oferecer uma boa experiência 
de uso durante a navegação para os usuários que não fazem parte deste perfil. 
Neste contexto o design responsivo traz soluções para adaptação do leiaute em 
diferentes plataformas.
Em síntese, o design responsivo uma técnica de estruturação de leiautes 
via CSS que permite a visualização da interface em diferentes dispositivos. 
Em resoluções menores o designer deverá priorizar algumas configurações 
e selecionar quais informações serão exibidas, sem, no entanto, inviabilizar o 
acesso das demais.
Vejam os exemplos de interfaces em diferentes formatos: 
Fonte: < URL: http://nanoc.ws>. Acesso em 02/11/2013 às 16h20.
Fonte: <URL: http://www.erikford.me>. Acesso em 02/11/2013 às 16h30.
Web Design Responsivo é uma abordagem de web design desƟ nada a elaborar sites 
para fornecer uma óƟ ma experiência de visualização, fácil leitura e navegação com um 
mínimo de redimensionamento e visionamento, para uma ampla gama de disposiƟ vos 
(de monitores de computador a telefones celulares). (Disponível em: < hƩ p://
pt.wikipedia.org/wiki/Web_Design_Responsivo> acesso em 02/11/2013 às 14h40.)
CONCEITO
 Cascading 
Style Sheets (ou 
simplesmente 
CSS) é uma 
linguagem de 
esƟ lo uƟ lizada 
para defi nir a 
apresentação 
de documentos 
escritos em uma 
linguagem de 
marcação, como 
HTML ou XML. 
Seu principal 
beneİ cio é prover 
a separação entre 
o formato e o 
conteúdo de um 
documento.
35
Comunicação Visual para Web - UNIGRAN
Nessa aula, não serão apresentados conceitos sobre CSS para construção 
de leiautes, mas sugere-se a definição de largura mínima para a largura das colunas 
em leiautes líquidos, para que os textos fiquem sempre legíveis, principalmente 
nas interfaces que possuem muitas colunas.
Não há como criar um projeto que seja totalmente eficaz para todas as resoluções, 
no entanto há estudos sobre os hábitos e preferências que ajudam aos designers tomarem 
decisões mais assertivas, para priorizar e hierarquizar as informações. Esses estudos 
indicam que os usuários, em geral, utilizam telas maiores para atividades produtivas, já 
as telas menores são utilizadas para comunicação e entretenimento. 
2.2 Browsers 
Quando falamos em compatibilidade obrigatoriamente temos que falar sobre 
browsers. Assim como há um grande número de dispositivos móveis, também existem 
no mercado várias opções de browsers web, sendo os mais utilizados: Internet Explorer, 
Firefox, Chrome, Safari e Opera. 
Esta diversidade de browsers torna-se um desafio a mais para os projetistas 
web, pois cada sistema interpreta os padrões web de maneira diferente. A maioria 
das versões atuais dos browsers mais utilizados suportam HTML 4.0, ou XHTML e 
algumas funcionalidades do HTML 5 , no entanto, muitas vezes, a mesma página é 
Para saber mais sobre design responsivo acesse o site: <hƩ p://
alistapart.com/arƟ cle/responsive-web-design>.
Leia o arquivo Introdução ao Design Responsivo, postado 
em Material de Aula para saber mais sobre Design 
Responsivo na práƟ ca. 
Consulte o site NetMarkeShare para saber qual a 
porcentagem de usuários uƟ lizam cada Browser: <hƩ p://
www.netmarketshare.com/browser-market-share.
aspx?qprid=0&qpcustomd=0>.
HTML5 (t, versão 5) 
é uma linguagem 
para estruturação 
e apresentação de 
conteúdo na web.
36
Comunicação Visual para Web - UNIGRAN
exibida com diferenças significativas devido a inconsistências na interpretação dos 
estilos CSS.
Otimizar um site para que seja visualizado corretamente entre um e outro 
navegador é uma decisão que deve priorizar o público-alvo e ser pautada nos 
hábitos e estáticas de acesso deste público. Também deve-se considerar as quais 
versões de navegadores devem ser contempladas. 
Ao projetar um leiaute para um determinado navegador é necessário 
subtrair os valores da largura as barras de rolagem, no entanto, esses valores não 
são fixos, pois os usuários configuram os seus navegadores de diferentes formas, 
tais como: com ou sem barra de status, utilização de ícones grandes ou pequenos, 
dentre outras inúmeras possibilidades de configuração do navegador. 
Umas das possíveis soluções para esta problemática é a utilização de 
“leiaute líquido”, que se ajusta a tela independente da configuração do navegador 
e resolução do monitor.
Seção 3 - Tipos de leiaute
Nos projetos de interface são utilizados leiautes fixos ou líquidos. Vejamos 
as características de cada um:
Leiaute fixo: 
No leiaute fixo a largura e posicionamento são pré-determinados pelo 
desenvolvedor, o usuário não possui controle sobre este tipo de leiaute, o que 
caracteriza uma desvantagem, pois impossibilita o usuário aplicar suas configurações. 
Antes de publicar o site no ar faça: 
1° DICA:Valide o código HTML de acordo com os parâmetros da W3C: 
<hƩ p://validator.w3.org>
2° DICA: teste-o para verifi car sua performance em diferentes browsers. 
Dica:
Existe um serviço gratuito na Web que permite visualizar uma 
determinada URL em diferentes navegadores e em várias versões. 
Disponível em: <hƩ p://browsershots.org.>.
37
Comunicação Visual para Web - UNIGRAN
Leiaute Líquido: 
Uma das maneiras de sanar os problemas com as incompatibilidades de 
navegadores e adaptar-se a diferentes resoluções é utilizar o leiaute líquido. Nesse 
formato, a estrutura do leiaute é projetado em “porcentagens” ou “ems”, assim o 
conteúdo comprimido ou estendido, ajusta-se a largura da janela do navegador. 
O leiaute líquido é utilizado no projeto de interfaces desde os início da web, 
e conciliado ao design responsivo que utiliza configurações de CSS para detectar 
a resolução e se ajustar a diferentes resoluções, é uma solução que pode atender 
satisfatoriamente a diversidade de dispositivos. 
Veja um exemplo do uso de leiaute liquido:
Resolução: 800X600 Resolução: 1280x800
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Perceba que ao aumentar a resolução do navegador os itens são 
redistribuídos na tela. Nota-se, neste exemplo, a predefinição de uma largura 
mínima e máxima para expansão e contração dos itens. 
Quando tal delimitação não é configurada ao se expandir o leiaute, as 
caixas de textos podem ficar muito largas, o que dificulta a leitura. Se a interface 
estiver sendo definida por estilos CSS defina a largura do leiaute em porcentagem 
o tamanho da fonte na unidade de medida "em".
Definir a largura do leiaute e das fontes em escalas, é uma prática 
recomendada, pois, assim, o usuário poderá alterar a configuração do monitor e 
automaticamente o leiaute e o texto serão redimensionados de acordo com a nova 
configuração, sem prejudicar a exibição do conteúdo.
Tome Nota! A confi guração do leiaute deve sempre priorizar para que o conteúdo 
mantenha-se estruturado e compreensível.
38
Comunicação Visual para Web - UNIGRAN
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/>
Seção 4 - Diagramação
Diagramar um site significa estruturar e organizar as informações, imagens e 
dados de forma hierárquica de acordo com os objetivos do site. Ao diagramarmos o 
leiaute devemos colocar as informações mais importantes nas áreas privilegiadas do site, 
que são os pontos onde o usuário olha primeiro. Mas quais são as áreas privilegiadas? 
Para responder a essa questão vamos analisar dois estudos realizados pelo 
Instituto Poynter e por Jakob Nielsen, sobre o movimento ocular dos usuários durantes a 
navegação e interação com o web site para verificar quais são as áreas mais vistas e assim 
mapear as áreas privilegiadas. 
1° Estudo
No estudo realizado pelo Instituto Poynter , foram analisados os movimentos 
oculares de 46 pessoas enquanto navegavam em sites. Concluiu-se que a maioria das 
pessoas possuíam um movimento comum: os olhos na maioria das vezes fixada em 
primeiro lugar no canto superior esquerdo da página, posteriormente dirigiam o olhar a 
parte direita, e somente após analisar a parte superior da página dirigiam o olhar a parte 
inferior, como mostra o esquema seguinte:
De acordo com o movimento ocular descrito no gráfico anterior as áreas 
privilegiadas do site são:
O InsƟ tuto 
Poynter é uma 
escola dedicada 
ao ensino de 
jornalistas e 
líderes de mídia.
39
Comunicação Visual para Web - UNIGRAN
2° Estudo
No estudo realizado pelo Grupo Nielsen Norman , foram analisados os 
movimentos oculares de 232 pessoas enquanto navegavam em sites. O estudo mostrou 
que a maioria das pessoas fazem o movimento ocular semelhante a letra “F” , duas 
linhas horizontais, da esquerda para direita, e uma linha vertical, de cima para baixo.
As áreas mais visualizadas estão em vermelho. As áreas amarelas são de 
visualização intermediária, enquanto as áreas em azul são as menos visualizadas.
Os estudos acima são divergentes na sua conclusão, mas há pontos em 
comum, como a visibilidade da região superior esquerda, por isso a maioria dos sites 
exibem o logotipo nessa região, outro ponto em comum é que a região superior acima 
da barra é a região com maior visibilidade. Concordando com o resultado de ambos 
estudos, sugere-se que as informações mais importantes devem ser inseridas na parte 
superior da página. 
 A disposição das informações na tela determina a navegação do usuário, 
ou seja qual informação ela visualizará e qual ação ele fará primeiro. Ao diagramar 
o conteúdo de um site, considerem sempre o conhecimento que os usuários possuem 
de experiências anteriores navegando por outros sites, para que ele não tenha que 
conhecer todo seu site antes do começar a navegar por ele, ainda é válido utilizar 
certos padrões, como utilizar o logo no canto superior esquerdo, o link para contato 
no canto superior direito, dentre outros.
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
DICA: Saiba mais informações sobre este estudo. Disponível em: 
<http://www.poynter.org/uncategorized/24963/eyetrack-iii-
what-news-websites-look-like-through-readers-eyes/>.
DICA: Saiba mais informações sobre este estudo. Disponível em: 
<hƩ p://www.useit.com/alertbox/reading_paƩ ern.html>.
Nielsen Norman 
Group está 
sediada no 
Vale do Silício, 
com escritórios 
em dez locais 
adicionais nos 
Estados Unidos. 
Os serviços 
são prestados 
em todo o 
mundo. Fornece 
consultorias 
para melhorar 
a efi cácia dos 
sites e gerenciar 
o processo 
de design de 
produtos e 
serviços.
40
Comunicação Visual para Web - UNIGRAN
Seção 5 - Princípios básicos para construir um site
As orientações abaixo foram retiradas do livro Como Criar Sites 
Persuasivos: Clique Aqui, escrito por Andrew Chak.
Princípio n°1: A sua concorrência inclui os sites do seu concorrente, a 
Web e o mundo off-line.
Considerem os sites concorrentes, no entanto não ignore o mundo off-line. 
Se o seu site não torna as coisas mais fáceis ou mais convenientes do que seu 
equivalente off-line, provavelmente, ele não vale o espaço em disco que ocupa.
Princípio n°2: Nem tudo pode ser vendido na internet.
É preciso ter certeza de que seus produtos on-line atenderão às necessidades 
dos usuários e do mercado. 
Princípio n° 3: Vocês devem conquistar o direito de fazer transações 
com o usuário.
Vocês precisam dar-lhes algo de valor e provar que eles se beneficiarão 
em realizar transações com você. Por exemplo: em um site de currículos, mostrem 
ao seus usuários as vagas disponíveis para só então solicitar que este se cadastre no 
seu site, é necessário motivá-los antes de pedir algo. 
Princípio n° 4: Vocês sabem tudo sobre seu site, mas os seus usuários não 
sabem nada.
Forneçam orientações para que os usuários consigam navegar pelo seu 
site. Cada página deve ajudar o usuário a avançar no processo.
Princípio n° 5: Façam previsões de erros e das variações com bastante 
antecedência. 
Planejem com antecedência o que pode acontecer quando um usuário não 
navegar/inserir as informações da forma correta. 
Princípio n° 6: Ou vocês fazem o trabalho ou eles fazem.
Forneçam informações ao usuário para orientá-los a tomar decisões. Por 
exemplo: imagine um cliente que esta avaliando dois sites de banco para verificar 
quais oferecem melhores vantagens. Ambos oferecem três tipos de conta: Conta 
Premier, Conta Elite e Conta superior. O primeiro oferece um arquivo PDF 
explicando detalhadamente cada uma das contas. Muitos usuários não têm o 
navegador configuradopara visualizar os arquivos em formato PDF. 
41
Comunicação Visual para Web - UNIGRAN
Retomando a conversa inicial
• Seção 1 – Interface
A interface é o ponto de interação entre o usuário e o computador.
É fundamental que a página principal apresente as seguintes 
características e informações: logotipo, apresentação, imagens representativas e 
sessões principais. 
• Seção 2 - Interface em Diferentes Dispositivos
É preciso considerar os diferentes tamanhos de resoluções para 
desenvolvermos leiautes compatíveis em qualquer formato. 
Quanto maior a quantidade de pontos por polegada quadrada (PPI) 
melhor será a resolução da tela e a aparência dos textos e imagens.
O segundo contém uma breve descrição de cada conta, e disponibiliza 
um link chamado Selecione a Conta Certa, uma ferramenta interativa que solicita 
alguns dados do cliente e ao avaliá-los, recomenda a conta certa. 
Notem que o primeiro apenas disponibiliza as informações, já o segundo é 
mais proativo e ajuda o usuário a tomar decisões. 
Princípio n° 7: Ajude seus usuários a fazer o que você deseja que eles façam. 
Guie proativamente os seus usuários nos caminhos que vocês desejam que eles 
sigam. A navegação pode ser orientada por meio do posicionamento dos elementos na 
tela, imagens e outros recursos que veremos mais adiante no tópico navegação. 
Parece que estamos indo bem. Então, para encerrar esse tópico, 
vamos recordar:
DICA: O Google disponibilizou um documentos com algumas 
dicas interessantes para elaborar interfaces para e-commerces. 
Disponível em: <https://support.google.com/adwords/
answer/2549057?hl=pt-BR>.
42
Comunicação Visual para Web - UNIGRAN
• Seção 3 – Tipos de Leiaute
Leiaute fixo: No leiaute fixo, a largura e posicionamento são pré-
determinados pelo desenvolvedor e o conteúdo não se ajusta a janela do navegador. 
Leiaute Líquido: o conteúdo se ajusta a largura da janela do navegador. 
• Seção 4 - Diagramação
Diagramar um site significa estruturar e organizar as informações, 
imagens e dados de forma hierárquica de acordo com os objetivos do site. A 
disposição das informações na tela determina a navegação do usuário, ou seja, 
qual informação ela visualizará e qual ação ele fará primeiro. 
• Seção 5 - Princípios Básicos para Construir um Site
• Princípio n°1: A sua concorrência inclui os sites do seu concorrente, a 
Web e o mundo off-line.
• Princípio n°2: Nem tudo pode ser vendido na internet.
• Princípio n° 3: Vocês devem conquistar o direito de fazer transações 
com o usuário.
• Princípio n° 4: Vocês sabem tudo sobre seu site, mas os seus usuários 
não sabem nada.
• Princípio n° 5: Façam previsões de erros e das variações com 
bastante antecedência. 
• Princípio n° 6: Ou vocês fazem o trabalho ou eles fazem.
• Princípio n° 7: Ajudem seus usuários a fazer o que vocês desejam que 
eles façam. 
Sugestões de leituras e sites
• Sites: 
Design Responsivo na prática: do rascunho ao digital: <http://tableless.com.br/
design-responsivo-na-pratica-do-rascunho-ao-digita/>.
Design Responsivo: <http://alistapart.com/article/responsive-web-design>.
Design para telas pequenas: <http://www.avellareduarte.com.br/projeto/
dispositivosMoveis/dispositivosmoveis_usabilidadeDesign.htm>.
Exemplos de design responsivos: <http://mediaqueri.es/>.
43