{"id":4126,"date":"2016-08-30T08:50:00","date_gmt":"2016-08-30T11:50:00","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=4126"},"modified":"2019-03-16T02:36:44","modified_gmt":"2019-03-16T05:36:44","slug":"hierarquia-visual","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/hierarquia-visual\/","title":{"rendered":"Use o conceito de hierarquia visual corretamente! Aprenda aqui"},"content":{"rendered":"

Qualquer profissional que trabalhe com a gera\u00e7\u00e3o de conte\u00fado e de pe\u00e7as de comunica\u00e7\u00e3o visual<\/u><\/a>, sejam elas gr\u00e1ficas ou digitais, precisa saber da import\u00e2ncia da hierarquia visual.<\/p>\n

Trata-se de um conceito muito importante no momento da cria\u00e7\u00e3o. \u00c9 ela que vai determinar como as informa\u00e7\u00f5es ser\u00e3o organizadas e estruturadas em uma pe\u00e7a e, consequentemente, como ser\u00e3o recebidas pelo p\u00fablico. Isso significa que \u00e9 preciso pensar e planejar onde entram as informa\u00e7\u00f5es mais importantes, que devem ser vistas primeiro, e como \u00e9 poss\u00edvel conquistar e prender a aten\u00e7\u00e3o do p\u00fablico.<\/p>\n

Alguns elementos devem ser observado pelo designer para garantir que o espa\u00e7o ser\u00e1 aproveitado da melhor forma poss\u00edvel. Confira as nossas dicas para utilizar a hierarquia visual a seu favor.<\/p>\n

Os padr\u00f5es \u201cF\u201d e \u201cZ\u201d<\/h2>\n

\u201cF\u201d e \u201cZ\u201d s\u00e3o os dois padr\u00f5es de organiza\u00e7\u00e3o da informa\u00e7\u00e3o mais utilizados na diagrama\u00e7\u00e3o de pe\u00e7as, devido a sua efici\u00eancia. Para entender melhor o seu funcionamento, \u00e9 importante saber que, na cultura ocidental, todo mundo l\u00ea qualquer coisa de cima para baixo e da esquerda para a direita. Essas diretrizes acabam por definir quais s\u00e3o os pontos mais nobres de uma pe\u00e7a, ou seja, aqueles que devem conter as informa\u00e7\u00f5es mais importantes.<\/p>\n

No caso de pe\u00e7as com muito texto (mat\u00e9rias, an\u00fancios informativos, textos em blogs), devemos usar o padr\u00e3o \u201cF\u201d, pensando que as pessoas v\u00e3o se deparar com uma extensa mancha de texto e procurar na coluna da esquerda palavras do seu interesse. Por isso, \u00e9 sempre importante usar t\u00edtulos curtos, em uma fonte maior ou em bold (negrito) para garantir que essas informa\u00e7\u00f5es sejam bem visualizadas.<\/p>\n

J\u00e1 o padr\u00e3o em \u201cZ\u201d \u00e9 muito utilizado para pe\u00e7as com imagens, como a home de um site, um banner e um an\u00fancio institucional. Pesquisas mostram que os olhos dos leitores percorrem um caminho semelhante \u00e0 letra Z, por toda a pe\u00e7a. Come\u00e7ando, ent\u00e3o, no canto superior esquerdo e terminando no canto inferior direito. Isso faz com que esses sejam os pontos principais para as informa\u00e7\u00f5es indispens\u00e1veis \u2014 no come\u00e7o, para prender a aten\u00e7\u00e3o e, no final, para refor\u00e7ar a mensagem ou incentivar uma a\u00e7\u00e3o (j\u00e1 reparou onde sempre est\u00e1 o bot\u00e3o \u201cClique aqui\u201d?).<\/p>\n

As fontes<\/h2>\n

A escolha das fontes \u00e9 outro fator super importante para a constru\u00e7\u00e3o de uma boa hierarquia visual. Estamos falando do tamanho, do estilo e da quantidade de fontes utilizadas em um layout.<\/p>\n

Come\u00e7ando pelo tamanho, fica claro que as informa\u00e7\u00f5es mais importantes devem ter um peso maior, aparecendo com grande destaque. Os textos grandes s\u00e3o sempre aqueles que v\u00e3o ser lidos primeiro e, por isso, determinam a rela\u00e7\u00e3o do p\u00fablico com a pe\u00e7a. Se tem algo que precisa ser informado de qualquer forma, n\u00e3o pense duas vezes: escolha uma fonte maior.<\/p>\n

Sobre o estilo das fontes, podemos dividi-las em dois grandes grupos: as serifadas, mais cl\u00e1ssicas e tradicionais, e as sem serifa, mais limpas e contempor\u00e2neas. Encontrar fontes que combinem entre si e reforcem a sua mensagem \u00e9 essencial. No entanto, n\u00e3o v\u00e1 transformar o seu layout em um festival de fontes \u2014 usar muitos tipos diferentes pode confundir o p\u00fablico e gerar um resultado bem polu\u00eddo.<\/p>\n

As cores<\/h2>\n

\u00c9 muito importante encontrar uma combina\u00e7\u00e3o de cores<\/u><\/a> que trabalhe a favor do seu layout, equilibrando tons mais vibrantes e chamativos com outros neutros. Esse conjunto orienta o leitor e torna o resultado mais organizado e eficiente!<\/p>\n

Os respiros<\/h2>\n

Mesmo que a pe\u00e7a demande uma grande quantidade de informa\u00e7\u00f5es, \u00e9 sempre importante manter espa\u00e7os em branco, os chamados respiros. Eles tornam o contato com a pe\u00e7a mais prazeroso e ajudam a chamar aten\u00e7\u00e3o para o que realmente importa.<\/p>\n

Um bom layout<\/u><\/a> \u00e9 aquele que cumpre a sua fun\u00e7\u00e3o em todos os requisitos: encantar, informar e se destacar em meio a tanta informa\u00e7\u00e3o. Por isso, sempre que for criar tenha essas dicas em mente \u2014 observ\u00e1-las vai fazer toda a diferen\u00e7a no seus trabalho e nos resultados.<\/p>\n

E ent\u00e3o? Viu como seguir os conceitos de hierarquia visual \u00e9 super importante para o seu layout? Afinal, de nada adianta passar horas criando um trabalho lindo se ningu\u00e9m vai perceber, ler e absorver as informa\u00e7\u00f5es mais importantes.<\/p>\n

Voc\u00ea tem outras dicas sobre o assunto? Ent\u00e3o deixe um coment\u00e1rio!<\/p>\n","protected":false},"excerpt":{"rendered":"

Qualquer profissional que trabalhe com a gera\u00e7\u00e3o de conte\u00fado e de pe\u00e7as de comunica\u00e7\u00e3o visual, sejam elas gr\u00e1ficas ou digitais, precisa saber da import\u00e2ncia da hierarquia visual. Trata-se de um conceito muito importante no momento da cria\u00e7\u00e3o. \u00c9 ela que vai determinar como as informa\u00e7\u00f5es ser\u00e3o organizadas e estruturadas em uma pe\u00e7a e, consequentemente, como […]<\/p>\n","protected":false},"author":83,"featured_media":4583,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[307],"tags":[],"class_list":["post-4126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=4126"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4126\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/4583"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=4126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=4126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=4126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}