Share
Ce que vous allez créerDans ce tutoriel, je vais vous guider dans le processus de conception d'une page de destination élégante pour un service fictif de «journal de gratitude». Nous commencerons totalement à partir de zéro, en un rien de temps, nous rédigerons la mise en page avec Adobe Photoshop. Nous allons utiliser certaines techniques de base et intermédiaires pour créer cette conception avec conversion à l’esprit. Commençons!
Afin de suivre, vous aurez besoin de certains actifs (disponibles gratuitement):
Commencez par créer un nouveau document Photoshop (Fichier> Nouveau… ) en utilisant les paramètres indiqués ci-dessous. Vous êtes libre d'utiliser une toile de toutes les dimensions que vous préférez. Le Web n'est pas une largeur fixe, après tout..
Définissons des guides afin que notre mise en page dispose de suffisamment d’espace et ait un aspect équilibré. Je n'utilise pas toujours une grille prédéfinie, mais l'établissement de certaines consignes garantira la propreté et aidera à définir la largeur de notre site Web. Aller à Voir> Nouveau guide… et définir des lignes directrices. Je choisis généralement 1000 pixels comme largeur de site Web et j'ajoute quelques indications à partir des coins afin qu'il ait de l'espace pour respirer.
Remarque: Instructions utilisées pour ce tutoriel: vertical à 200px, 500px, 700px, 900px et 1200px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
En nous conformant à l'étiquette de Photoshop, nous organiserons les choses et nous pourrons ainsi naviguer et éditer facilement. Créons trois groupes de couches nommés En-tête, Contenu et Pied de page. Pour créer des groupes, allez à Couche> Nouveau> Groupe… et donnez à chacun un titre comme mentionné. Pour créer rapidement un groupe, cliquez simplement sur l'icône du dossier..
L'en-tête ou la zone «au-dessus du pli» (où que ce soit ces jours-ci) joue un rôle très important pour interagir avec les utilisateurs et garantir que les visiteurs restent sur le site Web. Pour cette mise en page, je vais utiliser une photo de deux personnes assises sur un banc; l'un d'entre eux tenant les mains en l'air représentant des émotions positives et du bonheur.
Créons d'abord l'arrière-plan du blog. À l’intérieur du groupe «En-tête», dessinez un noir # 000000 forme de rectangle coloré en utilisant le Outil Rectangle (U). Dans mon cas, j'ai dessiné un rectangle de 1400x728px et je l'ai placé en haut du document..
Téléchargez maintenant la photo de Chillin 'in the sun, faites-la glisser vers le document Photoshop et placez-la au-dessus du calque rectangle. Renommez le calque d'image en quelque chose que vous reconnaîtrez plus tard, dans mon cas, j'ai utilisé IMG. Après cela maintenez la Alt clé et souris sur la couche de photo jusqu'à ce que vous voyiez une petite flèche pointant vers le bas, puis relâchez-la. Vous venez de créer un Masque d'écrêtage. Enfin réduire la couche IMG Opacité à 70% donc le texte que nous allons mettre en haut sera plus lisible.
Maintenant frappé CMD + T et redimensionner la photo pour répondre à vos besoins.
Pointe: tenir Décalage clé pour transformer proportionnellement.
Créons maintenant une navigation globale pour notre page de destination afin que les internautes puissent naviguer sur le site Web..
Créez un nouveau groupe appelé «Navigation», placez-le dans le groupe «En-tête». Après cela, choisissez le Outil Rectangle (U) et tracez un rectangle blanc entre le premier et le dernier repère vertical. Faire le tour 60px en hauteur afin que les éléments de navigation aient un peu d’espace pour respirer et une apparence propre. Enfin déplacez-le 30px du haut afin que nous puissions avoir cet effet flottant qui reste bien sur notre image.
Maintenant, plaçons un logo et des liens pour que notre barre de navigation ressemble à quelque chose que les gens peuvent utiliser. Pour le logo, j'ai simplement écrit “Grttd” en utilisant Playfair Display (Gras Italique) Police de caractère 26px taille et couleur gris foncé # 0e0e0e.
Pour les liens de navigation que j'ai utilisés Source Sans Pro 14px avec un espacement étendu entre les lettres. Pour l'appel principal à l'action "Inscrivez-vous" que j'ai utilisé Noir et la couleur verte # 96c218. Nous en avons terminé avec la «Navigation», alors réduisez-la en cliquant sur la petite icône en forme de triangle située à côté du nom du groupe..
Écrivons un message inspirant qui accompagne l'image et l'idée générale du site. Je vais utiliser une énorme police de caractères gras avec un sous-titre qui explique le concept plus en détail.
Comme nous avons un arrière-plan assez sombre pour notre zone supérieure, il est sage d'utiliser un texte pâle afin de créer un contraste élevé et d'assurer la lisibilité. J'ai utilisé du blanc #FFFFFF Source Sans Pro (Noir) 80px avec une hauteur de ligne de 86px. Placez-le à propos 120px sous la barre de navigation afin que le message dispose de suffisamment d'espace pour être perçu comme étant important.
Zoom arrière à 70%.À présent, plaçons le sous-titre qui clarifiera le concept dans son ensemble et répondra à certaines questions des visiteurs. Pour créer une belle combinaison typographique, mélangeons le titre principal sans serif avec l'élégante police empattement que nous utilisions précédemment pour le logo..
Pour des combinaisons de polices plus inspirantes, consultez: Projet typographique de polices Web Google et Guide du débutant pour l'association de polices.
Pour ce tutoriel, j'ai utilisé du blanc #FFFFFF 26px Affichage Playfair (italique) police et placé 40px sous le titre principal.
Ajoutons quelque chose de plus attrayant pour que le visiteur puisse voir l'avantage de rester sur le site. Un journal de gratitude est basé sur l'enregistrement des choses pour lesquelles vous êtes reconnaissant. Une preuve sociale serait donc une bonne idée, montrer aux gens quelqu'un qui l'utilise réellement et montrer quelque chose de plus souhaitable, comme un traînée.
Créez un nouveau groupe appelé «Exemple», puis sélectionnez le Outil Ellipse (U) et en maintenant Décalage, dessine un cercle. Dans mon cas c'est 60x60px. Après cela, placez le visage de quelqu'un sur le calque du cercle et maintenez la touche enfoncée. Alt touchez la souris, passez la souris sur le calque jusqu'à voir une petite flèche pointant vers le bas, puis relâchez-le pour créer un Masque d'écrêtage. Maintenant, vous pouvez redimensionner l’image si nécessaire en cliquant sur CMD + T.
Pour ce tutoriel, j'utilise un visage aléatoire de User Inter Faces.
Conseil pro: maintenez la touche Maj enfoncée pour dessiner / redimensionner des formes proportionnelles.
Nous devons maintenant mettre un indicateur de journaux consécutifs. Créons une autre forme de cercle, cette fois plus petite, et plaçons un numéro à l'intérieur. Simple, mais compréhensible, et fait le travail. Pour la couleur du cercle, j'ai réutilisé le vert précédemment utilisé # 96c218. Dans mon cas, sa taille est de 30x30 pixels et le texte à l'intérieur est en blanc #FFFFFF Source Sans Pro (gras) 14px.
Enfin, donnons un nom à notre personne et clarifions ce que ce nombre représente. Choisissez le Outil de type horizontal (T) et entrez un nom et une longueur de bande. Dans mon cas j'ai utilisé PT Serif (italique gras) 16px pour le nom et Source Sans Pro (régulière) 13px pour la série. Veillez à utiliser une hauteur de ligne suffisamment grande pour que les éléments puissent respirer.
Parfait, une dernière chose avant de passer à la zone de contenu. Nous avons besoin d'un fort Appel à l'action (CTA) afin que l'utilisateur puisse faire quelque chose après avoir vu les éléments visuels et lu les titres. Créez un nouveau groupe appelé "CTA", définissez la couleur de premier plan sur blanc #FFFFFF et saisir le Outil Rectangle (T). Après cela dessinez un rectangle, dans mon cas sa taille est 280x60px. Notez la cohérence de hauteur précédemment utilisée pour la barre de navigation.
Après cela, entrez une copie convaincante pour le bouton. J'ai utilisé “START LIVING →”, la couleur étant celle précédemment utilisée dans la barre de navigation, gris foncé # 0e0e0e, Police de caractère Source Sans Pro (Semibold) 16px avec suivi réglé sur 140.
Maintenant, nous en avons terminé avec l'en-tête. Ouvrons le groupe «Contenu» et créons-en un autre appelé «Description». Nous allons mettre un titre fort suivi d'une description plus détaillée de l'ensemble du site. Il est important de répéter le Appel à l'action (CTA) afin que l'utilisateur n'ait pas à trop réfléchir, mais qu'il soit toujours capable d'agir dès qu'il est prêt.
Choisissez le Outil de type horizontal (T) et choisissez une police puissante pour votre titre. Dans mon cas, je me sers de la belle et élégante, pourtant faisant autorité Présentoir Playfair (noir), 60 pixels. Assurez-vous de donner à cette bête beaucoup d'espace pour respirer, je l'ai déplacée 100px bas de l'image d'en-tête.
Maintenant en utilisant le même Outil de type horizontal (T) faire un rectangle en cliquant et en le faisant glisser. Dans mon cas c'est un 600x140px taille de la boîte où je mets une copie persuasive pour les utilisateurs de se décider à cliquer sur le CTA. Pour établir une hiérarchie visuelle claire, le texte de description doit être plus petit et moins lourd. Dans mon exemple, j'utilise du gris # 666666 PT Serif (régulier) 18px, hauteur de la ligne 28px. L'élément entier est descendu de 50 pixels du titre pour lui donner un aspect propre et professionnel.
Après avoir lu la copie, notre visiteur peut être convaincu d'essayer. Il est donc sage de répéter le bouton Call To Action (CTA). Ouvrez le groupe "En-tête", recherchez le groupe "CTA" et dupliquez-le en appuyant sur CMD + J. Après cela, déplacez-le dans le groupe «Description» et changez la couleur du bouton en vert précédemment utilisé # 96c218 et pour le texte utiliser le blanc #FFFFFF. Déplacez-le vers le bas 50px de la copie pour avoir un espacement constant.
Vous cherchez bien jusqu'ici. Mettons une simple ligne pour séparer visuellement le bloc de description du suivant. Choisissez le Outil Ligne (U), ensemble Poids à 1px et tracez une ligne horizontale entre les premières et dernières lignes verticales. Dans mon cas, j'ai utilisé une couleur gris clair # e6e6e6 qui n'est pas trop fort, mais fait le travail parfaitement.
Conseil pro: maintenez la Décalage clé pour tracer une ligne parfaitement droite.
Maintenant que nous en avons terminé avec le bloc «Description», il est temps de passer au suivant. Créez un nouveau groupe appelé «Inspirez-vous». Après cela, dupliquez les couches de titre et de description du groupe «Description» et déplacez-les dans le groupe «Inspirez-vous». Éditez les calques et changez la copie. Voici mon exemple:
Accédez maintenant au groupe «En-tête» et recherchez le groupe «Exemple». Dupliquer le groupe entier en frappant CMD + J et déplacez-le dans le groupe “Inspirez-vous”. Nous allons réutiliser notre exemple du haut et montrer quelques histoires d'utilisateurs pour inspirer notre visiteur à agir.
Renommez le nom du groupe en «Histoire» et supprimez l'indicateur vert. De plus, vous devrez changer la couleur du texte en gris foncé # 0e0e0e il est donc lisible sur un fond blanc. Utilisez une autre image pour l'avatar et écrivez la position et l'emplacement de la personne en gris clair. # 666666 afin que les gens puissent se rapporter plus à cette personne.
Après cela, créez une zone de texte d'environ 300x160px taille en utilisant le Outil de type horizontal (T) et écrivez un exemple de mise à jour du journal de gratitude. J'ai utilisé PT Serif (Italic) 16px taille couleur gris foncé comme utilisé auparavant # 666666.
À présent, dupliquez le groupe «Story» deux fois et modifiez les avatars, les noms et les descriptions. Placez ces deux groupes dans un ordre horizontal en laissant des espaces égaux entre eux et placez une ligne après tous ces groupes, comme nous l’avions précédemment utilisée..
Maintenant que nous en avons terminé avec le groupe «Inspirez-vous», passons à la dernière section de notre page de destination. Le final Appel à l'action (avec quelques détails supplémentaires) encouragera les visiteurs à s'inscrire en entrant une adresse e-mail.
Créez un nouveau groupe appelé «Email» et naviguez jusqu'au groupe précédent pour trouver un calque de titre, puis dupliquez-le en cliquant dessus. CMD + J et déplacez-le dans le groupe nouvellement créé. Changez le titre en quelque chose d'encourageant et déplacez-vous 100px en dessous de la ligne pour maintenir la cohérence.
Génial! Maintenant, réglez la couleur de premier plan sur gris clair # f5f5f5 et choisissez le Outil Rectangle (U) dessiner une boîte pour un champ email. Il devrait être la même hauteur que notre principale Appel à l'action (CTA) bouton, bien que la largeur ne compte pas beaucoup. Dans mon cas c'est 430x60px. Puis prenez le Outil de type horizontal (T) et écrivez «Entrez votre email» ou quelque chose de similaire, assurez-vous d’utiliser une couleur sombre afin qu’elle soit facilement lisible..
Maintenant, dirigez-vous vers le groupe "Description" dans notre panneau de couches et recherchez le groupe "CTA". Dupliquer en frappant CMD + J et déplacez-le dans le groupe “Email”. Placez le bouton juste à côté du champ email et centrez tout l'élément.
Zoom arrière à 80%.La fin est proche! Réduisons tous les groupes et ouvrons le groupe «Pied de page». Définir la couleur de premier plan sur gris foncé # 2d2d2d et en utilisant le Outil Rectangle (U), dessiner un rectangle de toute la largeur d'environ 230px En hauteur. Ce sera notre fond de pied de page et permettra de distinguer la zone de contenu avec son contraste.
Allez-y et trouvez le groupe "Navigation" et le calque du logo, dupliquez-le en appuyant sur CMD + J et déplacez-le dans le groupe «Pied de page». Changer la couleur en blanc #FFFFFF et déplacez-le 50px sous le bord du rectangle de pied de page.
Enfin, prenez la Outil de type horizontal (T) et mettre quelques liens que les utilisateurs peuvent trouver utiles. Assurez-vous de regrouper vos liens afin qu'ils soient facilement associés. Dans mon cas j'ai utilisé Source Sans Pro (Semibold) 16px pour les titres de groupe de liens et PT Serif (régulier) 14px pour les titres de liens.
C'est tout! Nous en avons terminé avec le schéma de présentation. Nous vous invitons donc à passer en revue les calques, à supprimer ceux qui ne sont plus nécessaires et à les transmettre à votre développeur, voire à les coder vous-même. J'ai abordé quelques techniques de base et démontré mon flux de travail pour la conception de mises en page Web. J'espère que vous avez appris quelque chose..
J'aimerais entendre vos commentaires et voir les résultats de ce tutoriel.!
Si vous débutez dans Landing Page Design, nous vous recommandons un certain nombre de tutoriels d'introduction pour vous familiariser avec les bases:
Si vous souhaitez obtenir de l'aide pour la conception de votre page de renvoi, Envato Studio propose une excellente collection de services de conception et de développement de pages de renvoi que vous aimeriez explorer. Vous pouvez également consulter les thèmes de la page de destination sur le marché Envato..
Accentsconagua