Direção de Conteúdo Visual O Que Você Precisa Saber
o direção visual do conteúdo é um aspecto menos discutido, mas crucial do design web de alta conversão. Cada visitante "absorve" um novo site no primeiro carregamento de página - quer o façam conscientemente ou não.
A estética desempenha um papel, mas é mais sobre o sensação geral do design. Este sentimento pode ser afetado por espaço em branco, tipografia, simetria, mas principalmente relacionamentos entre os elementos da página.
Designers querem que os visitantes fique na página e continue rolando capturando sua atenção e mantendo-os interessados no site. Princípios de design devem sempre focar na função antes do formulário. Isso significa que o design deve complemente o conteúdo, não empurrá-lo como uma reflexão tardia.
Neste post, gostaria de mostrar algumas dicas sobre como você pode melhorar seus layouts e fluxos de conteúdo visual no seu site.
Concentre-se na composição
Cada peça de um site é construída sobre o layout geral. Este layout geral cria uma composição que segue as regras da teoria da Gestalt, que afirma que o todo é sempre maior que a soma das partes.
Áreas individuais de uma página se reúnem para formar um todo. Elementos de design precisam construir um Atração gravitacional no conteúdo; tudo na página deve guia naturalmente os visitantes até que cheguem ao final da página.
É por isso que as relações entre diferentes partes do conteúdo (visuais, texto, botões, etc.) são tão importantes para projetar.
Seu objetivo deve ser encorajando as pessoas para navegar no site a partir de sua própria inclinação. É mais fácil falar do que fazer, mas você pode aprender muito estudando exemplos reais.
A home page do Monkop é um ótimo exemplo de hierarquia visual com texto e visual. Bastante espaço é usado entre os elementos, e a tipografia complementa as ilustrações vetoriais de marca.
Enquanto você rola, você notará blocos de páginas horizontais retas dividido por cores, bordas e gráficos. Estes são construídos com Padrões de design em mente para oferecer consistência ao longo da página.
Para o fundo, você encontrará um divisão de duas colunas com imagens de um lado, texto do outro. As imagens também trocar de lado em um padrão de direita-esquerda-direita-esquerda. Isso chama a atenção e quebra a monotonia da página típica enquanto ainda mantendo um fluxo natural no conteúdo.
UMA estética de design semelhante pode ser encontrado no site do Picjumbo, uma landing page para um addon de fotos para usuários do Photoshop e Sketch.
A home page coloca o foco no logotipo e no vídeo de visualização. Conforme você rola, você notará animações personalizadas que se movem ao longo da página. Essa animação realmente capta atenção, e recebe o espectador interessado em continuar rolando.
No geral, a página parece abrir e fácil de navegar. O conteúdo é dividido em blocos horizontais com tipografia nítida e ícones limpos.
Considere a maneira como os diferentes elementos da página equilibrar juntos, o espaço entre elementos, contraste entre cores e formas diferentes. Todas essas coisas desempenham um papel na composição geral. Todo site naturalmente atrai certo peso para o conteúdo.
Não há resposta absoluta porque é diferente para todos os sites. Por exemplo, alguns links de navegação parecem melhores quando são grandes e superdimensionados. Outros se encaixam melhor quando estão pequeno com letras maiúsculas.
Eu sugiro que você estude outros sites em seu nicho. Realmente analise como eles estão juntos. Tente até mesmo reconstruir os layouts para ver quais elementos finalmente fazem o design "se unir".
Tipo de Design Matters
A maneira como você projeta sua tipografia afetar a direção do conteúdo no seu site. Isso tem a ver com hierarquia de tipos e estilos de design de diferentes elementos de página como parágrafos, cabeçalhos, listas com marcadores, cotações e elementos especiais de layout, como colunas ou tabelas.
Visuais pode afetar o layout também, por isso é uma boa ideia criar conteúdo com uma progressão natural. Escreva conteúdo de uma maneira que flui pela página, e mantém as pessoas lendo através de cada parágrafo.
A maior ferramenta que você tem à sua disposição é seu olho para o design. Aprenda a reconhecer as diferenças nos elementos tipográficos e como eles se relacionam com outros elementos da página. Crie relacionamentos entre as seções da página para distinguir áreas de conteúdo.
Algumas coisas que você pode considerar:
- Tamanho do texto
- Família de fontes
- Contraste de cor
- Relações de seção de página
- Altura da linha e margens de parágrafo
- Espaçamento entre letras e maiúsculas / minúsculas
Por exemplo, observe a página inicial do Campaign Monitor. Os links de navegação superiores usam todas as letras maiúsculas com letras pequenas. Outros cabeçalhos na página siga este mesmo design tudo em maiúsculas qual cria um senso de uniformidade.
Outros cabeçalhos maiores no site são muito mais proeminente, e eles realmente saem da página. Apenas olhando para um design típico de cabeçalho, deve ser fácil diga a diferença entre um cabeçalho e sua cópia do corpo pareado.
Os estilos de design tipográfico no Campaign Monitor são excelentes e misturar naturalmente no layout. É preciso prática para alcançar um resultado como este, mas quanto mais você tentar, mais fácil será.
Para aprender um pouco mais, recomendo os seguintes links:
- Princípios de Design: Peso Visual e Direção
- Trabalhando com peso visual em seus projetos
- 19 fatores que afetam o equilíbrio composicional
Conteúdo orientador
Entenda que diferentes tipos de sites ter métodos diferentes para orientar os visitantes pelo site. Por exemplo, as páginas de destino querem orientar os visitantes com petiscos de informação, Ícones pequenos, screenshots, e depoimentos.
Outros sites, como blogs, geralmente não trazem as pessoas para a página inicial de uma só vez. A maioria das pessoas pousar em uma página do artigo, por isso layouts post no blog são feitos para destacar o título, e desenhar pessoas mais no conteúdo. É aqui que o copywriting de qualidade entra em cena porque você quer que os leitores fiquem de fora de cada palavra.
Redes sociais e aplicativos da web precisam experiência do usuário de qualidade, então esse é um tópico um pouco diferente, mas considere como o feed do Facebook é projetado para incentivar a rolagem e a interação do usuário.
Os métodos de design que você emprega para manter as pessoas navegando no site Muda com o tempo. Mas geralmente, seu objetivo é orientar visitantes com uma direção de conteúdo visual.
Vamos dar uma olhada em um página de destino e um design do blog identificar as diferenças.
Cactus é um gerador de site estático para o OS X. Sua home page segue de perto o estilo de design da Apple - muito espaço em branco e fontes sans-serif finas.
O conteúdo é organizado em colunas, blocos e trechos de texto com gráficos simples. Essas mesmas estéticas são comum com produtos Apple, para que os usuários de Mac aproveitem este estilo de design.
Informações sobre o produto - incluindo recursos e configuração - estão listadas na página inicial. A própria página incentiva a rolagem através de conteúdo exclusivo, ícones básicos e um padrão de colunas alternadas de blocos de conteúdo da esquerda / direita.
O objetivo aqui é fornecer informações para usuários existentes, e vender Novos usuários a ideia de Cactus.
Agora compare esse design com a home page do The Next Web. O conteúdo é muito mais esporádico em uma home page do blog, porque há muitos tópicos diferentes sobre postagem.
Retângulos criam um sistema de grade que encapsula várias postagens em um único layout. O objetivo aqui é obter usuários lendo conteúdo no site. Não importa se os visitantes baixam alguma coisa, mas importa se eles fique por perto para ler algo.
A maneira de levar as pessoas a ler é ótimas fotos e manchetes cativantes. A TNW faz um ótimo trabalho com isso, e seu layout é construído para manter as pessoas navegando com miniaturas de postagens relacionadas na barra lateral e na área de pós-conteúdo.
Guiar os visitantes para uma determinada ação é diferente em cada site. Mas você pode aprender muito estudando o que outros sites de sucesso fazem e aprendendo como copiar.
Confie em seus olhos
Propriedades de design individuais podem ser explicadas analiticamente, mas a implementação é alterada para cada site. Uma imagem de herói com um link "Rolar mais" não executa o mesmo em todos os sites.
Aprender a projetar é muito mais processo visual. Seu olho para o design é o aspecto mais importante. Você precisa ver as coisas corretamente para identificar isso hierarquia visual. Se você puder vê-lo em outros sites, poderá replicá-lo em seus próprios sites.
O melhor conselho que tenho é apenas confie em seus olhos. Crie uma lista dos seus sites favoritos e gaste 5 minutos navegando em cada um deles. Anote seus elementos favoritos na página e como eles afetam o design. Isso ajudará você internalize esses conceitos a partir de uma perspectiva de UI / UX, em vez da perspectiva do usuário.
Também não tenha medo de experimentar! Ninguém ficou bom em design somente lendo artigos sobre design. Sim, eles ajudam - eles podem realmente ajudar muito. Mas você precisar para criar coisas do zero para aprender o que trabalho e o que não faz.
Treine seu olho estudando os layouts de sites que você gosta e recriando-os. Com o tempo, você criará uma biblioteca de padrões em sua mente, o que facilita muito a criação de novos sites.
Empacotando
Espero que essas dicas o ajudem a iniciar e ofereçam um roteiro básico a seguir. Não é fácil se tornar um web designer, mas o mundo precisa de talento, e nunca foi tão fácil aprender esses conceitos fundamentais.
Estude os melhores exemplos de sites com elementos de página que você goste. Trem seu olho para reconhecer relacionamentos, e você vai rapidamente desenvolve as habilidades necessárias para replicar esses relacionamentos em seu próprio trabalho.
