Infográfico: Como projetar seus layouts para ter máxima eficácia

 In Práticas recomendadas

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 é 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 renomada 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ê pode ir à iStock para escolher seus gráficos e mostrá-los com facilidade.

Primeiro, determine o que é importante

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 e a hora estejam 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.

2022_iS_VisualHierarchy_1.jpg

1338319555, filo | 1134199907, youngID

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.

2022_iS_VisualHierarchy_2.jpg

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.

2022_iS_VisualHierarchy_3.jpg

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.

2022_iS_VisualHierarchy_4.jpg

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 criar 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.

2022_iS_VisualHierarchy_5.jpg

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.

2022_iS_VisualHierarchy_6.jpg

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.

2022_iS_VisualHierarchy_7.gif

1127490759, jakkapan21

Usar áudio para vídeos narrativos

Outra dimensão dos projetos baseados em vídeo é a presença do som. Apesar de pôsteres e materiais impressos não terem som e as páginas da web com som normalmente serem irritantes, os vídeos são um dos poucos lugares em que o espectador espera o som.

Use a música dinâmica para um vídeo com mais entusiasmo e use músicas calmas para passar uma sensação de leveza. Aperte o play no vídeo abaixo para entender o que estamos dizendo:

1053436938, PeopleImages | 1332781589, Templator

Você sabia que pode editar vídeos diretamente no site da iStock? Confira nosso novo editor de vídeo para dar vida a algumas dessas ideias sem a necessidade de usar um software especializado.

Junte tudo com padrões que apoiem sua narrativa

A parte importante do layout é “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. 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:

2022_iS_VisualHierarchy_8.jpg

1305412784, Dian_S_Cahya | 1328447791, Polina Tomtosova

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

Esse artigo foi útil?
Compartilhe este artigo
Acesse as últimas dicas da iStock
Mais recursos para você