Hierarquia visual em aplicações web \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 04 Horas 12 Min 54 Seg Tempo restante da oferta: 04 12 54 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Hierarquia visual em aplicações web [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) # Hierarquia visual em aplicações web Ao desenhar uma interface, é importante estabelecer uma hierarquia visual buscando responder as questões iniciais que um usuário possui. [ Redação Treinaweb ](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/hierarquia.png) Ao desenhar uma interface, é importante priorizar os elementos principais e estabelecer uma hierarquia visual sempre buscando responder as questões iniciais que um usuário possui ao acessar a sua aplicação. Não o faça pensar, tente deixar claro: onde está, o que pode fazer e onde pode ir. Caso contrário, há uma grande possibilidade que esse usuário abandone e deixe de usá-la, aumentando o que chamamos de “taxa de rejeição”. [ ![UX/UI - Introdução](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Curso UX/UI - Introdução Conhecer o curso ](https://www.treinaweb.com.br/curso/ux-ui-introducao) ## Por que ela é importante? Em seu artigo [Communicating with Visual Hierarchy](http://static.lukew.com/pageheirarchy_lukew_03192008.pdf), *Luke Wroblewski*, diretor de produtos da *Google*, explica que a apresentação visual de uma interface é essencial para: - **Informar aos usuários –** A interface deve guiar o usuário de uma ação para outra e estabelecer relacionamento entre elas. - **Deixar claro a organização –** Manter a consistência dos elementos da sua aplicação - **Comunicar efetivamente a sua marca para sua audiência –** Criando um impacto emocional positivo e fornecendo ao seu usuário uma experiência agradável. ## Fatores que influenciam na hierarquia visual A maneira que processamos as informações é afetada por alguns fatores que contribuem para que priorizemos determinados elementos. Alguns desses fatores incluem: - **Tamanho –** Uma regra simples e direta: quanto maior o elemento, maior a chance de atrair a atenção do usuário. - **Cor –** As cores brilhantes são mais propensas a chamar a atenção do que tons monótonos. Por exemplo, todos nós já utilizamos um marca-texto para destacar pontos importantes de um texto. O amarelo é mais rico e brilhante do que o branco, então ele se destaca. Depois das cores brilhantes, vem as cores escuras, e na parte inferior da hierarquia das cores, os tons de cinza. - **Contraste –** Tão importante quanto as cores, o contraste ajuda a destacar os elementos mais importantes da sua aplicação. - **Repetição –** Repetir estilos pode dar a impressão para o usuário que o conteúdo é relativo. Por exemplo, destacando esta palavra , a forma que o cérebro processa e interpreta a palavra será diferente comparada com o restante do conteúdo. - **Proximidade –** Elementos similares devem estar próximos um do outro. Com referência aos princípios da *Gestalt*, nosso cérebro tende a agrupar mais fácil as formas que estão próximas entre si. - **Espaço em branco** – Conhecido também como espaço negativo, o uso do espaço em branco ajuda a agrupar diferentes seções de uma aplicação e facilitar a legibilidade do conteúdo. ## Alguns padrões utilizados Existem dois formatos que podemos utilizar quando desenhamos e estruturamos os elementos de uma aplicação web. Os formatos abaixo são baseados nos movimentos dos nossos olhos e podem ser aplicados dentro do contexto da cultura ocidental (leitura da esquerda para direita) ### Formato “F” ![](https://d2m498l008ebpa.cloudfront.net/2017/01/fpattern.jpg) Com o formato “F”, o usuário começa buscando informações ou palavras-chaves pelo topo, quando é encontrado algo de interesse, começa-se a leitura normalmente, formando uma linha horizontal. O resultado final é algo parecido com a letra “F” ou “E” como visto na imagem acima. ### Formato “Z” ![](https://d2m498l008ebpa.cloudfront.net/2017/01/zpattern-1.jpg) É possível ver esse formato aplicado na maioria das aplicações web. O formato “Z” é bastante utilizado para interfaces onde a simplicidade é a prioridade e o *call to action* a principal tarefa da tela. Para aplicações com conteúdo complexo, pode não funcionar tão bem quanto o formato “F”, por outro lado pode ajudar a aumentar a taxa de conversão da sua Landing Page. #### Conclusão É importante entender como a sua audiência faz a leitura das informações antes de adotar um padrão de hierarquia. Considere também uma mistura dos itens mencionados no post para chegar a uma solução ideal para o seu negócio. Uma boa hierarquia visual irá diminuir o processo cognitivo dos usuários e destacar os pontos mais importantes para que concluam suas tarefas de uma forma mais eficaz. ###### Referências [Visual Hierarchy](https://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns) - Interaction Design Foundation [Communicating with Visual Hierarchy](http://static.lukew.com/pageheirarchy_lukew_03192008.pdf) - Luke Wroblewski - [ #UX Design ](https://www.treinaweb.com.br/blog/tag/ux-design) - [ #User Experience ](https://www.treinaweb.com.br/blog/tag/user-experience) Autor ![Redação Treinaweb](//secure.gravatar.com/avatar/662942287935c97e547cfc12c04be6e5?d=mm) ## Redação Treinaweb [Todos os artigos](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/caminhos-certifica--o-400x280.jpg) [ Certificações ](https://www.treinaweb.com.br/blog/categoria/certificacoes) 10 anos atrás ## [ Os caminhos das certificações Microsoft (parte 1) ](https://www.treinaweb.com.br/blog/os-caminhos-das-certificacoes-microsoft-parte-1) Veja como funcionam as trilhas e sub-trilhas de certificação da Microsoft para desenvolvedores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/acessibilidade_no_HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Acessibilidade no HTML ](https://www.treinaweb.com.br/blog/acessibilidade-no-html) Nesse artigo, veremos algumas formas, de desenvolver nosso site pensando em todos, tornando assim, uma página com HTML acessível. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/04115610/capa-flutter-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 8 anos atrás ## [ Por que estudar Flutter? ](https://www.treinaweb.com.br/blog/por-que-estudar-flutter) Veja neste artigo as vantagens de se estudar o Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/XSLT-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 6 anos atrás ## [ O que é XSLT? ](https://www.treinaweb.com.br/blog/o-que-e-xslt) Veja neste artigo o que é XSLT. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01155343/traits-php-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ O que são Traits no PHP e quando usar? ](https://www.treinaweb.com.br/blog/quando-usar-traits-no-php) Uma reflexão sobre reuso de código, herança e a recomendação de utilização de Traits. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css) Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/27144616/AWS-S3-400x280.png) [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon) 7 anos atrás ## [ O que é AWS S3? ](https://www.treinaweb.com.br/blog/o-que-e-aws-s3) Nesse artigo vamos conhecer o AWS S3, um serviço de armazenamento de arquivos na nuvem da Amazon. Vamos conhecer suas vantagens, suas aplicações mais comuns e quando não utilizá-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/utilizando-o-pmbok-para-gerenciar-projetos-de-ti-400x280.jpg) [ PMBOK ](https://www.treinaweb.com.br/blog/categoria/pmbok) 10 anos atrás ## [ Utilizando o PMBOK para gerenciar projetos de TI ](https://www.treinaweb.com.br/blog/utilizando-o-pmbok-para-gerenciar-projetos-de-ti) Conheça mais sobre Gerenciamento de Projetos com a aplicação do PMI nos seus projetos de TI. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/87asgh12-400x280.png) [ Orientação a Objetos ](https://www.treinaweb.com.br/blog/categoria/orientacao-a-objetos) 10 anos atrás ## [ Devo usar herança ou composição? ](https://www.treinaweb.com.br/blog/devo-usar-heranca-ou-composicao) A composição permite um reuso e extensão de código mais flexível que a herança clássica. Mas isso é motivo para sempre a escolhermos em detrimento à herança clássica? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/LAYOUT-FLUTTER-RESPONSIVO-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 5 anos atrás ## [ Como construir um layout Flutter responsivo ](https://www.treinaweb.com.br/blog/como-construir-um-layout-flutter-responsivo) Neste artigo veremos algumas das abordagens e widgets que são usados no desenvolvimento de aplicativos responsivos com Flutter . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/DOM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Trabalhando com JavaScript no navegador ](https://www.treinaweb.com.br/blog/trabalhando-com-javascript-no-navegador) Ao utilizar JavaScript para desenvolvimento web, é necessário entender o funcionamento do DOM (Document Object Model). O DOM é o que permite o acesso aos elementos HTML/XML para manipulá-los de forma que seja interessante para os nossos objetivos como desenvolvedor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143340/TW-ENTREVISTAS-MAUJOR-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 01: Maujor ](https://www.treinaweb.com.br/blog/tw-entrevista-01-maujor) Fizemos uma série de entrevistas com desenvolvedores chamada “TW Entrevista”. O primeiro entrevistado é o Maujor, o dinossauro das CSS. Confira! Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **04h 12min 54s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58