![\"Visual](\"https:\/\/cdnblog.picsart.com\/2022\/05\/header.jpg\")
<\/p>\n<\/p>\n
Voc\u00ea j\u00e1 percebeu seu olhar focando em uma parte espec\u00edfica de uma imagem ou texto? Isso \u00e9 gra\u00e7as \u00e0 hierarquia visual no campo de design.<\/span><\/p>\n \u00a0<\/span>S\u00e3o textos em cores vivas e negrito que chamam sua aten\u00e7\u00e3o. \u00c9 aquela forma que n\u00e3o permite que voc\u00ea desvie o olhar. Um designer decidiu que esses seriam os elementos de hierarquia visual mais importantes do seu projeto e cumpriu sua miss\u00e3o.<\/span><\/p>\n \u00a0<\/span>Nesse artigo, vamos mostrar como obter uma hierarquia visual clara em projetos de design. Mesmo se voc\u00ea for novo na \u00e1rea de trabalho criativo, voc\u00ea pode direcionar o olhar do seu espectador exatamente para onde voc\u00ea quiser com esses exemplos de hierarquia visual.<\/span><\/p>\n Na verdade, a defini\u00e7\u00e3o desse termo \u00e9 bem literal. Hierarquia visual refere-se \u00e0 import\u00e2ncia relativa dos elementos de um design. Para dar um exemplo simples, se voc\u00ea estiver criando um an\u00fancio impresso com uma mensagem escrita importante, seu texto ocupar\u00e1 o n\u00edvel mais alto da hierarquia visual.<\/p>\n A quest\u00e3o \u00e9, ent\u00e3o, como criar essa hierarquia. Depois de determinar o que \u00e9 importante no seu design, voc\u00ea vai ter o desafio de dar ao projeto uma apar\u00eancia importante para chamar a aten\u00e7\u00e3o do espectador primeiro. A boa not\u00edcia \u00e9 que existem dicas de hierarquia visual que voc\u00ea pode seguir para destacar elementos de design espec\u00edficos.<\/p>\n Para resumir, a hierarquia visual \u00e9 fundamental no design porque determina a composi\u00e7\u00e3o do seu design de forma geral.<\/p>\n Primeiro, pense no que e por que voc\u00ea est\u00e1 criando um design? \u00c0 medida que voc\u00ea decide o que \u00e9 importante em seu design e aprende como fazer com que esses elementos se destaquem, voc\u00ea ter\u00e1 que pensar no layout da sua pe\u00e7a<\/a>. Isso inclui elementos visuais como a regra dos ter\u00e7os, peso visual e experi\u00eancia geral do usu\u00e1rio.<\/p>\n Por sorte, existem alguns padr\u00f5es de hierarquia visual estabelecidos que podem orientar voc\u00ea no processo de determinar o peso visual do seu design.<\/p>\n Um padr\u00e3o de leitura convida a uma explora\u00e7\u00e3o da p\u00e1gina de cima para baixo, de um lado para o outro, como ler uma p\u00e1gina de um livro (da\u00ed o nome). Aqui vamos falar das duas principais maneiras pelas quais o olho percorre um padr\u00e3o de leitura.<\/p>\n Nossos olhos tendem a pular imediatamente para elementos que se destacam. Um dos determinantes para destacar o texto ou a imagem \u00e9 seu tamanho relativo. Se voc\u00ea tiver um grande bloco de texto no meio da sua p\u00e1gina, os olhos de seus espectadores provavelmente pular\u00e3o direto para esse elemento em vez de seguir um padr\u00e3o de leitura.<\/p>\n Ter um elemento de destaque \u00e9 uma maneira r\u00e1pida e f\u00e1cil de criar uma hierarquia visual no design gr\u00e1fico. Por isso, considere usar uma fonte diferente ou empregar os princ\u00edpios de Gestalt<\/a> como ferramentas para chamar a aten\u00e7\u00e3o.<\/span><\/p>\n \u00a0<\/span> Em \u00faltima an\u00e1lise, como um leitor percorre a sua p\u00e1gina depende muito da experi\u00eancia do usu\u00e1rio. Por exemplo, se os espectadores tiverem que navegar por uma sele\u00e7\u00e3o restrita de imagens em um dispositivo m\u00f3vel, eles percorrer\u00e3o a p\u00e1gina verticalmente. Se voc\u00ea usar s\u00edmbolos como setas para gui\u00e1-los pelo espa\u00e7o, seus olhos as seguir\u00e3o. Portanto, seja criativo criando um fluxo de design otimizado para a plataforma em que os usu\u00e1rios o visualizar\u00e3o.<\/span><\/p>\n Separamos aqui os 8 principais elementos de design que v\u00e3o poder ajudar voc\u00ea a guiar um espectador pelo seu conte\u00fado. Esses princ\u00edpios tamb\u00e9m podem ajudar a determinar pontos focais.<\/p>\n Quando voc\u00ea usa um toque de cor viva em um espa\u00e7o neutro ou plano, voc\u00ea chama a aten\u00e7\u00e3o do espectador para aquele tom surpreendente. Se voc\u00ea n\u00e3o tiver certeza de quais cores usar, nosso guia definitivo da teoria das cores<\/a> \u00e9 um excelente recurso.<\/span><\/p>\n Use cores contrastantes como preto e branco ou elementos de design que compensem uns aos outros. Isso evitar\u00e1 que seu conte\u00fado pare\u00e7a uniforme e atrair\u00e1 os olhos dos espectadores para essas diferen\u00e7as no espa\u00e7o.<\/span><\/p>\n Varie os tamanhos de elementos como imagens, formas e fontes em seu design para chamar a aten\u00e7\u00e3o do usu\u00e1rio para os visuais e textos mais importantes.<\/p>\n Uma tipografia ousada<\/a> pode ser o suficiente para chamar a aten\u00e7\u00e3o de algu\u00e9m. Use fontes em negrito ou grandes com modera\u00e7\u00e3o, mas exatamente onde voc\u00ea quiser direcionar a aten\u00e7\u00e3o do espectador, como um t\u00edtulo, uma frase importante ou um call-to-action. Veja isso como a arte da tipografia de hierarquia visual.<\/span><\/p>\n Lembra daquelas li\u00e7\u00f5es iniciais de design sobre primeiro plano, plano intermedi\u00e1rio e plano de fundo? Bom, seu espa\u00e7o negativo<\/a> geralmente \u00e9 o plano de fundo, e o espa\u00e7o positivo \u00e9 normalmente a frente e o centro. Contraste esses espa\u00e7os para direcionar o olhar do espectador pelo seu design. Se voc\u00ea n\u00e3o souber por onde come\u00e7ar, tente introduzir espa\u00e7o em branco apenas em torno de elementos importantes.<\/span><\/p>\n N\u00e3o importa se voc\u00ea optar por usar o alinhamento \u00e0 esquerda, ao centro ou \u00e0 direita, o que n\u00e3o estiver alinhado atrair\u00e1 instantaneamente o espectador. S\u00f3 n\u00e3o esque\u00e7a de que deve parecer intencional, como um texto centralizado com uma foto em volta.<\/p>\n Esse \u00e9 um dos principais princ\u00edpios de design porque nossos olhos (e c\u00e9rebros) s\u00e3o peritos em seguir padr\u00f5es. Crie padr\u00f5es geom\u00e9tricos<\/a> ou mais abstratos para guiar seu p\u00fablico por um espa\u00e7o. As linhas foram criadas para guiar o olhar. N\u00e3o \u00e9 \u00e0 toa que fortes linhas horizontais fazem parte de importantes s\u00edmbolos de orienta\u00e7\u00e3o, como as setas. Considere usar linhas para orientar um espectador pela sua p\u00e1gina, seja verticalmente, horizontalmente, diagonalmente ou de forma mais abstrata. Isso vale especialmente para o design de infogr\u00e1ficos<\/a>.<\/span><\/p>\n Preparados para come\u00e7ar a criar? Use essas dicas de design no seu pr\u00f3ximo trabalho criativo.<\/p>\n O Picsart \u00e9 uma plataforma de edi\u00e7\u00e3o de foto e v\u00eddeo, al\u00e9m de uma comunidade criativa. O app top 20 mais baixado no mundo todo com mais de 150 milh\u00f5es de usu\u00e1rios ativos mensalmente, suas ferramentas desenvolvidas com Intelig\u00eancia Artificial permite que criadores de todos os n\u00edveis sejam criem design, edi\u00e7\u00f5es, desenhos, e compartilhem conte\u00fado onde quiserem. Nossa plataforma acumula uma das maiores cole\u00e7\u00f5es de conte\u00fado do mundo, incluindo fotos, stickers, planos de fundo, templates, e mais. Usado por consumidores, vendedores, criadores de conte\u00fado e para neg\u00f3cios, as ferramentas do Picsart oferecem todo o necess\u00e1rio para criar designs para a vida pessoal e profissional. O Picsart j\u00e1 trabalhou com artistas e marcas incr\u00edveis como BLACKPINK, Taylor Swift, Lizzo, Ariana Grande, Warner Bros. Entertainment, iHeartMedia, Cond\u00e9 Nast, e mais.\u00a0Baixe o app agora ou comece a editar na web<\/a>\u00a0hoje, depois\u00a0assine o Gold<\/a>\u00a0para acessar o conte\u00fado premium!<\/b><\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Voc\u00ea j\u00e1 percebeu seu olhar focando em uma parte espec\u00edfica de uma imagem ou texto? Isso \u00e9 gra\u00e7as \u00e0 hierarquia visual no campo de design. \u00a0S\u00e3o textos em cores vivas e negrito que chamam sua aten\u00e7\u00e3o. \u00c9 aquela forma que n\u00e3o permite que voc\u00ea desvie o olhar. Um designer decidiu que esses seriam os elementos … <\/p>\nO Que \u00c9 a Hierarquia Visual?<\/span><\/h2>\n
![\"promotional](\"https:\/\/cdnblog.picsart.com\/2022\/05\/mid-post_1-780x520.jpg\")
<\/p>\nPor Que a Hierarquia Visual \u00c9 Importante no Design?<\/span><\/h2>\n
Quais S\u00e3o os Diferentes Padr\u00f5es de Hierarquia Visual?<\/span><\/h2>\n
Padr\u00f5es de Leitura<\/h3>\n
\n
\n<\/span><\/li>\n<\/ul>\n\n
O que chama aten\u00e7\u00e3o<\/strong><\/h3>\n
![\"promotional](\"https:\/\/cdnblog.picsart.com\/2022\/05\/mid-post-3-780x520.jpg\")
<\/p>\nOtimize para a plataforma<\/strong><\/h3>\n
Quais S\u00e3o os Princ\u00edpios da Hierarquia Visual?<\/span><\/h2>\n
Cor:<\/h4>\n
![\"how](\"https:\/\/cdnblog.picsart.com\/2022\/05\/1.color_-780x520.jpg\")
<\/p>\nContraste:<\/h4>\n
![\"how](\"https:\/\/cdnblog.picsart.com\/2022\/05\/2.contrast-780x520.jpg\")
<\/p>\nTamanho:<\/h4>\n
![\"how](\"https:\/\/cdnblog.picsart.com\/2022\/05\/3.size_-780x520.jpg\")
<\/p>\nFonte:<\/h4>\n
![\"example](\"https:\/\/cdnblog.picsart.com\/2022\/05\/4.font_-780x520.jpg\")
<\/p>\nEspa\u00e7o Negativo e Positivo:<\/h4>\n
![\"how](\"https:\/\/cdnblog.picsart.com\/2022\/05\/5.negative-_-positive-space-780x520.jpg\")
<\/p>\nAlinhamento:<\/h4>\n
![\"example](\"https:\/\/cdnblog.picsart.com\/2022\/05\/6.alignment-780x520.jpg\")
<\/p>\nRepeti\u00e7\u00e3o:<\/h4>\n
\n<\/span><\/p>\n![\"how](\"https:\/\/cdnblog.picsart.com\/2022\/05\/7.repetition-780x520.jpg\")
<\/p>\nLinhas:<\/h4>\n
![\"use](\"https:\/\/cdnblog.picsart.com\/2022\/05\/8.lines_-780x520.jpg\")
<\/p>\nDicas para Criar uma Boa Hierarquia Visual<\/span><\/h2>\n
\n
Crie na Velocidade da Cultura<\/span><\/h2>\n