O que é diagramação? E como fazer bem feita
A forma como percebemos e absorvemos informações de qualquer material gráfico (jornal, revista, panfleto, website, banner, outdoor etc.) depende da correta disposição dos elementos visuais. Peças gráficas bem organizadas conseguem fazer com que as informações sejam rapidamente transmitidas e processdas pelos leitores. Ao contrário, peças gráficas poluídas ou desorganizadas fazem com que as informações fique difíceis de serem encontradas, trazendo uma bela dor de cabeça para quem precisa delas. Assim, organizar as informações presentes em uma peça gráfica é o principal objetivo da diagramação.
O que é diagramação?
Diagramação é o ato de distribuir e organizar as informações em uma peça gráfica (jornal, revista, panfleto, website, banner, outdoor etc.) de forma que elas fiquem esteticamente agradáveis e fáceis de ler.
Uma diagramação pode ter diversos elementos, como textos, imagens, grafismos, texturas, cores, entre outros. E para organziar esses elementos é preciso prestar atenção em quatro itens:
1. Hierarquia visual
Uma hierarquia é uma organização em escala e em ordem de prioridade. No caso dos documentos gráficos essa hierarquia se dá pela importância de cada elemento na página.
Geralmente um título é mais importante visualmente que o corpo de texto, já que ele introduz e resume o texto. Então os títulos devem ser dispostos em destaque, por meio de um tamanho maior, uma tipografia com traços mais espessos ou uma cor diferenciada.
Os subtítulos são menos importantes visualmente que os títulos, mas mais importantes que o corpo de texto principal, então o seu peso visual (cores, tipografia e tamanho) devem estar “no meio do caminho” entre um e outro.
Essa lógica de organização deve ser usada para todos os elementos da página até que todos estejam ordenados. Sempre lembrando que o que “manda” nesse tipo de desafio gráfico é a eficiência da comunicação, e não nossa preferência estética.
2. Alinhamento
O alinhamento tem como objetivo manter a consistência visual do documento. A regra geral do alinhamento é que todos os elementos devem ter alguma relação visual com os outros. Complicado né? Eu explico.
Nesse primeiro exemplo os elementos estão “soltos” na página, não existe qualquer relação entre eles. No segundo exemplo os elementos estão alinhados á esquerda, criando uma relação visual entre eles e facilitando a leitura, já que o olho não precisa ficar “buscando” os elementos na página.
O alinhamento também pode acontecer horizontalmente, reforçando a estrutura visual nessa direção. No primeiro exemplo apesar de estarem alinhados à esquerda e à direita, os elementos ainda parecem “soltos” na página. No segundo exeplo a parte de baixo de um elemento está alinhada à parte de baixo de outro elemento, criando uma estrutura visual clara.
Note que os alinhamentos criam uma estrutura imaginária, as linhas propriamente ditas não precisam existir no documento. É justamente por serem sugeridas e não traçadas que eles dão aos documentos uma aparência elegante.
O alinhamento é fruto direto da teoria da Gestalt e por isso comprovadamente auxilia na eficiência da percepção das informações visuais.
3. Espaços em branco
Uma das primeiras coisas que pensamos quando começamos a diagramar é que temos que preencher todos os espaços em branco, seja para “aproveitar” esse espaço ou porque eles parecem estranhos na página. Mas o fato é que os espaços em branco devem existir na página e ajudam e muito na eficiência da informação. Eles servem como áreas de “respiro” na página, evitando a sobrecarga visual.
A página é como um espaço público qualquer, se tiver poucos elementos, e muito espaço embranco, vai parecer vazia, mas se tiver informação demais e sem espaços em branco vai parecer abarrotada, como é o caso do primeiro exemplo da imagem.
Nenhuma dessas situações é um erro, páginas de poesia por exemplo devem ser mais silenciosas no geral, ou seja, ter mais espaço em branco, como no exemplo do meio da imagem. Já páginas que precisam de alta densidade de informações, como jornais por exemplo, podem ter menos espaços em branco.
Além disso, são os espaços em branco que ajudam a diferenciar diferentes blocos de informação. Se existem dois blocos diferentes de informação em uma página a melhor maneira de diferenciá-los é criando espaços em branco.
Na imagem fica muito claro que existem dois blocos de texto distintos, isso porque eles estão separados por espaços em branco. Criar essa diferenciação apenas usando espaços em branco é uma solução muito elegante, porque evita que novos elementos sejam adicionados à página, dando a ela uma aparência leve, clean.
4. Imagens
As imagens geralmente são a alma de uma página bem diagramada. Elas devem ser escolhidas de forma a refletir o conteúdo mas escolhidas aquelas que têm mais apelo estético, ou seja, as mais bonitas. Elas atraem a atenção imediatamente, então devem ser pensadas para funcionar com o resto da hierarquia visual da página.
Em geral são usadas uma imagem principal e imagens secundárias (opcionais). A imagem principal será aquela que vai aparecer em destaque, refletindo o conteúdo e com grande apelo estético (a mais bonita). Ela geralmente é posicionada ocupando boa parte do espaço da página. Já as imagens secundárias são posicionadas com tamanho menor, preferencialmente em um bloco único.
Isso porque quanto mais imagens são colocadas na página, mais elas vão chamar a atenção e mais ruidosa ela pode ficar. Obviamente existem casos que vamos precisar colocar muitas imagens em uma única página, mas nesse caso é melhor colocá-las juntas em um único bloco do que salpicá-las ao longo do texto, justamente porque elas vão “quebrar” a sequência de leitura e assim prejudicar a fluidez do texto.
5. Tipografia
Sendo a diagramação mais voltada ao texto escrito, a escolha da tipografia é fundamental, já que vai ser ela quem vai determinar uma leitura fluída ou truncada.
É sempre bom lembrar que existem dois extremos quando falamos de diagramação, a funcionalidade, que é aquele tipo de projeto onde a leitura propriamente dita é o foco principal; e a expressividade, aquele tipo de projeto onde o foco está em uma experiência estética diferenciada, inovadora e expressiva.
O caso mais comum é o uso da tipografia para legibilidade, já que a maior parte dos documentos que vamos diagramar tem como fim uma leitura fluída. É para esse tipo de leitura que são as orientações a seguir.
Em geral os tipos com serifa são mais recomendados para o corpo de texto principal, geralmente eles são projetados para esse fim e tendem a facilitar a leitura de grandes blocos de texto, além de criarem um bloco de texto suave e fluído.
Isso se dá pela forma como os tipos sem serifa são criados, com contrastes sutis entre os traços e altura-x levemente menor. Essa é uma parte um pouco mais técnica, então prometo ampliar em outra postagem.
Já os tipos sem serifa são projetados para se destacarem. Eles são muito usados para títulos e subtítulos, além de serem os preferidos para imagens promocionais, como banners, por exemplo.
Isso porque eles são geralmente projetados com traços mais regulares e altura-x maior, e por isso ocupam um espaço visual proporcionamente maior do que as fontes com serifa.
Obviamente é possível usar fontes com serifa em títulos e fontes sem serifa nos textos, mas geralmente é preciso compensar as características das fontes, como por exemplo, fazer títulos usando fontes com serifa em um tamanho muito grande, e usar variações tipográficas mais leves das fontes sem serifa no corpo de texto.
Concluindo
Esses são apenas alguns elementos principais da diagramação de uma página, o uso de cores, o equilíbrio visual e o pareamento de fontes (assunto para outro post) também são relevantes, mas se dominados esses cinco itens principais o processo de diagramação já toma corpo e vai ficando mais “profissional”.
E aí? Faltou algum elemento de diagramação? Ficou algum detalhe de fora? Conta aí nos comentário! 😉
Comentários