Design editorial na web: dar forma à leitura
Hierarquia, espaço, tipografia e imagens devem ajudar a compreender. Reveja uma página sem transformar cada secção noutro efeito visual.
Imagine uma reportagem em que o título, a legenda da fotografia e o texto principal têm o mesmo aspeto. O conteúdo continua lá, mas o leitor precisa de descobrir por onde começar. O design editorial organiza essa escolha: o que merece atenção primeiro, o que explica o assunto e o que pode ser consultado depois.
Na web, isto exige mais do que escolher uma fonte bonita. O texto muda de tamanho, as imagens carregam em momentos diferentes e cada pessoa pode chegar diretamente a uma secção. A composição precisa de continuar compreensível nessas condições.
Comece por distinguir os elementos
Um título identifica a pergunta ou o assunto. A abertura apresenta a resposta e o contexto. Os subtítulos permitem localizar partes específicas. As legendas explicam o que acrescenta a imagem. Quando todos estes elementos disputam atenção com a mesma intensidade, a página fica ruidosa.
Reveja o texto sem cores nem imagens. Ainda distingue título, secções e parágrafos? Caso contrário, ajuste tamanho, peso e espaço antes de acrescentar decoração. O destaque visual deve ter uma função: uma advertência, uma ideia importante ou um próximo passo, não tudo ao mesmo tempo.
A orientação do W3C sobre títulos recomenda uma hierarquia lógica no HTML. O aspeto de um subtítulo deve corresponder à sua função no documento.
Crie ritmo com espaço
Um artigo pode alternar parágrafos, uma fotografia comentada e uma tabela quando existe comparação. Não precisa de transformar cada ideia num cartão. As caixas são úteis para separar conteúdos com funções distintas; quando surgem em todas as secções, deixam de assinalar essa diferença.
Observe a relação entre margens. O título deve parecer próximo do texto que apresenta e separado da secção anterior. Uma legenda pertence à sua imagem. Estes vínculos são mais importantes do que aplicar o mesmo intervalo a todos os elementos.
Num exemplo hipotético, uma página de arquitetura pode apresentar a questão do projeto, mostrar uma fotografia geral e explicar depois um pormenor com uma legenda. Três fotografias bonitas, sem explicar o que observar, não cumprem a mesma função.
Escolha imagens que acrescentem informação
Antes de produzir uma capa, descreva a sua função numa linha. Mostrar a escala de um produto? Explicar uma etapa? Comparar estruturas? Essa decisão ajuda a evitar cenas genéricas que apenas repetem o tema de forma vaga.
Uma imagem conceptual pode introduzir o assunto, desde que não seja apresentada como registo de um cliente, equipa ou resultado real. Uma interface que sustenta uma análise precisa de ser legível e corresponder ao texto. Se houver números relevantes, mantenha-os também em texto ou numa tabela acessível.
Reveja onde o layout é posto à prova
Teste um título longo, uma palavra extensa, uma tabela e uma legenda com várias linhas. A coluna deve permitir passar à linha seguinte sem esforço. Aumentar a janela não precisa de aumentar indefinidamente o comprimento de cada linha.
O critério de refluxo das WCAG trata da adaptação do conteúdo quando o espaço diminui ou a leitura é ampliada. Verificar apenas uma captura de computador não comprova esse comportamento.
Comece pela organização do conteúdo, escolha uma página real e reveja o layout responsivo. O resultado deve permitir ler, localizar e compreender sem depender de um tamanho de ecrã específico.
Sobre o autor
Tiago F SantiagoComentários
Ainda sem comentários
Partilhe uma dúvida ou experiência relacionada com o artigo.
Artigos relacionados
