A Composition é uma ótima ferramenta para criar um fluxo ou ritmo visual para guiar os olhos dos espectadores e guiá-los pelo seu conteúdo. É importante pensar na maneira como você deseja que seus usuários interajam com seu conteúdo. Você provavelmente quer que eles leiam o texto que os convence a comprar seu produto antes de verem o botão "Comprar agora", por exemplo.

Alguns elementos óbvios que ajudam a criar um fluxo visual incluem setas, linhas e perspectiva. Peso, posicionamento, espaçamento e cor também podem ser usados ​​para criar um fluxo e ritmo visual.

Que considerações devem ser feitas e quais técnicas específicas podem ser usadas ao criar um fluxo visual e ritmo no design?

Alguns exemplos:

A resposta a esta pergunta pode ser uma tese de mestrado, portanto, considere minha resposta como uma opinião mais do que uma resposta técnica.

Os designs, quando vêm com anúncios, pôsteres, capas de livros etc., são mensagens diretas envolvidas em uma composição de design. Os elementos comuns entre todas as composições são tipografia, linguagem visual, linguagem das escrituras e sua direção. Quando se trata de linguagem tipográfica, estamos falando tacitamente sobre "direções", e as direções nos dão "momentos". Assumimos em qualquer design tipográfico que o olho se mova da esquerda para a direita e de cima para baixo. Este é o momento básico dos olhos para qualquer composição tipográfica visual e alguns chamam de "Padrão de Leitura".

Portanto, já começamos nossa composição com base no "Padrão de leitura", onde os espectadores o seguem naturalmente. O texto e alguns gráficos nos levarão a começar do topo / esquerdo e terminar no canto inferior / direito. Além disso, nesta resposta, chamarei de regra TL / RB ou padrão básico de leitura, como se estivesse lendo as colunas de um jornal. Esta é a direção muito básica.

Composições com alguns estilos, cores e quaisquer elementos visuais do projeto podem violar a regra, como pesos de fonte, cores, estilo, usando setas, proporções etc. Todas as composições possíveis mencionadas são quebra de regra, mas cada uma começa com a regra. O que quero dizer com isso é que, quando pretendemos quebrar a regra TL / RB (padrão de leitura básica) com alguns estilos, na verdade estamos criando pequenas "sentenças" em toda a mensagem que queremos entregar ao espectador. Em outras palavras, iniciamos nossa composição de qualquer posição no design e damos ao espectador sua própria jornada e experiência, compreendendo toda a mensagem de acordo com nossa composição e com base na "cultura" do espectador.

Quando decidimos chamar a atenção do usuário e redirecioná-lo da maneira que queremos por meio de nosso design, na verdade estamos compondo uma linguagem visual falando com a consciência do espectador e dando-lhe tempo suficiente para absorver o restante de nossa mensagem usando o TL / básico e o padrão / Regra de RB e com base em sua cultura.

É difícil dizer onde o usuário começará sua jornada no meu design, mas eu posso levá-lo com alguns estilos atraentes. Isso não é fácil, porque estou falando com ele com uma linguagem visual e assumindo que ele pode entender o que quero dizer no meu design, que mensagem é, por onde começar e por onde terminar e como entender meu design. Esse idioma não é um idioma direto das escrituras, o que significa que não é um idioma comum que possa ser entendido diretamente. É por isso que chamamos de "filosofia do design". Pode refletir uma linguagem visual comum ou não, dependendo da cultura do designer e do visualizador.

Não estou falando aos usuários através do meu design apenas com a minha linguagem visual, mas estou falando uma linguagem visual que o usuário possa entender também de acordo com a cultura do usuário. Meu design e sua cultura devem se reunir na primeira impressão.

Este é o meu conceito e eu poderia falar mais, mas como eu disse, poderia ser uma tese de mestrado.

O padrão 'F'

Existe o efeito bem conhecido do padrão 'F' , em que os leitores digitalizam a página de cima para baixo e da esquerda para a direita, prestando mais atenção à esquerda do que à direita, mais ou menos na forma de um 'F'. Isso é apoiado por pesquisas e vários estudos científicos.

Isso se aplica principalmente a páginas pesadas de texto, com elementos gráficos mínimos. Assim que você remove grandes partes do texto do corpo e adiciona elementos focais, o padrão desaparece. No entanto, é algo a ter em mente.

Técnicas para criar fluxo

O fluxo e o movimento no seu design são algo a ter em mente durante todo o processo. Primeiro, você precisa entender o que está tentando alcançar - tenha um caminho claro de movimento através do design em mente o tempo todo e comece agrupando elementos relacionados e criando uma hierarquia visual de informações distinta. Você pode usar pistas visuais para direcionar o fluxo através do design. Alguns elementos que são comumente usados ​​como dicas visuais incluem linhas, formas, setas, escala, perspectiva e imagem.

Linhas e formas

As linhas podem ser usadas para direcionar o movimento de várias maneiras. Linhas que são perpendiculares à direção do movimento agem como uma barreira, alterando a direção ou interrompendo o movimento todos juntos. Linhas e formas direcionais ou gestuais podem criar movimento e fluxo.

Compare estes layouts, com diferentes usos de linhas:

Formas mais complexas também podem ser usadas para direcionar o fluxo:

As setas implicam movimento e seus olhos seguirão naturalmente a direção da seta; portanto, faz sentido apontar setas para onde você quer que alguém olhe. Compare estas setas, apontando para fora em direção ao conteúdo:

Peso visual e hierarquia

Elementos maiores naturalmente chamam a atenção. O uso de tamanho e escala é uma parte importante da criação de uma hierarquia visual que guiará os olhos pelo design. O agrupamento de elementos relacionados e a criação de um peso visual percebido usando fontes, pesos e cores contrastantes ajudam a priorizar as informações mais importantes.

Perspectiva

Uma perspectiva percebida, através do uso de linhas e escalas diagonais, ou uma perspectiva literal através do uso de imagens, é outra técnica.

Os olhos

O cérebro humano é feito para reconhecer rostos. Uma técnica eficaz é usar a fotografia ou ilustração de um assunto com sua linha de visão direcionada para o seu ponto focal.