CENTRO UNIVERSITÁRIO UNIFTC DE FEIRA DE

SANTANA

CURSO: SISTEMAS DE INFORMAÇÃO

Docente: Jorge Souza Azevedo Moniz Barreto

Atividade: Navegação WEB e Cores

Discentes: Nícolas Albano, Franklin Ramos e Filipe Alves Ferreira

Disciplina: Interação Homem Máquina

Usando a teoria das cores e os 8 princípios para uma melhor navegação WEB, descritos nos
materiais de pré-aula, os alunos em grupo de no máximo 3, deverão criar um site WEB.

O site poderá ser desenvolvido em qualquer linguagem, assim como poderá também ser
desenvolvido protótipo no figma (figma.com).

Serão avaliados os princípios de navegação web descritos no texto da pré-aula da semana 6 e a

harmonia de cores do projeto.

Os alunos deverão demonstrar os princípios de navegação web, indicando qual o princípio foi
utilizado na concepção do site.

O projeto deverá ser entregue até o dia 05/04/2023, podendo ser entregue antes.

1
 CENTRO UNIVERSITÁRIO UNIFTC DE FEIRA DE
SANTANA

O nosso trabalho baseia-se em uma landing Page de uma loja de produtos

eletrônicos chamada cyber commerce.

Link: https://filiperoch.github.io/Landing-Page

2
 CENTRO UNIVERSITÁRIO UNIFTC DE FEIRA DE
SANTANA

Implementação de Teoria das Cores:

Esquema de cores análogo: A escolha das cores verde pastel e cinza claro para o fundo
do cabeçalho e do corpo da página é um exemplo de esquema de cores análogo. Nesse
tipo de esquema, as cores utilizadas estão próximas uma da outra na roda de cores,
criando uma aparência harmoniosa.

Contraste: O uso do branco para o texto e o verde escuro para os links é um exemplo
de contraste. O contraste ajuda a diferenciar elementos e tornar o texto mais legível.

Gradiente: O uso do gradiente de verde pastel para o cabeçalho é um exemplo de

gradiente, que é uma transição suave entre duas ou mais cores.

Complementaridade: O uso do verde pastel e do cinza claro como cores principais é

complementado pelo uso do verde escuro para os links, criando um contraste
complementar.

Tom sobre tom: O uso de diferentes tons de verde para os links e os botões é um
exemplo de tom sobre tom, que é a utilização de diferentes tonalidades da mesma cor
para criar contraste e profundidade.

Princípios de navegação web usados:

2. Seguir as Normas Estabelecidas

“Não tente reinventar a roda. A navegação no site é mais sobre a usabilidade do
que sobre a criatividade. Para elementos essenciais do design como onde
colocar o seu menu, e como indicar que é expansível, siga as normas
conhecidas. ”

3
 CENTRO UNIVERSITÁRIO UNIFTC DE FEIRA DE
SANTANA

Foi utilizado o menu logo na parte de cima da aplicação como geralmente é feito
sem sair dos padrões, trazendo um alto nível de usabilidade ao usuário.

3. Utilize o vocabulário dos seus utilizadores

“Crie páginas que reflitam o que os seus utilizadores estão à procura online.”

Foi utilizado uma linguagem básica e muito comum em nossa aplicação além de
ser apresentada o objetivo e a funcionalidade da aplicação, o que norteia o
usuário em nosso site.

4. Usar Menus Reagentes

“Uma vez que mais de 52% de todo o tráfego em linha é agora móvel, a
concepção com capacidade de resposta/primeiro telemóvel tornou-se uma
necessidade absoluta. Em vez de menus que continuam fora do quadro do
navegador da Web móvel ou demasiado desorganizados, assegure-se de que
implementa menus móveis expansíveis.”

4
 CENTRO UNIVERSITÁRIO UNIFTC DE FEIRA DE
SANTANA

(Print acima foi retirado no celular)

Mesmo no telefone celular ou computador o menu continua nítido e legível ao

usuário, constatando assim o 4º princípio da navegação web.

5. Tire Vantagem do Seu Menu do Rodapé

“Os leitores que continuam a ler e a rolar até ao fundo do seu site estão mais
empenhados do que o utilizador médio. Aproveite isso e utilize o espaço no fundo
de cada página para destacar conteúdos valiosos.”

No rodapé da aplicação foram exibidas informações importantes como endereço

da loja física, termos de uso e politica de privacidade e as redes sociais da loja.

6. Utilizar o espaço de cor e branco para separar a navegação de outros

elementos
“Use cores, fontes e espaço em branco para separar os seus menus do conteúdo
principal e das suas barras laterais. Deixe claro onde começa e onde termina a
navegação.”

Esse principio foi muito bem utilizado na aplicação já que todos os links, menu,
itens clicáveis, conteúdo principal e caixa de inscrição estão nitidamente
separados e organizados com cores e blocos distintos.

7. Evitar Menus Dropdown

“Ter demasiados links no seu menu principal também pode ter um impacto
negativo na usabilidade do seu website.”

Visivelmente esse principio foi aplicado com base no uso de poucos links em no
menu principal.