10 leçons de conception à partir de modèles de courrier électronique HTML qui se vendent réellement

Dans le passé, nous et plusieurs autres blogs avons présenté des informations techniques utiles sur la manière de coder et de structurer vos e-mails HTML du point de vue d'un développeur. Mais beaucoup moins de discussions ont été consacrées à la manière d’entreprendre réellement le composant de conception des newsletters par courrier électronique.

Aujourd'hui, nous allons examiner quelques-uns des modèles de courrier électronique les plus vendus de Themeforest et voir si nous pouvons déchiffrer ce que leurs concepteurs ont bien fait pour que vous puissiez imiter ces principes de base dans vos propres conceptions.

# 1 Gardez-le étroit

Les clients de messagerie varient considérablement non seulement selon la manière dont ils interprètent le code, mais simplement selon la manière dont ils affichent les messages. Considérez la différence entre l'affichage d'un message dans Apple Mail sur un moniteur 20 "et non Gmail sur un moniteur 13".

De toute évidence, la largeur de votre conception devient un problème majeur. Bien que vous puissiez submerger l'arrière-plan d'une couleur par le biais d'un tableau à 100% de la largeur, la plupart des normes recommandent d'utiliser une largeur de contenu comprise entre 500 et 620 pixels.

Dans le très populaire modèle AirMail ci-dessous, la conception s’étend sur environ 550 pixels de large mais la largeur réelle du contenu ne dépasse pas 480 pixels.

Le design étroit a fière allure et convient parfaitement à la majorité des appareils et des clients.

# 2 Les options sont tout

Une des clés majeures de la création de modèles vendus consiste à se rappeler qu'une approche unique ne fonctionnera pas. Les clients qui achètent un modèle de conception ne veulent pas seulement une conception solide, ils veulent de la valeur. Ils voient la valeur dans les options que vous rendez disponibles.

Si votre modèle comporte une disposition et un ou deux jeux de couleurs, vous ne fournissez pas vraiment beaucoup de variété. Cela verrouille l’acheteur sur un nombre assez limité d’options, ce qui ne fait pas de l’achat une sage décision à long terme.

Toutefois, si votre modèle leur permet de choisir parmi différentes dispositions et options de couleur, les clients potentiels apprécieront l’opportunité de choisir parmi autant de variables de bulletin d’e-mail différentes sur une base hebdomadaire, ce qui leur permet d’activer et de voir ce qui fonctionne le mieux pour leur clientèle unique.

Comme exemple de variété forte, considérons le modèle BlauMail présenté ci-dessous. Tout d'abord, vous choisissez parmi un certain nombre d'options de couleurs et de modèles différentes (coins arrondis ou carrés).

Ensuite, vous choisissez l’une des trois dispositions uniques.

Cela vous amène au modèle avec les options que vous avez sélectionnées. Pour prendre en compte toutes les variables, BlauMail contient 60 fichiers HTML!

# 3 Créer des sections clairement définies

Les entreprises utilisent les e-mails HTML comme point de contact permanent avec leurs clients et, qu’il s’agisse ou non de la meilleure chose à faire du point de vue stratégique, elles aiment y mettre un peu de contenu.

Les entreprises souhaitent informer leurs clients des ventes, des promotions et des mises à jour dans divers domaines et doivent pouvoir le faire dans un espace non encombré. Ainsi, plutôt que de créer un courrier électronique avec un seul grand domaine de contenu, envisagez de le scinder en plusieurs sections différentes.

Le modèle de courrier électronique frais ci-dessous prend cette idée à l'extrême et sépare physiquement les différentes sections sur différents arrière-plans, créant ainsi un aspect modulaire.

Ce modèle contient 750 achats à ce jour, ce qui le place en haut de la liste sur ThemeForest. Donc, si vous voulez tirer des leçons de n'importe quel modèle, ce devrait probablement être celui-ci!

# 4 Simple Sells

Alors que certains concepteurs de modèles utilisent des thèmes créatifs, des couleurs vives et des graphismes époustouflants, d’autres peuvent vendre deux fois plus de modèles en utilisant des présentations solides et des graphiques simples mais attrayants.

Le modèle de courrier électronique polyvalent ci-dessous ne remporterait certainement pas de prix de design exceptionnels et pourtant, il est extrêmement populaire car il correspond exactement à ce que souhaitent de nombreuses entreprises.

Le concepteur accroche tout de suite les clients potentiels en mettant? Polyvalent? dans le titre et fournit de nombreux extras comme recommandé dans le conseil n ° 2 ci-dessus. Pendant ce temps, la conception est très minime, ce qui rend le modèle utilisable par d'innombrables professionnels.

# 5 Shoot Pour une niche

Comme nous l'avons vu ci-dessus, créer une mise en page de base et une conception générique va très loin en raison de l'énorme audience à laquelle il fait appel. Cependant, l'utilisation de cette technique peut vous empêcher de vous démarquer de la concurrence.

Si une stratégie polyvalente ne vous convient pas, essayez de cibler un créneau important de consommateurs à la recherche de quelque chose de spécifique. À titre d'exemple, le thème TechOffers ci-dessous fait appel à plusieurs créneaux différents à la fois.

Bien sûr, il y a le composant technique, mais le modèle sera également attrayant pour presque tous les clients à la recherche d'un thème de commerce électronique. Enfin, le thème comporte une composante vacances avec le ruban rouge et les messages du nouvel an.

Ce concepteur se démarque soudainement auprès de trois clients uniques à la recherche d'un type de modèle spécifique. Sur le plan stratégique, il s’agit d’un excellent choix qui porte ses fruits.

# 6 Facilitez la marque

N'oubliez pas que l'achat d'un modèle est souvent un compromis pour de nombreuses entreprises car le produit n'est pas entièrement conçu pour présenter leur marque.

Vous pouvez aider à surmonter cet obstacle à l’achat en offrant aux acheteurs potentiels de nombreux emplacements dans le design pour y insérer le nom de leur société, leur logo, leur slogan, une photo / profil personnel, etc. Cette technique simple aidera les clients à s’assurer qu’ils peuvent vraiment gabarit leur propre ne pas avoir à abandonner la personnalisation pour des prix abordables.

Le modèle de courrier électronique Rich Typography ci-dessous a inséré une grande zone de logo dans le pied de page, ainsi que diverses informations de contact et un autre logo dans l'en-tête.

# 7 Curl The Corners

Bien que je déteste donner des conseils qui suivent les clichés du design, cette tendance populaire semble être efficace auprès des clients.Détourer les angles de la zone de contenu permet de créer une illusion de papier, ce qui, bien sûr, cadre bien avec le concept de bulletin d’information.

Notez dans le modèle d'élégance ci-dessous que cette technique est utilisée non seulement sur les bords de la zone de contenu, mais également sur les images de la lettre d'information.

Ce que vous faites ici consiste essentiellement à donner une impression de profondeur à une image plate et à la rendre plus tridimensionnelle. Quelles que soient les astuces uniques que vous pouvez utiliser à cette fin, elles seront encore meilleures.

# 8 Essayez un fond simple et répétitif

Tous les exemples que nous avons examinés jusqu’à présent ont tous un trait de conception commun: des fonds solides. Les arrière-plans de couleur simples et uniformes sont définitivement une tendance en matière de conception avec les courriels HTML. Bien qu'il soit judicieux de réduire le temps de chargement des temps de chargement, aucun de ces modèles ne semble hésiter à utiliser des images dans un autre contexte.

Comme le montrent les modèles Business moderne ci-dessous et TechOffers ci-dessus, un simple arrière-plan peut réellement aider à donner vie à l'e-mail et à lui donner une apparence plus aboutie.

# 9 N'oubliez pas l'intégration des médias sociaux

De nombreux propriétaires d'entreprise ne peuvent pas commencer à décrire Twitter, mais ils y sont. Les spécialistes du marketing trop zélés ont convaincu les entreprises que les médias sociaux sont une mine d’or qui apportera une immense renommée à Internet.

Sur le plan pratique, cela signifie que pratiquement tout le monde à qui vous vendez un modèle aura un intérêt pour les médias sociaux et que vous ne devez donc pas hésiter à intégrer divers sites populaires à votre conception.

Le modèle de communication d'entreprise ci-dessous présente des icônes de médias sociaux plutôt volumineuses dans la section À propos au bas de la page.

# 10 Utiliser des captures d'écran Web dans votre conception

Une dernière tendance que j'ai remarquée dans plusieurs des modèles les plus vendus est la tendance à utiliser les captures d'écran de sites Web comme élément principal de la conception. Étant donné que de nombreuses entreprises utilisent principalement les newsletters par courrier électronique pour générer du trafic sur leur site, il est donc logique qu'elles veuillent inclure des clichés de leur site dans la messagerie.

En incorporant des exemples de clichés Web dans la conception, vous aidez les acheteurs potentiels à voir que votre modèle répond parfaitement à leurs objectifs. En toute honnêteté, ils pourraient utiliser n'importe quel modèle avec une zone d'image pour atteindre le même objectif, mais il est utile de voir l'idée réalisée avant de l'essayer.

Découvrez le modèle Innovative - Visite guidée du produit et son intégration créative dans un navigateur Chrome Safari de base à un exemple de page Web.

Pensées de clôture

Comme toujours, je vous encourage à utiliser ces exemples d'inspiration non pas comme une arnaque, mais simplement comme des exemples de conception réussie que vous pouvez apprendre et utiliser pour susciter vos propres idées de conception originales.

Laissez un commentaire ci-dessous et dites-nous ce que vous pensez des modèles ci-dessus. Veillez également à partager les astuces et les conseils que vous avez trouvés particulièrement utiles lors de la création de modèles de courrier électronique pour les clients.