Diagramação não é só deixar algo mais bonito. Influencia na facilidade de leitura, mostra o que é mais importante e pode até bagunçar o seu conteúdo.

Eu tava analisando uma landing page que me disseram que estava errada. Peguei o texto original e fui bater com o que estava na página. Era exatamente o mesmo conteúdo, mas tinha um problema. Estava confuso. Acho que o diagramador estava mais acostumado com impressos que com o digital.

Parece uma bobagem, mas isso interfere demais.

A gente não lê seguindo perfeitamente linha por linha. Ainda mais quando temos imagens, colunas, e outros elementos.

Padrões de leitura

Os dois principais padrões de leitura que são estudados são o em F e o em Z.

Se você diagrama algum conteúdo sem levar isso em conta, pode acabar criando uma confusão, como foi o caso que eu peguei de exemplo.

Com o padrão em Z, um layout como o abaixo, daria uma leitura sequencial numa revista, por exemplo.

Esse tipo de disposição de conteúdo é muito usado em landing pages.

Intercalando imagens com pequenos textos, pensando na visão horizontal, que encaixa nos nossos monitores.

O padrão em F também é muito usado em landing pages, como essa.

O texto fica mais alinhado à esquerda e usa uma divisão por colunas. Na outra coluna, fica o formulário com o fundo azul para destacar ainda mais a divisão.

O problema que eu vi, na página page que recebi, foi que o conteúdo ficou assim:

Quando a gente faz a leitura na tela do computador (telefone é outro esquema) é na horizontal. O designer criou duas colunas, mas isso não funciona na tela.

Numa página de revista até funcionaria. Como você vê o todo fica muito mais fácil entender as colunas.

A gente poderia até tentar dar uma reforçada na hierarquia visual para deixar claro que são colunas diferentes.

Lembra bastante a landing page que usei de exemplo no padrão em F. Mas tem uma diferença crucial. No impresso, você vê a página inteira de uma vez. No monitor, você só enxerga uma parte e é na horizontal.

Você lê antes o que está no A, depois no B e termina no C.

E foi isso que aconteceu no problema. Os parágrafos ficaram fora de ordem porque a página foi pensada em colunas que não cabem no monitor.

O meio influencia DEMAIS na diagramação a ponto de impedir que o visitante consiga ler um texto só por causa da disposição das informações.

Por outro lado, no celular estava tudo certo. Porque estavam sequenciais os textos e imagens relativas.

O que funciona em uma mídia pode não funcionar em outra. Mesmo em duas digitais (desktop e smartphone) uma mesma página funciona em um e não no outro.

Quando tem uma mudança mais drástica, como para um meio impresso, é ainda mais importante entender bem o que está fazendo. Até porque, quando você está produzindo algo, tem uma dificuldade muito grande em achar os próprios erros. Quem criou a landing page tinha na cabeça qual era a ordem e nem notou a confusão. Isso só foi identificado quando chegou em quem não tinha participado do processo.

📄 Using F and Z patterns to create visual hierarchy in landing page designs 🇺🇲

📄 Excelente artigo do Canva que mostra os principais elementos do design, com exemplos