La création de notre première histoire numérique à l’aide de l’éditeur de blocs • Yoast


Nous écrivons beaucoup de billets de blog. Et, non seulement sur les sujets SEO, mais aussi sur notre mission, notre culture d’entreprise et notre vision plus large. Nous espérons qu’en écrivant ce genre de messages, nous pourrons vous donner un aperçu de qui nous sommes en tant qu’entreprise et qui nous sommes en tant que personnes.

Mais, les articles de blog sont transitoires. Nous les publions et nous pouvons les mettre à jour de temps en temps, mais ils font partie d’un flux de blog en cours. Vous pouvez parfois les manquer. Et c’est pourquoi nous avons voulu commencer à documenter ces valeurs et idéaux qui alimentent notre culture d’entreprise de manière plus permanente. C’est là que l’idée de la narration numérique est apparue.

Dans cet article, nous expliquerons comment nous sommes arrivés à cette idée, comment nous avons construit notre première page de narration sur la diversité et les préjugés, et comment vous pouvez appliquer ces principes pour raconter vos propres histoires.

Voulez-vous apprendre à utiliser les blocs dans l’éditeur de blocs à leur plein potentiel? Ne cherchez plus et découvrez notre formation gratuite sur l’éditeur de blocs WordPress! Il vous apprendra à créer un article de blog bien conçu avec l’éditeur de blocs. Créons du contenu incroyable!

Pourquoi raconter des histoires

Comme je l’ai mentionné précédemment, la narration me semblait un bon moyen de parler de nos valeurs, car elle donne un contexte à ce que nous faisons. C’est une manière différente de présenter des informations qui ne sont pas destinées à une consommation rapide ou optimisées pour attirer l’attention. Elle ne se concentre pas uniquement sur l’information, elle prend également en compte l’expérience de la lecture.

Nous avons d’abord choisi le sujet de la diversité car ce sujet touche à l’une de nos valeurs fondamentales. Lorsque Marieke est devenue PDG de Yoast au début de 2019, il n’y avait pas beaucoup de femmes dans notre haute direction. Ainsi, Marieke a lancé un projet pour coacher et autonomiser les femmes de Yoast pour atteindre ces postes si elles le souhaitaient.

Dans ce processus, elle a également créé une présentation sur la diversité et le féminisme qu’elle pourrait donner dans d’autres endroits en dehors de l’entreprise, tels que WordCamps, pour inspirer également les autres à l’action. Transformer cette présentation en une histoire numérique nous a alors semblé un moyen d’atteindre un public encore plus large. Il deviendrait un endroit plus permanent où les gens pourraient aller en apprendre davantage par eux-mêmes.

Le processus de raconter une histoire numérique

Concept

Une fois que l’idée de ce premier projet de narration est née, Marieke a écrit un brouillon basé sur son script de présentation, et notre équipe de conception s’est mise au travail.

L’équipe de conception a déjà conçu des tonnes de pages sur tous nos produits, et ceux-ci suivent un guide de style (ou du moins ils devraient!). Mais, nous n’avons pas pu atteindre la façon dont nous voulions présenter visuellement cette histoire avec uniquement les éléments que nous avions déjà dans notre boîte à outils. Il fallait un design audacieux et ludique qui guide le lecteur à travers cette expérience.

Une partie centrale de cette expérience devrait être nos illustrations. Nos illustrateurs ont récemment expérimenté l’animation dans Adobe After Effects, et nous avons pensé qu’il serait formidable de pouvoir utiliser ces animations dans nos histoires numériques.

Sur la base du brouillon du texte, ils ont commencé à esquisser et à créer un storyboard. Ils voulaient que chaque section ait son propre caractère, et notre style visuel essaie déjà d’être assez inclusif, ce qui correspondait bien à ce sujet.

Animation

En plus de cela, ils voulaient cette fois ajouter des animations subtiles. Mais avoir des animations de bonne qualité ET rapides sur le Web est toujours parfois un défi. Nous avons considéré GIF, bien sûr, et MP4 avec la lecture automatique, mais il s’avère que vous pouvez également animer des images SVG, avec un peu d’aide de la bibliothèque JavaScript d’AirBnB Lottie.js.

Pour ce faire, vous créez une animation vectorielle dans After Effects, puis vous l’exportez en JSON. Si vous voulez essayer aussi, vous pouvez lire comment créer et exporter une animation compatible Lottie à partir d’After Effects, et / ou en savoir plus sur la façon dont nous avons implémenté les animations SVG basées sur Lottie dans l’éditeur de blocs WordPress.

Vidéo

Nous avions l’impression que l’histoire prendrait plus vie si certaines parties étaient vidéo, et cela briserait un peu la mise en page, alors l’équipe de conception a sélectionné trois sections pour faire une animation. Ensemble avec EyesxEars, notre partenaire de production vidéo en interne, nous avons enregistré Marieke présentant ces histoires courtes, puis dessiné des animations pour expliquer les concepts visuellement.