Share
Ce que vous allez créerDans ce tutoriel, nous allons apprendre à créer un modèle de bulletin électronique simple et audacieux à l'aide de Sketch..
Si vous vous adressez à l'envoi de newsletters par courrier électronique, celles-ci doivent être considérées comme un élément clé de vos stratégies marketing. Ils nous donnent un contact direct avec des clients potentiels mais nous devons être attentifs à la manière dont nous les concevons pour communiquer correctement, attirer l’attention et (plus important encore) atteindre nos objectifs..
Voici le briefing derrière cet exercice de conception: imaginons que nous sommes une entreprise proposant des ressources d’apprentissage en ligne. Nous voulons entrer en contact avec nos clients potentiels, en révélant les avantages de l’utilisation de notre plateforme. Dans cette situation, nous pouvons commencer par créer un bulletin électronique propre mais efficace en utilisant Sketch pour répondre à nos besoins..
Nous allons commencer totalement à partir de zéro, en utilisant les outils les plus courants de Sketh pour créer notre modèle. Vous serez étonné de la facilité avec laquelle ce sera.!
Pour réussir ce didacticiel, vous devez télécharger les pièces jointes disponibles. Dans le fichier zip, vous trouverez du texte et les images que nous allons utiliser dans les étapes suivantes..
Je vais utiliser Helvetica Neue comme police par défaut, mais si vous ne l’avez pas disponible, essayez avec Helvetica ou Arial.
Remarque: rappelez-vous d'être un designer responsable! Je veux dire par là: n'oubliez pas de renommer vos calques en utilisant des noms descriptifs, de les regrouper et d'organiser le contenu. Vos collègues vous en remercieront, croyez-moi.
Es-tu prêt? Commençons!
Commençons par créer un nouveau plan de travail. Aller à Insérer> Artboard (A) depuis le menu principal ou la barre d’outils. Maintenant, cliquez et faites glisser à l'intérieur de la toile de Sketch pour créer un 620 x 3000px artboard. Si vous trouvez cela difficile, n'oubliez pas que vous pouvez modifier ces valeurs via le Inspecteur à droite de l'écran. Vous pouvez également changer le nom de l’artboard à partir du Liste des couches sur le côté gauche de l'écran.
Pointe: Une approche courante lors de la conception de modèles de courrier électronique consiste à commencer avec une largeur de document d'environ 550 à 650 pixels. En savoir plus sur le marketing par courriel dans cet article de Nicole Merlin.
Créons maintenant quelques guides que nous utiliserons comme référence pour placer correctement nos éléments, ce qui donnera un design sain et équilibré. Où devrions-nous placer les guides? Pensons un peu:
Un modèle de courrier électronique peut être conçu de plusieurs manières. L'un des plus courants consiste simplement à créer une mise en page à 1 colonne. Cette disposition nous permet de guider l'utilisateur de manière plus simple, en utilisant un flux vertical de blocs de contenu, les uns après les autres. En outre, la conception avec une structure à une colonne à l’esprit nous permet de l’adapter facilement à différents appareils..
Pour les besoins de cet exercice, cependant, nous sommes ici pour pratiquer un peu plus, nous allons donc créer une mise en page à 3 colonnes. Pardon!
Activez les règles et commencez à créer des guides. Aller à Affichage> Afficher les règles (^ R). Maintenant, cliquez sur la règle horizontale à 30px, 200px, 225px, 395px, 420px et enfin à 590px. Vous pouvez déplacer les règles en les faisant glisser. Aussi, vous pouvez déplacer vos propres guides de la même manière. Pour supprimer des repères, faites-les glisser au-delà des règles..
L'en-tête de notre email est très important. C'est le premier contact que nous avons avec l'utilisateur et nous devons donc communiquer notre proposition principale. C’est aussi une bonne décision d’afficher le nom de la société et un bon slogan suivi d’un bouton CTA qui incite à s’inscrire ou à obtenir plus d’informations sur nous..
Premièrement, nous devrions ajouter un pré-en-tête, un simple lien texte qui permet à l'utilisateur d'accéder à la version Web de notre lettre d'information au cas où son client de messagerie ne lui permettrait pas de la voir correctement.
Sélectionnez le Outil texte (T) et cliquez n'importe où sur la toile pour insérer un calque de texte. Remarquez comment Inspecteur a changé pour vous montrer toutes les propriétés du calque de texte. Commencez à taper «Des problèmes pour visualiser cet email? Voir en ligne ”.
Changer sa couleur en # 8FA6B3 Et mettre Taille à 11px. Maintenant, sélectionnez uniquement la partie «Voir en ligne» et changez sa couleur en # FF736D. Gardez-le sélectionné. Clique le Les options icône à côté de Couleur et cliquez sur le second Décoration option pour souligner le texte.
Déplacez l'objet du haut de la planche graphique en laissant un 30px marge.
Créer un 620x500px rectangle en utilisant le Rectangle (R) outil et placez-le juste sous le lien de texte, en laissant 30px entre eux. Sélectionnez le rectangle et changez sa couleur en # F5F7F8 en utilisant le Inspecteur panneau. Décocher la les frontières option pour l'enlever.
Ouvrez le fichier svg «icons» joint à ce didacticiel. Sélectionnez toutes les icônes, copiez-les et collez-les dans le document que nous concevons notre modèle. Nous allons les utiliser pour décorer le fond de notre en-tête.
J'ai mis le groupe d'icônes à X = -50 et Y = 0 (chercher Position sur le panneau de l'inspecteur), mais n'hésitez pas à vous adapter vous-même.
Pointe: Vous verrez que certaines parties de nos icônes sont en dehors de la planche graphique et Sketch les masque automatiquement. Rien de mal. Le programme comprend que vous utilisez un tableau de travail pour limiter votre zone de conception afin de masquer les parties des éléments positionnées entre la zone de tableau de travail et le reste de la zone de travail. Essayez de déplacer le groupe entier en dehors de la planche graphique pour l'afficher complètement. Tu vois? N'oubliez pas de le remettre dans sa position d'origine!
Dans la liste des couches, sélectionnez le dossier «Icônes» et le rectangle que vous avez précédemment créés. Regroupez-les en utilisant l’une des options disponibles dans Sketch. Par exemple, utilisez le Groupe icône dans le Barre d'outils ou utilisez le (⌘-G) raccourci clavier pour le faire. Déplacez le groupe vers le bas sur la Liste des couches, renommez-le en "Fond" et utilisez la petite flèche à gauche pour afficher son contenu.
Sélectionnez le rectangle et allez à Calque> Utiliser comme masque.Attends la magie. Sketch utilisera le rectangle pour masquer chaque calque au-dessus de celui-ci sur le Liste des couches. Si nous avons précédemment regroupé le contenu que nous souhaitons masquer et le masque, nous n’affecterons pas les éléments extérieurs au groupe. Astuce très utile!
Maintenant, vous devriez avoir les icônes déjà masquées comme l'image suivante:
Ouvrez le fichier svg «logo» et copiez le logotype dans notre document. Je sais que c'est trop gros, alors va au Panneau de l'inspecteur changer ses dimensions pour 90 x 31px. Déplacez-le vers X = 265, Y = 100.
Créez un nouveau calque de texte et définissez sa largeur sur 560px. Déplacez-le vers X = 30 et Y = 220. Maintenant, éditez le texte et changez-le en "Votre lieu pour découvrir les compétences du monde réel". Définissez ses propriétés sur Poids = gras, Couleur = # 424242, Taille = 48, Ligne = 45 et Alignement = centre. Sélectionnez uniquement le mot "réel" et remplacez-le par italique.
Nous allons maintenant concevoir notre bouton d'action principale. Dessine un 220x45px rectangle. Allez dans le panneau Inspecteur et définissez Rayon à 30. Changement Remplir à # D92B2B. Déplacez-le sous le texte du slogan, en laissant autour 50px entre les deux objets.
Notre bouton n'a aucun sens si nous le laissons vide! Nous avons besoin d'un appel à l'action texte, quelques mots qui se concentrent sur la proposition principale et attirent l’attention de l’utilisateur. J'aimerais parler davantage de ce type de marketing, mais pour accélérer un peu, nous allons simplement créer un calque de texte, puis taper "Rejoignez-nous à partir de 10 $ / mois".
Changer les propriétés en Poids = gras, Couleur = #FFFFFF et Taille = 15. Déplacez-le vers X = 225, Y = 375, juste à l'intérieur de notre rectangle arrondi.
Nous allons utiliser ce bouton à nouveau plus tard, c'est donc une bonne idée de le sauvegarder en tant que symbole. Regroupez les couches de texte et de rectangle et cliquez sur le bouton Créer un symbole option de la barre d’outils principale. Notez comment la couleur du dossier sur le Liste des couches a changé du bleu au violet.
Je pense que nous avons besoin d’un peu plus de contraste entre le contenu de premier plan et l’image d’arrière-plan, faisons donc un changement mineur. Aller au Liste des couches, Développez le dossier Arrière-plan et dupliquez le rectangle que vous utilisez pour masquer les icônes d'arrière-plan. Déplacez-le en haut du groupe, allez au Inspecteur panneau et changement Mélange à Alléger et Opacité à 50%. À la fin, vous devriez obtenir quelque chose comme ceci:
Notre entête est terminée!
Maintenant que nous avons l'attention de l'utilisateur, nous devons parler un peu de nous et de nos services. Qui nous sommes? Qu'est-ce qu'on fait? Nous devons répondre à ces questions de manière directe et concise, en essayant de montrer quelques avantages supplémentaires liés à l'utilisation de notre plateforme..
Créez deux nouveaux calques de texte. Définir leur largeur à 480px. Vous pouvez taper ce que vous voulez, mais j'ai utilisé le texte que vous trouverez à l'intérieur du fichier texte joint.
Terminé? Maintenant, utilisez les positions et propriétés suivantes:
Dessine un 100px ligne large (Insérer> Forme> Ligne) Et mettre Épaisseur à 2px et couleur de la bordure à #E24A4A. Placez-le entre les deux calques de texte, en laissant une distance de 25px entre chaque élément. Rappelez-vous: si vous appuyez sur le Alt en déplaçant le curseur, vous pouvez voir les distances en pixels entre les éléments sélectionnés.
Nous allons reproduire la structure précédente plusieurs fois au cours de ce didacticiel. Mais pour l'instant, sélectionnez la ligne et les calques de texte et regroupez-les. N'oubliez pas d'être organisé et donnez-lui un nom. J'ai utilisé “premier bloc”.
Sélectionnez le calque de texte «Rechercher en ligne…», allez à la Panneau de l'inspecteur et créez un nouveau style de texte en cliquant sur «Pas de styles de texte», puis Créer un nouveau style de texte. Faites la même chose avec le deuxième calque de texte. Désormais, chaque couche liée à ces styles sera mise à jour simultanément lorsque vous modifierez leurs propriétés..
Remarque: tenez compte du fait que Sketch ne peut pas enregistrer les styles de texte avec plusieurs poids de police appliqués dans le même calque. Cela dit, je ne vais pas utiliser les styles pour ce tutoriel. Si vous voulez en savoir un peu plus sur les styles, consultez notre guide de Sketch de A à Z.
Ouvrez le fichier svg «highlight-icons». Copiez les trois icônes que vous trouverez dans le document et collez-les dans votre conception. Utilisez les guides que vous avez déjà pour les aligner comme si vous utilisiez une disposition à 3 colonnes, juste sous le bloc précédent. Ne les mettez pas trop près de ce bloc, laissez des espaces 40px. Si vous avez besoin d’aide, consultez l’image suivante:
Créer trois 170px couches de texte larges avec Helvetica Neue Bold, Taille = 15, Ligne = 18, Couleur = # 424242 et Alignement = centre. Mettez ces éléments autour 30px sous les icônes à l'aide des guides et commencez à taper-ou copiez le texte du fichier joint!
Un autre bloc fini!
Une caractéristique commune des newsletters consiste à envoyer les derniers articles ou contenus qui intéresseraient les lecteurs. Alors, après notre CTA primaire et la partie où nous parlons un peu de nous-mêmes, créons un bloc où nous montrerons les leçons les plus récentes disponibles sur notre plateforme d'apprentissage.
Commencez par dupliquer le «premier bloc» que vous avez déjà fait. Mettez-le sous les blocs précédents, 40px marge, et utiliser le contenu à l'intérieur du .SMS fichier pour modifier les couches de texte. Cela devrait être quelque chose comme ça:
Accédez au dossier «Leçons» dans les fichiers source et importez toutes les images dans votre document via Insérer> Image. Vous avez maintenant sept images de 620 pixels de large. Nous allons utiliser l'un d'eux en taille réelle et redimensionner le reste pour l'adapter à notre mise en page à 3 colonnes.
Ajoutons du texte pour notre grande image. Insérez trois couches de texte, utilisez le fichier texte une fois de plus et définissez les propriétés et les positions comme suit:
Nous avons besoin de quelques couches de texte supplémentaires pour les autres leçons que nous montrons. Faisons le encore; insérez trois calques de texte, tapez ce que vous voulez ou copiez des textes à partir du fichier fourni. Définissez leurs propriétés et leurs positions en utilisant l’image suivante comme référence et répétez le processus cinq fois pour terminer le reste des leçons que vous affichez..
Un autre bloc terminé. Prenez un moment pour organiser vos calques, puis passez à la partie suivante.!
Je sais que notre modèle de courrier électronique est… long. Mais ce n’est pas un problème si nous savons comment nous en occuper! Les utilisateurs devront faire défiler votre contenu jusqu'à la fin. Il est donc judicieux de proposer un accès facile à un autre appel à l'action sans avoir à faire défiler l'écran jusqu'en haut de l'e-mail..
Vous souvenez-vous du «premier bloc» que vous avez déjà dupliqué? Faites-le à nouveau, déplacez-le sous le «bloc de leçons» en laissant une marge d'environ 40px et changez son contenu comme suit:
Insérer un 620x243px rectangle et le remplir avec # F5F7F8. Ajoutez maintenant un calque de texte et modifiez son contenu et ses propriétés en utilisant l'image suivante comme référence:
Aller à Insérer> Symboles et sélectionnez le bouton CTA que vous avez créé auparavant. Mettez-le sous le paragraphe précédent.
Nous avons presque fini!
Ok, nous avons notre bloc principal et un appel à l'action. Ensuite, nous avons ajouté des messages secondaires et un peu plus de contenu. Plus tard, nous avons reparlé de notre proposition principale, en répétant l'appel à l'action. Il est maintenant temps de concevoir le pied de page et de terminer notre modèle!
Créer un 620x130px rectangle. Le remplir avec # 555E68 et le mettre sous le bloc CTA. Ensuite, créez un autre 620x45px rectangle et le remplir avec # 383E44. Vous devriez vous retrouver avec quelque chose comme ça:
Importez le fichier «logo blanc» dans votre document et déplacez-le vers X = 265 et Y = 2787.
Ajoutons le texte final. Insérez trois calques de texte et définissez leurs propriétés et leurs positions comme suit:
Ce n'est pas nécessaire, mais vous pouvez régler la hauteur de la planche graphique en fonction de l'espace dont vous avez réellement besoin. Vous pouvez le faire en le sélectionnant sur le Liste des couches et en changeant sa hauteur sur le Inspecteur panneau. Je l'ai changé pour Hauteur = 2937px.
Voici à quoi devrait ressembler le produit final.
J'espère que vous avez apprécié ce tutoriel. Faites-moi savoir si vous êtes bloqué ou si vous avez besoin de demander quelque chose. Avez-vous une idée pour mon prochain tutoriel? Laissez un commentaire! J'ai hâte de voir comment vous allez!
Accentsconagua