Conception Web bien faite : excellente rédaction

Beaucoup de discussions sur la conception de sites Web se préoccupent de ce qui se passe autour du contenu. Vitesse de page, systèmes de conception, optimisation des moteurs de recherche, cadres, accessibilité - la liste est longue. Cela nous donne à Smashing Magazine beaucoup de choses à écrire, ce qui est génial, même si cela vaut la peine de nous rappeler à quoi tout cela sert.

Dans cette troisième édition de notre série Web Design Done Well , nous nous concentrons sur le cœur battant de nombreux sites Web : le contenu. Plus précisément, le contenu éditorial. Le Web a donné aux conteurs une incroyable sélection d'outils avec lesquels travailler, et en tant que journaliste occasionnel semi-compétent moi-même, j'aime un bon scoop.

Vous trouverez ci-dessous des exemples de technologies Web intégrées au contenu éditorial pour le faire passer au niveau supérieur. Nous terminerons ensuite avec des conseils plus larges sur la façon de penser de manière créative au contenu numérique. Même maintenant, submergé par la chaîne de production de contenu, les bonnes choses brillent toujours.

Reuters se penche sur le balayage

Dans cet article sur le racisme systémique aux États-Unis, Reuters façonne le contenu autour du balayage, divisant l'histoire en petits morceaux. La lecture semble beaucoup plus utile qu'elle ne l'aurait été avec une approche de défilement traditionnelle. C'est comme tourner les pages d'un livre. Sur mobile, vous passez littéralement à la section suivante. Cela permet d'obtenir des rapports instantanés et instantanés, sans parler de l'excellente visualisation des données présentée.

Nous vivons dans un monde axé sur le mobile. Il ne sert à rien d'être précieux à ce sujet. Oui, les pages de magazines ont une certaine classe à leur sujet. Oui, une vue de bureau vous donne une plus grande toile avec laquelle travailler. La réalité est que la plupart des gens verront ce que vous publiez sur un téléphone mobile, alors penchez-vous dessus. Pour une approche similaire, ces « tap stories » du New York Times et Input sont également excellentes. Pour ceux qui souhaitent en savoir plus sur l'éditorial centré sur le mobile, The Story du légendaire concepteur de journaux Mario Garcia est vivement recommandé.

Le New York Times montre plutôt qu'il ne raconte

Malgré toutes les choses horribles que la pandémie de COVID-19 a causées, elle a au moins conduit à des reportages à couper le souffle. Cet article interactif du New York Times explique le fonctionnement des masques faciaux en amenant les lecteurs au niveau des particules. Vous pouvez voir comment les fibres captent les particules et pourquoi différents masques ont différents niveaux d'efficacité. N'importe quel imbécile peut rendre des sujets compliqués difficiles à comprendre, mais les rendre faciles à comprendre ? C'est une forme d'art à part entière.

Il y a beaucoup d'éléments en jeu ici. Graphismes, couleurs, animation - il y a même une expérience de réalité augmentée si cela fait flotter votre bateau. Ce qui aurait si facilement pu être un sujet sec et étouffant prend vie. Et surtout, ce sont des informations vitales. Des choses comme celle-ci sont la raison pour laquelle Gabriel Gianordoli a été élu meilleur designer du monde aux prix 2020 de la Society for News Design. Fracassant.

Le Washington Post visualise une propagation exponentielle

La pandémie a également forcé la visualisation des données à faire la une des publications du monde entier. Cet article sur la propagation exponentielle à partir de mars 2020 (rappelez-vous cela ?) fait un travail incroyable en visualisant comment et pourquoi certains virus deviennent de vrais gros problèmes très rapidement. Des simulations complètes aux petits graphiques sparkline en ligne, c'est un éditorial qui tire pleinement parti de son environnement numérique.

Ce que j'aime particulièrement dans celui-ci, c'est qu'il ne semble jamais gratuit. Chaque visuel améliore l'histoire, au point que vous vous sentez presque désolé pour quiconque doit expliquer les mêmes concepts avec des mots seuls. Le fait qu'il soit disponible dans plus d'une douzaine de langues en un clic est une autre touche merveilleuse - un rappel que le Web est en fait sans frontières. Je ne peux qu'imaginer combien de personnes dans le monde cet article a aidé.

Le projet Marshall mélange les médias

Ici, The Marshall Project présente un journalisme percutant sur le système de justice pénale américain avec l'élégance et la beauté douce-amère d'un livre de contes pour enfants. Dans "The Zo", une écriture créative, une illustration saisissante, une narration fascinante et une histoire importante se combinent. C'est de l'éditorial multimédia en plein essor.

On dit que les chansons peuvent prendre plusieurs formes. Il en va de même pour le contenu éditorial en ligne. Ce que vous voyez ci-dessus a été inspiré par un article académique de 96 pages. Qu'il puisse trouver un nouveau public en tant que série animée en ligne, puis être nominé non pas pour un mais pour deux Emmys, témoigne des pouvoirs transformateurs d'Internet.

Le roman graphique interactif de SBS n'est pas une nouveauté

En parlant des pouvoirs transformateurs d'Internet, que diriez-vous d'une histoire interactive. Nous connaissons tous les adaptations cinématographiques, les adaptations de pièces radiophoniques, les adaptations de mini-séries, etc. Pourquoi pas des adaptations de pages web ? C'est exactement ce que le diffuseur australien SBS a entrepris de faire avec The Boat , un récit interactif d'une nouvelle du livre du même nom de Nam Le.

La séquence d'ouverture de la page vous attire directement, ses mots s'inclinant et tombant avec les vagues pendant que vous lisez, avec les sons du tonnerre et de la pluie remplissant vos sens à ras bord. Au fur et à mesure que l'histoire s'installe, les illustrations de Matt Huynh dérivent comme des souvenirs. C'est une expérience remarquablement vivante, belle en soi ainsi qu'une manière avisée d'apporter la littérature aux jeunes générations.

Les singes au pudding autour

J'aimerais trouver cela à temps pour l'édition sonore de cette série de sites inspirants. Peu importe, c'est ici maintenant. Dans une vitrine vraiment superbe de l'éditorial numérique, The Pudding n'explique pas tant le théorème du singe infini que de le vivre à travers la musique. Vous ne savez pas ce qu'est le théorème du singe ? Eh bien, qu'attendez-vous, la page expliquera infiniment mieux que moi. J'attendrai.

En utilisant des exemples interactifs de quatre notes, l'article implique le lecteur tout en rendant le concept simple à comprendre. En tant que touche finale et délicieuse, la page est elle-même une expérience en direct et continue, se frayant un chemin au hasard à travers des airs de plus en plus complexes. Vous pouvez vous attendre à ce qu'il obtienne «l'armée des sept nations» dans environ 19 ans. On se demande si un singe tapant sur un clavier assez longtemps pourrait créer le framework JavaScript parfait. L'espoir est éternel.

Une liste à part : une classe à part

Malgré toutes les discussions sur la visualisation de données, la musique, la réalité augmentée et d'autres outils élégants, il y a beaucoup à dire pour obtenir le droit fondamental. Les pages n'ont pas besoin d'être l'équivalent Web du Strip de Vegas pour attirer l'attention. Une liste à part le montre mieux que la plupart. Son approche du contenu occupera toujours une place dans mon cœur. Titre, illustration, copie, hyperliens bleus. Magnifique.

Ce que je réalise maintenant, c'est qu'il y a longtemps, j'ai écrit sur les deux branches de la conception Web « brutaliste ». L'essentiel de ce que j'ai dit était qu'une approche est bruyante et impétueuse, l'autre résolument fonctionnelle. A List Apart montre la beauté de ce dernier bien fait. La boîte à outils multimédia est un atout formidable, mais même maintenant, il y a des moments où seuls les mots suffiront.

Penser de manière créative au contenu

Pour le meilleur ou pour le pire, le Web regorge de contenu. Beaucoup de choses sont excellentes, beaucoup ne le sont pas. Une grande partie des discussions à ce sujet ont la cadence froide et calculatrice à laquelle on s'attendrait plus tôt de la part d'industriels parlant de chaînes de montage. Les exemples partagés ci-dessus témoignent, espérons-le, de la valeur de résister à l'envie de produire des choses, mais soyons réalistes : la plupart des sites Web n'ont pas les ressources de, disons, The Washington Post .

Cependant, il existe des moyens de penser de manière créative au contenu à tous les niveaux, des blogs personnels aux publications mondiales. En voici quelques-uns :

• Remettez en question votre approche par défaut.
  Nous sommes des créatures d'habitude, y compris dans la façon dont nous racontons nos histoires. Prenez le temps dès le début de prendre du recul et de demander, comment pourrais-je faire cela différemment ? Peut-être qu'un reportage photo serait plus prudent qu'un article. Peut-être qu'une carte thermique vaut mieux qu'un tableau. La spécialisation est certes importante, mais ne la laissez pas vous aveugler sur d'autres façons de faire, souvent complémentaires.
• Utilisez des ressources gratuites.
  L'un des grands cadeaux d'Internet est la quantité de choses gratuites incroyables qu'il y a. Comme, en fait gratuitement, exprès. De la photographie à la conception graphique en passant par les outils de visualisation de données et les logiciels de montage audio, les ressources dont vous avez besoin pour transformer votre contenu sont à portée de clic. Notre étiquette de cadeaux est un bon point de départ.
• Donnez au contenu plusieurs formes.
  Comme The Marshall Project l'a particulièrement bien montré avec "The Zo", les histoires peuvent trouver de nouveaux publics lorsqu'elles prennent des formes différentes. A écrit un article ? Super, pourquoi ne pas enregistrer une version audio ? Vous avez produit un rapport basé sur les données ? Assez cool, mais est-ce aussi cool que ça pourrait l'être si vous commenciez à brancher ces chiffres sur D3 ? Un seul moyen de le savoir.
• Expérience.
  Les exemples ici sont la crème de la crème, mais il convient de mentionner qu'il y a énormément à gagner en essayant de nouvelles idées et en acceptant les échecs occasionnels qui en résultent. L'itération est la clé du processus de création. Si vous essayez quelque chose et que cela ne fonctionne pas, très bien, peu importe. C'est le seul moyen d'arriver à ce qui fonctionne.

Il n'y a pas d'approche unique pour le contenu, mais le respect de l'histoire est essentiel. Les technologies Web sont complémentaires, pas l'événement principal. Ne les laissez pas être la queue qui remue le chien. Les meilleurs résultats sont obtenus lorsque l'histoire est en harmonie avec la façon dont elle est racontée. C'est le genre de contenu qui colle aux gens pendant des années.