Esse post traz um pouco de design pra quem não é designer e um pouco de técnica jornalística pra quem não é jornalista, e foi escrito pra quem precisa organizar texto e elementos visuais em uma tela ou página, seja impressa ou digital.
E por que isso é importante? Ao conhecer e aplicar alguns princípios básicos do design em conteúdos impressos ou digitais é possível melhorar a experiência da leitura em relação a serviços e produtos, como por exemplo:
manuais
tutoriais
comunicados
regulamentos
cartazes
mensagens de e-mail
atendimento presencial
atendimento virtual
entre outros
Todes nós, produzimos conteúdo textual em nossa comunicação diária: mensagens em aplicativos, emails, posts em redes sociais, documentos, apresentações, folhetos, comunicados, informativos. Precisamos comunicar essas mensagens de forma clara e objetiva, certo?
Mais do que isso. Os textos e os elementos visuais (imagens, marcadores, figuras e legendas etc) precisam de uma organização estratégica para que a informação seja lida, compreendida e aplicada.
Esse trabalho de organizar os elementos em uma página é chamado de diagramação, é um conceito de design.
Para ser satisfatória, a experiência do usuário durante a leitura deve considerar um design que captura a atenção, controla o movimento dos olhos, transmite as informações além de evocar emoções positivas.
Uma das primeiras coisas que você precisa aprender para organizar os elementos visuais e textuais é a lógica de agrupar informações por semelhança, ou seja, agrupar aquilo que está relacionado.
Pessoas bibliotecárias terão facilidade pra entender esse conceito, pois já estudaram sobre vocabulários controlados e categorizações.
1. Proximidade
Vamos falar do primeiro princípio, a Proximidade. Veja o exemplo abaixo de lista de higiene para alguém que vai viajar:
shampoo
condicionador
secador
elástico de cabelo
lixa para unhas
necessaire
creme de depilação
maquiagem
demaquilante
sabonete para rosto
sabonete para o corpo
pente
repelente
protetor solar
bandaid
aspirina
removedor de esmalte
pinça
escova de dentre
enxaguatório bucal
perfume
cortador de unha
esmaltes
batom
cotonete
fio dental
As informações, ou seja, todos os elementos da lista estão juntos e dessa forma fica difícil identificar qual a relação entre eles. Porém, podemos separar essa lista visualmente em grupos.
necessaire
shampoo
condicionador
secador
elástico de cabelo
pente
maquiagem
batom
demaquilante
perfume
creme de depilação
pinça
sabonete para rosto
sabonete para o corpo
cotonete
fio dental
escova de dentre
enxaguatório bucal
bandaid
aspirina
removedor de esmalte
cortador de unha
lixa para unhas
esmaltes
repelente
protetor solar
Ainda assim, a lista pede por mais elementos de organização visual, você não acha?
2. Contraste
Contrastar os elementos ajuda e identificá-los e a enfatizar algumas informações. No exemplo abaixo vamos adicionar um nome para cada um dos grupos de informações e enfatizar o nome desses grupos com um pouco mais de contraste.
Lembrar de colocar na necessaire:
Cuidados com o cabelo
shampoo
condicionador
secador
elástico de cabelo
pente
Cuidados com a pele
protetor solar
maquiagem
batom
demaquilante
creme de depilação
pinça
Cuidados com as unhas
removedor de esmalte
cortador de unha
lixa para unhas
esmaltes
Itens de higiene
sabonete para rosto
sabonete para o corpo
perfume
cotonete
fio dental
escova de dentre
enxaguatório bucal
É sempre bom ter
bandaid
aspirina
repelente
O item "necessaire" virou elemento de título, pois é um elemento agrupador geral dessa lista. Os demais itens foram agrupados por uma lógica específica que vai ser útil para a proprietária da lista.
Com o destaque em negrito e itálico pode-se identificar imediatamente os grupos de informações na lista. O contraste costuma ser o elemento mais atrativo em uma página. O contraste é responsável por atrair o olhar em primeiro lugar.
3. Repetição
O tipo do contraste se repete em todos os títulos dos grupos, percebe? Isso passa uma ideia de consistência no padrão visual. Outros elementos podem ser repetidos seguindo essa lógica da consistência no padrão visual, como por exemplo: cores, fontes, tamanhos, estilo de ilustração, localização de determinadas informações ou elementos etc.
E então, ficou mais fácil de ler ou procurar as informações agora?
4. Alinhamento
Agora vamos ver esse exemplo, retirado do livro "Design para quem não é designer", da autora Robin Williams.
Todas as informações na imagem acima estão muito próximas umas das outras, como se pertencessem a um único bloco, porém, podemos reconhecer que nesse bloco existem pelo menos três grupos de informações distintas. Também estão alinhadas de forma centralizada, o que é não é muito legal.
Ao aproximar os elementos de cada um dos grupos e aplicar um pouco de contraste e alinhamento à esquerda, temos uma nova estrutura muito mais agradável de se ler.
Os elementos inseridos em uma página acabam passando uma ideia de conexão visual entre si. É preciso identificar se essa conexão está fazendo sentido e se está agradável de se olhar.
4. 1 Tipos de alinhamento
O alinhamento centralizado geralmente é mais seguro e fácil de ser criado, porém não passa a ideia de um visual interessante de se olhar. Ele é fácil demais, enfadonho...
Os espaços em branco também são elementos estratégicos para ajudar nessa ideia de criar conexão visual, agrupar e alinhar.
O alinhamento passa a ideia de uma unidade coesa. (Robin Willians)
Sobre os espaços em branco: evite deixar o mesmo espaçamento em branco entre os elementos, a menos que façam parte do mesmo conjunto.
Exemplo retirado do livro "Design para quem não é designer":
5. Hierarquização
Organize as informações partindo da ideia da informação mais importante para a menos importante e divida o conteúdo textual em pequenos blocos de informação.
Perceba que dessa forma, o usuário vai ler o conteúdo na ordem de importância que você der para as informações.
Mas também não exagere criando muitos níveis e subníveis de títulos, caso contrário a leitura fica confusa e o visual poluído. Conduza o texto a partir de uma sequência que permita uma leitura fluida.
Uma fórmula bacana pra você seguir é essa aqui que aprendi estudando técnicas jornalísticas e redação para web:
Título: subtítulo
Lide (síntese daquilo que será tratado ao longo do texto. Nesse começo você deve inserir a ideia geral do texto incluindo a conclusão! Isso mesmo! Essa técnica, utilizada principalmente para fisgar os leitores mais apressados, é chamada de pirâmide invertida).
intertítulo 1 (3 a 4 palavras)
bloco magro de texto
intertítulo 2 (3 a 4 palavras)
bloco magro de texto
intertítulo 3 (3 a 4 palavras)
bloco magro de texto
Com esse roteiro o texto fica arrumado, organizado e os intertítulos auxiliam a pausar a leitura e a identificar rapidamente na página os assuntos que de desejar consultar.
Leia também sobre a técnica da pirâmide invertida.
6. Identidade
Ao escolher a fonte, o tamanho, as cores e elementos gráficos, pesquise se existe um padrão de identidade visual a ser seguido na empresa. Se não existir, elabore um padrão e converse com os demais setores, principalmente a área comercial e de marketing, para que se estabeleça um guia de estilo e identidade visual para os conteúdos publicados pela empresa.
A identidade visual carrega as orientações para aplicação de cor, logotipos, fontes, tamanhos, e acaba trazendo de forma intrínseca os princípios e os valores da marca. Estabeleça:
um conjunto de fontes (tipografias), combináveis entre si
o tamanho das fontes para título, subtítulo, intertítulo, legendas, corpo do texto
as cores que representam a marca
os ícones, elementos gráficos e um estilo de ilustração
o logotipo a ser aplicado
Siga esse padrão escolhido ao longo de todo o conteúdo textual e para os demais conteúdos produzidos pelo seu setor, empresa, projeto etc.
7. Cores
Utilize cores escuras em fundos claros, pense nisso na hora de escolher uma cor para o texto para que a leitura não canse os olhos do leitor.
Vou te indicar duas ferramentas que ajudam a testar se o contraste entre as cores escolhidas está adequado:
Contrast Checher: https://contrastchecker.com/
Color Contrast Checker: https://webaim.org/resources/contrastchecker/
Indico demais a leitura desse post no canal DesignOn: Manual do Designer: Quando e Como usar Contraste de Cor.
8. Imagens e legendas
Um imagem de qualidade precisa ter nitidez, ou seja, é preciso poder identificar o que tem na imagem sem borrões ou partes que parecem embaçadas.
Não esqueça de identificar na legenda alguma informação sobre a imagem que seja relevante. Não escreva apenas o que se vê na imagem, ninguém quer ler o óbvio. Além de descrever a imagem com o verbo sempre no presente, adicione uma informação sobre o que está sendo visto.
Exemplo:
Fonte: Notícia do Jornal Estadão. em 18-05-2021.
9. Quantidade de texto
Escreva somente o que for necessário. Não há necessidade de rodear o leitor com palavras desnecessárias para parecer formal ou sofisticado.
"A palavra não foi feita para enfeitar, brilhar como ouro falso; a palavra foi feita para dizer”. (Graciliano Ramos).
Algumas dicas podem ser úteis:
Escreva sempre parágrafos curtos, assim você não enrola o leitor nem se enrola com a colocação de vírgulas.
Divida textos longos em blocos magros de texto. Exemplo: esse post aqui que você já está lendo é um exemplo de como fazer isso ; )
Utilize essa contagem de texto abaixo como medida:
250 palavras: cerca de 1 minuto de leitura;
500 palavras: cerca de 2 minutos de leitura;
1.000 palavras: cerca de 5 minutos de leitura;
1.500 palavras: cerca de 8 minutos de leitura;
2.000 palavras: cerca de 11 minutos de leitura;
3.000 palavras: cerca de 16 minutos de leitura.
Não está conseguindo desenvolver sua ideia só com essas medidas?
Talvez você deva pensar em criar outro tipo de conteúdo, como por exemplo, gravar um vídeo sobre o assunto. Ou ainda, escrever um livro, criar um curso, etc.
10. Aplique negrito nos dados relevantes
Seja criterioso, apenas 2 ou 3 dados por parágrafo.
Exemplo: novamente, esse post aqui que você já está lendo é um exemplo de como fazer isso ; )
11. Destaque os links em um mesmo padrão
Deixe os links em azul e sublinhado, esse é um padrão já conhecido e consolidado no modelo mental das pessoas.
Ex.: Saiba mais
(pegadinha, não tem link aqui! rs)
12. Evite siglas ou explique as siglas
Se usar siglas, explique o que elas significam entre parênteses logo após a sigla. Exemplo:
A ABDR (Associação Brasileira de Direitos Reprográficos) está localizada no bairro Paraíso, na cidade de São Paulo.
Se usar a sigla novamente no mesmo texto, não precisa explicar novamente. ; )
13. Evite justificar o texto
Alinhe textos longos, principalmente de artigos e blog posts preferencialmente à direita ou esquerda.
14. Use bullets ou marcadores para listas
Bem, é isso: use bullets ou marcadores para listas. ; )
15. Quando usar o recurso itálico?
"É usado tanto para dar ênfase quanto para advertir o leitor de que uma palavra ou frase pode não lhe ser familiar, seja por ser estrangeira ou por fazer parte de uma grupo de gírias ou expressões específicas: "supervisionaremos o merchandising da empresa" ou "é preciso ler o documento ab integro".
O recurso serve ainda para quando empregamos uma palavra em sentido metalinguístico, ou seja, não por seu significado em si, mas para nos referirmos a suas formas e funções. Você vai entender melhor com estes exemplos: "a palavra juiz começa com j" ou "acadêmico é uma palavra proparoxítona".
16. Cuidado com o sublinhado
Não use o recurso sublinhado para destacar, o leitor vai pensar que a palavra é um link.
17. Títulos
Deixe claro visualmente a diferença entre título, substitulo e intertítulos:
Título
Subtítulo
Intertítulo
Corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto
18. Utilize imagens
Insira imagens em meio ao texto para deixar a leitura mais agradável. Observe os direitos de imagem, se preferir, utilize bancos de imagens e vídeos gratuitos.
Sobre ícones:
Sobre comidinhas:
Sobre padrões:
Sobre viagens:
19. Leituras importantes sobre design e diagramação
Tenho duas leituras pra indicar, são livros pra você consultar sempre que precisar realizar um trabalho de formatação ou diagramação de um conteúdo que tenha texto e imagem.
Os dois livros foram escritos em uma linguagem simples e tranquila de ser compreendida por quem é leigo no assunto. Tenho certeza que serão referências muito úteis.
O primeiro livro que indico é o "Design para quem não é designer", eu o acho fantástico, tem ótimas dicas pra quem não entende nada (nadinha mesmo) sobre Design Gráfico.
O livro foi feito justamente para quem precisa cuidar do design de algum conteúdo, mas não tem formação em design.
O segundo livro é o "Espaço em branco não é seu inimigo: guia de comunicação visual para iniciantes em design gráfico, web e multimídia".
Essa é uma leitura mais completa e profundada sobre o tema. No entanto, os dois livros têm vários exemplos visuais, além de índice e glossário ao final, o que ajuda bastante a entendermos o vocabulário utilizado em Design.
Embora tenhamos atualmente várias ferramentas online que trazem templates prontos para gente aplicar em apresentações, cartazes, postagens em redes sociais, etc, nem sempre conseguimos um template ajustado completamente às nossas necessidades ou ao nosso gosto e nem sempre dá tempo de pesquisar por um modelo.
Outro detalhe é que por mais que existem modelos e templates prontos para diagramar conteúdos, é preciso ter o olhar aguçado para identificar qual modelo se adequará melhor ao que você precisa, ao público, ao orçamento disponível rs, entre outras questões.
Bom, até aqui falamos de organizar elementos visuais e textuais, mas se quiser entender como melhorar a linguagem utilizada você precisa ler: Linguagem clara: o que isso tem a ver com Experiência do Usuário?