1321316419, xorosho

Seja você um designer, um profissional de marketing ou apenas alguém que administra seu próprio negócio há algum tempo, é quase certo que você já ouviu o termo “Hierarquia Visual”. A maioria de nós tem algum entendimento de que a forma como um site ou pôster é projetado tem um efeito sobre como lemos e consumimos as informações contidas nele. Mas um dos benefícios de contratar um designer experiente e eficaz é te ajudar a garantir que seu criativo seja fácil de digerir visualmente, e não apenas bonito.

Neste guia, apresentaremos alguns princípios sobre o que torna um design excelente e visualmente consistente – tudo por meio de dicas trazidas a você pela equipe criativa rrenomada da iStock. E porque este é um meio visual, vamos combinar cada uma de nossas dicas com um pequeno gráfico para mostrar o que queremos dizer. Então você podeir à iStock para escolher seus gráficos e mostrá-los com facilidade.

Primeiro, determine o que é importante

1338319555, filo | 1134199907, youngID

Pode parecer óbvio, mas antes de colocar a caneta no papel (ou caneta no tablet), você precisa avaliar qual história quer contar com o design. É um panfleto para um evento? Nesse caso, você vai querer que a data, a hora e a logística venham em destaque. É uma página de vendas simples? Você vai querer que sua expertise e/ou produto seja a primeira informação que um possível cliente veja.

Veja o gráfico abaixo, por exemplo. Ele mostra três ícones que parecem exatamente iguais. Mas você verá que um é maior que os outros dois e está posicionado no meio. Essas duas técnicas chamam sua atenção para uma coisa específica — e você sabe imediatamente que o objetivo desse gráfico é fazer com que você olhe para o gráfico do meio.

Dimensione sua mensagem

Um dos conceitos mais fáceis de entender é: maior = importante. Todos nós já vimos isso em pôsteres e sites, onde o título principal é escrito em uma fonte muito maior do que o restante das palavras na página. Mas o tamanho pode mudar as coisas de muitas maneiras diferentes.

Veja o gráfico abaixo, por exemplo – está claro que uma mensagem é a mais importante, mas não é só isso. Você verá que as outras duas mensagens seguem uma hierarquia e, embora uma delas apareça acima da outra na página, na verdade, é menos importante. Denotamos isso ajustando os tamanhos das fontes.

920188714, kool99

Quando você coloca uma linha de apoio acima de um título principal, mas o torna menor, isso geralmente é chamado de “sobrancelha”. Essa é uma ótima maneira de liberar espaço mais abaixo na página e manter os layouts interessantes sem perder a ênfase do título principal.

A posição é o segredo

O outro princípio de layout com o qual a maioria dos profissionais está familiarizado é o conceito de que onde você coloca uma imagem é quase tão importante quanto o tamanho dele. Embora tenhamos ilustrado que o tamanho pode ajudar a renovar a ordem normal do texto, é importante pensar no espaço físico de uma página como algo um pouco mais tridimensional do que isso.

Guiar o olho, por exemplo, é muito importante. Muitas culturas ao redor do mundo estão acostumadas a ler da esquerda para a direita e de cima para baixo. Mas isso vem da nossa história com livros e páginas impressas. Quando você pensa no posicionamento de certas informações em uma página da web, isso pode ser diferente. Por exemplo, uma pequena série de palavras no topo de um site costuma ser vista como uma barra de navegação – graças à nossa familiaridade moderna com telas de computador.

Veja o gráfico abaixo, por exemplo. Não há palavras que digam literalmente que as poucas frases na parte superior são botões de navegação. Mas seu posicionamento e o contexto da página tornam óbvio que, se você clicar neles, será levado a uma página sobre cada animal.

811314000, atakan

Escolha sua orientação com sensatez

Levando em conta o princípio acima, a orientação física do layout de um design pode ter um efeito emocional surpreendentemente forte na pessoa que visualiza a página. Pense nisso como imprimir uma página na posição retrato X paisagem. Nossa predisposição natural para visuais amplos e paisagísticos nos deixa mais calmos, enquanto peças posicionadas verticalmente podem surpreender e criar urgência. No gráfico abaixo, você verá que a mesma frase é lida de forma mais suave e tranquila de uma maneira e de forma mais dramática quando posicionada verticalmente.

1341467515, Anna Bliokh

Use o contraste a seu favor

Nem tudo é tão claro quanto o texto em uma página — algumas vezes, você vai querer fazer um design que apresente cores, gráficos e informações complexas. Quando o layout e o tamanho não dão o toque ou a história de que você precisa, usar o contraste pode ajudar muito a distinguir as coisas. Ou seja, combinar uma cor de fundo com uma cor de primeiro plano que realmente se destaque.

Dê uma olhada na série de formas abaixo. Elas são todas do mesmo tamanho, e nenhuma delas está posicionada particularmente de uma maneira que chame sua atenção para apenas um deles. Mas um em específico chama a atenção — o triângulo na parte inferior é o que mais se destaca do fundo de uma perspectiva de contraste. Isso te ajuda a mudar a narrativa de uma página e desviar a atenção do leitor do hábito que ele pode ter de ler de cima para baixo.

175380115, petekarici

Impressione o seu público

Cor e sombreamento envolvem, não servem só para dar contraste. A cor que você usa influencia muito como alguém vê seu design. Escolher vermelhos e laranjas pode atrair muito a atenção de quem vê, graças ao nosso senso psicológico de urgência com essas cores. Azuis e roxos mais suaves e calmos podem, por outro lado, criar um tom relaxante.

No gráfico abaixo, veja que uma frase escrita com uma palavra com um tom azul passa uma sensação muito diferente em comparação com a mesma frase com uma palavra com tom vermelho.

532378051, michal-rojek

A hierarquia se expande no trabalho com imagens animadas

Estamos falando exclusivamente sobre posições de design estáticos e bidimensionais — mas o que acontece com a hierarquia visual quando você introduz a terceira dimensão do tempo? Levar uma imagem animada para uma página estática pode fazer muito pela hierarquia e, muitas vezes, pode substituir completamente muitos dos princípios que vimos. Veja o gráfico abaixo, com um título grande e brilhante no meio da página, mas seus olhos são atraídos de forma muito eficaz para o subtítulo móvel abaixo dele.

1127490759, jakkapan21

Junte tudo com padrões que apoiem sua narrativa

A parte importante do layout de design é “treinar” seu público. A maioria das marcas hoje tem o que é chamado de guia de estilo de design. Esse sistema de design inclui fontes, tamanhos, cores e ícones que devem permanecer consistentes em todos os materiais de design. Dessa forma, seu público sabe o que esperar apenas vendo opções de layout consistentes.

Veja o gráfico abaixo descrevendo uma programação para uma semana de eventos. Você verá que as datas/horários são sempre os mesmos (tanto em tamanho quanto em cores), que o nome do evento tem mais contraste com o fundo e que o ícone de cores vivas só é mostrado quando o evento é gratuito:

1305412784, Dian_S_Cahya | 1328447791, Polina Tomtosova

Agora que você tem toda uma gama de técnicas de design e layout em sua caixa de ferramentas, vá até a iStock para encontrar alguns recursos visuais para dar vida à sua marca. Veja os pacotes de ícones para adicionar alguns tons, confira texturas abstratas para criar planos de fundo relaxantes para sites e confira os diferentes planos de assinatura disponíveis para acessar todos os recursos que você precisa dentro do seu orçamento.