Design para Jornalistas
Um guia de boas práticas visuais
ESTE GUIA É PRA VOCÊ:
​
*Jornalista independente
​
*Jornalista que precisa diagramar
​
*Comunicador interessado em design
​
*Jornalista em formação
​
*Ou qualquer grupo adjacente ;)
Introdução
É graças à boa disposição de informação que a leitura e assimilação da mensagem é possibilitada, mas a trivialidade atribuída ao consumo dos jornais, bem como a desvalorização dos processos de produção jornalística, faz com que esse trabalho passe despercebido aos olhos da maioria.
Mas basta refletir um pouco sobre a pluralidade de formas como alguém pode se informar: televisão, vídeos no youtube, rádio, podcasts. Então por que continuar lendo jornais, mesmo em sua versão digital? Para sobreviver entre tantos concorrentes, os jornais precisam atrair leitores para o conteúdo que produzem. O design do jornal, a embalagem desse conteúdo, tem papel fundamental nisso.
Com as novas possibilidades de expressão trazidas pela plataforma digital para a confecção dos jornais, o potencial de ganho informacional que tem um jornalista que domina o campo da comunicação visual é muito maior do que daquele que o ignora. Este manual busca orientar jornalistas que têm pouca experiência ou conhecimento técnico na área do design, fornecendo orientações básicas para o ganho – ou pelo menos para evitar a perda – comunicacional.
Na seção final, você vai encontrar a bibliografia principal do manual, que pode ajudar caso você deseje se aprofundar em algum dos assuntos citados.
Do bom uso da regra.
E do mau
Rudolf Arnheim escreveu que "se um aparelho de televisão e uma máquina de escrever parecessem exatamente iguais, seríamos privados de uma correspondência simples e desejável entre forma e função". Os jornais digitais, hoje, mesmo após inúmeras transformações e adaptações tecnológicas, se parecem com jornais de papel.
Isso por si só não é ruim ou indesejável, mesmo porque a instituição "jornal" passa confiança ao leitor. Mas repetir exaustivamente as mesmas características visuais inibe ou pelo menos desacelera a evolução desses projetos gráficos e, consequentemente, a expressão visual dos jornais não acompanha ou se beneficia tanto quanto poderia das novas possibilidades que a plataforma digital oferece.
A observação empírica e as leituras a respeito da composição de páginas noticiosas digitais mostraram que em sua maioria os jornais digitais se limitam a reproduzir a estrutura e aparência dos veículos impressos. E se os profissionais do jornalismo se ocupam de informação, não faz sentido querer aproveitar mais recursos disponíveis para entregá-la de forma cada vez melhor ao consumidor?
A partir do cenário observado, de estagnação criativa, as recomendações que compõem este guia incentivam a atenção a princípios fundamentais da informação, como legibilidade, clareza e organização; mas também, sem deixá-los de lado, tenta demonstrar que a plataforma digital permite mais experimentação, originalidade e interatividade do que é observado hoje.
​
As "regras" da diagramação podem ser úteis, mas não precisam e nem devem ser as mesmas para veículos impressos e digitais. Afinal, suportes diferentes oferecem caminhos e possibilidades diferentes. Por que desperdiçá-las fazendo sempre mais do mesmo?
Principais elementos
do Jornal Digital
PASSE O MOUSE PARA EXPLORAR
Anúncio. Como no jornal impresso, boa parte da renda dos jornais digitais é proveniente de publicidade. Os anúncios ficam dispostos por todo o site.
Manchete.
Indica a notícia mais importante naquele momento e, no digital, muda ao longo do dia.
Interação.
Algumas ferramentas de interação podem ser destacada na página que observamos: botão de compartilhamento, de parar o carrossel, de fazer login ou uma busca.
Interação.
Algumas ferramentas de interação podem ser destacada na página que observamos: botão de compartilhamento, de parar o carrossel, de fazer login ou uma busca.
Hipertexto.
No digital, existe no lugar do que é apenas "texto" no impresso. É um título ou resumo clicável que leva o leitor a uma página interna que contém o texto, corpo da matéria.
Multimídia.
Fotos, áudios, vídeos, ou outros formatos. Diferente do impresso, a multimídia digital é dinâmica. No exemplo, vemos um carrossel, algumas imagens que aparecem alternadamente.
Interação.
Algumas ferramentas de interação podem ser destacada na página que observamos: botão de compartilhamento, de parar o carrossel, de fazer login ou uma busca.
Chamada. Substitui a legenda da foto no impresso e leva o leitor a uma página interna que contém o texto, corpo da matéria.
Interação.
Algumas ferramentas de interação podem ser destacada na página que observamos: botão de compartilhamento, de parar o carrossel, de fazer login ou uma busca.
Folha de S. Paulo, 3 de junho de 2020.
Identidade Visual
do Jornal
Identidade visual é um conjunto de elementos gráficos que, combinados, caracterizam uma marca (seja um produto, empresa ou instituição). Caracterizam não somente no sentido de torná-la reconhecível, mas de atribuir valores socialmente construídos.
Um veículo de comunicação pode se beneficiar de estar graficamente associado a organização, clareza, transparência, ou credibilidade.
Este manual pretende cobrir os principais elementos que compõem uma identidade visual de um jornal: cores, tipografia, configuração e organização visual. Normalmente, esses elementos giram em torno de uma representação gráfica principal, o logotipo.
Quanto mais forte a identidade visual de uma marca, de menos elementos precisamos para nos lembrar dela.
Quanto à logo, especificamente, predomina entre os jornais o tipo nominativo, aquele que prioriza a dimensão verbal. Aqui estão as logos dos cinco jornais mais lidos do Brasil somando as versões impressa e digital de cada um.
​
"Na origem de todo artefato, há um projeto. Seu propósito maior é embutir significados aos objetos: codificá-los com valores e informações que poderão ser depreendidos tanto pelo uso quanto pela aparência. Por meio da visualidade, o design é capaz de sugerir atitudes, estimular comportamentos e equacionar problemas complexos."
Rafael Cardoso em "Design para um Mundo Complexo"
Só o Estado de S. Paulo apresenta uma logo mista, ou seja, que combina o nome com uma imagem. Uma marca também pode ser figurativa, quando é composta apenas por uma imagem e sem registro gráfico de um nome, mas esse tipo não é comum em jornais.
Grid
O grid é um conjunto de linhas imaginárias que organiza o conteúdo de uma página em colunas, linhas e blocos de elementos. A disposição da informação sobre essa malha cria um processo de deslocamento visual e mental — o olho do leitor segue o caminho criado pelo diagramador. Em algumas páginas, a malha é mais explícita, quando há o uso de fios, como no projeto gráfico d'O Globo.
Elementos em uma página podem ser agrupados (por proximidade ou por semelhança) ou separados (por distância ou discrepâncias). As caixas criadas pela malha podem ter tamanhos diferentes, e seções maiores guardam informações que merecem mais atenção, do ponto de vista editorial. Organizar visualmente é dispor elementos com diferentes características (tamanho, cor, composição) criando relações entre eles.
Assim como na literatura frases longas e curtas alternadas criam ritmo sonoro, seções grandes e pequenas ou largas e estreitas criam ritmo visual. A simetria traz um senso de organização, mas também de imobilidade, portanto deve ser utilizada sem exageros.
PASSE O MOUSE PARA EXPLORAR
Os colunistas estão agrupados por proximidade (na mesma linha) e por semelhança. Aqui, temos a "caixa" colunistas e subdivisões de mesmo tamanho, uma para cada autor. Nenhum é visualmente mais importante entre eles.
A manchete, notícia mais importante do momento, ocupa uma seção grande dentro da malha da página: metade da largura total.​
É vista como mais importante do que as duas notícias a baixo, encaixadas na largura de 1/4 da página.
Notícias menos importantes do que a manchete só tem metade do espaço para ocupar.
A disposição de imagens também é importante: deve estar visualmente atrelada (aqui, isso quer dizer próxima) à chamada da matéria, para não haver confusão.
O tamanho das imagens acompanha o tamanho (e ao mesmo tempo, a importância) das matérias.
O Globo, 10 de junho de 2020.
Tipografia
"Palavras bem escolhidas merecem letras bem escolhidas", declarou Robert Bringhust, escritor, poeta e tipógrafo estadunidense.
Assim como foi falado sobre a escolha do esquema de cores para um jornal, o mais importante na hora de escolher a tipografia de um veículo jornalístico é priorizar a legibilidade e a clareza. A forma do texto inevitavelmente se confunde com o seu conteúdo e não pode distrair o leitor. Por isso, a simplicidade é essencial.
Alguns veículos, como a Folha de S. Paulo, utilizam uma família tipográfica própria. Isso reforça a identidade visual do jornal, mas não é obrigatório e nem viável para veículos com menos recursos.
​
Safe web fonts é uma página do Instituto de Tecnologia de Massachusetts (MIT) que lista as fontes mais seguras para uso na web. Fontes pagas ou muito específicas, instaladas em poucos computadores, podem não ser exibidas corretamente em qualquer dispositivo.
Fontes com serifa ajudam o olho a seguir a linha que está sendo lida, mas para textos curtos, fontes sem serifa funcionam melhor em dispositivos móveis. Fontes que imitam caligrafia ou com muitos detalhes devem ser evitadas, com exceção talvez de algum título especial; mesmo assim, é melhor escolher fontes estilizadas, com personalidade, mas visualmente simples.
QUE FONTE É ESSA?
Constantia Bold
+ Georgia Regular
QUE FONTE É ESSA?
Montserrat Medium
+ Times New Roman
QUE FONTE É ESSA?
Baskerville Old Face
+ Gotham Light
QUE FONTE É ESSA?
Futura Bold
+ Montserrat Light
QUE FONTE É ESSA?
Helvetica Neue 35 Bold + Helvetica Neue 35 Thin
QUE FONTE É ESSA?
Futura Bold + Georgia Regular + Montserrat Regular
Interação
e equilíbrio
Um jornal digital é um produto complexo, composto por muitos elementos, estruturas, subdivisões. E nenhum desses componentes é percebido como único ou isolado. Estudos sobre a percepção óptica humana indicam que não existem qualidades absolutas de cor, brilho ou saturação, e nem medidas absolutas de tamanho, comprimento e forma, porque cada unidade visual se apresenta sempre de acordo com o ambiente que a cerca. Algumas ilusões de ótica deixam isso bastante explícito.
PASSE O MOUSE PARA EXPLORAR
A extremidade esquerda do retângulo cinza parece mais clara por influência do fundo escuro. Na verdade, o retângulo é todo do mesmo tom de cinza.
A extremidade direita do retângulo cinza parece mais escura por influência do fundo claro. Na verdade, o retângulo é todo do mesmo tom de cinza.
Elementos mais pesados (maiores, mais retos, com cores mais vibrantes, ou isolados na tela, sem "competição" visual por perto" devem ser contrabalanceados com elementos mais leves (menores, mais fluidos, com cores mais neutras, uniformemente distribuídos na página) para criar uma composição equilibrada.
Além disso, entre os elementos existem relações que influenciam na organização da página. Tamanhos iguais, assim como formas, cores e texturas semelhantes, produzem uma tendência dinâmica que faz os elementos serem vistos juntos, agrupados. As diferenças são tão essenciais à composição como as semelhanças, ou o design parece não eleger prioridades.
Numa composição equilibrada, todos os fatores como configuração, direção e localização determinam-se mutuamente de tal modo que nenhuma alteração parece possível, e o todo assume caráter de “necessidade” de todas as partes. Uma composição desequilibrada parece acidental, transitória e portanto, inválida. Seus elementos apresentam uma tendência para mudar de lugar ou forma a fim de conseguir um estado que melhor se relacione com a estrutura total.”
Rudolf Arnheim em
"Arte e percepção visual: uma psicologia da visão criadora"
Hierarquia
PASSE O MOUSE PARA EXPLORAR
A hierarquia visual no projeto gráfico de um jornal tem a função de tornar evidente o valor-notícia atribuído a cada conteúdo. Faz parte da função do jornalista apontar ao leitor o que é mais importante dentro do todo que é o jornal.
Apenas cinco ou seis elementos em uma estrutura são captados pela atenção humana, e são as características visuais que garantem que uns elementos sejam vistos antes dos outros.
Se todas as notícias tivessem a mesma aparência, ou seja, mesma largura ocupada na página, mesmo tamanho das letras, mesmo tamanho do título, ainda existiria uma forma de hierarquia: o que está no topo é tido como mais importante. Mas, acima de tudo, uma configuração cujos elementos não estão hierarquizados através de tamanhos e pesos diferentes será bastante enfadonha. Como ao olhar para um padrão repetitivo de um papel de parede, o observador sentiria-se no mesmo lugar independente de para onde olhasse.
​
É importante ressaltar que, se as diferenciações visuais forem mínimas, vão parecer acidentes. Essas diferenças têm um propósito (criar hierarquia) e isso deve ficar claro ao leitor.
O que é valor-notícia?
​
São características de um acontecimento que medem a importância dele como notícia. Tradicionalmente, os critérios levados em conta são: ineditismo, probabilidade, interesse, apelo, identificação do público e proximidade.
O Globo decidiu que a notícia "Rio e SP têm confronto entre manifestantes pró-democracia, apoiadores de Bolsonaro e PMs" é mais importante (e deve ser lida primeiro) do que "Militares 'mantêm estabilidade institucional' do país, diz Mourão".
O Globo, 31 de maio de 2020.
.png)
Quando aproximamos o gradiente hierárquico de zero, parece que fica mais difícil saber o que é mais importante.
.png)
Gradiente hierárquico baixo - fontes de tamanhos 28, 26 e 24. Parece um erro, um acidente.
.png)
Gradiente hierárquico alto: fica bem sinalizado que a notícia maior é mais importante e as outras duas, similares em importância.
Esp_ços
em br_nco
O isolamento pode destacar um elemento na página de forma bastante expressiva. Desde a década de 1960, quando liderou a histórica reforma gráfica no Jornal do Brasil, Amílcar de Castro defendeu que os espaços em branco fizessem mais parte da diagramação do jornal.
​
Podemos enxergar o espaço em branco não como um "fundo zero", vazio, mas como um elemento que pode compor a página como um bloco de texto ou uma imagem. Isso traz leveza ao design, traz organização (já que os elementos não ficam amontoados), clareza, e pode trazer estilo e distinção.
​
Enquanto o jornal era exclusivamente impresso, fazia sentido rechaçar os brancos: papel custa caro, e jornal precisa informar; faz pouco sentido gastar dinheiro com algo que não se lê. Mas, no digital, o espaço é infinito. Espaçamento não custa nada e seu uso consciente pode tornar uma página muito mais clara do que sua versão "cheia". Mesmo que não se use o fundo branco (como as revistas já não usam sempre), espaço vazio pode ser um elemento compositor de informação.
Se mesmo na plataforma impressa, quando observamos livros e revistas, existe um movimento de valorização do conteúdo através do uso de espaços vazios, por que quase nunca observamos isso no digital?
​
Existe um site/serviço chamado Outline, que descreve seu propósito como "remover a desordem da página para que o leitor possa analisar o conteúdo". Se existe um site só pra remover toda a distração que atrapalha a leitura/análise do conteúdo, isso evidencia que existe informação demais em algumas páginas.
​
Essa é uma reflexão para levar em conta ao dispor elementos em uma página digital.
Mídia
O jornalismo escrito não vai acabar. Não será substituído por podcasts, como não foi pelo rádio e não será substituído pelo YouTube, como não foi pela televisão. Mas é verdade que há décadas vem perdendo sua hegemonia e hoje divide espaço com muitos outros canais de informação, em diferentes formatos.
O que estudos na última década indicam sobre a incorporação de diferentes formatos (imagens, áudios, vídeos) no ambiente dos jornais digitais é que ela acontece de maneira tímida, mas consistente. O uso de fotografias e gráficos estáticos em matérias já está consolidado — mas isso não é novidade, já que essa característica já existia nas versões impressas de jornais.
Já o uso de infográficos interativos, áudios e vídeos caminha mais lentamente, mas existe um movimento. Alguns jornais tradicionalmente impressos já possuem uma produção audiovisual própria, como a Folha de S. Paulo; ou incorporam de veículos próximos, como o portal G1, que publica vídeos do Jornal Nacional ou dos jornais locais da Rede Globo e afiliadas.
Para um veículo menor ou um jornalista independente, a produção desse tipo de conteúdo pode não ser tão fácil, principalmente em termos de "hardnews". A criação de conteúdo jornalístico que efetivamente se beneficia das possibilidades que a internet oferece (ou seja, a hospedagem e reprodução de diferentes formatos) leva tempo e cuidado, mas fazê-la em menor escala é melhor do que tentar ignorá-la.
O jornal Nexo, por exemplo, apresenta um volume de notícias publicadas muito menor do que jornais maiores, já citados, como O Globo e a Folha de S. Paulo. Por outro lado, faz um ótimo uso dos recursos de vídeo, áudio e infográficos interativos, e publica especiais muito bem produzidos, como este sobre o SUS.
​
No box ao lado há uma lista de alguns sites e aplicativos que podem ser úteis na criação de materiais em áudio, vídeo e infografia. Foram selecionados porque oferecem mais ferramentas e possibilidades de criação, mesmo em suas versões gratuitas.
SITES E APLICATIVOS GRATUITOS QUE PODEM SER ÚTEIS
UX
UX ou User Experience se refere, literalmente, à experiência que um usuário tem com um site, aplicativo ou sistema, em cada passo dessa utilização; e o objetivo desse campo de estudo é garantir que o objetivo do usuário seja alcançado da maneira mais agradável possível. O arquiteto de informação Peter Morville criou, em 2004, um diagrama chamado "UX Honeycomb", ou Colmeia da Experiência do Usuário, no qual ele expõe as características que definem um produto com bom UX. Ele explica cada ponto em um artigo publicado seu site. Todos os hexágonos do diagrama se tocam, se relacionam. O conteúdo do diagrama original de Morville foi traduzido e adaptado para o contexto do jornalismo digital abaixo:
Manter esses princípios em mente (bem como todos os outros sempre ressaltados nesse guia em prol da clareza e credibilidade da informação) já é um grande passo na direção de entregar ao seu leitor uma boa experiência. Mas UX é um campo relativamente novo e bastante complexo e criar a experiência "perfeita" e um site 100% responsivo, ou seja, adaptado à diferentes resoluções, telas e dispositivos, vai exigir estudos mais aprofundados ou a contratação de um profissional da área. Esse e-book faz uma curadoria de recursos, entre canais no YouTube, blogs, cursos e eventos para quem deseja se aprofundar em UX.
Bibliografia
Os livros e artigos abaixo foram as principais fontes de consulta para a elaboração do Guia de Boas Práticas Visuais para Jornalistas. Se você tem interesse em se aprofundar no assunto, todos valem a leitura, principalmente Dois Estudos em Comunicação Visual e Design para um Mundo Complexo.
Arte e Percepção Visual
​
Rudolf Arnheim
A composição da página noticiosa nos jornais digitais
​
Luciana Moherdaui
A cor como informação
​
Luciano Guimarães
O design do jornal impresso diário
​
Eduardo Nunes Freire
Design para um Mundo Complexo
​
Rafael Cardoso
Discurso das Mídias
​
Patrick Charaudeau
Dois Estudos de Comunicação Visual
​
Washington Dias Lessa
Impacto Visual na Imprensa Digital
​
Joan Francesc Fondevila Gascón
Jornalismo Convergente
​
Carlos d'Andréa e Raquel Longhi (Organização)
Language of Vision
​
György Kepes
O Mundo Codificado
​
Vilém Flusser
