Share
Ce que vous allez créerDans ce didacticiel, j'utiliserai Photoshop CS6 pour concevoir une page de destination simple, propre et propre à une start-up itinérante fictive. Au cours de ce processus, nous verrons comment créer des grilles personnalisées avec des directives, styler des polices de caractères, utiliser beaucoup d'espace blanc et composer le contenu de notre site Web de manière très propre et professionnelle. Le fichier PSD terminé sera prêt à être remis à un développeur pour le codage.
Pour pouvoir suivre, vous aurez besoin des éléments suivants (disponibles gratuitement):
Commencez par créer un nouveau document (Fichier> Nouveau… ) en utilisant les paramètres indiqués ci-dessous.
Assurez-vous que la résolution est définie sur 72 pixels / pouceDé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, mais la définition de certaines règles garantira la perfection des pixels et aidera à définir la largeur de notre site Web. Divisez le canevas en deux moitiés verticalement pour créer une composition centrée. 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, 260px, 700px, 1140px et 1200px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
Nous allons garder notre document bien organisé dès le début. Nous allons donc créer trois groupes de couches nommés En-tête, Caractéristiques, Preuve sociale, Final CTA et Pied de page. Si vous vous en tenez à cette étiquette Photoshop, les choses resteront organisées et faciles à naviguer ou à modifier. 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..
L'en-tête est très important pour tous les sites Web car c'est la première occasion de convaincre un nouveau visiteur qu'il est avantageux de rester sur le site. C’est là que nous, concepteurs, devons utiliser des images frappantes et un message clair avec certaines actions que les visiteurs doivent prendre..
Commençons par changer la couleur de fond en quelque chose de très facile pour l'œil. Dans mon cas, j'ai utilisé du gris clair. #bebebeb. Après cela, ouvrez le Entête groupe et en utilisant le Outil Rectangle (U) dessinez un rectangle de 1000 x 600 pixels et placez-le entre les repères verticaux. Puis téléchargez Bike Traveller Photo, faites-le glisser vers le document Photoshop et placez-le au-dessus du calque rectangle. 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.
Maintenant frappé CMD + T et redimensionner la photo pour répondre à vos besoins.
Pointe: tenir Décalage clé pour transformer proportionnellement.
Nous devons maintenant ajouter une couche de couleur transparente pour assombrir l'image afin que les parties lumineuses de l'image deviennent plus sombres et que le texte en blanc soit facilement lisible. Créez un nouveau calque au-dessus de l'image et créez également un masque de découpage. Puis remplissez ce calque avec une couleur foncée unie et changez le Opacité autour 20% afin que nous puissions encore voir clairement l'image.
Maintenant, mettons un logo et une navigation simples basés sur une typographie en haut. Choisissez un Outil de type horizontal (T) et écrivez votre titre de démarrage sur le côté gauche. Assurez-vous qu'il est lisible et qu'il y a suffisamment d'espace autour. Notre logo est dans le coin supérieur gauche car il s'agit d'une convention Web courante et de ce à quoi de nombreux visiteurs s'attendent.
J'ai utilisé Aller police pour le titre et Open Sans pour les éléments de navigation.
Jouons maintenant avec le message principal. Vous devez toujours limiter la ligne à une ou deux phrases et vous assurer qu’elle est courte et facilement lisible. Dans mon cas j'ai utilisé 32px Open Sans écrire le message principal en mettant l'accent sur "vous voyagez" en le rendant plus audacieux.
La deuxième ligne est beaucoup plus petite, ce qui oblige à la percevoir comme ayant une importance secondaire. Ainsi, les gens la liront après avoir terminé le message principal. Je l'ai stylé avec un espacement plus grand entre les lettres, car les caractères sont en majuscules.
Remarquez où je place le message, pensez toujours au contraste et à l'endroit où placer votre copie pour que le lecteur puisse le lire facilement.
Créer un simple appel à l'action informer les visiteurs de ce qu'ils doivent faire. Dans mon cas, il s’agit d’un simple message suggérant aux visiteurs de s’abonner à la newsletter. J'ai utilisé 14px Taille PT Serif (italique) Police de caractère.
Créons un simple formulaire de courrier électronique permettant à nos visiteurs de saisir leur adresse électronique et de s’abonner à la liste. Créez un nouveau groupe appelé formulaire Email. Utilisez le Outil Rectangle Arrondi (U) avec 3px rayon pour créer un blanc simple (#FFFFFF) entrée de couleur.
Ajoutez un indice pour que les gens sachent où entrer leur courrier électronique et créent un bouton d'appel à l'action. J'ai utilisé 13px Open Sans (Semibold) gris (#bdbdbd)pour le texte d'entrée et 13px Open Sans (gras) blanc (#FFFFFF) pour le texte du bouton. Choisissez une couleur accrocheuse pour votre principal appel à l'action afin qu'il se démarque et encourage l'action.
Dans mon cas, j'ai utilisé le vert (# 51a200) pour l'appel principal à l'action. Choisissez un Outil Rectangle (U) et dessinez un rectangle placé au-dessus de l'entrée blanche. Puis maintenez la Alt et placez la souris sur le rectangle vert jusqu'à ce que vous voyiez une flèche vers le bas, relâchez la touche et vous créerez un Masque d'écrêtage.
Ceci est la partie principale du corps juste au-dessus de la zone de pli. Si les gens sont intéressés par ce que vous avez à offrir, ils feront défiler l'écran vers le bas pour voir ce que vous avez plus en détail..
Réduisez le groupe d'en-tête en cliquant sur la petite flèche en regard du nom du groupe. Nous devons maintenant créer un arrière-plan légèrement différent pour la partie du corps de notre site Web. J'ai utilisé le Outil Rectangle Arrondi (U) avec un rayon de 5px et couleur blanche #FFFFFF.
Placez votre forme nouvellement créée juste au-dessus du calque d'arrière-plan principal.
Développez le groupe de fonctions et commencez à taper votre copie. Dans mon cas, j'ai ajouté la ligne de message principale et deux colonnes de caractéristiques avec un titre et un court paragraphe.
Lorsque vous créez une copie attrayante, assurez-vous qu’elle est lisible et pas trop longue. Utilisez différents poids, tailles et couleurs de police pour créer une hiérarchie visuelle. Enfin, mais très important. utilisez beaucoup d'espaces. Dans mon cas j'ai utilisé Open Sans variations de police, gris foncé # 545454 et gris clair # a2a2a2 pour ma copie.
Il est maintenant temps de concevoir notre deuxième zone de corps qui aidera les internautes à se faire une idée et à agir. Nous allons concevoir une zone de preuve sociale montrant quelques témoignages.
Premièrement, nous devons séparer la zone précédente de manière subtile. J'ai utilisé le Outil Ligne (U) mis à 1px avec la couleur étant gris clair # e8e8e8.
Réduisez le groupe de fonctionnalités et développez le groupe Social Proof. Encore une fois, écrivez un titre en conservant la même taille que celle que vous utilisiez auparavant. La cohérence du design est la clé du succès, alors une fois que vous avez utilisé une couleur et une taille, respectez-les..
Pour la zone de preuve sociale, j'ai utilisé deux témoignages fictifs de personnes fictives. La police utilisée pour la citation est PT Serif et le reste est le précédemment utilisé Open Sans avec différentes variations de taille et de poids.
Comme vous pouvez le voir, j'ai laissé de la place devant les noms. Rendez-vous sur User Inter Faces pour obtenir des avatars. Après cela, choisissez un Outil Ellipse (U) et en maintenant Décalage clé dessine un cercle. Enfin, copiez et collez votre avatar au-dessus du calque cercle et passez la souris sur le calque avatar Alt clé de sorte que vous allez créer un Masque d'écrêtage.
Pour que les choses soient mieux organisées, créez deux groupes dans le groupe Preuve sociale et placez les couches de témoignage dans des groupes séparés..
Selon GoodUI, vous devez toujours répéter votre premier appel à l'action afin que les personnes qui n'ont pas pris de décision au préalable puissent le faire après avoir vu davantage de votre site Web..
Séparons la zone précédente en utilisant la même ligne. Trouvez le calque de ligne et appuyez simplement sur CMD + J de le dupliquer puis de le déplacer sous les témoignages en laissant beaucoup d’espace.
Après cela, écrivez le titre principal de la section et un simple sous-titre donnant plus d’informations ou de conseils. Comme vous pouvez le constater, j'ai utilisé les mêmes polices de style, de poids et de taille que celles utilisées dans les sections précédentes. S'en tenir à un style pour toute votre copie.
Rendez-vous au groupe d’en-têtes et recherchez votre groupe de formulaires, après ce doublon (CMD + J) et passez au groupe CTA final. Placez-le sous la messagerie et personnalisez-le un peu en ajoutant un trait vert autour du champ de saisie..
Cliquez avec le bouton droit de la souris sur le calque d’entrée et sélectionnez Options de fusion… après cela appliquer un Accident vasculaire cérébral effet comme indiqué ci-dessous. La couleur que j'ai utilisée est # 51a200.
Nous en avons terminé avec le groupe CTA final, minimisez-le et développez le groupe Footer. Enfin, entrons quelques liens vers les pages internes de votre site Web et mettons un simple texte de copyright sur une nouvelle ligne. j'ai utilisé Open Sans (Semibold) police pour les liens.
Notez comment il est placé en dehors de l’arrière-plan du corps pour le distinguer du contenu principal. Assurez-vous que vous utilisez un espacement constant au-dessus et au-dessous de la copie pour qu'il soit bien équilibré..
Et nous en avons fini avec la mise en page. Toutes nos félicitations!Dans ce didacticiel, je vous ai expliqué le processus de création d'une page de destination très simple et claire pour les sites Web de voyages, comprenant des sections clés vous permettant de capter l'attention de vos visiteurs et d'encourager les actions à venir..
Le résultat est une disposition équilibrée et légère mettant fortement l'accent sur l'imagerie dans la zone supérieure et une typographie nette dans la zone du corps. Si vous avez des questions ou des idées, veuillez nous le faire savoir dans la zone des commentaires.!
Si vous débutez dans Landing Page Design, nous vous recommandons un certain nombre de tutoriels d'introduction pour vous familiariser avec les bases:
.
Accentsconagua