J’avoue, je me régale à chaque fois que je me lance dans une refonte de création graphique d’email juste pour le fun. C’est mon kiff, mon dada, ma passion. « Mais, ce boulot, c’est la chance de ma vie, j’y crois à mort ! ». Ce petit matin, pouf, un email promotionnel de Darty dans ma messagerie : du fait, premier arrivé, premier servi ! Et ils vont pas être déçus… Dixit Darmanouche, « Vous allez voir, ça va bien se passer ».
Primo, pour bien comprendre de quoi qu’on parle, il est nécessaire de vous joindre une copie carbone de la campagne délivrée d’origine.
Quelles sont les erreurs dans cette création d’email ?
- Le preheader est affiché DANS l’email. Concernant ? Y a un objectif derrière ?
- Les textes des onglets du menu sont plus grands que quasiment l’intégralité des autres contenus textuels. J’irai MÊME ! J’irai même jusqu’à dire qu’ils sont plus grands que le titre de la cover (du moins tout autant). C’est simple, rien n’est aussi démesuré chez moi.
- Le texte de la cover est en image dans son intégralité. Là, déjà, c’est carton rouge. Cela est bien évidemment dû au fait que le système d’horloge est dynamique (autrement dit, l’heure indiquée change selon le moment où l’on ouvre l’email, ainsi que le texte « Avez-vous fait de beaux rêves ? et que l’image de cover d’ailleurs »). Le même principe qu’un compte à rebours dans un email quoi. Soit ! Pourquoi pas pour le titre… Mais le bouton (qui reste toujours identique), quel intérêt ?
- Il m’est d’ailleurs difficile de comprendre à quoi sert exactement le bouton « J’en profite » dans la cover. Je profite de quoi ? D’une réduction ? Elle est d’où ? « A comprends pas quand même ! »
- Alors désolé hein Darty, mais les pictos des lits avec les dimensions n’apportent strictement rien, sont redondants et « lourds » graphiquement parlant. V’là l’pavé.
- Les visuels des produits sont tout petits ! C’est des visuels pour des p’tites coccinelles !
- Pour la fiche produit, c’est chaud sa mère de faire la distinction entre la typologie, la marque, ou le descriptif.
- L’ancien prix (barré) et le prix après réduction flottent carrément. C’est freestyle and masterflex.
- Pour les textes des boutons des produits, nous repasserons pour l’originalité (tu m’excuseras Dartouche, je suis dur, mais c’est pour les besoins de l’article, tu t’en doutes, sinon je t’aimeuh bien !). Ils sont froids et ne génèrent pas vraiment d’engouement ou de curiosité.
- La bannière promo sur l’ameublement intérieur vient avant le bandeau de cross-selling orienté Literie. C’est pas normal ça, si ? P’is cette bannière, elle est aussi full image. De fait, le titre, le texte, la réduction et le bouton « J’en profite » sont extrêêêêmement petits. J’ai beau avoir une bonne vue, faut pas pousser.
- La taille des pictos des réseaux sociaux laisse à désirer. Vaut mieux être adroit de ses mains pour réussir à cliquer d’ssus. Idum pour les boutons de téléchargement d’application.
Et la version mobile de l’email me direz-vous, on s’en sort mieux ou quoi ?
Bon, allez, j’vais dire que ça passe. Même si j’ai beaucoup de mal à comprendre pourquoi, pour les blocs produits, la mise en forme passe maintenant sur deux colonnes (étrange…). En tout cas, une version mobile de l’email existe, et c’est déjà beaucoup. Je suis en droit de penser qu’une création graphique en version mobile de l’email a été pensée en amont. Et ça, c’est bien.
La création d’email Darty expliquée en live ou en podcast
Et mon projet de refonte de la création graphique de l’email alors, il est où ?
Il est où le bonheur, il est oùùùùùù ? D’accord j’arrête. J’aime critiquer, ça va de soi, mais j’apprécie aussi avancer des propositions. Voilà donc la version Bureau de ce à quoi que j’ai pensé. C’est Darty mon kik… Ok ok j’arrête, j’ai compris !
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
- J’ouvre Figma et j’achèèète un hôtel rue de la Paaaaiiix !
- Je reprends la couleur de fond du
<body>présente sur le site de Darty, histoire d’être raccord. - La largeur de l’email passe de 640 à 600 pixels. C’est largement suffisant pour afficher correctement le contenu, et c’est conforme à nos conseils sur les largeurs à privilégier pour un email.
- J’applique une grille de 12px sur ma maquette pour respecter les marges internes, externes, dimensions, espacements qui seront TOUS des multiples de ce chiffre. Un peu de sérieux tout de même.
- Toutes les teintes propres à la charte graphique de la marque sont enregistrées sous forme de variables sur Figma pour pouvoir les utiliser rapidement et simplement. Mais pas que. Vous comprendrez par la suite (ça vous oblige aussi à lire jusqu’à la fin, c’est vicieux.) En tout cas, c’est un début de design system pour email finalement.
- Hop, finish le preheader, ça dégage ! Enfin je le cache quoi. Je gagne quelques pixels en hauteur, c’est pas négligeable.
- Les typographies spécifiques à l’image de marque de Darty (soit
Roboto Slabpour les titres etOpen Sanspour les textes) sont utilisées à bon escient. Il s’agit ici de Google Font. Et si vous ne savez pas comment utiliser des google font dans un email, bah cliquez sur le lien, vous saurez ! - J’ajoute un accès au compte Darty et je fais la bise à Jean-Pierre Mader. « Camembert jaune, vous ne pouvez pas, il y a Gérard Depardieu en double file sur la bande d’arrêt d’urgence. »
- Les textes des onglets du menu passent de 17 à 14px. C’est non négociable !
- Un onglet dans le menu vers le service Darty Max en plus (pour pousser un peu plus la démarche responsable de la société avec l’entretien et la réparation des appareils en illimité… Ça serait trop bête de pas en parler !)
- Je m’aligne sur la génération de l’heure en image dans la cover (J’ai beau vouloir faire autrement, je ne peux pas !) MAIS ! Je dissocie le début du texte « Il est » pour pouvoir le développer en HTML. Je suis contraint de laisser le titre « Avez-vous fait de beaux rêves » en image dans la mesure où le texte change selon l’heure d’ouverture (passé 12h00, le texte sera « Faites de bonnes siestes ! » Vous avez vu, je prends des risques hein ! Je suis en guedin).
- Je rédige un texte dans la cover pour introduire ce vers quoi le bouton associé amène. Les connexions se font !
- La rédaction des textes et de l’intégralité des boutons est repensée pour amener plus d’univers de literie et attiser la curiosité (et inciter au clic, je vais pas vous mentir…). Bon ça par contre, c’est un peu contraire aux bonnes pratiques d’accessibilité dans les emails, non ?
- Hop, des effets de survol sur tous les boutons, sans exception (pourquoi s’en priver, quand on sait que la dégradation de l’effet de survol dans un email est plus qu’acceptable ?)
- Le titre de transition sera un peu plus long avant la liste des produits.
- Je supprime les vignettes « illustration de lit / dimensions » pour les remplacer par un système de filtre : j’aime imaginer que si la liste était plus longue, des produits disparaitraient au clic sur telle ou telle dimension. Quand je sais ce qu’on peut faire avec la technique des input checkbox dans un email, j’ose espérer que c’est faisable…
- La taille des visuels dans les encarts produits est considérablement agrandie. C’est pas des lits pour Polly Pocket non plus, faut pas abuser…
- L’ensemble des informations textuelles est aligné à gauche pour une meilleure lisibilité. Ça, c’est fait.
- Je présente très rapidement le pourcentage de réduction (lorsqu’il est présent) avec une vraie mise en forme ! Ça change hein… Bah oui ! Ça change des magazines.
- J’introduis une hiérarchie de l’information entre la typologie, le descriptif, les dimensions, et la marque du produit. Je joue aussi sur les couleurs et la mise en forme des textes pour mieux les dissocier.
- La mention « Livraison gratuite » est insérée lorsque cela est possible. Un avantage comme celui-ci, ça serait dommage de ne pas le mettre en avant je pense.
- Le bandeau des catégories de literie passe avant la bannière de promotion pour l’aménagement intérieur : restons dans le sujet principal avant de digresser que diable !
- La conception de la bannière d’aménagement intérieur est entièrement repensée : seul le visuel de gauche sera conservé en image. Le reste (titre, texte, bouton) peut désormais être conçu en HTML et en CSS.
« Et la version mobile ? » Où avais-je la tête… Je manque à toutes mes obligations. Je suis peut-être dans une mauvaise passe, mais le bout du tunnel n’est peut-être pas loin ! Zou, la voici la voilà :
L’email en Dark Mode, ça donne quoi ?
C’est là tout l’avantage du système de variables sur Figma bébé : vous renseignez une variable dans un « mode », et sa déclinaison dans un autre mode. Par exemple, pour ma variable de couleur « Red », je renseigne dans une colonne « Light Mode » le code hexadécimal propre au rouge de Darty. Puis, dans une seconde colonne bien-nommée « Dark Mode », j’indique le code hexadécimal de ce même rouge en dark mode : le plugin Dark Mode Magic sur Figma fera très bien l’affaire pour cette conversion !
J’ai plus qu’à faire de ma maquette un composant, puis dans une nouvelle page ajouter une instance de ce composant et le basculer en « Dark Mode » dans ma collection de variable. En 1 minute chrono, la tâche est faite et la maquette Dark Mode générée. C’est beau quand même la technique. Notez tout de même que les couleurs proposées ici ne reflètent pas la réalité, puisque chaque client de messagerie gère le Dark Mode différemment.
Vous l’avez compris, je serai heureux comme tout et excité comme un enfant devant le logo Netflix si je devais vous accompagner sur des projets de création de design email, ou de design system email. Et #Darty, si vous lisez cette bafouille, sachez que nous sommes à votre disposition ! Sans rancune !
