Une newsletter posée sur un plan de travail blanc ne dit pas grand-chose de ce qu'elle donnera dans une boîte de réception. Un mockup e-mail la met là où elle sera lue : ouverte dans une app de messagerie, sous le nom de l'expéditeur et l'objet. Voici comment en faire un avec le layout « E-mail », sur téléphone et sur ordinateur portable.
Étape 1 : exportez la newsletter en une seule image en hauteur
Depuis Figma, votre outil d'e-mailing ou une capture du navigateur, exportez toute la newsletter en un seul PNG, d'environ 600 à 1200 pixels de large. Le haut de l'e-mail est ce qui s'affiche en premier : assurez-vous que l'en-tête et le premier message y figurent.
Étape 2 : ouvrez le layout e-mail
Ouvrez la page du mockup e-mail (mochimockup.com/fr/layouts/email-mockup) et choisissez la version mobile ou ordinateur. Ajoutez l'image de la newsletter : elle se place sous l'objet, alignée en haut et coupée en bas de l'écran, comme un vrai e-mail ouvert.
Étape 3 : renseignez l'expéditeur, l'objet et l'heure
Tapez le nom et l'adresse de l'expéditeur, ajoutez l'avatar de la marque et écrivez le vrai objet : c'est la seule chose que lit chaque abonné, il mérite donc aussi sa place dans la présentation. L'heure de réception est un texte libre.
Étape 4 : ajoutez du texte au-dessus de l'image, ou pas
Pour un e-mail en texte brut ou un mot personnel au-dessus d'un visuel, écrivez-le dans le champ « Texte de l'e-mail » : gras, italique, souligné et couleur sont disponibles. Retirez la photo pour un e-mail texte uniquement.
Étape 5 : montrez-le sur un téléphone et un ordinateur portable
Plus de la moitié des e-mails sont ouverts sur un téléphone : montrez cette version en premier. La version ordinateur, dans Gmail sur le web avec les dossiers à gauche, trouve sa place dans un mockup MacBook pour une slide ou une étude de cas.
Où utiliser un mockup e-mail
- Les présentations client d'un modèle de newsletter ou d'une campagne.
- Les études de cas et les pages de portfolio de design d'e-mails.
- Les landing pages qui vendent une newsletter : montrez ce que reçoivent les abonnés.
- Les docs d'onboarding qui montrent à quoi ressemble l'e-mail de bienvenue.