Web Designer

Prévia do material em texto

www.portaleducacao.com.br 1
PROF: RAQUEL TINOCO Treinamento Funcional | Portal Educação 
WEB 
DESIGNER
www.portaleducacao.com.br
www.portaleducacao.com.br 2
Treinamento Funcional | Portal Educação 
Atenção: O material deste módulo está disponível apenas como parâmetro de estudos para este 
Programa de Educação Continuada. É proibida qualquer forma de comercialização ou distribuição 
do mesmo sem a autorização expressa do Portal Educação. Os créditos do conteúdo aqui contido 
são dados aos seus respectivos autores descritos nas Referências Bibliográficas.
WEB 
DESIGNER
www.portaleducacao.com.br
 
www.portaleducacao.com.br 
 
1 
 
SUMÁRIO 
 
 
MÓDULO I 
1 INTRODUÇÃO AO MÓDULO I 
2 ARQUITETURA DE INFORMAÇÃO 
2.1 ORGANIZAÇÃO DAS INFORMAÇÕES 
2.2 NAVEGABILIDADE 
2.3 WIREFRAME 
 
 
MÓDULO II 
3 INTRODUÇÃO AO MÓDULO II 
4 USABILIDADE 
4.1 A IMPORTÂNCIA DOS USUÁRIOS EM PROJETOS WEB 
4.2 COMO ATINGIR O OBJETIVO DE UM SITE EM MENOS CLIQUES 
4.3 USABILIDADE PARA ADEQUADO FUNCIONAMENTO DO SITE 
4.4 ACESSIBILIDADE NA WEB 
4.4.1 Acessibilidade física e virtual 
4.4.1.1 Desenho Universal 
4.4.1.2 Tipos de deficiência 
 
 
MÓDULO III 
5 INTRODUÇÃO AO MÓDULO III 
6 INTERFACE 
6.1 TEORIA DAS CORES 
6.1.1 Cores primárias, secundárias e complementares e tonalidade das cores 
6.1.2 O significado das cores na Publicidade 
6.1.2.1 Combinações de cores eficazes 
6.1.2.2 Combinações não eficazes de cores 
6.1.3 O significado das cores em nossas vidas 
6.1.4 As cores na Web 
 
www.portaleducacao.com.br 
 
2 
6.1.4.1 Padrão de cores RGB 
6.2 ESTRUTURANDO UM SITE 
6.3 IMAGENS 
6.3.1 Tipos de extensões para utilizar em imagens 
 
 
MÓDULO IV 
7 INTRODUÇÃO AO MÓDULO IV 
8 COMO MONTAR UM LAYOUT 
8.1 PROCESSO DE CRIAÇÃO 
8.1.1 Photoshop 
8.2 DESENVOLVIMENTO 
8.3 FATIANDO UM LAYOUT 
8.3 HTML5 BÁSICO 
8.4 CSS3 BÁSICO 
8.4.1 Folha de estilo importada 
8.4.2 Folha de estilo incorporada ou interna 
8.4.3 Folha de estilo inline 
8.5 DREAMWEAVER 
 
 
9 INTRODUÇÃO AO MÓDULO V 
10 TESTE DE USABILIDADE 
10.1 AVALIAÇÃO HEURÍSTICA 
10.1.1 Heurísticas segundo Nielsen e Molich 
10.1.2 Heurística segundo Bastien e Scapin 
10.1.3 Técnica Think Aloud 
REFERÊNCIAS BIBLIOGRÁFICAS 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
3 
MÓDULO I 
 
 
1 INTRODUÇÃO AO MÓDULO I 
 
 
Bem vindo ao módulo 1 do curso Web Design. Neste módulo você vai 
conhecer conceitos de Arquitetura de Informação, além de compreender a melhor 
maneira de trabalhar com a organização delas em meios on-line. 
Claro que não podemos nos esquecer de apresentar conceitos sobre o 
esqueleto da organização das informações, ou seja, os wireframes. Uma técnica 
incrível que vai nos ajudar na construção final de um projeto de website. 
Enfim, tudo o que você precisa saber sobre Arquitetura da Informação, você 
vai encontrar neste módulo. 
Preparado para navegar neste mar de informação? 
Então vamos lá! 
 
 
2 ARQUITETURA DE INFORMAÇÃO 
 
 
Você sabia que a sobrecarga de informação em mídia on-line, especificamente 
websites, pode trazer complicações psicológicas e sociais para os usuários? 
Dia após dia somos soterrados por um número infinito de informações. Placas 
de trânsito, televisão, rádio, internet, todos querem passar algum tipo de mensagem. 
Parte dessas informações é útil para nós, mas será que precisamos mesmo dessa 
quantidade imensa de informação que nos sufoca a todo o momento? Você consegue 
assimilar toda a informação que precisa nesse emaranhado de hiperinformação? 
O psicólogo britânico Davis Lewis batizou os efeitos psicológicos e sociais da 
sobrecarga da informação sobre um indivíduo de síndrome da fadiga da informação. 
Alguns efeitos citados pelo autor são: 
 
 
 
 
www.portaleducacao.com.br 
 
4 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
É por isso que a Arquitetura da Informação é útil para projetos on-line, 
justamente para simplificar o que é complexo. 
A arquitetura da informação é a organização e rotulação de websites, 
intranets, comunidades on-line e software oferecendo suporte à usabilidade e 
facilidade na busca da informação. Seu desafio é definir modelo de interação do 
usuário com a informação para que o usuário consiga encontrar e compreender as 
informações que necessita e desempenhar suas tarefas com facilidade. 
 
Você sabe o que são rótulos em website? 
Os rótulos dos links, situados em barras de navegação, ou dentro de textos e títulos 
das páginas, são normalmente palavras curtas que resumem o conceito da página 
à qual serão remetidas. Podem ser também uma imagem ou um ícone que passe 
a ideia do conteúdo que será obtido. 
Os rótulos de uma mesma área devem também ter a mesma abrangência dentro 
de uma área de conhecimento ou atividade. Por exemplo, "legumes", "verduras", 
"frutas" separados de "pera", "laranja", "banana". 
É importante manter a coerência de tempos verbais (todos no infinitivo ou todos no 
imperativo), o mesmo estilo no uso de cores, as mesmas famílias de ícones, os 
 
www.portaleducacao.com.br 
 
5 
mesmos tamanhos de fontes. Uma boa rotulação frequentemente pode suprir os 
problemas de uma estruturação deficiente. 
 
 
Segundo Louis Rosenfeld e Peter Morville (2003), a aplicação da Arquitetura 
da Informação surgiu para facilitar a vida dos usuários. Informação certa, pela pessoa 
certa, no momento certo. Como você pode notar na ilustração a seguir, antes da 
utilização desta técnica, as informações seguiam “bagunçadas”; e pelo acúmulo 
dessas informações desencontradas, a capacidade de gerenciamento delas se 
tornava cada vez mais lenta. Após a aplicação da Arquitetura da Informação, as 
informações transitam e chegam mais rápidas aos olhos do usuário. 
 
 
FIGURA 1 - ANTES DA UTILIZAÇÃO DA ARQUITETURA DA INFORMAÇÃO, AS 
INFORMAÇÕES SEGUIAM “BAGUNÇADAS” 
 
 
 
 
 
Segundo Morville (2004), a Arquitetura de Informação afeta diretamente os 
custos de procurar uma informação e não encontrá-la, os custos de construção e 
 
www.portaleducacao.com.br 
 
6 
manutenção dos websites, os custos de treinamentos de funcionários e até a 
valorização da marca. 
Segundo o autor Nielsen Norman Group (2001), aproximadamente 27% de 
insucessos das vendas de um website de comércio eletrônico são porque os usuários 
não conseguem encontrar os produtos que procuram. 
Na prática, o trabalho do arquiteto de informação é balancear as 
características e as necessidades dos usuários, do conteúdo e do contexto. 
Segundo John Shiple, existem algumas etapas para uma eficiente Arquitetura 
de Informação. São elas: 
 objetivos do site – precisamos coletar as opiniões dos clientes ou 
parceiros, e organizá-las em uma ordem de importância balanceada e 
coerente; 
 público-alvo – uma vez que esteja claramente definido, você pode 
começar a organizar o seu futuro site em páginas de conteúdo e funções que 
vai precisar ter; 
 criatividade – onde você começa a construir a estrutura (formar o 
esqueleto, mapear a navegação, desenhar esboços, fazer simulações, e estar 
pronto para construir). 
Vamos analisar o primeiro item, objetivo do site. 
O primeiro passo no procedimento da Arquitetura da Informação é definir os 
objetivos do site. Parece óbvio, mas pense em quantos sites sem estrutura podemos 
encontrar na internet hoje. Você acha que os desenvolvedores realmente pensaram 
sobre seus objetivos? A resposta é simples e direta: NÃO. Geralmente os 
desenvolvedores não se preocupam com o objetivo do site; eles criam o site e 
disponibilizam na internet e o que acontece? É um fracasso total. 
Existem alguns questionamentos que são utilizados para chegarmos ao real 
objetivo do site: 
 qual é a missão e o propósito da organização? 
 quais são os objetivos de curto prazo e de longo prazo do site? 
 quais são os públicos-alvo? 
 por que as pessoas irão visitar o site? 
Após coletar todas essas informações, filtre as respostas. Você conseguiu um 
montede respostas para as questões. Agora precisa criar ordem para as respostas, 
 
www.portaleducacao.com.br 
 
7 
transformando-as em objetivos/metas ordenados pelo grau de importância. Essa 
etapa é muito importante para a construção de um website, você pode perder muitos 
usuários se esse grau de importância para a visualização das informações não estiver 
bem traçado, juntamente com o cliente, pois ele é quem vai ajudar a priorizar 
informações. 
Próximo passo é definir o público-alvo. Depois de descobrir por que um site 
deve ser construído, o segundo aspecto mais importante ao projetar a arquitetura da 
informação é determinar quem é o público-alvo. Muitos sites nem sequer levam em 
consideração quem os estará visualizando. 
Na próxima etapa, deverá ser feito o agrupamento em blocos dos conteúdos. 
Ou seja, quando há várias informações sobre notícias, newsletter etc. agrupar em um 
local específico; quando se trata de contato, fale conosco etc. em outro e assim por 
diante. 
Nesta etapa também são escolhidos os componentes do site, se as páginas 
serão dinâmicas (atualizações feitas pelo cliente), ou estáticas (somente quem domina 
as meta tags poderá atualizá-las), além das funcionalidades necessárias, como, por 
exemplo, página de login, assinatura de boletins, formulários, etc. 
Pense na estrutura do site como um esqueleto. Sem uma boa estruturação, o 
seu site se torna uma bagunça desordenada. 
 
 
2.1 ORGANIZAÇÃO DAS INFORMAÇÕES 
 
 
Você quer um site desorganizado, desagradável, difícil de usar? 
Não! Você quer um site altamente estruturado, organizado e fácil de usar, 
podemos dizer que um site bem estruturado pode “andar sozinho”. 
Para estruturar um site de maneira hierárquica, você precisa de uma "listagem 
da estrutura do site". É uma lista separada em seções e grau de importância, que vai 
ajudar a definir a melhor localização dos conteúdos no site. Sabemos que nosso 
primeiro olhar em um site é da esquerda para a direita e de cima para baixo, então 
“esculpimos” a lista em grau de prioridade para identificar a melhor localização dos 
conteúdos mais relevantes. Para entender melhor, observe a imagem a seguir, e veja 
a melhor maneira de se criar uma listagem da estrutura do site. No exemplo a seguir, 
 
www.portaleducacao.com.br 
 
8 
a Seção 1 é o conteúdo de maior relevância para visualização no site, assim, este 
bloco de informação deve se posicionar prioritariamente na hora da elaboração do 
wireframe, ou seja, na melhor visualização do usuário, e assim consecutivamente. 
 
 
FIGURA 2 - EXEMPLO DE MELHOR MANEIRA DE SE CRIAR UMA LISTAGEM DA 
ESTRUTURA DO SITE 
 
FONTE: Autoria própria. 
 
 
 
 
 
 
 
 
 
 
Vamos pensar? 
 
Como os usuários irão percorrer o seu site? Como prevenir para 
 que não se percam? Reflita sobre o assunto. 
 
www.portaleducacao.com.br 
 
9 
A melhor maneira de percorrer um website e prevenir que os usuários não se 
percam, é por meio do sistema de navegação. Com um eficiente Mapa de Navegação, 
podemos solucionar problemas de páginas quebradas, ou desencontradas. 
 
 
2.2 NAVEGABILIDADE 
 
 
Mas o que é Mapa de Navegação? 
Vamos analisar a figura a seguir: 
 
 
FIGURA 3 - MAPA DE NAVEGAÇÃO 
 
 
FONTE: Autoria própria. 
 
Como você pode notar, todo o site é rodeado por páginas lineares ou não 
lineares, interligadas. Isso quer dizer, navegação, uma página leva a outra que leva 
a outra, que volta novamente à principal e assim por diante. 
 
www.portaleducacao.com.br 
 
10 
E como podemos nos assegurar que nosso usuário não irá se perder? 
A resposta é: planejando um mapa de navegação. Assim, o desenvolvedor 
saberá para onde o usuário será levado, se o mesmo clicar em determinado 
hiperlink. Lembrando que é sempre muito importante o usuário conseguir retornar à 
página inicial do site com muita facilidade. 
Segundo Vaughan, podemos considerar quatro estruturas fundamentais de 
navegação: 
 linear – o usuário navega sequencialmente de página para página; 
 hierárquica – o usuário navega por ilhas de informações, seguindo a 
orientação lógica do conteúdo; 
 não Linear – o usuário navega livremente por todo o conteúdo; 
 composta – o usuário navega livremente, mas existem situações com 
restrições. 
 
 
FIGURA 4 - NAVEGAÇÃO LINEAR 
 
 
 
FONTE: Autoria própria. 
 
 
FIGURA 5 - NAVEGAÇÃO HIERÁRQUICA 
 
 
 
FONTE: Autoria própria. 
 
www.portaleducacao.com.br 
 
11 
FIGURA 6 - NAVEGAÇÃO NÃO LINEAR 
 
 
FONTE: Autoria própria. 
 
 
FIGURA 7 - NAVEGAÇÃO COMPOSTA 
 
 
 
 
 
 
 
 
 
 
FONTE: Autoria própria. 
 
A interação de uma aplicação aumenta quando há possibilidade de efetuar 
ligações entre conteúdo. 
 
www.portaleducacao.com.br 
 
12 
Vamos praticar? 
Pesquise um site na internet que você considere com má arquitetura de 
informações. Reestruture-o em seções, facilitando a vida do usuário. Você pode 
sugerir a troca de menu, o agrupamento das seções, a troca de rótulos, etc. 
Forme uma listagem da estrutura desse site, seguindo um grau de importância 
sugerido por você. 
Seja bastante crítico! 
 
 
Tenho certeza que você nunca mais vai olhar os websites com os mesmos 
olhos! 
 
 
2.3 WIREFRAME 
 
 
Você já ouviu falar sobre wireframe? 
O wireframe é um documento fundamental para o trabalho do arquiteto de 
informação, sua função é estruturar o conteúdo de cada página, indicando o peso e 
relevância de cada elemento do layout e sua relação com os demais elementos 
formadores do todo. 
Você se lembra que anteriormente falamos sobre o grau de importância dos 
blocos de informação? Pois bem, agora é a hora de aplicar os blocos no local mais 
adequado, conforme a importância de cada um. 
O wireframe indica também a correta marcação de textos, navegação, e até 
os recursos de programação e tecnologia a serem utilizados pela equipe de produção. 
Além desta função estrutural, o wireframe também é utilizado para marcação das 
etapas de um processo de interação entre usuário e sistema, como as etapas de uma 
compra on-line, por exemplo, que vão da busca pelo produto, escolha de um dos 
resultados, confirmação de intenção, preenchimento do cadastro e opção de 
pagamento. 
Como dizemos, o wireframe é como um esqueleto, que demonstra de forma 
direta a arquitetura de como os objetos ficarão na tela de acordo com as 
especificações relatadas. 
 
www.portaleducacao.com.br 
 
13 
Ele é elaborado para organizar os elementos que entrarão na composição do 
projeto final, no entanto, deve ser feito da maneira simples sem a utilização de cores 
ou imagens. 
Na construção do wireframe, o arquiteto da informação busca representar 
esquematicamente todos os elementos que compõem a página: imagens, textos, 
formulários, animações, mecanismos de busca, etc. 
Agora, vamos analisar dois tipos diferentes de wireframes, um trabalho mais 
aberto (com baixo detalhamento) e outro com detalhes mais especificados pelo 
arquiteto da informação. 
O primeiro é um documento com baixo detalhamento e pouca influência no 
trabalho dos designers e das demais equipes do projeto. Ele traz apenas uma 
marcação de blocos de conteúdo, deixando mais liberdade para os designers. 
 
 
FIGURA 8 - TIPO DE WIREFRAME COM BAIXO DETALHAMENTO 
 
FONTE: Autoria própria. 
 
 
www.portaleducacao.com.br 
 
14 
Como você pode notar no exemplo, neste modelo de wireframe, o arquiteto 
da informação divide a página em blocos contendo o Topo, Banner Rotativo, Menu, 
Divulgação, Notícias e o Rodapé, que conterá o contato da empresa e as redes sociais 
disponíveis. O wireframe está simples e com isso o designer poderá deixar fluir sua 
criatividade seguindo as marcações do arquiteto. Nesse caso, o designer terá mais 
liberdade, mas também mais responsabilidade em cima de um projeto. 
Já o segundo modelo apresenta alto grau de detalhamento dos componentes 
da página e utiliza vários elementos gráficospara representá-la. Este modelo de 
wireframe é muito útil no desenvolvimento de um site e também em sua documentação 
posterior, para futuras consultas. Além, é claro, de valorizar o trabalho desenvolvido 
pelo arquiteto de informação. Vamos observar: 
 
 
FIGURA 9 - TIPO DE WIREFRAME COM ALTO DETALHAMENTO 
 
FONTE: Autoria própria. 
 
www.portaleducacao.com.br 
 
15 
É só observar atentamente o segundo wireframe e já visualizamos algumas 
questões que envolvem as competências de um arquiteto de informação, tais como 
conhecimentos básicos de design, tecnologia, programação e redação. 
O arquiteto não tem a obrigação de ser especialista em cada uma destas 
especialidades. Entretanto, o conhecimento dos principais conceitos de cada uma 
delas sem dúvida enriquece o wireframe e apresenta à equipe de produção um projeto 
mais estruturado. O wireframe pode contribuir com a usabilidade de um site no 
momento em que ele está sendo construído. Deverão constar em sua documentação 
alguns procedimentos de auxílio ao usuário do site, como maior rapidez de obtenção 
de resultados, controle sobre o modo de exibição do conteúdo, menus e links sempre 
visíveis, padronizados e inteligíveis, além de ser desenhado de maneira que o usuário 
utilize o menor número de cliques possíveis até alcançar a informação necessária. 
Por fim, é na construção do wireframe que o arquiteto vai garantir que todas 
as páginas mantenham a mesma identidade gráfica, padronizada, e uma presença de 
marca relevante para o site. 
Você já pensou nas vantagens e riscos desse documento? 
Vamos primeiro conhecer os riscos. 
Esse documento pode não atender as expectativas dos clientes, empresas ou 
instituições, que não entendem as marcações que o documento oferece. Os clientes 
preferem aprovar layouts prontos, por serem peças com grande impacto gráfico. Mas 
se houver alguma alteração, o projeto deve ser refeito inteiro. 
Outro fator pelo que corremos com a utilização do wireframe é a acomodação 
da equipe de criação de modo que os designers, por insegurança, não mais inovem 
em seus projetos e sigam somente as indicações do wireframe. E esse não é o 
objetivo deste documento, o arquiteto da informação não quer limitar a criatividade 
dos designers, mas sim, ajudá-los a planejar a melhor maneira para adequar as 
informações na tela. 
A escala em que será construído o wireframe, e posteriormente o site, pode 
gerar desencontros de entendimento da relevância de cada elemento na composição 
da página e seu impacto de visualização. Por isso, é necessário utilizar as medidas 
reais na elaboração e planejamento deste documento. 
O último risco que quero destacar é em relação ao tempo, educação e 
insistência de uso até tornar-se corretamente entendido pelos profissionais envolvidos 
nas etapas de cada projeto. 
 
www.portaleducacao.com.br 
 
16 
Agora que conhecemos os riscos, precisamos analisar as suas vantagens, 
mas tenho certeza que as vantagens superam os riscos, por isso sua importância na 
construção de websites está crescendo cada vez mais. 
O wireframe facilita a aplicação de conceitos de usabilidade, já que será 
analisado cada elemento que será disponibilizado na página. 
Auxilia a equipe na tarefa de produzir o site de maneira mais rápida, 
padronizada, eficiente e o melhor, simultaneamente, ou seja, por meio das 
especificações apresentadas no documento, o designer pode trabalhar 
separadamente do desenvolvedor. 
Após a implantação do site, os wireframes auxiliam nos testes de usabilidade 
e mostram efetivamente o que deve ser refeito em cada uma das páginas. Funciona 
também como uma documentação do site e deve ser consultado antes de cada 
modificação posterior, para prevenir impactos na arquitetura de informação e 
funcionalidade. 
Você pode criar seus wireframes em qualquer software que permita o mínimo 
de organização de elementos geométricos e textos, porém, existem alguns que 
facilitam este trabalho. 
Segundo Anamaria de Moraes (2008), a produção de wireframes é uma etapa 
essencial para uma visualização mais concreta do que será o projeto, auxiliando não 
apenas na estruturação hierárquica das informações, mas também no próprio 
desenvolvimento da interface gráfica. 
A autora cita ferramentas da web que otimizam a produção de wireframes. 
São elas: 
 iPlotz – é uma ferramenta muito bacana, que pode ser usada na web e 
também instalada no seu computador. Ele permite que você exporte e 
visualize seu wireframe em HTML, utilize recursos de grid e ainda possibilita 
que outra pessoa o acesse. A interface desta ferramenta é bem intuitiva, 
seguindo um padrão de clique e arraste. Sua versão free permite gerenciar 
um projeto por vez; 
 Mockflow – assim como a anterior, o Mockflow limita as contas free para 
apenas um projeto por vez e com no máximo quatro páginas. Sua principal 
vantagem é a versatilidade, ela oferece alguns recursos gráficos para 
desenvolver wireframes voltados para iPad, iPhone, Facebook e Android; 
 
www.portaleducacao.com.br 
 
17 
 Pidoco – possui uma interface muito amigável, semelhante ao iPlotz. Ele 
permite criar wireframes com fluxo e, assim como o Mockflow, oferece 
recursos para plataformas mobile e recursos para teste de usabilidade. O legal 
é que estão oferecendo um mês de trial (período de teste) para novos 
usuários; 
 Cacoo – é uma ferramenta totalmente free, bem simples e fácil de usar. O 
Cacoo permite que você compartilhe o seu projeto e mantenha conversas 
online (chat) em tempo real com membros da equipe; 
 MockingBird – esta é outra ferramenta free, um pouco mais simples, mas 
ainda assim bem parecida com o Cacoo. Funciona no Safari, Firefox e no 
Chrome. O curioso é que consegui o MockingBird sem estar cadastrado no 
site. Ela pode ser uma ferramenta bem rápida quando você estiver sem tempo; 
 Fireworks, Illustrator, Corel Draw e outros – você não necessariamente 
precisa utilizar programas específicos para desenvolver wireframes; eles 
podem ser desenvolvidos utilizando ferramentas gráficas como o Illustrator e 
o Corel, por exemplo. Mas, às vezes, os prazos são curtos e algumas das 
ferramentas que listei anteriormente oferecem recursos que permitem mais 
rapidez na produção e na avaliação do wireframe por membros da equipe. 
Mas, escolha o software que você tem mais afinidade. Antes de escolher seu 
software favorito, rabisque à mão, abuse, viaje dentro do seu futuro site. 
 
Finalizando 
Chegamos ao final deste módulo, espero que você tenha compreendido a 
importância da Arquitetura da Informação e da organização de conteúdos para 
disponibilizar na web, bem como as vantagens da utilização do Mapa de Navegação 
e do wireframe. 
Os usuários dos dias atuais estão cada vez mais exigentes, por isso temos o 
dever, como bons webdesigners, de proporcionar o melhor do mundo web para eles. 
Então, por que não começarmos a utilizar essas teorias em práticas e deixar 
nossos usuários cada vez mais contentes! 
 
 
 
 
 
www.portaleducacao.com.br 
 
18 
MÓDULO II 
 
 
3 INTRODUÇÃO AO MÓDULO II 
 
 
Neste módulo, vamos abordar conceitos de usabilidade na web e entender o 
porquê de a usabilidade estar sendo tão comentada ultimamente. 
Nesta imensa “teia”, que é a internet, os usuários estão cada vez mais 
perdidos com o acúmulo de informações que são jogadas a todo o momento. 
Como resolver esse problema e promover a visualização das informações 
correta no nosso site? 
 
Poucos desenvolvedores de site se preocupam com o usuário, por isso este 
módulo é de extrema importância para 
a sua formação, é o seu diferencial. 
Pensar no usuário e também 
no percurso que ele vai seguir é a sua 
função neste curso. Os profissionais 
da área de web pulam esta parte e 
correm para o layout e o 
desenvolvimento, isso é um erro, pois 
existem muitos processos antes de se 
iniciar o layout em si, como a arquitetura de informação, o mapa de navegação,o 
wireframe e agora a usabilidade, a qual está amarrada com a arquitetura de 
informação. 
Vamos conferir? 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
19 
4 USABILIDADE 
 
 
Facilitar, otimizar, simplificar e melhorar são verbos que norteiam o conceito 
de usabilidade. Usabilidade é sinônimo de flexibilidade e de maior interação. 
Mas, afinal, o que é a usabilidade? 
Usabilidade é característica daquilo que é funcional e simples. É tornar óbvio 
o óbvio, tendo em vista as necessidades do usuário e o contexto em que está inserido. 
 
 
FIGURA 10 - USABILIDADE 
 
FONTE: Disponível em: <http://www.sxc.hu/>. Acesso em: 15 jul. 2013. 
 
 
A norma ISO 9241-11 define a usabilidade como a efetividade, a eficiência e 
a satisfação com que usuários específicos atingem objetivos específicos em 
ambientes particulares. 
A usabilidade na internet une-se aos estudos da Interação Humano-
Computador (IHC) e seu foco principal é a interação dos usuários com websites e 
sistemas da web. As interfaces devem ser desenvolvidas de modo a garantir a 
qualidade e a eficiência de um site. 
A usabilidade é um estudo que envolve a engenharia de software, 
desenvolvimento de telas, e estudo de uso da aplicação em si. Este termo indica o 
quanto o software, site ou uma tela qualquer pode ter facilidade de uso ou não. Saber 
construir uma tela de modo que ela seja relativamente fácil de usar para qualquer tipo 
 
www.portaleducacao.com.br 
 
20 
de usuário, experiente ou inexperiente com a Internet, não é algo simples e requer 
muito estudo. 
Tornar um site simples para usuários inexperientes e ao mesmo tempo 
interessante para usuários já acostumados com a web não é tarefa fácil e exige do 
desenvolvedor cuidados redobrados para conseguir atingir de maneira eficaz todo o 
público sem restrição. 
Para Nielsen (1999), nem sempre o meio está sendo usado para facilitar a vida 
do usuário e não é raro ver pessoas frustradas ou perdidas em sites mal feitos. 
Segundo Steve Krug (2003), entre outros comportamentos, vale destacar que os 
usuários fazem um scan das páginas a procura do que precisam ou de uma indicação 
rápida do que fazer, assim como nós quando andamos por uma rua olhamos coisas 
que nos atrai, ignorando grande parte dos outros elementos. 
 
 
Para refletir! 
Vamos analisar uma página. Será que essa página tem uma boa usabilidade por ser 
simples? Será que ela atende todos os requisitos que estamos tratando? Será que 
você consegue distinguir sobre o que ela trata? 
 
 
FIGURA 11 - FALTA DE USABILIDADE DE PÁGINA 
 
FONTE: Disponível em: <http://www.2atoms.com/comedy/worstoftheweb/blount.htm>. 
Acesso em: 5 ago. 2013. 
Pois é, tarefa difícil, não é mesmo? Por isso temos que tratar um website com muito 
cuidado, para não confundir seu usuário. 
 
 
 
www.portaleducacao.com.br 
 
21 
Como já falamos anteriormente, os princípios de usabilidade vêm sendo 
muito comentados nos dias atuais, no entanto, a teoria ainda não se juntou à prática, 
pois muitos sites da Web ainda não seguem esses princípios, seja por inabilidade 
técnica ou por simples desinteresse comercial. Porém, alguns profissionais já se 
atentaram para os inúmeros benefícios trazidos por meio da implementação desses 
princípios. 
Um desenvolvedor de website que se preocupa com a usabilidade deve estar 
atento para manter o usuário no caminho desejado, sem confusões e quebras, que 
poderiam gerar grande frustação, e consequentemente a saída do usuário do site. 
Vamos analisar a usabilidade de um site de vendas famoso. 
 
 
FIGURA 12 - FAMOSO SITE DE COMPRAS 
 
FONTE: Disponível em: <http://www.walmart.com.br/>. Acesso em: 5 ago. 2013. 
 
O website da empresa Walmart apresenta todos os requisitos que a gente 
vem tratando até o momento. 
Tudo o que o usuário precisa ele encontra fácil e rápido, os valores dos 
produtos estão em destaque, as promoções também. Além de apresentar logo na 
parte superior um campo de busca. 
 
 
www.portaleducacao.com.br 
 
22 
Analise este website. O que você mudaria para melhorar a vida dos 
usuários? Vamos, reflita sobre ele! 
 
Os desenvolvedores de sites estão sendo cobrados frequentemente pelos 
usuários que navegam por meio da internet. Eles perceberam que não é fácil 
conquistar a confiança de um usuário da internet, visto que ele possui uma enorme 
gama de concorrência e isso representa uma ampla competitividade quando se fala 
em comércio eletrônico e até mesmo conteúdo informativo, e essa confiança pode se 
romper a qualquer instante por um simples descuido como um link quebrado, ou um 
link que o leve para um contexto diferente ao que está sendo informado. 
Quer coisa mais desagradável que você clicar para visualizar informações 
sobre bananas e aparecer informações sobre pepinos? 
Pior ainda, você está efetuando uma compra online, já adicionou vários itens 
no carrinho e quando vai finalizar a página te leva para um erro, ou a uma página 
inexistente? 
Para conquistar o usuário é preciso primeiramente garantir as informações ao 
site de forma segura e eficiente. Depois disso, uma interface agradável, onde o usuário 
consiga interagir de forma simples e alcançar de forma satisfatória o seu objetivo. 
Você percebeu que antes de chegarmos à criação da interface é preciso nos 
atentar para os passos dos usuários? Isso parece ser um pouco difícil, não é mesmo? 
Mas existem várias regras que nos levam a resultados satisfatórios. 
Conforme Nielsen (1999), as consequências de uma interface gráfica pobre 
em usabilidade são muito piores quando esta é implementada na Web do que quando 
é implementada em software tradicional. 
 
 
 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
23 
4.1 A IMPORTÂNCIA DOS USUÁRIOS EM PROJETOS WEB 
 
 
FIGURA 13 – O USUÁRIO 
 
FONTE: Disponível em: <http://www.sxc.hu/>. Acesso em: 15 jul. 2013. 
 
 
Com o avanço da internet, e a facilidade de se adquirir um computador ou 
algum meio de acesso à internet, sendo telefones celulares, tablets, notebooks, etc., 
a quantidade de usuários aumentou muito. E cada vez mais a exigência está 
aumentando por parte deles, principalmente em relação à usabilidade, ou seja, os 
usuários querem cada vez mais velocidade na procura pela informação; e isso é muito 
positivo para nós desenvolvedores. 
É muito importante conhecermos o que os usuários estão querendo, como 
eles querem receber as informações, por quais dispositivos eles gostariam de recebê-
las. 
Nesta busca constante em agradar os usuários, vamos apresentar algumas 
dicas para satisfazer os diversos tipos de usuários, experientes ou não em navegar 
na internet. 
Agora, vamos às dicas: 
1) os usuários devem conseguir alcançar seus desejos com o mínimo de 
esforço e com o máximo de resultado; 
 
www.portaleducacao.com.br 
 
24 
2) um website não deve nunca tratar o usuário de forma agressiva. Quando 
o usuário comete um erro o sistema deve avisá-lo sobre o erro e solucionar o 
problema. De forma alguma poderá ser informado ao usuário que aquele erro 
foi culpa dele; 
3) em hipótese alguma devem existir links quebrados, ou links que levam o 
usuário a locais onde ele não buscou. O respeito ao usuário é essencial para 
a confiança website/usuário; 
4) quanto maior for o número de ações que um usuário possa realizar, maior 
será a probabilidade que cometa um erro. Por isso, é preciso limitar o número 
de ações para facilitar o uso de um website; 
5) um website deve promover feedbacks aos usuários, de maneira que estes 
sempre conheçam e compreendam o que acontece em todos os passos do 
processo. Aqui entra novamente a confiança entre website/ usuário. 
 
 
São muito importantes esses laços afetivos com os usuários. Quando nós, 
desenvolvedores, 
começamos a pensar um 
pouco mais naqueles que 
estão do outro lado, as ações 
começam a melhorar e a 
probabilidade de cometer 
erros diminui cada vez mais.www.portaleducacao.com.br 
 
25 
4.2 COMO ATINGIR O OBJETIVO DE UM SITE EM MENOS CLIQUES 
 
 
Pesquisas constantes são realizadas sobre a relação do usuário 
com a interação de uma interface. Seguindo algumas regras, certamente 
será possível levar o usuário a atingir um objetivo específico, como, por 
exemplo, fazer o usuário clicar no link que o leve para a compra de um 
produto. 
Existem inúmeros princípios e regras de usabilidade, difundido por diversos 
autores, mas a definição de quais regras serão utilizadas irá depender de cada projeto 
e objetivo, mas certamente existem algumas dicas que se seguidas darão retorno na 
maioria dos projetos. 
 
Entre as regras gerais que podem ser comentadas está a regra dos dois 
segundos. De acordo com Vitaly Friedman (2007), a regra diz que um usuário não 
pode esperar mais do que dois segundos para obter uma resposta a determinada 
solicitação. É pouco provável que um projeto consiga definir o tempo de retorno com 
tanta exatidão, já que na Web existem vários fatores envolvidos, como velocidade de 
conexão, performance do servidor e até mesmo performance do cliente. Na prática, a 
regra seguida é: quanto menos o usuário precisar esperar, melhor. 
Outra regra a ser seguida é a dos três cliques. Ela define que o usuário não deve 
ter que executar mais do que três cliques em uma página para encontrar a informação 
que precisa. A regra mostra que devemos sempre manter o site o mais claro possível 
para o usuário; ele deve entender facilmente a organização e hierarquia do site. 
 
Para exercitar! 
Por favor, pesquise websites que ofereçam até três cliques para se chegar à 
informação necessária. 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
26 
4.3 USABILIDADE PARA ADEQUADO FUNCIONAMENTO DO SITE 
 
Saiba mais. 
Você sabia que a maioria dos usuários não “dão scroll”, ou seja, não rolam a página 
à procura de informações? Por isso, mantenha o conteúdo principal na área 
segura. 
 
 
O que é área segura em um website? 
 
 
FIGURA 14 - ÁREA SEGURA 
 
FONTE: Disponível em: <http://www.walmart.com.br/>. Acesso em: 5 ago. 2013. 
 
 
Para exemplificar a área segura de um website, selecionamos o site do 
Magazine Luiza. Note que a barra de rolagem está localizada lá em cima da página, 
ou seja, existem muitas rolagens ainda com a divulgação de outros produtos. Área 
segura é aquela que, quando a página é carregada, apresenta as informações que 
sejam mais relevantes ao site. Lembra-se do conceito de Arquitetura de Informação? 
As seções separadas por grau de importância? Então, naquela listagem, 
provavelmente, o arquiteto de informação colocou como prioridade: 1º a logomarca da 
empresa, juntamente com a garota propaganda, a busca de produtos e informações 
 
www.portaleducacao.com.br 
 
27 
sobre televendas, login e o carrinho de compras; 2º menu, com as categorias dos 
produtos; 3º produtos em promoção. E assim por diante. 
Como você pode notar, a página, antes de iniciar a rolagem, segue o grau de 
prioridade até da terceira seção. Com a exemplificação deste website de vendas, você 
consegue observar como é aplicado o grau de prioridade, além de compreender a 
importância da área segura. Tentamos colocar o que é de mais relevante na área 
segura, pois se o usuário abre o website e ele não encontra nada de atrativo e 
importante sem iniciar a rolagem, provavelmente ele abandona o site. 
Um website deve antecipar-se às necessidades do usuário, além disso, ele 
deve promover o controle total dos usuários. Os websites devem centrar-se na 
produtividade do usuário, não no próprio website, e permitir que o usuário possa 
desfazer ações, ou apresentar um botão ou hiperlink que o leve até a página inicial, 
por exemplo. 
O uso adequado de símbolos ou metáforas facilita a aprendizagem de um site, 
mas um uso inadequado pode dificultar enormemente a aprendizagem, por isso muito 
cuidado com as imagens que você vai utilizar para localizar o seu usuário. 
 
 
4.4 ACESSIBILIDADE NA WEB 
 
 
A acessibilidade na web tem como objetivo proporcionar que qualquer pessoa, 
usando qualquer tecnologia adequada à navegação web, possa visitar qualquer site, 
e obter a informação oferecida e interaja com o site. E para que isso seja possível, é 
necessário que os desenvolvedores de website estejam atentos às recomendações 
de acessibilidade do World Wide Web Consortium (W3C), mas também às diferentes 
características dos usuários desses sistemas, às tecnologias de acesso à informação 
e interação que utilizam e à influência do ambiente físico sobre a interação do usuário 
com o computador. 
Segundo Amanda Meincke Melo (2003), atualmente existem várias 
motivações para tornar a web acessível, como: 
 promover o direito básico de acesso à informação, tendo em vista uma 
sociedade mais justa e solidária, que busca a qualidade de vida para todos; 
 
www.portaleducacao.com.br 
 
28 
 atender à legislação, como é o caso do Brasil que, no Decreto n° 5.296, 
de 2 de dezembro de 2004, exige que os sistemas web da administração 
pública sejam acessíveis às pessoas com deficiência visual; 
 ampliar o número de consumidores, uma vez que existem no mundo cerca 
de 500 milhões de pessoas com algum tipo de deficiência. 
O acesso à informação é um direito constitucional: “é assegurado a todos o 
acesso à informação e resguardado o sigilo da fonte, quando necessário ao exercício 
profissional”. Além disso, o Brasil é signatário da Declaração de Guatemala ou 
Convenção Interamericana para Eliminação de todas as Formas de Discriminação 
contra as Pessoas Portadoras de Deficiência, comprometendo-se, entre outras coisas, 
a estabelecer medidas para facilitar a comunicação das pessoas com deficiência. 
Acessibilidade é uma noção relativa e contextual. Sua definição apropriada 
depende da abrangência e do contexto em que é utilizada. Os dicionários, por 
exemplo, definem o termo como a qualidade ou caráter do que é acessível; facilidade 
na aproximação, no tratamento ou na aquisição; livre acesso, possibilidade de 
aproximação; facilmente compreendido, comunicativo. 
 
No caso de pessoas portadoras de deficiência, a acessibilidade significa que 
um local é organizado de modo que esses cidadãos possam nele penetrar e circular 
sem obstáculos; que as instalações, os equipamentos e os meios de comunicação 
sejam concebidos para permitir seu uso, com ou sem adaptação. 
A acessibilidade pode, ainda, ser física ou virtual. Quando é física, ela se 
refere à garantia de mobilidade e usabilidade em todos os espaços como, por 
exemplo, na arquitetura urbana e edificações, móveis, aparelhos e utensílios 
domésticos e equipamentos eletrônicos. 
 
 
4.4.1 Acessibilidade física e virtual 
 
 
A acessibilidade virtual significa facilidade de interação e refere-se à garantia 
de mobilidade e usabilidade de recursos computacionais. Nesse sentido, a 
acessibilidade diz respeito a locais, produtos, serviços ou informações efetivamente 
 
www.portaleducacao.com.br 
 
29 
disponíveis ao maior número e variedade possível de pessoas independente de suas 
capacidades físico-motoras e perceptivas, culturais e sociais. 
 
Tanto a acessibilidade física quanto a virtual requerem a eliminação de 
barreiras arquitetônicas, a disponibilidade de comunicação, de acesso físico, de 
equipamentos e programas adequados, de conteúdo e apresentação da informação 
em formatos alternativos. 
Agora que você já conhece as principais definições do conceito de 
acessibilidade, abordaremos a definição que nos interessa com relação ao seu uso 
na Web. Sendo assim, qual o significado do termo acessibilidade na Web? 
 
FIGURA 15 - ACESSIBILIDADE NA WEB 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
FONTE: Disponível em: <http://www.sxc.hu>. Acesso em: 15 jul. 2013. 
 
 
A acessibilidade na Web engloba páginas, sítios, portais e demais aplicações 
onde as pessoas possam perceber, compreender, navegare interagir. Engloba ainda, 
navegadores, tocadores de mídia, extensões e outras ferramentas e tecnologias 
utilizadas para produzir e acessar o conteúdo das páginas. 
 
www.portaleducacao.com.br 
 
30 
Assim, um website projetado e desenvolvido com acessibilidade estará 
adequado para atingir muito mais pessoas, incluindo usuários com diferentes 
habilidades e em situações diversas. 
Tim Berners-Lee, diretor do W3C, afirma que o poder da web está na sua 
universalidade. Para ele, “ser acessada por todo independente de deficiência, é um 
aspecto essencial”. 
A acessibilidade na Web significa, portanto, permitir o acesso a todos, 
independente do tipo de usuário, situação ou ferramenta. 
 
 
4.4.1.1 Desenho Universal 
 
O propósito do Desenho Universal é simplificar a vida das pessoas de todas 
as idades e habilidades, projetando produtos, meios de comunicação e ambientes 
usáveis por muitas pessoas, o maior tempo possível e sem a necessidade de recorrer 
a adaptações ou a desenhos especializados. 
O Desenho Universal é regido por sete princípios reconhecidos pela 
Organização Internacional de Padronização (ISO) e utilizados em projetos de diversas 
naturezas: 
1) equiparação nas possibilidades de uso; 
2) flexibilidade no uso; 
3) uso simples e intuitivo; 
4) captação da informação; 
5) tolerância ao erro; 
6) mínimo esforço físico; 
7) dimensão e espaço para uso e interação. 
 
 
Desenho Universal e acessibilidade na Web, existe relação entre eles? 
A resposta é sim. A acessibilidade na Web contribui para o Desenho 
Universal, uma vez que a criação de páginas acessíveis beneficia não apenas as 
pessoas portadoras de deficiência, mas também pessoas que se encontrem em 
situações e características diversas. 
 
 
www.portaleducacao.com.br 
 
31 
 
4.4.1.2 Tipos de deficiência 
 
 
Agora, vamos conhecer os tipos de deficiência? 
De um modo geral, os usuários da Internet que mais encontram barreiras de 
acesso ao conteúdo das páginas são as pessoas portadoras de deficiência. Para 
eliminar as barreiras de acesso, é necessário que a equipe crie páginas com recursos 
técnicos de acessibilidade. 
 
 
Vamos exercitar? 
Pesquisem um dos tipos de deficiência que dificultam o acesso à internet. Cite o 
grau que ela pode apresentar em um projeto e reflita em uma solução para o seu 
website. 
 
 
Os tipos de deficiência são: 
 Deficiência física – é caracterizada pela alteração completa ou parcial de 
um ou mais segmentos do corpo humano, acarretando o comprometimento 
da função física e pode se apresentar sob a forma de: paraplegia, paraparesia, 
monoplegia, monoparesia, tetraplegia, tetraparesia, triplegia, triparesia, 
hemiplegia, hemiparesia, amputação ou ausência de membro, paralisia 
cerebral, membros com deformidade congênita ou adquirida, exceto as 
deformidades estéticas e as que não produzam dificuldades para o 
desempenho de funções; 
 Deficiência auditiva – se caracteriza pela perda parcial ou total das 
possibilidades auditivas sonoras, variando em graus e níveis na forma 
seguinte: 
 de 25 a 40 decibéis (db): surdez leve; 
 de 41 a 55 db: surdez moderada; 
 de 56 a 70 db: surdez acentuada; 
 de 71 a 90 db: surdez severa; 
 acima de 91 db: surdez profunda; e 
 
www.portaleducacao.com.br 
 
32 
 surdez total (anacusia). 
 Deficiência visual – refere-se a uma situação irreversível de 
diminuição da resposta visual, em virtude de causas congênitas ou 
hereditárias, mesmo após tratamento clínico e/ou cirúrgico e uso de óculos 
convencionais. A diminuição da resposta visual pode ser leve, moderada, 
severa ou profunda, o que caracteriza o grupo de pessoas com visão 
subnormal ou baixa visão. Essa deficiência pode, ainda, ser caracterizada 
pela ausência total da resposta visual, ou seja, pela cegueira; 
 Deficiência mental – pessoas portadoras de deficiência mental são 
caracterizadas por um funcionamento intelectual significativamente inferior à 
média, com manifestação antes dos 18 anos e limitações associadas a duas 
ou mais áreas de habilidades adaptativas, tais como comunicação, cuidado 
pessoal, habilidades sociais, utilização da comunidade, saúde e segurança, 
habilidades acadêmicas, lazer e trabalho; 
 Deficiência múltipla – as pessoas portadoras de deficiência múltipla são 
aquelas afetadas em duas ou mais áreas, caracterizando uma associação 
entre diferentes deficiências, com possibilidades bastante amplas de 
combinações. Um exemplo seriam as pessoas que têm deficiência mental e 
física. 
 
 
Finalizando 
Chegamos ao final deste módulo. 
Neste módulo você conheceu o conceito de usabilidade, a importância dela 
na vida dos usuários, além de compreender sobre as principais áreas de um website 
e também a quantidade necessária de cliques para alcançar uma informação. 
Entendeu os conceitos de acessibilidade e as deficiências, as principais 
deficiências existentes, e ainda refletiu sobre elas nos projetos web. 
Bom estudo para você e até o próximo módulo! 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
33 
MÓDULO III 
 
 
5 INTRODUÇÃO AO MÓDULO III 
 
 
Bem vindo ao Módulo III do curso de Webdesign. 
Neste módulo vamos conhecer os elementos visuais utilizados em projetos 
web, a teoria das cores, as combinações eficazes e não eficazes utilizadas para web, 
bem como a melhor utilização de imagens e extensões disponíveis para inseri-las na 
web. 
A interface é a cara do seu projeto web. Sem ela seu sistema não tem o menor 
valor. Por isso ela é tão importante quanto as informações, a organização destas 
informações, a disponibilização e todo o sistema envolvido em um projeto. 
Está pronto para utilizar a criatividade que está dentro de você? 
Então, vamos lá! 
 
 
6 INTERFACE 
 
A indústria da informática está vencendo limitações históricas que persistiram 
fortemente nestas últimas décadas. A distribuição em massa de aplicativos de 
software interativo nos diversos setores da atividade humana é quase uma realidade, 
e as interfaces usuário-computador são cada vez mais intuitivas e fáceis de usar. 
Pessoas com pouca ou nenhuma formação em informática estão realizando o acesso 
a sistemas desktop ou web. A ideia da rede mundial se concretiza particularmente 
devido à simplicidade e à facilidade de interfaces gráficas baseadas em hipertexto. O 
fato é que um website pode causar um impacto importante na vida do usuário. Esses 
sistemas condicionam totalmente suas estratégias, objetivos e desempenho em 
inúmeras tarefas. Os ganhos de produtividade individual podem ser enormes, mas 
devemos ter o devido cuidado para se evitar a frustração. 
As taxas de erros na utilização de um website de difícil aprendizado e 
operação levam a uma modificação ou mesmo a uma duplicação da tarefa, o que 
requer um esforço tremendo de adaptação por parte dos usuários. Essa situação pode 
 
www.portaleducacao.com.br 
 
34 
ser agravada pela frustração, que leva ao estresse de um trabalho cotidiano e 
repetitivo, chegando mesmo às psicopatologias desenvolvidas por pessoas incapazes 
de reagir a esse tipo de pressão no trabalho. 
Segundo Bonsiepe (1997, p. 43), a interface é o domínio do “acoplamento 
estrutural” entre a ferramenta (computador) e usuário. Pode-se dizer que a interface é 
para o programa o que o cabo é para o martelo. Este acoplamento ocorre em primeiro 
lugar por meio do espaço retinal. A noção do look and feel, citada anteriormente, se 
refere a este processo de acoplamento entre corpo e ferramenta por meio da 
percepção visual. 
As interfaces fornecem a interação humano-computador, dessa forma, ela 
deve apresentar facilidade de uso e fornecer sequências simples e consistentes de 
interação. 
Ainda segundo o autor Bonsiepe (1997), a interface tem a função de permitir 
ao usuário obter uma visão panorâmica do conteúdo, navegar na massa de dados 
sem perder a orientação, e, por fim, mover-se no espaço informacional de acordocom 
seus interesses. 
Visando tornar a interação com o usuário mais natural possível, as interfaces 
passaram a ser constituídas por elementos gráficos. 
Segundo a Wikipedia: 
 
O conceito de Interface é amplo, pode se expressar pela presença de uma 
ou mais ferramentas para o uso e movimentação de qualquer sistema de 
informações, seja ele material, seja ele virtual. O dicionário define interface 
como o conjunto de meios planejadamente dispostos sejam eles físicos ou 
lógicos com vista a fazer a adaptação entre dois sistemas para se obter um 
certo fim cujo resultado possui partes comuns aos dois sistemas, ou seja, o 
objeto final possui características dos dois sistemas. 
 
A interface web é uma etapa muito importante no desenvolvimento de um 
website, pois conecta o usuário com a máquina. Por meio dela é que são 
apresentadas as informações e estímulos e por onde o usuário recebe as respostas, 
deixando a interação nas mãos dele. Por isso, a transição entre o mundo real e o 
digital deva ir além de um visual agradável, o ideal é que ela seja transparente, natural, 
intuitiva e prática. “A Interface para o usuário humano é o conjunto de toda a 
comunicação entre computadores e usuários” (APPLE COMPUTERS apud 
BONSIEPE, 1997, p. 40). 
 
www.portaleducacao.com.br 
 
35 
Entretanto, a relação entre o usuário e o computador em termos de troca de 
informações é bem mais complexa. Segundo Sun Microsystems (1989, p. 1), “[...] a 
especificação do look and feel de um sistema computacional inclui os tipos de objeto 
que o usuário vê no monitor e as convenções básicas para interatuar com estes 
objetos”. 
É importante compreender a relação entre o design de componentes gráficos 
e as regras para lidar com estes componentes que venham a compor um bom sistema 
de troca de informações entre o programa e o usuário. 
As interfaces de manipulação direta, ou interfaces gráficas, se constituem por 
janelas, ícones, menus e botões. O entendimento do usuário em relação ao uso do 
website é estruturado a partir de distinções gráficas como: forma, cor, tamanho, 
posição, orientação, textura e transições, que compõe o design da interface. 
 
Além do paradigma de comunicação, encontramos outra afirmação de que a 
função do design da interface consiste em ajudar o usuário a construir um 
modelo mental na sua cabeça que reproduziria o conhecimento do 
programador. (BONSIEPE, 1997, p. 40). 
 
Ainda segundo Bonsiepe (1997), a interface tem a função de permitir ao 
usuário obter uma visão panorâmica do conteúdo, navegar na massa de dados sem 
perder a orientação, e, por fim, mover-se no espaço informacional de acordo com seus 
interesses. 
Você percebeu o quanto é importante essa relação? Por isso na hora de iniciar 
o desenvolvimento da sua interface, não pense apenas em deixá-la “bonitinha”, mas 
sim completa e intuitiva, a fim de atender ao usuário. 
E em que mais precisamos nos preocupar para a elaboração de uma 
interface? 
Ah! Essa resposta é muito fácil. 
Agora, vamos saber o quanto as cores são influentes no nosso dia a dia. 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
36 
6.1 TEORIA DAS CORES 
 
 
Você sabia que cor é vida? 
As cores que percebemos são produzidas pela luz. 
A luz do sol, aparentemente branca, é, na verdade, 
composta 
pelas sete cores do arco-íris. O uso da cor na 
computação gráfica torna os terminais de vídeo mais 
bonitos e agradáveis, auxilia a visualização de conexões 
em desenhos complexos, melhorando a legibilidade da 
informação. 
A cor, elemento fundamental em qualquer processo de comunicação, merece 
uma atenção especial. É um componente com grande influência no dia a dia de uma 
pessoa, interferindo nos sentidos, emoções e intelecto. Ela tem capacidade de captar 
rapidamente – e sob um domínio emotivo – a atenção do comprador. Além disso, 
exerce ação tríplice: 
 impressiona – quando ela é vista impressiona a retina; 
 expressa – quando sentida provoca emoção; 
 constrói – possui um valor de símbolo, podendo, assim, construir uma 
linguagem que comunique uma ideia. 
 
 
6.1.1 Cores primárias, secundárias e complementares e tonalidade das cores 
 
Você sabe o que são cores primárias? 
São as cores puras, mais propriamente o azul, amarelo e vermelho. 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
37 
 
FIGURA 16 - CORES PRIMÁRIAS (AZUL, AMARELO E VERMELHO) 
 
 
E as cores secundárias? Você conseguiria identificar? 
As cores secundárias são as cores que surgem da mistura de duas cores 
primárias: 
 azul + amarelo = verde; 
 azul + vermelho = roxo; 
 amarelo + vermelho = laranja. 
 
 
FIGURA 17 - CORES SECUNDÁRIAS 
 
 
 
E as cores complementares? O que são? 
As cores complementares são as cores opostas no disco de cores. Elas são 
usadas para dar força e equilíbrio a um trabalho criando contrastes. 
 
www.portaleducacao.com.br 
 
38 
Veja no exemplo a seguir: o amarelo é a cor complementar do roxo, pois ele 
está no lado oposto do disco das cores. Assim como o vermelho e o verde, o laranja 
e o azul. 
 
 
FIGURA 18 - CORES COMPLEMENTARES 
 
 
 
E quanto à tonalidade? 
A tonalidade refere-se à quantidade de luz presente na cor. Quando se 
adiciona preto a determinado matiz, este se torna gradualmente mais escuro, e essas 
graduações são chamadas escalas tonais. Para escalas tonais mais claras 
acrescenta-se o branco. 
 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
39 
FIGURA 19 - ESCALA DE TONALIDADE DAS CORES 
 
 
 
 
Você sabia que as cores têm temperatura? 
A temperatura das cores designa a capacidade que as cores têm de parecer 
quentes ou frias: 
 Cores frias – as cores denominadas frias são cores que transmitem a 
sensação de frio e são associadas à água, ao gelo, ao céu, e às arvores. 
Como exemplos, podemos citar os tons de azul, lilás e verde; 
 Cores quentes – já as cores quentes transmitem sensação de calor e são 
associadas ao sol e ao fogo. Como exemplos, podemos citar os tons de 
amarelo, laranja e vermelho. 
 
 
FIGURA 20 - CORES FRIAS 
 
 
 
www.portaleducacao.com.br 
 
40 
FIGURA 21 - CORES QUENTES 
 
 
Imaginem uma enorme fogueira com cores frias, não ia transmitir o calor real 
de uma fogueira, e cubos de gelo vermelho. Já pensou? 
Por isso as cores são tão importantes, pois elas têm o poder de transmitir 
sensações nas pessoas. 
 
 
6.1.2 O significado das cores na Publicidade 
 
Você sabe qual o significado das cores? 
Para cada pessoa, em cada lugar, em cada objeto, as cores têm um 
significado, ou seja, o significado de uma cor depende de seu contexto. 
De acordo com os estudos do professor Modesto Farina (1997), existem 
algumas indicações seguras quanto ao uso das cores em publicidade: 
 vermelho – aumenta a atenção, é estimulante, motivador. Indicado para 
uso em anúncios de artigos que indicam calor e energia, artigos técnicos e de 
ginástica; 
 laranja – indicado para as mesmas aplicações do vermelho, com 
resultados um pouco mais moderados; 
 amarelo – visível a distância, estimulante. Cor imprecisa pode produzir 
vacilação no indivíduo e dispersar parte de sua atenção. Não é uma cor 
 
www.portaleducacao.com.br 
 
41 
motivadora por excelência. Combinada com o preto, podemos obter bons 
resultados. Geralmente indicada para aplicação em anúncios que indiquem 
luz. É desaconselhável seu uso em superfícies muito extensas; 
 verde – estimulante, mas com pouca força sugestiva. Oferece uma 
sensação de repouso. Indicado para anúncios que caracterizam o frio, azeites, 
verduras e semelhantes; 
 azul – possui grande poder de atração. É neutro nas inquietações do ser 
humano. Acalma o indivíduo e seu sistema circulatório. Indicado em anúncios 
que caracterizem o frio; 
 roxo – acalma o sistema nervoso quando utilizado em anúncios de artigos 
religiosos, em viaturas, acessórios funerários etc. Para dar a essa cor maior 
sensação de calor, deve-seacrescentar vermelho; para luminosidade, o 
amarelo; para calor, o laranja; para frio, o azul; para arejado, o verde; 
 ouro – cor representativa do valor e dignidade. Deve ser aplicada em 
anúncios de artigos de alta categoria e luxo; 
 marrom – esconde muito a qualidade e o valor e, portanto, pouco 
recomendável em publicidade; 
 violeta – entristece o ser humano, não sendo, portanto, muito bem visto 
na criação publicitária; 
 cinza – indica discrição. Para atitudes neutras e diplomáticas é muito 
utilizado em publicidade; 
 preto – deve ser evitado o excesso em publicações em cores, pois tende 
a gerar frustração. 
 
 
6.1.2.1 Combinações de cores eficazes 
 
 
 azul e branco – estimulante, predispõe à simpatia. Oferece uma sensação 
de paz para produtos e serviços que precisam demonstrar sua segurança e 
estabilidade; 
 azul e cinza – combinação clássica, encontrada em grande parte dos 
sites, denota sofisticação; 
 
www.portaleducacao.com.br 
 
42 
 azul e vermelho – estimulante, combinação de grande eficácia em 
comunicação; 
 azul e amarelo – ideia de eficiência, confiança, organização e estrutura. 
Agrada a maioria dos usuários; 
 vermelho e amarelo – estimulante eficaz, provocando opressão e 
insatisfação, levando as pessoas a tomarem atitudes, por exemplo, comprar 
o produto; 
 azul e laranja – o laranja tem a propriedade de aquecer o azul e confere 
um visual moderno e diferenciado ao layout. Ideal para sites de 
entretenimento e diversão; 
 azul e rosa – resultado agradável, podendo ser utilizado em casos 
específicos, como sites femininos e infantis; 
 preto e cinza – combinação elegante, mas tente quebrar a monotonia com 
uma terceira cor mais alegre; 
 vermelho escuro e cinza claro – sugere força, sofisticação e consistência. 
 
 
6.1.2.2 Combinações não eficazes de cores 
 
 
 preto e azul – sensação de antipatia, leva à preocupação, desvaloriza a 
comunicação; 
 preto e roxo – sugere morbidez, mistério profundo, macabro; 
 preto e vermelho – são cores muito pesadas e sensuais que podem 
intimidar o usuário. Prefira a utilização destas cores junto com a cor branca, 
suavizando a agressividade e ampliando a legibilidade da informação; 
 vermelho e verde – o vermelho e o verde são cores que conflitam, 
vibrando em demasia e dificultando a leitura da informação; 
 vermelho e laranja – cores muito próximas, que dificultam o contraste e 
tornam o layout quente e vibrante em demasia; 
 branco e amarelo – são cores muito claras, que não criam um contraste, 
e tendem a ferir a vista. Uma boa solução é a utilização do preto, que confere 
um efeito de modernidade; 
 
www.portaleducacao.com.br 
 
43 
 azul e verde – apresenta baixo contraste, prejudicando a visibilidade. A 
alternativa seria a utilização do azul escuro com um verde claro, mesmo assim 
uma combinação de baixos estímulos. 
 
 
6.1.3 O significado das cores em nossas vidas 
 
 
Você sabia que cada cor determina um período da nossa visa, vamos 
descobrir esses períodos? 
 
 
FIGURA 22 - CORES CONFORME O PERÍODO DE NOSSAS VIDAS 
 
FONTE: 
 
 
Como já dissemos antes, as cores influenciam muito na nossa vida. Veja dois 
exemplos da influência das cores: 
 segundo algumas pesquisas realizadas, vários empregadores 
começaram a usar tons de verde no ambiente de trabalho, diminuindo assim 
a ausência dos empregados por motivos de doenças; 
 em uma universidade americana, o técnico do time de futebol americano 
pintou de rosa o vestiário das equipes visitantes, baseado em uma pesquisa 
 
www.portaleducacao.com.br 
 
44 
que demonstrou que um ambiente rosa tinha o efeito de reduzir a 
agressividade. Consequentemente a equipe adversária tornava-se menos 
agressiva, e você sabe que a agressividade é um dos fatores principais para 
um jogo de futebol americano. 
 
 
6.1.4 As cores na Web 
 
Você se lembra de como era antigamente a visualização das telas de 
computador? O fundo era preto com escrita em verde ou amarela, não tinha nenhum 
atrativo, imagem nem pensar, as horas passadas em frente ao monitor se tornavam 
cansativas. Com a chegada do WWW, a World Wide Web, em termos gerais, a 
interface gráfica da Internet teve a necessidade de incorporar imagens e cores nas 
telas. A World Wide Web é um sistema de documentos, na forma de vídeos, sons, 
hipertextos e figuras, interligados e executados na Internet. Eles são organizados de 
maneira a englobar todos os outros sistemas de informação disponíveis na Internet. 
Sua ideia básica é criar um mundo de informações sem fronteiras, prevendo 
as seguintes características: 
 interface consistente; 
 incorporação de um vasto conjunto de tecnologias e tipos de documentos; 
 leitura universal. 
Juntamente com o WWW foi necessária a implementação de algumas 
ferramentas importantes: 
 HTTP – protocolo de transmissão de dados; 
 URL – sistema de endereçamento próprio; 
 HTML – linguagem de marcação, para transmitir documentos formatados 
por meio da rede. 
E as cores são uma importante propriedade estética em uma página na Web. 
Devido a suas qualidades atrativas, podemos usar as cores para identificar os 
elementos que devem atrair a atenção do usuário. 
Quando usada incorretamente, a cor pode ter um efeito negativo ou de 
distração. 
 
 
www.portaleducacao.com.br 
 
45 
Vamos praticar? 
Observe o layout de um site simples a seguir, mostrado em três combinações de 
cores diferentes, e use as perguntas para determinar cada uma de suas respostas. 
Preste atenção às suas primeiras impressões! 
 
 
FIGURA 23 - COMBINAÇÕES DE CORES EM LAYOUTS DE SITES 
 
Agora, reflita sobre as seguintes questões: 
- Qual deles vende os produtos mais caros/baratos? 
- Em qual deles você teria mais/menos confiança ao comprar? 
- Se você estivesse procurando, por exemplo, informações financeiras, qual site você 
estaria mais/menos propenso a escolher? 
- A mulher está dizendo um "segredo". Em cada caso, na sua opinião, de que se trata 
esse segredo? 
 
 
As primeiras impressões normalmente são geradas com base no esquema de 
cores. Pessoas diferentes podem ter respostas diferentes para cada uma dessas 
perguntas. A resposta às cores é cultural e afetada por nossa experiência com as 
cores no nosso cotidiano. 
Alguns efeitos das cores, entretanto, são universais ou, pelo menos, 
amplamente difundidos. Vamos analisar novamente cada um dos exemplos e ver 
como uma alteração simples na cor pode alterar a imagem de um site. 
Algumas combinações de cores atraem exclusivamente um segmento do 
mercado, ampliando assim o apelo de um site. 
 
 
 
 
www.portaleducacao.com.br 
 
46 
FIGURA 24 - USO DO VERDE EM LAYOUT DE SITE 
 
 
Você pode notar que a primeira opção de layout é mais direcionada para o 
público feminino, excluindo uma parte grande de público-alvo. Se o layout sofrer uma 
pequena saturação nas cores, a audiência se torna mais ampla. 
 
 
FIGURA 25 - USO DO AMARELO EM LAYOUT DE SITE 
 
 
Neste outro exemplo (Figura 28), a primeira opção transmite depressão, 
impetuosidade, atrevimento, devido ao uso intenso das cores. Trabalhando apenas a 
tonalidade, podemos chegar a um resultado mais satisfatório tornando o layout mais 
amigável com mais qualidade. 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
47 
FIGURA 26 - USO DO AZUL EM LAYOUT DE SITE 
 
 
 
Neste terceiro exemplo, a combinação de azuis projeta uma sensação de 
sobriedade e autoridade, por isso essa cor está presente em muitos sites de grandes 
empresas. 
Mas precisamos tomar cuidado com o uso excessivo dos tons de azuis, note 
que a primeira opção apresenta uma aparência fria, conservadora e não receptiva. 
Olhando para este layout, conseguimos perceber que para torná-lo mais receptivo e 
amigável é necessário adicionar cores quentes; por isso foram acrescentados tons de 
vermelho e amarelo. 
 
Vamos praticar mais um pouco? 
Quais as coresque você recomendaria para as embalagens dos seguintes produtos: 
 
• chocolate; 
• leite; 
• doces em geral; 
• chá; 
• óleos e azeites; 
• detergentes; 
• ceras; 
• inseticidas; 
• desinfetantes; 
• desodorantes; 
• bronzeadores; 
 
www.portaleducacao.com.br 
 
48 
• cosméticos; 
• perfumes; 
• açúcar; 
• café; 
• cerveja; 
• produtos para bebês; 
• iogurte. 
Vamos lá, tente relacionar com o estudo de cores que acabamos de estudar! 
 
 
Dicas importantes! 
Com essas dicas, tenho certeza que dificilmente você vai errar quando 
começar a desenvolver seus websites. 
1) Não carregue o site com cores demais, pois pode ficar confuso, 
desorganizado e as cores podem entrar em conflito, desviando a atenção. 
2) Dê importância aos contrastes. 
3) Utilize a harmonia para organizar cores de elementos como fotos, 
logotipos, botões, etc. 
4) Combine as cores de forma que não vibrem intensamente, dificultando a 
leitura da mensagem, pode-se utilizar as cores para diferenciar os assuntos, 
mas cuidado com a combinação de cores. 
5) Público jovem responde melhor a cores vivas e fortes, como o amarelo, o 
cian, o verde-limão e o laranja. Já um público sofisticado prefere cores 
discretas como o preto, o azul-escuro, o verde-escuro e o cinza. 
6) Conhecer as cores dos anunciantes também é importante, pois as cores 
escolhidas para o site podem entrar em conflito ou interferir no banner. O 
melhor é buscar a harmonia sempre. 
 
 
6.1.4.1 Padrão de cores RGB 
 
Você sabe o que é RGB? 
 
www.portaleducacao.com.br 
 
49 
RGB é a sigla do sistema de cores aditivas formado pelas iniciais das cores 
em inglês red, green e blue, que significam em português, respectivamente, vermelho, 
verde e azul – cores padrão para a web. 
O sistema de cores RGB é usado nos objetos que emitem luz como, por 
exemplo, os monitores de computador e televisão, as câmeras digitais, entre outros. 
Já as impressoras utilizam o padrão de cores CMYK, formado pelas cores cyan 
(ciano), magenta (magenta) e yellow (amarelo) e, ainda, o black (preto). 
As cores são obtidas por meio das misturas das três cores primárias, em 
quantidades determinadas. Cada uma das cores obtidas está enquadrada numa 
escala que varia de 0 a 255. Quando a mistura das três cores está no valor mínimo 
(0, 0, 0), o resultado é a cor preta; quando está no máximo (255, 255, 255), resulta na 
cor branca. 
A variação entre valores mínimos corresponde a tons escuros e entre os 
valores máximos, os tons são mais intensos, mais claros. 
 
Para conhecer as cores RGB, acesse o endereço disponível em 
<http://erikasarti.net/html/tabela-cores/>. Nele você encontrará várias cores em 
RGB e na versão hexadecimal. 
 
 
6.2 ESTRUTURANDO UM SITE 
 
FIGURA 27 
 
 
 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
50 
Segundo Barrier (1998), muitas características visuais são tão importantes 
quanto o conteúdo de um texto, como o desempenho do leitor, sua motivação, seu 
grau de tensão ou conforto em relação a um determinado documento. Estas 
preocupações sobre a ergonomia visual se justificam ainda mais quando estamos 
tratando de documentos digitais que serão lidos na tela do computador. 
A imagem gráfica é um signo (elemento) da comunicação humana. Se uma 
apresentação gráfica for organizada por princípios ergonômicos e de design gráfico, 
ela será mais eficiente e atrativa, resultando em um espectador mais motivado a ler a 
informação e a entendê-la mais facilmente. 
Na composição visual, os fatores físicos mais significativos são: 
a) o fundo e a legibilidade – o fundo não deve interferir na leitura das letras. 
As letras devem ser visualmente independentes; 
b) tipografia – as palavras são lidas e reconhecidas por sua forma em geral, e 
não pela forma dos caracteres que a compõem. As letras de caixa baixa são 
mais indicadas que as de caixa alta na comunicação por terem contornos mais 
irregulares, possuindo maior legibilidade. Com a utilização do CSS 
(formatação de estilos) na elaboração de website, agora você tem mais 
liberdade para utilizar fontes diferentes no HTML. Claro que temos que saber 
utilizá-las com bom senso. As fontes mais utilizadas são Verdana, Arial e 
Times; 
c) equilíbrio – os elementos que compõem uma interface gráfica devem ser 
colocados em equilíbrio para que não cause desconforto ou desvie sua 
atenção; 
d) distâncias – elementos próximos entre si formam grupos, criando uma 
unidade. Elementos distantes dão o significado de informações distintas; 
e) contraste – o reconhecimento de um objeto se faz pela diferença entre ele 
e o seu entorno. Esta diferenciação se dá em relação ao contraste de cores, 
luz, movimento, tamanho, direção, posições e volume; 
f) cor – as cores têm estreita ligação com a emoção. Elas fazem parte da 
memória das pessoas, que as associam às mais diversas lembranças. As 
cores têm uma carga simbólica muito forte, e são utilizadas pelo homem para 
representar suas ideias. No aspecto físico, cores muito fortes, se observadas 
continuamente, causam desconforto, gerando uma reação na retina, que faz 
com que surja a cor complementar, para restaurar o equilíbrio fisiológico. Este 
 
www.portaleducacao.com.br 
 
51 
fenômeno recebe o nome de totalização cromática (PERAZZO, 1999). O 
importante é que se restrinja o uso das cores, evitando a poluição visual, 
resultante do uso indiscriminado das cores; 
g) símbolos/ícones – a eficiência de um ícone não parte de uma grande 
coletânea de imagens, mas sim da clareza da comunicação que a imagem 
passa aos usuários. 
 
 
 
6.3 IMAGENS 
 
 
Passar uma definição sobre imagem é uma tarefa muito difícil, principalmente 
devido à subjetividade que ela apresenta. Um antigo provérbio chinês já dizia: "Uma 
imagem vale mais do que mil palavras." Mais especificamente, e do ponto de vista da 
Computação Moderna, podemos dizer que uma imagem contém uma imensa 
quantidade de informações e que um observador humano interpreta frequentemente, 
globalmente e qualitativamente. Por exemplo, do ponto de vista ótico, uma imagem é 
um conjunto de pontos que convergem num plano; mas se falarmos de forma abstrata, 
uma imagem é um suporte para que realizemos trocas de informações. 
A imagem digital é a "materialização" de grande parte dos processos da 
Computação Gráfica e das Técnicas de Processamento Digital de Imagens. É também 
o ponto de partida da sua análise quando falamos de Visão por Computador. 
Com a entrada do WWW, conforme já falamos, a internet se tornou mais 
atrativa, pois podemos utilizar diversas imagens e vídeos. Só precisamos tomar 
cuidado com o tamanho destas imagens. 
Como você sabe, a imagem que vamos utilizar para imprimir não será a 
mesma que vamos disponibilizar para a Internet, e por quê? 
Geralmente utilizamos para impressão uma imagem no mínimo 150 DPI, o 
melhor é utilizarmos 300 DPI. E o que é DPI? 
Diferente do que costuma se pensar, o DPI não está relacionado ao tamanho 
da imagem. Ele é indicado na impressão da imagem para definir o número de pontos 
por polegada (dot per inch) que terá a imagem. Quanto mais pontos por polegada 
 
www.portaleducacao.com.br 
 
52 
(mais DPI), maior a resolução, já que o olho não será capaz de ver os pontos 
separados e passará a ver como um padrão contínuo de cores, a imagem. 
Então, para impressão utilizamos entre 150 e 300 DPI, para que tenha um 
número maior de pontos por polegadas e na Internet? 
Na internet, utilizamos 72 DPI? Por quê? 
Como os dados transitam a todo o momento, precisamos de leveza para que 
a imagem chegue até o usuário de forma rápida. Como não vamos imprimir a nossa 
imagem, por isso podemos utilizar esse número de pontos por polegadas. 
 
 
6.3.1 Tipos de extensões para utilizar em imagens 
 
 
Geralmente, para salvar as imagens e disponibilizar na internet, utilizamos as 
seguintes extensões: JPG, GIF e PNG. 
Você sabe a diferença entre elas? JPG – no formato JPEG, cuja sigla significa Joint Pictures Expert Group, 
quanto maior o nível de compressão, menor será o tamanho do arquivo, 
porém pior será a qualidade da imagem. O nível de compressão pode ser 
determinado em programas de tratamentos de imagens. Utilizamos essa 
extensão para salvar fotos e imagens que contenha degradê, pois a 
compressão dela é mais eficiente; 
 GIF – sua sigla significa Graphics Interchange Format. O GIF é outro 
formato bastante popular na internet. Assim como o JPEG, gera arquivos de 
tamanho reduzido, no entanto, seu uso não é muito comum em fotografias, já 
que é capaz de trabalhar com apenas 256 cores (8 bits). Assim, sua utilização 
é muito comum em ícones, ilustrações ou qualquer tipo de imagem que tenha 
apenas 256 cores, inclusive para animações quadro a quadro e também 
fundos transparentes; 
 PNG – sua sigla significa Portable Network Graphics. É um dos padrões 
mais recentes. Seu desenvolvimento foi motivado pela restrição que o formato 
GIF apresenta. O PNG reúne, portanto, as características que tornaram o GIF 
tão bem aceito: fundo transparente e compressão sem perda de qualidade, 
 
www.portaleducacao.com.br 
 
53 
mesmo com salvamentos constantes do arquivo. Porém, conta com um 
grande diferencial: suporta milhões de cores, não apenas 256. 
 
Para trabalhar com imagens para internet e também com nossa interface 
existem alguns softwares para edição de imagens. Os mais utilizados são: 
 Photoshop – é um aplicativo utilizado para tratamento da maioria das 
imagens encontradas em publicações, revistas, jornais e matérias de 
publicidade e na Internet. Por ser um software profissional, este programa 
oferece muitas ferramentas para tratamento de imagens. 
Como qualquer programa de edição de imagem, o Photoshop permite 
modificar fotografias e realizar outros trabalhos artísticos digitalizados. Você 
pode retocar uma imagem, aplicar estilos especiais, trocar informações entre 
fotos e textos, ajustar cores e melhorar foco de uma fotografia. O Photoshop 
também oferece várias ferramentas para criar uma arte do zero. 
 Fireworks – suas funcionalidades focam a publicação gráfica na Internet, 
por isso inclui suporte a GIF animado, PNG e imagens fatiadas, além de 
possuir ótima compressão de imagens. A partir da versão MX, ganhou 
integração com outros produtos da mesma linha: Dreamweaver, Flash e 
Freehand. 
O Fireworks possui recursos que o fazem uma alternativa direta ao 
ImageReady. A diferença principal está no suporte a gráficos vetoriais, 
semelhante ao Adobe Illustrator, sendo o oposto do Adobe Photoshop, que 
suporta primordialmente editar bitmaps, tendo poucos recursos únicos para 
vetores. 
 Flash – inicialmente criado como um software para gráficos vetoriais, 
apesar de suportar imagens bitmap e vídeos, o Flash é normalmente usado 
para a criação de animações interativas para websites. A linguagem flash (o 
action script) pode ser utilizada para criar aplicações das mais diversas ou 
criar efeitos visuais arrebatadores por meio dos códigos de programação; 
tornando mais leves e suaves esses efeitos. Os painéis de programação 
dentro do Adobe Flash possuem orientações para escrever os códigos, 
facilitando tremendamente a utilização e o entendimento da linguagem. No 
entanto, ainda é necessário ter um conhecimento prévio de programação para 
manipular e se familiarizar com a linguagem flash. 
 
www.portaleducacao.com.br 
 
54 
Finalizando 
Chegamos ao final de mais um módulo. 
Espero que você tenha entendido a importância das cores nas interfaces de 
seus websites, além da melhor tipologia e tratamento de imagens. 
Precisamos pensar na harmonia de todos os elementos visuais antes mesmo 
de iniciarmos nossa interface. Pois é por meio dela que será a comunicação com o 
usuário. Por isso, escolha as combinações de cores conforme o seu público-alvo e 
lembre-se: a interface é a “cara” do seu website. 
Abraços e até o próximo módulo. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
55 
MÓDULO IV 
 
A DISTÂNCIA 
7 INTRODUÇÃO AO MÓDULO IV 
 
 
Agora chegou a hora da prática. Neste módulo você vai conhecer o 
desenvolvimento de um website, desde a sua concepção até o HTML. 
Vamos apresentar algumas ferramentas do Photoshop versão CS4, e como 
trabalhar a interface toda em um editor de imagem. Além de entender como fatiar sua 
interface para desenvolver em HTML. 
 
 
8 COMO MONTAR UM LAYOUT 
 
 
A criação de um website depende da necessidade de cada cliente e/ou 
empresa, cada caso deve receber uma análise minuciosa e um estudo nas 
informações que tal site deve conter para que o resultado seja satisfatório. Buscamos 
alternativas para facilitar o nosso trabalho, evitando problemas com 
incompatibilidades em navegadores e acima de tudo devemos organizar a estrutura 
que iremos criar, para economizar tempo e facilitar futuras alterações. Nosso objetivo 
aqui é criar um website, para isso vamos conhecer e estudar alguns processos que 
farão toda a diferença no resultado. 
 
 
 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
56 
8.1 PROCESSO DE CRIAÇÃO 
 
 
O Processo de Criação depende de alguns passos 
importantes, antes da concepção do projeto é necessária uma 
análise de requisitos: “O que construir?”, “Qual a finalidade?”, 
“Quem vai acessar?” Isso deve acontecer com uma 
grande interação entre o desenvolvedor e o cliente. 
Levando em consideração que temos todas as 
informações necessárias em mãos, vamos estruturar um 
site de uma distribuidora de veículos, que tem por objetivo 
mostrar sua marca, e entrar em contato com seus clientes. 
 
 
 
8.1.1 Photoshop 
 
 
Vamos aprender e entender algumas ferramentas essenciais para nos ajudar 
no desenvolvimento do layout. 
A ferramenta Adobe Photoshop é muito completa. Em geral, 
as ferramentas possuem funções básicas, mas essenciais para vários 
tipos de efeitos. Vamos trabalhar com a versão CS4, traduzida para 
o português. Conheça sua área de trabalho: 
 
 
 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
57 
FIGURA 28 - ÁREA DE TRABALHO DO ADOBE PHOTOSHOP CS4 
 
 
FONTE: Autoria própria. 
 
Vamos a um guia básico de ferramentas para podermos iniciar nosso trabalho. 
A seguir, vamos conhecer a barra de ferramentas. 
Nessa barra vamos encontrar todas as ferramentas de manipulação dos 
objetos e imagens. 
 
 
FIGURA 29 - BARRA DE FERRAMENTAS DO ADOBE PHOTOSHOP CS4 
 
 
 
 
 
 
 
 
 
 
 
 
www.portaleducacao.com.br 
 
58 
Marca de Seleção: essa ferramenta ajuda a selecionar sua imagem em uma 
forma retangular, a alteração só será efetuada dentro da seleção. Note que clicando 
com o botão direito, outras três opções de seleção aparecerão: Marca de Seleção 
Elíptica; Marca de Seleção de Linha Única e Marca de Seleção de Coluna Única. Cada 
uma dessas opções te permite selecionar de forma diferente. 
Mover: permite que você mova uma seleção. Ou seja, após marcar uma parte 
da imagem com a Marca de Seleção, por exemplo, você pode arrastá-la com esta 
ferramenta da forma que achar melhor. 
Laço: tal ferramenta permite desenhar manualmente a seleção. Clicando com 
o botão direito, outras duas opções de seleção aparecerão: Poligonal e Laço 
Magnético. O Poligonal é melhor para objetos angulosos, enquanto o Magnético é 
indicado quando o objeto contrasta com o fundo. 
Varinha Mágica: seleciona o objeto desejado automaticamente de acordo 
com a cor. Por exemplo, se você deseja selecionar um círculo branco em um fundo 
vermelho, essa ferramenta funciona muito bem. 
Corte Demarcado: permite que você corte a sua imagem. Clicando com o 
botão direito, mais duas opções aparecerão: ferramenta Fatia, que permite que você 
crie um pedaço da imagem; e ferramenta Seleção de Fatia, que permite que você 
mova esses pedaços. 
Conta Gotas: essa ferramenta permite que