La gestion des ressources créatives : la vision d’ensemble d’un développeur

La gestion des ressources créatives : la vision d’ensemble d’un développeur

En tant que directeur front-end, le projet WSF de L’Oréal m’a amené à travailler avec un grand nombre d’agences créatives. Certains m’estiment chanceux de bénéficier de cette expérience ; pour ma part, je leur réponds que c’est la cause de mes cheveux blancs. Les nombreuses différences culturelles ainsi que les écarts de compétences sont autant de sources de problèmes lors de la livraison d’assets créatifs.

Le projet WSF (Website Factory) représente le futur du domaine digital de L’Oréal. L’Oréal est un groupe imposant, avec une quantité impressionnante (3000) de sites actifs. La plupart de ces sites sont déjà anciens et ne correspondent pas aux nouvelles normes du web. Ils ont été codés dans différents langages de programmation, et leur maintenance est devenue difficile à assurer. « Le trou noir où disparaît l’argent », comme nous aimons à les appeler.

Le projet WSF vise à réduire la redondance pour livrer environ 800 sites web de haute qualité. Tous ces sites seront conçus avec la même pile technologique : intégration continue, hébergement, réseau de diffusion de contenu (CDN), plateforme CMS, code front-end et sa boîte à outils, etc. Tous les sites reposent donc sur une fondation commune, mais avec des design et atmosphère propres à chacun d’entre eux.

L’Oréal devra également composer dans les années à venir avec une augmentation du nombre de visiteurs en provenance d’Asie et d’Amérique du Sud, estimée à un milliard de visiteurs supplémentaires. Autant dire qu’ils auront besoin d’un plan solide pour gérer une telle quantité de nouveaux utilisateurs.

La majorité des marques de L’Oréal sont représentées au niveau mondial par différents partenaires créatifs. Certains se concentrent sur l’aspect technologique, d’autres sur le storytelling ; les meilleurs assurent sur les deux aspects. Les livraisons d’assets créatifs fluctuent souvent en termes de qualité, et nous ne savons jamais à quoi nous attendre.

Voici quelques-unes des variantes que nous avons expérimentées dans les livraisons, parmi d’autres :

● Un document PDF de 150 pages, non-interrogeable. Il nous a été livré 276 fois en
l’espace de 6 mois. Aïe.
● Un fichier Excel contenant une liste de noms de composants, avec des JPG en guise de référence.
● Plusieurs fichiers Photoshop de 1 Go, avec tous leurs calques et versions.
● Une livraison type Atomic Design sur Invision, comprenant les différent(e)s versions, spécifications et commentaires.

Valtech a adopté une approche globale pour le projet WSF de L’Oréal, avec des équipes basées un peu partout dans le monde. De nombreuses différences culturelles ainsi que des écarts de compétence séparent ces équipes et leurs partenaires créatifs : c’est la raison pour laquelle nous avons mis en place des normes de livraison de contenu créatif. Cet article vous permettra d’en apprendre plus sur la façon dont nous gérons ces équipes.

Cet article s’intéresse aux bonnes pratiques à adopter dans le cadre du travail à grande échelle avec des agences créatives ; garder les développeurs web et les analystes d’affaires heureux et motivés représentera toujours un atout de taille pour vos projets, quels qu’ils soient. Vous vous apercevrez que les règles détaillées plus bas relèvent toutes du bon sens, mais qu’elles ne sont pas toujours simples à appliquer. A noter qu’elles peuvent également être appliquées à des équipes plus réduites.

PRÉREQUIS DE DÉVELOPPEMENT

Pour qu’une équipe de production puisse commencer son travail, il est nécessaire de lui fournir certains éléments de design fondamentaux : le choix de la grille de production et des polices est important, ainsi que la définition d’un bon rythme vertical. Les meilleurs designs bouleversent les règles ; mais afin de bien les enfreindre, il faut déjà les avoir établies.

La grille

Les grilles connectent différents éléments pour aboutir aux meilleures hiérarchie, conformité et cohérence. Une grille est une série de lignes divisant une page en colonnes, avec pour but d’aider les designers à organiser le contenu sur la page.

Le fonctionnement des colonnes, des marges et des gouttières varie grâce au responsive web design. Sur grand écran, vous choisirez certainement de mettre les colonnes et les gouttières à l’échelle en pourcentages basés sur la largeur de l’écran ; sur petit écran, les marges peuvent être supprimées, et la largeur des gouttières avoir une valeur fixe.

Nous nous sommes aperçus que le nombre optimal de colonnes est de douze. Divisible par deux, trois, quatre ou six, c’est le chiffre idéal pour l’implémentation des composants. Assurez-vous que l’agence créative a étudié la grille.

Les polices de caractères

L’histoire des polices web est assez mouvementée. Elles étaient auparavant implémentées différemment et dans des formats de fichier variés selon les navigateurs. L’affichage des polices sur le web demande de trouver un équilibre délicat entre qualité et taille de fichier, mais évitons de nous perdre dans les méandres de l’histoire des polices web, et entrons plutôt dans le vif du sujet.

Nous avons constaté que tout retard dans la livraison des polices avait un impact important sur le processus de compilation, puisque le changement d’une police modifie la hauteur de ligne et le rythme vertical. Assurez-vous d’avoir choisi votre police avant de débuter le travail de production.

Gardez les choses suivantes à l’esprit lorsque vous recevez une police :

● La police est-elle une police Web officiellement créée par une fonderie de polices ? Si ce n’est pas le cas, elle pourrait avoir été piratée, ou ne pas donner le rendu attendu.
● Assurez-vous que la police comprend uniquement le jeu de caractères dont vous avez besoin pour la langue de votre page. Demandez à ce qu’on vous livre les versions localisées à part.
● Vérifiez que la police permet bien l’utilisation de ligatures (pensez au ß allemand !)
● Pour éviter le FOUT (flash de texte sans style, de l’anglais « flash of un-styled text »), essayez d’héberger les polices sur votre propre serveur pour les distribuer à partir de votre CDN. Vous vous assurerez ainsi le meilleur degré de contrôle possible pour la distribution rapide des fichiers. Essayez d’acquérir une licence qui permet d’obtenir la structure physique de la police sans se lier à une tierce partie.
● Les polices asiatiques comportent souvent un jeu de caractères latins, assez limité, afin de permettre l’affichage sur les sites concernés. Ces glyphes sont le plus souvent horribles ; la meilleure solution pour éviter cela est de charger vos polices latines en premier, avant les polices asiatiques.

Le rythme vertical

Le rythme vertical est défini par un nombre, généralement déterminé par la hauteur de ligne, à partir duquel est calculé l’espace entre les éléments de texte. Pour garder le bon rythme dans votre mise en page, vous devez définir l’espacement vertical complet pour chaque élément en fonction de la mesure de référence de votre grille, ce qui implique de travailler en utilisant des multiples de cette valeur. Utilisez gridlover si vous avez besoin d’un coup de pouce supplémentaire.

Le contenu

Fournir du contenu réel à l’agence créative permet de produire des designs plus réalistes. Un contenu bien choisi ne provient en général que de clients avec qui vous avez une relation bien établie et qui savent se renseigner. C’est toujours un challenge, et il est souhaitable que les développeurs aident le client à bien choisir son contenu pour les scénarios utilisateurs, afin que l’agence créative puisse l’incorporer dans son travail. Plus le contenu est bon, et plus le travail créatif sera complet. Un bon contenu traite d’un sujet réel, avec de vraies images et propose une version multilingue.

 

L’APPROCHE DESIGN

Le terme « d’approche design » peut signifier de nombreuses choses ; ici, il s’agit de s’intéresser au contexte de la page plutôt qu’à celui de ses composants. Ce qui est délicat avec le design, c’est qu’il n’est bon que s’il raconte une histoire au niveau de la page.

Nous travaillons habituellement avec un grand CMS (CMS plus détaillé qui regroupe les composants dans un recueil au lieu de gérer les contenus par page), et nous demandons donc à ce qu’on nous livre les assets sous forme de composants. Les esprits créatifs fonctionnant différemment de ceux plus orientés technique, la livraison de composants est souvent problématique. Selon nos relations avec l’agence créative, nous demandons une livraison type Atomic Design, ou sous forme de composants (organismes, dans Atomic Design).

Nous demandons également à voir un exemple de page, afin de nous assurer que l’agence visualise bien la façon dont les composants s’imbriquent entre eux.

La convention d’appellation

La nomenclature des composants doit rester la même entre les différentes disciplines. Les noms des composants doivent suivre le même format, qu’il s’agisse de scénarios utilisateurs, de documents de conception, de CSS, des tests individuels, de l’interface CMS, de la documentation, du tagging, des rapports d’accessibilité, des rapports de bugs, etc… Assurez-vous que la convention d’appellation choisie par l’équipe de production a bien été partagée avec l’équipe créative.

Les différents états des composants

Pour s’assurer que la direction créative qui a été choisie est la bonne, la production doit pouvoir consulter les différents états des composants.

Les points suivants doivent être pris en compte, le cas échéant :

● Le composant s’adapte-t-il aux cas particuliers (trop ou pas assez de texte, une vidéo sans affiche, ou un produit sans bouton d’achat) ?
● Le design s’adapte-t-il aux différentes langues (l’allemand, par exemple, est connu pour ses longues phrases sans pause) ?
● Le composant fonctionne-il en RTL ?
● Les états :hover, :focus et :active ont-ils été livrés ?
● Y a-t-il des hauteurs fixes à un quelconque endroit ? Si c’est le cas, assurez-vous que c’est pour une excellente raison. Les hauteurs fixes sont toujours sources de problèmes avec le contenu ou la localisation.
● Un système de design a-t-il été mis en place pour l’espacement entre les composants ? Si ce n’est pas le cas, mettez-en un en place. Nous avons généralement des problèmes avec l’espacement entre composants vers le milieu des projets, ce qui nous fait toujours perdre du temps.

LA LIVRAISON

Lorsqu’on parle de livraison d’assets créatifs, le plus important est d’éviter la circulation constante de fichiers physiques par e-mail. Quelques exemples de noms de fichiers (dans lesquels j’ai corrigé les fautes) :

01/02/2018-desktop-homepage-herobanner-sprint1-FINAL-V1.psd
08/02/2018-desktop-homepage-herobanner-sprint1-FINAL-V2.psd
12/02/2018-desktop-homepage-herobanner-sprint1-FINAL-FINAL.psd

En plus des incohérences dans les noms de fichiers, il est difficile de s’y retrouver parmi les fichiers contenus dans chaque dossier. Les fichiers PSD contiennent souvent des « compositions de calques » ou des dossiers détaillant les différentes étapes du design. Les efforts nécessaires pour rester à jour sur les évolutions du design finissent par court-circuiter le cerveau des développeurs et des analystes d’affaires.

Choisissez un outil comme Invision, Zeplin, Sketch cloud ou Figma pour la livraison. La majorité de ces outils permet la synchronisation sur le cloud des designs enregistrés en local afin d’organiser leur livraison. Les designs peuvent être taggés, arrangés, versionnés, commentés et inspectés par les développeurs dans une interface spéciale. Encouragez fortement l’agence créative à vous livrer leur travail via un outil conçu pour la livraison d’assets créatifs.

Voici quelques questions que vous devez vous poser lorsqu’on vous livre un design en utilisant l’un des outils cités plus haut :

● Les assets images sont-ils extractibles/téléchargeables ?
● Les icônes sont-elles extractibles et au format SVG ?
● Les calques sont-ils compréhensibles ?
● Pouvez-vous inspecter tous les éléments de design ? Parfois, les objets individuels ne sont plus disponibles en raison du mélange des calques effectué par les designers.

L’ACCESSIBILITÉ DU WEB

Si l’accessibilité (a11y) n’est pas gérée au niveau créatif, elle peut occasionner un ralentissement au niveau de la production. Ne pas suivre les bonnes pratiques d’accessibilité engendre une perte de temps, puisqu’une partie du temps alloué au développement se retrouve investie dans des tâches plus créatives. Enseignez les bases de l’accessibilité à l’agence créative afin d’éviter les va-et-vient inutiles.

Les problèmes courants d’accessibilité
Voici une liste rapide des problèmes courants. L’accessibilité étant subjective, je ne m’étendrai pas sur les détails de chaque problème.

● Navigation
● Les sous-menus qui ne s’ouvrent pas en cliquant sur le lien principal mais s’affichent au survol
● Trop de liens, rendant la compréhension difficile
● L’utilisation de texte sur image lorsque le contraste est insuffisant entre le texte et l’image de fond
● Les mauvais rapports de contraste couleur
● Sur les boutons, les liens, dans les couleurs de l’en-tête
● Une mauvaise taille de boutons, de liens, ou de contenu éditorial
● La lecture automatique de vidéos ou carrousels
● Peu idéal niveau convivialité, mais si vous tenez vraiment à activer la lecture automatique :
● Ajoutez un bouton Pause
● Ajoutez un bouton de navigation
● Ajoutez une option permettant à l’utilisateur de désactiver la lecture automatique
● Une mauvaise application du texte alternatif ou des éléments descriptifs pour les images et vidéos.
● Pas de focus/d’états d’activation pour les boutons/liens
● Ou le retrait de cette « horrible » bordure bleue lors du focus
● Pas de bouton pour passer directement au contenu
● Pas de bouton « skip list »

L’accessibilité a plus été prise en compte en 2019 qu’auparavant, mais on voit également apparaître de plus en plus de solutions alternatives. Certains sites web n’étant pas aux normes d’accessibilité s’en tirent avec l’ajout d’un bouton « activer les fonctions d’accessibilité ». Voilà la réponse à la plupart des problèmes d’accessibilité au niveau créatif :

L’accessibilité multimédia

Les images s’avèrent souvent plus complexes à prendre en compte. Voici les questions les plus couramment posées :

● Comment recadrer une image pour qu’elle s’intègre au design tout en restant éloquente
● Comment créer une image adaptative
● Comment optimiser une image
● Ces problèmes peuvent être réglés au niveau technique en utilisant des systèmes comme Cloudinary ou TwicPics.

La majorité des gens ne pense pas à l’accessibilité multimédia. Tout le monde connaît le texte alternatif qui accompagne les images : n’oublions pas que la mauvaise application de textes alternatifs et le manque de menus déroulants sur son site ont valu un procès à Beyoncé, pour une importe somme d’argent.

Mais ceux qui sont le plus souvent laissés pour compte, ce sont les daltoniens. Comment faire si vous êtes atteint d’achromatopsie et que vous devez choisir une couleur de rouge à lèvres ou de t-shirt ? Les textes alternatifs et les indicateurs de couleur sont une partie importante du design.

Alternativement, plutôt que d’expliquer ce qui est affiché à l’écran, il est possible d’ajouter à vos images des filtres permettant de simuler la vision d’une personne atteinte de dyschromatopsie (daltonisme). Cloudinary met à disposition des outils extraordinaires pour appliquer différents sets de modifications aux groupes de couleurs.

 

Article orginial : https://timbenniks.nl/writings/delivery-guidelines-for-creative-assets/

Article traduit par Valtech