Web Design Bem Feito: Excelente Editorial

Muita conversa sobre web design se preocupa com o que acontece em torno do conteúdo. Velocidade da página, sistemas de design, otimização de mecanismos de pesquisa, estruturas, acessibilidade – a lista continua. Isso nos dá na Smashing Magazine muito sobre o que escrever, o que é ótimo, embora valha a pena nos lembrar do que tudo isso está a serviço.

Nesta terceira edição da nossa série Web Design Done Well , estamos aprimorando o coração pulsante de muitos sites: o conteúdo. Mais especificamente, conteúdo editorial. A Web deu aos contadores de histórias uma seleção incrível de ferramentas para trabalhar e, como jornalista semicompetente ocasional, adoro um bom furo.

O que se segue são exemplos de tecnologias da web sendo entrelaçadas com conteúdo editorial para levá-lo ao próximo nível. Em seguida, encerraremos com dicas mais amplas sobre como pensar criativamente sobre o conteúdo digital. Mesmo agora, sobrecarregado pela linha de produção de conteúdo, as coisas boas ainda brilham.

Reuters se inclina para deslizar

Neste artigo sobre o racismo sistêmico nos EUA, a Reuters molda o conteúdo em torno do swiping, dividindo a história em pedaços pequenos. A leitura parece muito mais intencional do que seria através de uma abordagem de rolagem tradicional. É como virar as páginas de um livro. No celular, você literalmente passa para a próxima seção. Ele proporciona relatórios rápidos e imediatos — e isso sem falar da excelente visualização de dados apresentada.

Vivemos em um mundo mobile-first. Não há nenhum ponto em ser precioso sobre isso. Sim, os spreads de revistas têm uma certa classe sobre eles. Sim, uma visualização da área de trabalho oferece uma tela maior para trabalhar. A realidade é que a maioria das pessoas estará visualizando o que você publica em um celular, então invista nisso. Para uma abordagem semelhante, essas 'histórias de toque' do The New York Times e da Input também são excelentes. Para aqueles interessados ​​em ler mais sobre editoriais centrados em dispositivos móveis, The Story , do lendário designer de jornais Mario Garcia, é altamente recomendado.

O New York Times mostra em vez de contar

Por todas as coisas horríveis que a pandemia do COVID-19 causou, pelo menos levou a alguns relatórios de tirar o fôlego. Este artigo interativo do New York Times explica como as máscaras faciais funcionam, levando os leitores ao nível das partículas. Você pode ver como as fibras capturam partículas e por que diferentes máscaras têm diferentes níveis de eficácia. Qualquer tolo pode dificultar a compreensão de tópicos complicados, mas torná-los fáceis de entender? Essa é uma forma de arte própria.

Há muitos elementos em jogo aqui. Gráficos, cores, animação - há até uma experiência de realidade aumentada se isso flutuar no seu barco. O que poderia facilmente ter sido um assunto seco e abafado é trazido à vida. E o mais importante de tudo, são informações vitais. Coisas assim é por isso que Gabriel Gianordoli foi eleito o Melhor Designer do Mundo nos prêmios Society for News Design de 2020. Esmagador.

O Washington Post visualiza a expansão exponencial

A pandemia também obrigou a visualização de dados às primeiras páginas das publicações em todo o mundo. Este artigo sobre a disseminação exponencial de março de 2020 (lembra disso?) faz um trabalho incrível de visualizar como e por que certos vírus se tornam grandes problemas reais rapidamente. De simulações completas a pequenos gráficos sparkline em linha, este é um editorial que tira o máximo proveito de sua configuração digital.

O que eu gosto especialmente sobre este é que ele nunca parece gratuito. Cada visual melhora a história, a ponto de você quase sentir pena de alguém ter que explicar os mesmos conceitos apenas com palavras. Estar disponível em mais de uma dúzia de idiomas com o clique de um botão é outro toque maravilhoso – um lembrete de que a Web não tem fronteiras. Eu só posso imaginar quantas pessoas ao redor do mundo este artigo ajudou.

O projeto Marshall mistura mídia

Aqui, The Marshall Project apresenta um jornalismo contundente sobre o sistema de justiça criminal dos EUA com a elegância e a beleza agridoce de um livro de histórias infantil. Em “The Zo”, escrita criativa, ilustração marcante, narração hipnotizante e uma história importante se combinam. Este é um editorial multimídia em pleno fluxo.

Dizem que as músicas podem ter várias formas. O mesmo vale para o conteúdo editorial online. O que você vê acima foi inspirado em um artigo acadêmico de 96 páginas. O fato de poder encontrar um novo público como uma série animada online e ser indicado não um, mas dois Emmys, é uma prova dos poderes transformadores da internet.

A graphic novel interativa da SBS não é novidade

Falando dos poderes transformadores da internet, que tal uma história interativa. Estamos todos familiarizados com adaptações de filmes, adaptações de peças de rádio, adaptações de minisséries e assim por diante. Por que não adaptações de páginas da web? Isso é exatamente o que a emissora australiana SBS se propôs a fazer com The Boat , uma releitura interativa de um conto do livro de Nam Le com o mesmo nome.

A sequência de abertura da página puxa você direto para dentro, suas palavras balançando e caindo com as ondas enquanto você lê, com os sons de trovões e chuva enchendo seus sentidos até a borda. À medida que a história se instala, as ilustrações de Matt Huynh passam como memórias. É uma experiência notavelmente vívida, bonita por si só, bem como uma maneira inteligente de levar a literatura para as gerações mais jovens.

Os macacos de pudim ao redor

Eu gostaria de ter encontrado isso a tempo da edição sonora desta série de sites inspiradores. Não importa, está aqui agora. Em uma vitrine verdadeiramente soberba de editorial digital, The Pudding não explica tanto o Teorema do Macaco Infinito quanto o vive através da música. Não sabe o que é o Teorema do Macaco? Bem, o que você está esperando, a página fará um trabalho infinitamente melhor de explicar do que eu poderia. Eu vou esperar.

Usando exemplos interativos de quatro notas, o artigo envolve o leitor ao mesmo tempo em que torna o conceito simples de entender. Como um toque final e delicioso, a página é em si um experimento vivo e contínuo, abrindo caminho aleatoriamente através de músicas cada vez mais complexas. Você pode esperar que o “Seven Nation Army” esteja certo em cerca de 19 anos. Alguém se pergunta se um macaco digitando em um teclado por tempo suficiente poderia criar a estrutura JavaScript perfeita. Espero Primavera eterna.

Uma lista à parte: uma classe à parte

Apesar de toda a conversa sobre visualização de dados, música, realidade aumentada e outras ferramentas sofisticadas, há muito a ser dito para obter o direito fundamental. As páginas não precisam ser o equivalente na web da Vegas Strip para serem atraentes. Uma lista Apart mostra isso melhor do que a maioria. Sua abordagem ao conteúdo sempre terá um lugar no meu coração. Título, ilustração, cópia, hiperlinks azuis. Lindo.

O que agora percebo foi um tempo inquietantemente longo, escrevi sobre os dois ramos do web design 'brutalista'. A essência do que eu disse foi que uma abordagem é barulhenta e impetuosa, a outra resolutamente funcional. A List Apart mostra a beleza deste último bem feito. O kit de ferramentas multimídia é um recurso maravilhoso para se ter, mas mesmo agora há momentos em que apenas as palavras servem.

Pensando criativamente sobre o conteúdo

Para o bem ou para o mal, a web está absolutamente inundada de conteúdo. Muito disso é ótimo, muito não é. Muito da conversa em torno disso tem a cadência fria e calculista que você esperaria de industriais falando sobre linhas de montagem. Espera-se que os exemplos compartilhados acima falem sobre o valor de resistir ao desejo de produzir coisas, mas sejamos realistas: a maioria dos sites não tem os recursos de, digamos, o Washington Post .

No entanto, existem maneiras de pensar criativamente sobre o conteúdo em todos os níveis, de blogs pessoais a publicações globais. Aqui estão alguns deles:

• Questione sua abordagem padrão.
  Somos criaturas de hábitos, inclusive na forma como contamos nossas histórias. Aproveite o início para dar um passo atrás e perguntar: Como eu poderia fazer isso de forma diferente? Talvez um ensaio fotográfico fosse mais prudente do que um artigo. Talvez um mapa de calor seja melhor do que uma mesa. A especialização é importante, é claro, mas não deixe que ela o cegue para outras formas, muitas vezes complementares, de fazer as coisas.
• Use recursos gratuitos.
  Um dos grandes presentes da internet é a quantidade de coisas gratuitas incríveis que existem. Tipo, na verdade de graça, de propósito. De fotografia a design gráfico, ferramentas de visualização de dados e software de edição de áudio, os recursos que você precisa para transformar seu conteúdo estão a apenas um clique de distância. Nossa tag de brindes é um bom lugar para começar.
• Dê ao conteúdo várias formas.
  Como The Marshall Project mostrou especialmente bem com “The Zo”, as histórias podem encontrar novos públicos quando assumem formas diferentes. Escreveu um artigo? Ótimo, por que não gravar uma versão em áudio? Produziu um relatório orientado a dados? Muito legal, mas é tão legal quanto poderia ser se você começasse a conectar esses números no D3? Só há uma maneira de descobrir.
• Experimentar.
  Os exemplos aqui são a nata da safra, mas vale a pena mencionar que há muito a ganhar ao tentar novas ideias e abraçar o fracasso ocasional que isso traz. A iteração é a chave para o processo criativo. Se você tentar algo e não funcionar, tudo bem, não importa. É a única maneira de chegar ao que funciona .

Não existe uma abordagem única para o conteúdo, mas respeitar a história é essencial. As tecnologias da Web são complementares, não o evento principal. Não deixe que eles sejam o rabo que abana o cachorro. Os melhores resultados vêm quando a história está em harmonia com a forma como é contada. Esse é o tipo de conteúdo que fica com as pessoas por anos.