Créations graphiques
Conception d’e-mail de lancement de produit
Un e-mail de lancement de sneakers associe une illustration produit orange, une typographie surdimensionnée, une seule action d’achat et quatre caractéristiques sur un canevas crème étroit.
Cas d’usage de l’e-mail
- Lancements d’un seul produitMettez en avant un produit, un coloris et une action.
- Campagnes de chaussuresAssociez la silhouette d’un produit à une courte série de caractéristiques.
- Direction artistique d’e-mailsExplorez une séquence de lecture étroite avant de préparer un e-mail de production.
Points forts de l’e-mail de lancement
- Illustration guidée par le colorisLa chaussure Ember Flare et le titre orange partagent le même accent.
- Une seule action d’achatUn bouton sombre suit le nom du produit et la description du lancement.
- Caractéristiques avec unitésLe poids, l’épaisseur de la semelle au talon, le drop talon-pointe et l’amorti restent légendés.
L’e-mail de lancement, section par section
1 / 4
Une sneaker, une séquence de lecture verticale
SPORT TEST est une marque de chaussures illustrative, et cet e-mail HTML présente sa sneaker Axis Pro dans le coloris Ember Flare. Le design ne s’ouvre ni sur un catalogue ni sur une grille de produits concurrents. Il passe d’un bandeau compact à une grande illustration produit, un message de lancement, une action d’achat, une grille de caractéristiques et un petit pied de page d’abonnement.
La largeur maximale de l’e-mail est de 680 pixels. Un fond crème relie l’image, le texte et les détails techniques au lieu de les traiter comme des tuiles promotionnelles séparées. Ce canevas étroit offre au lecteur un parcours prévisible de haut en bas. Il oblige aussi le titre surdimensionné à passer à la ligne de façon réfléchie ; un nom de produit court contribue à la réussite de cette composition.
| Section | Contenu visible | Rôle dans le lancement |
|---|---|---|
| Bandeau | SPORT TEST avec les liens Shop, Journal et Members. | Installe la marque avant la présentation du produit. |
| Illustration | Une chaussure orange avec les tampons Ember Flare et Drop 04. | Présente le coloris avant que le lecteur n’atteigne le nom du produit. |
| Message de lancement | Meet the Axis Pro, un texte descriptif et un bouton d’achat sombre. | Réunit l’identité du produit, sa promesse et l’action suivante attendue. |
| Caractéristiques | Quatre valeurs légendées au-dessus d’un petit pied de page de marque. | Ajoute des détails techniques après le message promotionnel principal. |
Laisser le coloris guider la direction artistique
La chaussure est une illustration vectorielle, et non une photographie de produit. Sa tige orange, sa semelle claire et son contour sombre se détachent sur un dégradé chaud. Le tampon Ember Flare visible fait du choix de couleur une partie de l’histoire du produit. En dessous, Axis Pro apparaît en italique orange dans un titre autrement sombre et en capitales, reportant le même accent dans le message.
C’est utile pour un lancement construit autour d’une silhouette ou d’une finition reconnaissable. L’illustration peut être simplifiée sans rivaliser avec un environnement chargé, tandis que le crème environnant évite que l’e-mail ne devienne un bloc d’orange. Le compromis tient à la fidélité au produit : un vecteur stylisé peut suggérer la matière et l’amorti, mais il ne peut pas confirmer l’aspect réel d’une chaussure physique.
Un nom de couleur à côté du produit
Ember Flare apparaît dans l’illustration et dans le texte de lancement. Cela relie le coloris au message au lieu d’utiliser l’orange comme simple décoration. Une campagne comptant plusieurs variantes devrait rendre la variante choisie tout aussi explicite.
L’échelle crée la révélation du produit
La chaussure occupe l’essentiel de la zone principale, tandis que de petits tampons restent près des bords. Ce contraste fait de la silhouette le premier élément remarqué. De longs libellés promotionnels affaibliraient cet équilibre ; le texte environnant est volontairement bref.
D’un grand titre à des détails mesurables
Le message de lancement indique « Meet the Axis Pro. A sneaker that runs. » De grandes lettres capitales condensées transforment une courte phrase en un bloc visuel consistant. Le nom du produit en italique orange distingue ce qui est lancé du reste de l’énoncé. Un paragraphe plus petit donne ensuite le positionnement d’exemple avant le bouton sombre Shop the Axis Pro.
Le message ne comporte qu’une seule action d’achat proéminente. Les liens du bandeau sont beaucoup plus petits et ne ressemblent donc pas à d’autres actions principales. C’est logique pour l’annonce d’un seul produit, même si une vraie campagne exigerait des destinations fonctionnelles et une décision réfléchie sur la présence ou non d’une navigation dans l’e-mail.
| Valeur affichée | Libellé associé | Pourquoi le libellé compte |
|---|---|---|
| 7.4 OZ | Poids, femme US 8. | L’unité et la pointure de la chaussure donnée en exemple rendent l’indication de poids interprétable. |
| 34 MM | Épaisseur au talon de la semelle à amorti maximal. | L’emplacement distingue l’épaisseur de la semelle au talon de la mesure suivante. |
| 8 MM | Drop talon-pointe. | La même unité décrit ici une autre relation, et non une autre épaisseur de la semelle au talon. |
| Gel-02 | Inserts de gel amortissants au talon et à l’avant-pied. | Il s’agit d’un identifiant de composant, et non d’un nombre à la même échelle que les autres valeurs. |
Un design d’e-mail, pas une campagne livrée
Cet exemple OpenDesign présente un concept d’e-mail HTML rendu dans le navigateur. Les caractéristiques produit, l’adresse de la marque et le texte de lancement sont illustratifs. Les liens d’achat, d’abonnement et de navigation utilisent des destinations fictives ; aucun paiement, liste de diffusion, service d’envoi ni processus de désabonnement n’est fourni.
Dans une zone d’affichage étroite, la source masque la navigation du bandeau et réduit les marges intérieures ainsi que la taille du titre. Cela montre un traitement responsive dans le navigateur, et non une compatibilité vérifiée avec les clients de messagerie. La source utilise des styles flex et grid modernes. Avant d’envoyer une vraie campagne, préparez et testez une implémentation compatible e-mail, confirmez les affirmations produit et reliez les liens d’abonnement au service approprié.
Comment créer un e-mail de lancement de produit dans OpenDesign
Définir un produit et une action principale
Commencez par un nom de produit, un coloris, une audience et l’action visée. Fournissez vos propres caractéristiques vérifiées au lieu de conserver les valeurs illustratives de l’Axis Pro. Le prompt suivant est un brief de recréation suggéré, et non une affirmation sur la session de génération d’origine.
Invite suggéréeCrée un concept d’e-mail de lancement d’un seul produit pour ma marque de chaussures. Utilise un canevas crème étroit de 680px, un bandeau de marque compact, une illustration produit chaude au format 4:3, un titre condensé surdimensionné avec l’accent du coloris, un seul bouton d’achat principal, quatre caractéristiques légendées et un pied de page d’abonnement sobre. N’utilise que les informations produit que je fournis. Réduis les marges intérieures et la taille du titre sur mobile. Considère les liens d’achat et d’abonnement comme des espaces réservés tant que je ne fournis pas de vraies destinations ; ne prétends ni compatibilité avec les clients de messagerie ni commerce connecté.
Affiner la présentation du produit et le titre
Gardez la silhouette lisible sur le fond chaud, puis vérifiez le titre avec le vrai nom du produit. Un nom plus long peut demander une autre coupe de ligne ou une échelle moins extrême. Gardez l’accent du coloris visible sans l’appliquer à tous les blocs de texte.
Vérifier les libellés, les liens et la mise en page étroite
Relisez les quatre caractéristiques en conservant unités et précisions. Inspectez l’affichage sur mobile, remplacez chaque destination fictive et vérifiez le pied de page d’abonnement. Si le design doit être envoyé comme e-mail, traitez l’implémentation et les tests pour les clients de messagerie comme une étape de production distincte.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception d’affiche éditoriale sur les workflows IA
Cette affiche éditoriale sur les workflows IA présente six affirmations, organisées en chapitres numérotés, avec des exemples concrets de prompts et des accents typographiques rouille sur un fond crème.
Créations graphiques
Conception d’un carrousel social sur les workflows IA
Sept cartes verticales utilisent des titres chinois surdimensionnés, des habitudes numérotées, des aplats de couleur changeants et une conclusion pour expliquer les workflows d’édition avec l’IA.
Créations graphiques
Conception de shader Aurora Field
Un champ de bruit bleu-vert animé automatiquement donne son atmosphère à un hero WebGL, tandis qu’un titre fixe et un petit indicateur local de fréquence d’images ancrent la scène.
Créations graphiques
Conception du shader Aurora Veil
Aurora Veil est une composition shader interactive qui transforme des lumières superposées, des étoiles et les mouvements du curseur en un hero WebGL atmosphérique.
Créations graphiques