Blog

Tendance dans la conception d’e-mails : sortir de la grille

Les grilles brisées et les éléments qui se chevauchent ont été populaires dans la conception et le développement Web ces dernières années. Grâce au positionnement absolu et aux pseudo-éléments, il est relativement facile de créer des mises en page abstraites uniques. Comme très peu de clients de messagerie prennent en charge ces styles CSS, les équipes de conception et de production de messagerie ont trouvé des solutions de contournement créatives pour exploiter le potentiel des compositions hors réseau.

Pourquoi sortir du réseau ?

Les systèmes à grille rigide ont bien sûr leur fonction: ils permettent de créer des conceptions propres, conviviales, faciles à naviguer et à digérer. Comme pour la plupart des tendances en matière de courrier électronique, l’introduction d’abstractions dans votre présentation permet à votre courrier électronique de se démarquer, en rehaussant votre messagerie dans les boîtes de réception occupées. La mise hors réseau rend votre création imprévisible, suscite la curiosité et exige une attention qui incite vos abonnés à s’intéresser à votre contenu.

Découvrez ces marques qui permettent à leurs e-mails de se libérer de la grille rigide pour créer des expériences de messagerie vraiment uniques.

HARRY

Tout en utilisant toujours une grille comme base, Harry’s rompt la disposition classique en deux colonnes avec des modules décalés, offrant un effet de style maçonné.

BEHANCE

Cet email d’inspiration hebdomadaire de Behance , compilé avec un contenu en rapport avec les intérêts de l’abonné, génère des blocs d’image non ordonnés lorsqu’il est visualisé sur le bureau. Un bon exemple qui prouve qu’un courrier électronique n’a pas besoin d’être symétrique pour être beau.

PIZZA EXPRESS

Cet e-mail promotionnel de Pizza Express exige de l’attention, avec de gros blocs de couleurs vives et une animation généreuse, mais c’est l’utilisation d’un design hors réseau qui le distingue vraiment des autres. Les images sortant de la rangée qui les contient et chevauchant le contenu ci-dessus donnent au courrier un aspect dynamique et incitent les abonnés à faire défiler les pages.

LASTMINUTE.COM

La conception abstraite peut vraiment aider à façonner un voyage et à guider l’œil. Cette création de lastminute.com , axée sur les événements musicaux à venir en Europe, débute avec une image de héros asymétrique qui vous incite à continuer à lire. Si l’appel à l’action chevauché par des écouteurs ne vous convainc pas de cliquer, vous suivez une ligne vers le bas pour divers événements.

Cet email s’empile magnifiquement pour les mobiles et constitue un excellent exemple de création d’intrigues hors réseau.

INVISION

Les experts en conception d’InVision ont prouvé que même de subtils éléments hors réseau pouvaient contribuer grandement à ajouter un élément spécial à vos conceptions de courrier électronique. Alors que le courrier électronique suit une présentation en grille (avec des éléments à une seule colonne mélangés à des sections à deux et trois colonnes), l’ajout d’éléments subtils qui se détachent de la grille rend ce courrier spécial. Ce qui semble être de petits détails a un impact important sur la conception de cet email.

Les marques de vente au détail repoussent les limites avec un design hors réseau

De nombreuses marques de commerce de détail créent des présentations attrayantes pour présenter leurs produits et leurs offres, s’éloignant des colonnes et des rangées et structurant leur contenu de manière créative, qui s’apparente davantage à des éléments promotionnels imprimés, à une brochure ou à un dépliant.

BODEN

La marque de mode britannique Boden sort du réseau avec une composition non conventionnelle d’images qui semblent sortir de leurs récipients. En superposant images et blocs de couleurs, le design de Boden crée de la profondeur et rend cet email amusant et vivant. Ce traitement d’image porte le regard sur le mobile.

Mais nous avons repéré un autre beau courriel de Boden qui tire parti des effets d’empilement. Dans cette promotion, le conteneur de texte recouvre l’image. Un autre excellent exemple de la façon dont une grille à deux colonnes peut être secouée avec une sensation de grille brisée.

LACOSTE

Un grand bravo à l’équipe de Lacoste pour la belle conception abstraite de cet email. Les prises de vue du modèle se détachent de chaque image du produit, ce qui rend cette conception hors réseau. Ajoutez une quantité généreuse d’espace blanc et vous obtenez un courrier électronique époustouflant qui ne manque pas de se démarquer.

Utilisation de la typographie hors réseau dans le courrier électronique

Cette astuce de typographie prend la conception de la grille cassée au niveau suivant. Le chevauchement partiel du texte sur les images est un autre traitement souvent utilisé dans la conception imprimée, telle que la présentation des magazines – et nous le voyons maintenant également dans la conception de courrier électronique.

Lors de l’application de la typographie hors réseau à vos conceptions, vous devez tenir compte de quelques points. La superposition de texte sur des images occupées peut être difficile à lire. Il est donc essentiel d’obtenir un contraste élevé entre texte et image. Les styles de positionnement CSS étant mal pris en charge dans les e-mails, les effets de typographie hors grille sont souvent obtenus à l’aide de texte basé sur des images. Il est donc crucial d’ajouter des balises ALT bien écrites et d’inclure du texte HTML en direct dans votre conception plutôt que de créer une email uniquement image .

J CREW

J.Crew présente les essentiels de la mode indispensables avec ce design passionnant, où le contraste de la couleur de fond et du texte est bien pensé. La disposition en zig-zag attire certainement le regard, mais c’est la copie qui chevauche partiellement les images qui rend cet email vraiment spécial.

MAUDE

Cette conception de Maude montre à quel point une petite quantité de typographie hors réseau peut avoir un impact important.

BEAU MARCHÉ

L’agence de création française Beau Market compense le texte par une couleur solide et audacieuse, créant un arrangement de héros passionnant. Plus loin dans l’e-mail, l’équipe présente des exemples de travaux créés en 2018 – non ordonnés et sans grille.