Share
Ce que vous allez créerDans ce didacticiel, je vous expliquerai le processus de conception d’une page de destination pour applications simple et axée sur la conversion. Nous utiliserons l'application Android Tuts + pour la démonstration, en soulignant ses fonctionnalités et ses avantages, et en utilisant des appels à l'action tout au long de.
Lors de la conception de pages de destination, vous devez maîtriser certains éléments pour bénéficier de taux de conversion élevés..
Selon Neil Patel, un hacker de la croissance, il vous faut:
Nous allons mettre en œuvre tous les éléments ci-dessus pour rendre notre page de destination aussi efficace que possible..
Je vous recommande vivement de jeter un coup d'œil à l’utilisation des principes AIDA dans la conception Web par Shaun Cronin. AIDA signifie Attention, Intérêt, Envie et action; et ces principes peuvent être appliqués à différentes situations impliquant la vente de produits ou de services.
Les recherches montrent que le défilement ne gêne pas le défilement. Par conséquent, une fois que vous avez créé un intérêt initial en haut de la page, vous ne devriez pas vous inquiéter de l'agrandissement de votre page de destination. Cela est nécessaire pour raconter une belle histoire et ajouter des éléments persuasifs.
Les pages de renvoi efficaces ne peuvent pas simplement être conçues une fois et sont performantes. Vous devez continuer à tester avec différentes combinaisons de copie, couleurs, appel à l'action et autres éléments pour obtenir les meilleurs résultats..
Pour plus d'informations à ce sujet, consultez Introduction d'un concepteur Web aux tests A / B par Siddharth Deswan..
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..
Définissons des guides afin que notre mise en page dispose de suffisamment d’espace et ait un aspect équilibré. L'établissement de certaines lignes directrices assurera la propreté et aidera à définir la largeur de notre site Web aux fins de cette conception. Aller à Voir> Nouveau guide… et définir des lignes directrices. Je choisis généralement 1000px comme point de départ et j'ajoute quelques lignes directrices aux coins afin qu'il y ait de l'espace pour respirer.
Remarque: Instructions utilisées pour ce tutoriel: vertical à 100px, 600px et 1100px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
L'en-tête ou la zone "au-dessus du pli" joue un rôle très important dans la communication avec les utilisateurs et dans la garantie que les visiteurs restent sur le site Web..
La fonction principale de notre page de destination est de convaincre les visiteurs de télécharger l'application. Pour cette raison, nous allons nous concentrer sur les avantages d'essayer l'application et faciliter le téléchargement..
Commençons par créer un groupe appelé «En-tête» en cliquant sur Couche> Nouveau> Groupe… ou en appuyant sur la petite icône en bas du panneau des calques. Après cela, prenez un Outil de type horizontal (T), choisir PT Sans (gras) 18px police de taille, définir la couleur en noir # 000000 et entrez le nom de votre application comme logo, puis placez-le dans le coin supérieur gauche, à côté de la première ligne directrice verticale. Donnez-lui un peu d'espace au-dessus de sorte qu'il ne semble pas à l'étroit.
Créons un bouton d'appel à l'action que nous allons réutiliser tout au long de notre conception pour nous assurer que les visiteurs agissent. Créez un nouveau groupe appelé «CTA btn» et sélectionnez le Outil Rectangle Arrondi (U), ensemble Rayon à 2px, changer la couleur de premier plan en vert lime # 17e594 et dessine un 206x38px taille de rectangle.
Maintenant, cliquez avec le bouton droit de la souris sur le calque, sélectionnez Options de fusion… et vérifier le Accident vasculaire cérébral option. Après cela, appliquez un vert plus foncé # 09ba74.
Choisissez le Outil de type horizontal (T) à nouveau et entrez la copie pour notre bouton. J'ai utilisé PT Sans (gras) 12px et la couleur blanche #FFFFFF.
Maintenant, choisissez le Outil Rectangle (T) et dessine un 1200x600px forme de rectangle (n’importe quelle couleur) et placez-le juste en dessous de notre navigation minimale vers le haut. J'ai laissé un 25px écart entre le logo et la forme, comme je l'ai fait pour le logo ci-dessus, donc il est compatible.
Maintenant, prenez une photo de Toolkit dans Unsplash et placez-la au-dessus du calque de forme rectangulaire. Après cela maintenez la Alt et placez la souris sur le calque de l'image jusqu'à voir une petite flèche pointant vers le bas, puis relâchez la souris pour créer un Masque d'écrêtage de sorte que l'image n'est visible que dans la zone du rectangle.
Frappé CMD + T pour redimensionner la photo, en vous assurant de maintenir le Décalage clé de sorte que vous redimensionnez proportionnellement.
Ajoutons une couche de filtre de gris afin de préparer notre arrière-plan pour la copie et la capture d'écran de l'application..
Changer la couleur de premier plan en gris foncé # 222325 et créez un nouveau calque, puis placez-le au-dessus du calque photo et créez à nouveau un Masque d'écrêtage. Après ce coup Alt + Retour arrière remplir le calque de gris. Enfin, réduire le calque Opacité à 80%.
Prenez le Outil de type horizontal (T) encore une fois, changez la couleur en blanc #FFFFFF et en utilisant PT Sans (gras) 48px taille entrez le message principal. Assurez-vous de lui donner beaucoup d'espace dessus.
Maintenant, réduisez la taille de la police à 21px, sélectionner Ordinaire poids de la police, entrez un message plus descriptif et placez-le sous le message principal. Pour donner aux lignes un aspect équilibré et facile à lire, augmentez la hauteur de ligne au moins 30px. Placez la description ci-dessous le titre principal, dans mon cas, j'ai déménagé 40px vers le bas.
Répétons notre bouton d'appel à l'action (CTA) pour que le visiteur sache clairement ce qu'il doit faire après la lecture de la copie. Trouvez le groupe "CTA btn" et dupliquez-le en appuyant sur CMD + J, après cela placez-le en dessous du message secondaire.
Nous en avons terminé avec la copie et l'appel principal à l'action, alors mettons un aperçu de l'application pour montrer son apparence avant que les gens ne décident de la télécharger..
Téléchargez la maquette gratuite de Samsung Galaxy S5 de Martin Adamko et placez-la dans votre document. Après cela, maintenez la CMD clé, cliquez sur toutes les couches qui appartiennent à cette maquette et faites un clic droit pour choisir Convertir en objet intelligent. Utilisation CMD + T pour le redimensionner et passer à droite de notre copie et description principales.
Après cela, placez l'écran de votre application sur la maquette du smartphone en appuyant sur le calque d'objet intelligent et en l'enregistrant. J'ai utilisé une capture d'écran d'une nouvelle application Android Tuts + Courses.
Nous en avons fini avec l'en-tête. Réduire le groupe et en créer un autre appelé «Avantages».
Après cela, choisissez le Outil de type horizontal (T) encore une fois, changez la couleur en gris foncé # 222325 nous avons utilisé pour le filtre (rendre votre conception cohérente et cohérente au lieu d’apporter plus de couleurs) et en utilisant PT Sans (gras) 30px entrez une déclaration forte et placez-la sous la zone d'en-tête, en laissant beaucoup d'espace dessus.
Nous avons maintenant une chance de convaincre nos visiteurs pourquoi notre application mérite d'être téléchargée. Pensez aux avantages par rapport aux fonctionnalités afin que les personnes puissent se visualiser l’utiliser. Changer la couleur en bleu gris subtil # 6a7588 et entrez quelques lignes expliquant pourquoi les utilisateurs devraient utiliser votre application. Je suis allé pour PT Sans (régulier) 21px avec la hauteur de ligne réglée sur 32px, le même paramètre que celui utilisé pour le message secondaire dans la zone d'en-tête.
Faites attention à l'espacement entre les blocs de texte, laissez un espace suffisant pour donner une impression de lumière à votre conception..
Une fois encore, répétons le bouton d’appel à l’action (CTA) pour que les visiteurs qui n’étaient pas convaincus auparavant puissent agir immédiatement après avoir lu votre copie des avantages. Dupliquez le groupe "CTA btn" en appuyant sur CMD + J et placez-le en dessous de la copie des avantages. Déplacez-le dans le groupe «Avantages» pour rendre votre document plus organisé.
Nous en avons terminé avec le secteur des avantages, alors réduisez le groupe et créez-en un nouveau appelé «Fonctionnalités». Ici, nous soulignerons certaines des fonctionnalités de l'application pour que les visiteurs qui souhaitent en savoir plus et qui sont déjà intéressés puissent en savoir plus sur l'application..
Changer la couleur de premier plan en gris clair #fbfbfb, nous utiliserons une couleur de fond différente pour la section Fonctionnalités afin de la séparer du reste. Après cela, choisissez le Outil Rectangle (U) et dessine un 1200x700px forme de taille qui servira d'arrière-plan. Assurez-vous de donner l'espace de la section ci-dessus.
Pour séparer encore plus la zone Fonctions, mettons des lignes horizontales de 1px entre les arrière-plans. Choisissez le Outil Ligne (U), met le Poids à 1px et changez la couleur en gris plus foncé #eeeeee.
Pointe: tenir Décalage touche pour tracer une ligne parfaitement horizontale.
Ouvrez le groupe «Avantages» et trouvez la couche de titre, appuyez sur CMD + J de le dupliquer et de passer dans le groupe «Fonctionnalités». Modifiez-le en fonction de vos besoins et placez-le à l'intérieur du fond gris précédemment créé..
Nous allons créer trois blocs de fonctionnalités avec une icône, un titre et une brève description. Créez un nouveau groupe et appelez-le "Feature 1" ou quelque chose de plus descriptif. Rendez-vous sur Iconfinder et téléchargez un 48x48 px icône d'utilisateur. Cliquez avec le bouton droit de la souris sur le nom de la couche et appliquez les options suivantes..
Vous remarquerez peut-être que nous imitons en fait le style du bouton pour que tout soit cohérent.
Encore une fois, dupliquez le calque du titre, placez-le dans le groupe «Feature 1» et utilisez le Outil de type horizontal (T) réduire sa taille de police à 16px et hauteur de ligne à 22px.
En utilisant le même Outil de type horizontal (T) écrivez trois lignes courtes expliquant votre sujet. Assurez-vous de changer la couleur de type pour le gris bleu précédemment utilisé # 6a7588. Placez sous l'icône et le titre.
Maintenant, minimisez le groupe et dupliquez-le deux fois en appuyant sur CMD + J. Après cela, personnalisez les groupes dupliqués en fonction de votre application. Pour ce tutoriel, j'ai utilisé les icônes de marqueur et d'horloge d'Iconfinder. Assurez-vous de laisser assez d'espace entre les blocs pour qu'il soit bien équilibré.
Plus vous montrez à quoi ressemble le produit réel, mieux nous allons utiliser la maquette de notre smartphone. J'ai retourné la maquette du Samsung Galaxy S5 précédemment utilisée et remplacé la capture d'écran trouvée sur Google Play. Cliquez avec le bouton droit sur la couche de maquette en haut et sélectionnez Nouvel objet intelligent via la copie créer une copie indépendante.
Pour personnaliser la maquette du smartphone, cliquez deux fois sur la vignette du calque et placez-y l'écran de votre application..
Nous allons ajouter une certaine crédibilité sociale à notre application en montrant des témoignages d'utilisateurs de l'application..
Réduisez tous les groupes et créez-en un nouveau appelé «Témoignages». Comme précédemment, entrez un titre de section et placez-le sous l'arrière-plan du groupe «Fonctionnalités» en laissant un espace constant..
Ouvrez maintenant le groupe «Fonctionnalités», dupliquez l’un d’eux et déplacez-le dans le groupe «Témoignages». Nous allons réutiliser le groupe pour nos témoignages. Modifiez la copie en remplaçant le titre par le nom d'une personne et par la description par la copie du témoignage.
Retirez l’icône et, à l’aide de la touche Outil Ellipse (U), dessiner une forme de cercle. Après cela, placez la photo de profil de la personne au-dessus du calque en forme de cercle et créez un Masque d'écrêtage. J'ai utilisé un visage de User Inter Faces.
Enfin, dupliquez le groupe de témoignages fraîchement créé et personnalisez-le avec différents noms, témoignages et photos de profil..
Réduisez le groupe de “Témoignages” et créez-en un autre appelé “Pied de page”. Nous mettrons ici un dernier bouton d'appel à l'action (CTA) ainsi que des liens vers des pages internes du site Web, car la plupart des gens font défiler l'écran vers le bas pour rechercher l'architecture du site..
Dirigez-vous vers le groupe "Header" et, en maintenant la Décalage touche, choisissez la forme du rectangle et les couches de filtre grises. Après ce coup CMD + J pour les dupliquer et les déplacer dans votre nouveau groupe «Pied de page». Ensuite, placez une photo de votre choix entre la forme rectangle et les calques de filtre gris créant un Masque d'écrêtage.
Ajoutez un autre titre encourageant les gens à agir et à télécharger votre application. Le rendre blanc #FFFFFF il est donc très visible sur le fond plus sombre. Après cela, dupliquez le bouton d’appel à l’action et placez-le sous le titre..
Choisir Outil de type horizontal (T) encore et entrez quelques liens de votre site Web. J'ai utilisé du blanc #FFFFFF PT Sans (régulier) 16px et une hauteur de ligne de 29px.
Dupliquez votre calque de texte et personnalisez-le en fonction de votre application. Après cela, placez une ligne de copyright au bas de votre pied de page en laissant beaucoup d’espace au-dessus et au-dessous..
C'est tout! Nous en avons terminé avec la conception du thème. Passez en revue vos couches de document, supprimez celles qui ne sont pas nécessaires et remettez-les à votre développeur, ou mieux encore, codez-les vous-même.!
Accentsconagua