Share
Nous avons récemment repensé tous les courriels que nous avons envoyés à Envato Tuts +; les lettres d’information, les divers résumés, les e-mails de campagne marketing et les e-mails d’administrateur. Dans cette courte série d'études de cas, nous expliquerons comment nous l'avons fait!
Jusqu'à la refonte, nous avions une collection de courriels assez disjointe, aucune équipe centrale ne s'en occupant. Il est devenu évident que nous pouvions simplifier les choses et rendre les choses plus économiques. Nous avons donc décidé de transférer nos efforts dans un compte central dans Campaign Monitor. Un ensemble central de thèmes serait utilisé à tous les niveaux et nous nous assurerions qu'ils ont été conçus et construits de manière à représenter ce que nous représentons à Envato Tuts+.
La première étape de l'opération consistait à rassembler tous les courriels que nous envoyions actuellement aux masses. Cela impliquait de parcourir nos newsletters MailChimp existantes et de démanteler ce que nous avions dans Exact Target..
Une fois que nous savions ce que nous recherchions, nous pouvions identifier les éléments communs et classer tout ce qui était prêt pour la phase de conception..
Nous avons tout réduit à:
Quelles étaient nos priorités pour cette refonte? Sous forme de balle, nous avions besoin de:
Et nous voulait:
Il est temps d'obtenir quelques visuels! J'ai utilisé Sketch pour ce processus de conception, en raison de son aptitude à la conception d'interface utilisateur. La première étape consistait à assembler une planche d’art et à définir des dimensions de grille..
J'ai utilisé les options de mise en page de Sketch (Affichage> Toile> Paramètres de mise en page… ) d’établir une grille de 640 pixels, avec 8 colonnes. ma artboard était beaucoup plus large que cela, pour me donner une marge de manœuvre. En cliquant sur Centre le décalage est calculé automatiquement, dans ce cas à 280px. La grille était donc positionnée à 280 pixels du bord de la planche..
Une largeur de colonne de 62px bien liée avec des gouttières de 20px, me donnant un bon point de départ horizontal.
Je voulais aussi des lignes, alors vérifié la Rangées boîte. Mon type fonctionnerait à partir d'une base de 16 pixels, je l'ai donc utilisé comme grille verticale rudimentaire.
Artboard nommé «Digest»L’équipe marketing du siège a demandé que nous prenions des dispositions pour créer une sorte de section héros; quelque chose qui leur permettrait d'utiliser des graphiques saisissants si jamais ils avaient besoin de.
Je ne voulais pas que cela soit la norme pour tous les types de courrier électronique, mais cela me donnait un bon point de départ. En utilisant des blocs, je me suis mis à faire une mise en page de base.
Avec un héros, une zone de contenu principale et une toile blanc cassé, la scène était prête. J'ai décidé de jouer avec des calques et de faire en sorte que la zone de contenu chevauche légèrement le héros. Je savais que cela pourrait causer quelques maux de tête à Nicole (qui construirait tout ça), mais je savais qu'elle le découvrirait - elle est un sorcier après tout.
Les variantes de cet arrangement pourraient prendre la forme de:
L'un des avantages d'une mise en page simple est que la réactivité est par nature plus simple à obtenir. Dans une fenêtre d'affichage plus étroite, nous réduisions la double colonne si nécessaire et nous plaquions la zone de contenu contre le bord de la fenêtre, ce qui nous donnait une série de sections sans chevauchement..
Dans Sketch, où deux arrangements de colonnes différents sont nécessaires, nous avons besoin d’une deuxième page. Toute disposition de grille que nous définissons est appliquée à tous les planches d’art sur la même page, et nous avons besoin d’une grille beaucoup plus simple pour notre vue mobile réduite..
Ce dont nous avons besoin ici est si simple, en fait, que nous n’avons vraiment besoin que d’une seule colonne centrale, avec une gouttière (nous nous en tiendrons à 20px de chaque côté). Sketch ne peut cependant pas créer une grille avec une seule colonne. Nous devrons donc en utiliser deux..
Nous utilisons Roboto ces jours-ci dans une grande partie d'Envato, cette décision a donc été prise pour moi. Les couleurs sont en grande partie dictées par les styles d'Envato, aussi j'avais une palette à choisir. Je devais décider lequel serait utilisé pour le corps, les titres, les liens, tout texte moins accentué et les "appels à l'action".
Mes priorités étaient les suivantes:
Liens et CTA dans le même bleuSketch facilite les choses, les styles de texte ne sont qu’à un clic. Créez un style de texte comme vous le souhaitez, enregistrez-le en tant que style de texte, puis reportez-vous-y si jamais vous avez besoin de ce style..
Envato Tuts + est une jolie plateforme visuelle. nous utilisons des vignettes partout. Certains membres de l'équipe ont suggéré que le même agencement de cartes que nous utilisons sur notre page d'accueil serait le meilleur moyen de présenter des tutoriels dans un courrier électronique condensé. Les lecteurs établiraient le lien, comprendraient leur problème et, de toute façon, ce serait un moyen clair de présenter les informations..
Les cours sont légèrement différents. Je voulais donner plus d'importance à ces choses. Chaque section de sujet affichera d’abord un cours disponible, en largeur, avec un peu plus de détails que les tutoriels, plus un graphique de bouton de lecture superposé à la vignette. Cela soulignerait la distinction entre cours et tutoriels tout en incitant les lecteurs à cliquer (les boutons de lecture sont bons pour cela).
Avoir le bouton de lecture placé dynamiquement au-dessus serait fastidieux, nous nous sommes donc résignés à placer manuellement le graphique du bouton sur les vignettes elles-mêmes (avec Photoshop, par exemple). Un peu de travail supplémentaire (désolé Cameron) mais ça en vaut la peine je pense.
Nous voulions également un moyen de présenter des blocs d'annonces; pas nécessairement des annonces de tiers, mais quelque chose à nous donner l'occasion de crier sur des choses nouvelles et passionnantes. J'ai ajouté une bannière optionnelle en haut de la mise en page, très similaire à ce que vous verrez de temps en temps sur le site Web..
J'ai ensuite décidé de scinder tout le contenu en blocs, ce qui nous permettait de les organiser dans l'ordre de notre choix et de bien distinguer les sections..
Voici à quoi ressemble un bloc d'annonces, avec deux sections de résumé de chaque côté.
Note: ceci est une vraie annonce, en savoir plus iciLe pied de page est un élément universel dans tous ces courriels. Je ne voulais pas que des tonnes d'informations y soient enfouies, mais ce que nous fait Je voulais clairement y placer mon choix (je ne comprends pas pourquoi certaines entreprises rendent leurs bas de page à peine visibles, avec des liens de «désabonnement» masqués).
Donc, avec quelques liens sociaux, une zone de texte expliquant pourquoi quelqu'un pouvait recevoir le courrier électronique, des liens de désabonnement et l'adresse du siège social d'Envato, nous étions tous prêts..
Nous avons maintenant la base pour tous les éléments dont nous avons besoin, nous donnant les éléments de base pour chacun de nos types de courrier électronique..
Il est peu probable que les bulletins d’information aient besoin d’un héros graphique de quelque sorte que ce soit, j’ai donc utilisé une rubrique simple mais audacieuse pour commencer les débats ici. Les styles typographiques que nous avions déjà définis satisferaient la plupart des contenus possibles.
Une distinction a été faite entre les lettres d’information et les résumés en donnant à la lettre d’information un héros transparent, ce qui la rend encore plus….
Le plus simple de tous nos e-mails (à part les versions en texte brut) sont les messages de l'administrateur. Dans leur cas, aucun style supplémentaire n'est nécessaire; faites simplement passer le message, rapidement et simplement. Un héros transparent et un manque de gros titre définissent assez bien le ton de l'administrateur ici. Tout le reste reste le même, y compris éventuellement un bouton CTA. Voici les vues de bureau et mobile:
Une fois les concepts et les conceptions définis, il était temps d'envoyer les résultats à Nicole. Elle prendrait ces idées pour en faire des fichiers HTML statiques. Je devais m'assurer qu'elle comprenait les décisions qui avaient été prises et disposait de tous les atouts nécessaires pour construire les emails.
InVision permet d’annoter très rapidement des documents graphiques et vous pouvez télécharger directement des fichiers Sketch. Une collection de visuels avec des commentaires et des pointeurs était un bon moyen de communiquer toutes les idées.
En ce qui concerne la livraison des actifs, Sketch facilite l’exportation de tous les éléments nécessaires. Je pouvais non seulement préparer tous les éléments (tels que les logos, les boutons sociaux, etc.), mais aussi les livrer de différentes tailles, nous couvrant ainsi pour des écrans de différentes densités de pixels. En savoir plus sur la façon dont Sketch peut exporter vos ressources:
Avec tous les fichiers, plus quelques instructions supplémentaires dans Dropbox, Nicole avait tout ce dont elle avait besoin pour jouer de sa magie..
Dans la prochaine partie de cette étude de cas, je vous confierai la construction de Nicole. Elle expliquera comment elle a construit la base réactive pour ces courriels et surmonté les problèmes habituels soulevés par le développement du courrier électronique..
N'hésitez pas à récupérer le fichier de démo Sketch du référentiel sur GitHub et à voir vous-même les emails finis: abonnez-vous ci-dessous!
Accentsconagua