Principes de conception des pages d'atterrissage

1. Sections
2. Hiérarchie visuelle
3. Appel à l'action (CTA) et formulaires
4. Couverture
5. Navigation
6. Couleur
7. Police de caractères
8. Images
9. Icônes
10. Animation
11. Style général
12. Récapitulation

Nous avons introduit le concept de sections dans le deuxième chapitre lorsque nous avons décomposé la structure d'un site web - votre offre, quelques informations sur le projet, le retour d'information, le calendrier et les blocs d'appel à l'action - tous ces éléments sont connus sous le nom de sections dans une page de renvoi.

Les sections sont utiles car chacune d'entre elles répond à une question spécifique - combien coûte quelque chose, où sommes-nous situés, pourquoi sommes-nous les meilleurs - ce qui signifie qu'elles contiennent une idée entièrement formée. Cela facilite la perception de l'information, car vous avez abordé un sujet (par exemple, "À qui s'adresse ce cours"), vous l'avez expliqué et vous êtes passé au suivant. La cohérence et la prévisibilité sont deux choses que le cerveau humain adore.

Les sections d'atterrissage diffèrent des diapositives de présentation traditionnelles en ce sens qu'elles ne sont pas limitées par la hauteur de l'écran. Une seule section peut occuper plusieurs écrans ou une petite partie d'un seul écran.

Si les éléments d'une section peuvent être différents, l'important est qu'ils soient liés par un thème unique.

Les espaces sont nécessaires, mais ne suffisent pas toujours à diviser clairement la page d'atterrissage en différentes sections.

Un séparateur sous forme de ligne ou de bordure est une autre façon de marquer le début ou la fin d'une section.

Pour que la page d'atterrissage ait un aspect soigné, nous vous recommandons d'utiliser une seule forme de bordure sur l'ensemble de la page. L'utilisation de différents styles - des zigzags associés à des lignes de séparation inclinées, par exemple - rendra la page difficile à digérer.

Les sections peuvent contenir des titres seuls ou des sous-titres. Les titres définissent le rythme et la structure de la page et aident les utilisateurs à identifier le début d'une nouvelle idée.

Par exemple, si le premier titre "À propos du cours" est de 62 px, le titre de la section suivante - "À qui s'adresse le cours" - doit également être de 62 px. La page aura ainsi une apparence soignée, tandis que chaque nouvelle section (et chaque nouvelle idée) sera facile à lire.

Pour que la structure de la page soit lisible non seulement par les humains, mais aussi par les robots, utilisez la balise H1 pour le titre de la couverture de votre page d'atterrissage et ajoutez la balise H2 à chaque titre de section. Les moteurs de recherche interpréteront cela comme une page bien conçue et correctement structurée.

Les titres de section ne doivent pas toujours être noirs ; ils peuvent également être colorés. Il s'agit d'une pratique assez rare, car les titres colorés sont plus difficiles à intégrer dans le style général de la page.

S'il est nécessaire de mettre en évidence un élément avec de la couleur, utilisez le même principe que celui appliqué à la taille des titres : conservez la même couleur pour tous les titres de section afin de faciliter la lecture de la page.

Nous avons remarqué que les pages comportant des sections avec des colonnes placées les unes à la suite des autres sont difficiles à lire.

Il est plus logique, d'un point de vue visuel, que les sections voisines aient le même nombre de colonnes (trois, par exemple). Une telle page n'en sera pas moins déséquilibrée.

Si vous n'avez pas d'expérience dans la conception de sites web, il est préférable d'éviter complètement l'utilisation de colonnes, car il est assez difficile de s'y retrouver. Vous pouvez également alterner les sections à colonnes et les sections à texte. Par exemple, une colonne de texte peut être suivie de trois colonnes d'icônes, puis d'une phrase clé avec une image de fond, suivie de trois autres colonnes ou d'une colonne de texte, et ainsi de suite.

Au début, nous avons parlé d'une section composée d'un titre et d'un contenu. C'est vrai dans la plupart des cas. Cependant, il arrive que certaines sections ne correspondent pas à cette définition.

Une galerie de photos, un texte central ou un bloc de texte et une image sans titre sont autant d'exemples de sections "personnalisées". Toutefois, si elles contiennent toujours une seule idée et répondent à une seule question, elles sont soumises aux mêmes principes et doivent être espacées comme toutes les autres sections et mises en évidence à l'aide d'un arrière-plan de couleur ou d'une forme de bordure.

Voici quelques exemples de sections personnalisées :

La hiérarchie visuelle est essentielle pour éliminer le chaos sur une page d'atterrissage. "Qu'est-ce qui est proposé ? Comment puis-je l'utiliser ? Pourquoi en ai-je besoin ?": telles sont les questions auxquelles une personne doit obtenir des réponses instantanées. Les outils visuels vous y aideront.

Par exemple, le titre principal d'une section est plus grand que le titre à l'intérieur d'une section. Dans ce cas, la hiérarchie visuelle aide à comprendre que les petits titres ont une signification similaire, le titre principal les réunissant sous un même chapeau.

Mais vous devez faire attention au contraste. Les grands éléments doivent être grands. Si un titre de deuxième niveau mesure 22 px par rapport à un titre de premier niveau de 24 px, la mise en évidence visuelle est trop faible, ce qui signifie qu'il n'y a pas de hiérarchie. Une différence de taille de police de 1,5 à 2 fois est plus facile à remarquer et à interpréter.

Dans le contexte de la hiérarchie visuelle, la "luminosité" ne fait pas référence à une nuance de couleur, mais au contraste et à la quantité de couleur sur la page par rapport à la palette de couleurs principale.

Un en-tête vert associé à un texte bleu et à un bouton orange créera un conflit visuel et les trois éléments finiront par être perdus. Il s'agit d'un exemple exagéré, mais vous devriez y réfléchir sérieusement chaque fois que vous voulez ajouter une autre couleur.

Si une couleur contrastante apparaît sur le fond d'une couleur plus générale, l'élément devient plus visible, attire l'attention et dit : "Je suis important".

Si plusieurs éléments sont situés les uns à côté des autres, cela signifie probablement qu'ils sont liés par un thème ou une signification commune. Pour combiner les éléments en un groupe, il faut réduire la distance entre les éléments à l'intérieur du groupe et l'augmenter à l'extérieur.

Prenons quelques exemples :

Plusieurs groupes d'éléments peuvent former une composition unique dans une section donnée. Par exemple, un titre et un sous-titre peuvent former un groupe, tandis qu'un bloc de texte avec une image sur deux colonnes peut en former un autre.

Chaque groupe peut également comporter des sous-groupes. Les éléments d'un sous-groupe sont rassemblés selon le même principe : les éléments qui sont liés par le sens sont placés plus près les uns des autres que de tous les autres éléments et sous-groupes.

Vous pouvez mettre en valeur un élément de manière tout aussi efficace en utilisant l'espace blanc qu'en manipulant sa taille ou sa couleur.

Les éléments densément agencés sont comme la cabane de votre grand-père : vous savez que la clé se trouve quelque part, mais elle est impossible à trouver, alors vous vous énervez et perdez du temps à la chercher.

Vous pouvez utiliser un arrière-plan clair ou un bouton contrasté pour mettre en évidence le bloc parmi les autres sections de la page d'atterrissage.

Pour inciter quelqu'un à remplir un formulaire, vous pouvez préciser ce qui se passera après qu'il aura cliqué sur le bouton correspondant.

"Nous rappellerons dans l'heure pour coordonner la livraison", "Nous enverrons un rappel deux heures avant le webinaire", "Nous enverrons le livre électronique à votre adresse électronique", "Nous n'enverrons une lettre d'information éducative qu'une fois toutes les deux semaines", tels sont les exemples de messages formulés simplement, avec une touche humaine, qui encouragent la confiance.

La page d'atterrissage est parfois un maillon intermédiaire dans l'entonnoir des ventes, le formulaire faisant office d'aimant à prospects.

Un aimant à prospects est l'échange d'un contact (un courriel ou un numéro de téléphone) contre quelque chose de précieux, comme un livre électronique, une réduction, un webinaire, une liste de contrôle ou des données de recherche. Cela crée l'entonnoir suivant :

• Obtenir gratuitement
• Acheter à un prix raisonnable (acheter un cours)
• Après-vente (consultation personnelle)

Par exemple, une personne s'inscrit et reçoit gratuitement le premier chapitre d'un cours en ligne, ce qui l'incite à acheter l'intégralité du cours et à commander une consultation personnelle.

Voici quelques exemples d'application de texte aux photos ci-dessus :

Les illustrations sont une bonne alternative aux photos de couverture, car elles définissent le style de la page de destination et la rendent plus intéressante.

Vous pouvez commander des illustrations personnalisées à un illustrateur ou les trouver dans une banque de photos.

La disposition optimale de ce type de couverture de page de destination consiste à placer le texte à gauche de l'illustration. Un formulaire de retour d'information ou un bouton d'action ciblé peuvent également être ajoutés dans l'en-tête.

Cette option n'est pas plus mauvaise qu'une couverture avec photo - elle peut même parfois être meilleure. Laissez le fond blanc et mettez l'accent sur la typographie - travaillez sur la composition, la taille et la couleur des polices.

Vous pouvez utiliser une couleur monochrome ou un dégradé comme arrière-plan. Avec l'aide de Tilda Colors, vous pouvez copier des couleurs et des dégradés ou les télécharger au format PNG avec une résolution de 1680px adaptée aux images plein écran.

Une autre option consiste à utiliser des graphiques abstraits - des formes géométriques, des vagues, des lignes ou un motif. L'essentiel est que l'en-tête reste lisible sur l'arrière-plan graphique.

Nous avons abordé la formulation du texte de couverture dans le deuxième chapitre.

En ce qui concerne la longueur et la forme du texte, nous devons nous rappeler que l'en-tête et le sous-titre de la couverture ne doivent pas être trop imposants. L'idéal est d'avoir une phrase simple dans l'en-tête qui explique l'essence de l'offre et une ou deux phrases dans le sous-titre qui complètent et ouvrent l'offre. Une ou deux lignes pour l'en-tête et deux ou trois lignes pour le sous-titre devraient suffire.

Le menu est utilisé sur la couverture si la page est longue et qu'il faut naviguer entre les sections. Le menu a ici une fonction d'aide - dans la plupart des cas, vous pouvez vous en passer.

La règle générale pour tout menu est d'éviter à tout prix la surcharge. C'est encore plus vrai pour le menu d'une page d'atterrissage, car il doit aider l'utilisateur à trouver des informations sans le détourner de l'action visée.

Un menu est surchargé lorsqu'il y a trop d'éléments. C'est pourquoi vous pouvez, en toute sécurité, supprimer les éléments superflus (par exemple, les boutons de réseaux sociaux), réduire les éléments de menu au minimum et raccourcir les noms à un mot pour chaque élément.

L'arrière-plan du menu peut être transparent, transparent ou coloré.

Arrière-plan transparent du menu. Ce menu est léger et c'est aussi le style le plus polyvalent et le plus courant. Les couvertures sans petits détails fonctionnent mieux avec le menu transparent. Les filtres de couleur fonctionnent également bien ici.

Menu semi-transparent. Cela fera l'affaire si vous voulez augmenter la lisibilité du menu sans surcharger le premier écran.

Menu avec un arrière-plan coloré. Avec une opacité de 100 %, la couleur du menu devient une base pour le texte, ce qui le rend parfaitement lisible. Cette méthode présente deux inconvénients : d'une part, le menu devient trop visible et attire l'attention ; d'autre part, il s'agit d'un outil stylistique assez fort qui ne conviendra pas à toutes les pages d'atterrissage.

Classés par type de comportement, les menus peuvent être statiques, fixes ou apparaître lors du défilement.

Les menusstatiques sont situés en haut de la page (au-dessus de la couverture ou recouvrant une partie de la couverture), restent en place et disparaissent du champ de vision lors du défilement.

Les menus fixes sont épinglés en haut de la page de destination et restent visibles lors du défilement. Il peut également y avoir deux menus : l'un reste en haut de la page, l'autre apparaît lors du défilement. Dans ce cas, le second menu contient souvent un numéro de téléphone ou un bouton d'enregistrement pour simplifier l'appel à l'action.

Les menus combinés apparaissent lorsque des menus statiques et fixes sont utilisés simultanément. Le menu statique contient le logo, les éléments du menu et les contacts, tandis que le menu fixe contient un bouton d'appel à l'action.

Vous pouvez également créer un menu simple pour la version de bureau de votre page d'atterrissage et un menu hamburger avec des informations abrégées ou autres pour la version mobile.

Menu hamburger. Généralement utilisé dans les versions mobiles pour rendre le menu plus compact. Parfois également utilisé pour la version desktop afin de rendre la page plus concise.

Un menu sous forme de puces ou de points fixés sur le côté de la page n'attire que peu ou pas l'attention, tout en aidant les utilisateurs à naviguer. Les points indicateurs indiquent à l'utilisateur la partie de la page qu'il consulte. Lorsqu'il survole l'indicateur, il voit apparaître un indice textuel et lorsqu'il clique dessus, il accède à la section correspondante.

Les indicateurs de défilement sont une version allégée de la barre de navigation latérale située en haut de l'écran. La barre de progression qui se déplace de gauche à droite représente la distance parcourue par l'utilisateur sur la page.

Un indicateur de progression est un élément essentiel d'une bonne interface utilisateur. Si vous cliquez sur un lien et que la page n'est pas chargée instantanément, vous verrez que le processus a commencé, qu'il y a une réaction.

Le bouton "scroll-to-top" est utilisé sur les pages d'atterrissage longues (généralement 5 écrans ou plus). Il s'agit d'un élément auxiliaire qui ne doit pas être trop clair ou contrasté afin de ne pas entrer en conflit avec le bouton d'action cible. Le meilleur retrait du bouton par rapport aux côtés est de 20 à 30 px.

En cliquant sur le logo, on accède au début d'une page ou à la page d'accueil. Cette action est devenue assez courante.

Lorsque l'utilisateur a fini de faire défiler la page, il ne doit pas se retrouver dans une impasse. Voici quelques options de navigation pour la fin de la page :

• Appel à l'action : Formulaire ou bouton
• Liens vers des documents supplémentaires : Récapitulatifs des événements passés, liens vers d'autres webinaires
• Un pied de page avec la navigation du site web si l'atterrissage fait partie d'un site web à plusieurs pages. L'échelle du pied de page ne doit pas interférer ou détourner l'attention de l'action ciblée.

Placer un formulaire ou un bouton d'appel à l'action à la fin est l'une des choses les plus sensées que vous puissiez faire lors de la conception de votre page d'atterrissage. En théorie, la page d'atterrissage existe pour convertir les visiteurs en acheteurs ou en clients potentiels - toute navigation supplémentaire peut détourner l'attention de cet objectif.

D'autre part, si un utilisateur ne dispose pas de suffisamment d'informations et n'a pas la possibilité d'en apprendre davantage sur votre entreprise, la page peut être perçue comme une impasse, ce qui signifie qu'il y a un risque que l'utilisateur ferme votre page et se rende sur le site d'un concurrent.

La règle principale est qu'il ne doit pas y avoir trop de couleurs sur la page d'atterrissage - seulement une ou deux. La couleur de mise en évidence ne doit pas occuper plus de 10 % de l'espace total, car elle ne fait qu'attirer l'attention sur les éléments qui doivent être visibles.

Chez Tilda, nous appelons ce rapport 90:10 la "règle de la boutique". Dans les magasins de luxe, les articles ne sont jamais entassés sur un cintre dans des allées étroites. Au contraire, chaque article a suffisamment d'espace autour de lui pour être remarqué.

Les magasins chers n'ont pas besoin de prouver ou d'expliquer pourquoi ils pratiquent des prix élevés. Ils ont confiance en leur offre et leurs clients ont confiance en eux. Pas de chichis.

Une page d'atterrissage est essentiellement l'offre d'un produit ou d'un service. Lorsque les gens donnent leur argent, ils veulent être sûrs qu'ils paient pour votre expertise ou pour une excellente qualité. L'utilisation mesurée des couleurs renforcera leur confiance dans ce domaine.

Le cerveau humain utilise activement les stéréotypes : Il s'attend à ce que la page d'accueil d'un salon de beauté soit claire et celle d'un salon de tatouage noire. Le vert est associé aux produits frais, tandis que la technologie est typiquement liée à la couleur bleue. Les règles ne sont pas gravées dans la pierre, mais elles simplifient la communication, comme n'importe quel autre modèle.

Il existe de nombreuses palettes prêtes à l'emploi sur Internet, mais leur inconvénient est qu'elles proposent des combinaisons complexes de 3 à 5 couleurs qui seront ridicules sur une page d'atterrissage.

Si vous avez besoin d'aide pour choisir une teinte spécifique, il est plus fiable d'utiliser ce qui suit :

TildaColors est une collection de palettes de couleurs dans laquelle vous pouvez choisir une couleur ou un dégradé bicolore et l'utiliser dans vos projets. Cliquez sur votre couleur préférée pour copier son code dans le presse-papiers.

Vous pouvez également télécharger n'importe quelle couleur ou gradient au format PNG avec une résolution de 1680px adaptée aux images plein écran.

Material UI Colors est une palette de couleurs pour le design matériel.

Color Claim est un projet du designer Tobias Van Schneider, qui collecte des combinaisons de couleurs réussies depuis 2012. Sa collection se compose principalement de combinaisons bicolores, idéales pour la conception de pages d'atterrissage.

WebGradients est une collection gratuite de 180 dégradés linéaires et combinaisons de couleurs. La plupart des dégradés sont composés de deux couleurs.

Il existe un petit nombre de pages d'atterrissage qui visent à transmettre une atmosphère de bonheur et de joie, en convainquant les gens qu'ils vont passer un bon moment. Il s'agit par exemple de festivals, de concerts et d'autres événements. Dans ce cas, la règle de la "boutique" peut être mise de côté et la sélection des couleurs peut être appliquée en fonction de l'ambiance que vous essayez de créer en utilisant votre goût et votre intuition.

Il est essentiel de prêter attention à l'épaisseur de la police lors de la création d'une page d'atterrissage.

L'épaisseur de la police correspond à l'épaisseur ou à la finesse des caractères du texte. Les valeurs les plus connues sont normal et gras. Certaines polices ne prennent en charge que ces deux options, mais la plupart disposent de paramètres d'épaisseur supplémentaires : light, normal, medium, semi-bold et bold.

Les pages d'atterrissage d'un marathon et d'un produit cosmétique coûteux ont des tonalités différentes, qui peuvent être exprimées par diverses combinaisons de polices.

Une combinaison de base qui conviendra à n'importe quel projet. Elle est normalement utilisée pour créer une page d'atterrissage sans autres éléments marquants.

Une combinaison populaire qui est à la fois subtile et neutre tout en étant capable de faire preuve de dynamisme et d'énergie. Cette combinaison peut être utilisée pour des atterrissages liés au mouvement et à l'activité.

Une combinaison de polices pour les pages d'atterrissage liées à la technologie ou à l'esthétique, qui conserve un ton moderne et progressif. Nécessite beaucoup d'espace blanc et de petites touches lumineuses.

Cette section a couvert plusieurs petits aspects très pratiques de l'utilisation des polices de caractères. Si vous souhaitez en savoir plus, consultez la rubrique"Comment choisir la bonne police pour un site web ou un article".

Les images sont plus faciles à percevoir et plus rapides à lire - il est préférable d'afficher une photo du produit plutôt qu'une description détaillée de son aspect.

Voici quelques exemples d'images d'atterrissage :

• Livre : une tartinade
• Application : une vidéo ou des captures d'écran de l'interface
• Tour : Points de repère le long de l'itinéraire
• Service de livraison de nourriture : une boîte de nourriture
• Webinaire : portrait du présentateur
• Conférence : une image du lieu de l'événement

Les gens se méfient généralement des sites web inconnus, ce qui est tout à fait logique puisque n'importe qui peut créer un site web et qu'il y a suffisamment d'escrocs sur l'internet. Les photos sont l'un des facteurs qui contribuent à instaurer la confiance. Cela ne fonctionne que si les images sont authentiques et montrent votre produit ou des personnes réelles.

Si vous ne pouvez pas prendre vos photos, une banque de photos peut vous aider. Il est essentiel de trouver des photos originales pour que la page d'atterrissage soit attrayante. Le marketing existe depuis longtemps et il existe de nombreux clichés d'images que les gens trouvent irritants : Les tirelires, les photos de personnes au sommet d'une montagne et les poignées de main entre personnes en costume.

Il n'est pas nécessaire d'essayer de transmettre une idée en utilisant des associations simplistes. La photo d'une personne montant un escalier ne dit pas "je suis un coach performant", c'est probablement une mauvaise photo.

Si vous organisez un atelier pour la première fois et que vous n'avez pas encore de photos, vous pouvez trouver dans une banque de photos des images en gros plan d'événements similaires qui vous aideront à faire passer l'atmosphère et l'émotion.

Si vous présentez des photos de votre équipe, il est préférable d'engager un photographe pour s'assurer que les images sont uniformes et cohérentes avec le style de la page d'atterrissage.

Vous pouvez également appliquer un filtre de couleur pour uniformiser vos photos. Si vous avez une couleur d'entreprise, celle-ci permettra également de préserver l'identité du projet.

Le moyen le plus simple d'équilibrer différentes photos est de les mettre en noir et blanc.

Les icônes linéaires fines conviennent aux pages au design minimaliste et aux polices fines. Si la page comporte de grands titres ou des polices audacieuses, les icônes remplies ou les icônes aux contours larges conviendront mieux.

Toutes les icônes d'une page d'atterrissage doivent avoir le même style. Mélanger des icônes linéaires avec des icônes colorées et interchanger des icônes fines et des icônes remplies conduit à un manque de rigueur. Même l'épaisseur des lignes a de l'importance : elles doivent toutes être identiques. Tout le monde ne remarquera pas que les icônes proviennent de jeux différents, mais il aura toujours l'intuition que quelque chose ne va pas.

Si vous utilisez Tilda pour créer votre page d'atterrissage, vous pouvez utiliser les icônes gratuites de la collection d'icônes Tilda intégrées dans l'éditeur. Ouvrez le bloc de contenu contenant une image, cliquez sur l'icône de recherche et accédez à l'onglet Tilda Icons.

Les icônes sont réparties en plus de 45 catégories par type d'activité et peuvent être recherchées par mots-clés. Les concepteurs créent régulièrement de nouvelles séries d'icônes et les catégories s'étoffent. Si vous souhaitez modifier une icône, en changeant sa couleur par exemple, vous pouvez télécharger un jeu gratuitement en suivant ce lien :

Ce projet a été créé par le designer Dario Ferrando. 730 icônes de ligne divisées en catégories sont disponibles gratuitement.

Une grande collection d'icônes avec une fonction de recherche pratique. Les fichiers sont téléchargeables au format PNG ou SVG. Les icônes peuvent être utilisées gratuitement à condition de mentionner l'auteur.

Icônes exclusives et illustrations 3D. Disponibles gratuitement en basse résolution avec attribution obligatoire.

Le prix moyen d'une icône personnalisée dessinée par un illustrateur professionnel est de 10 $. Les icônes prêtes à l'emploi sont souvent vendues par abonnement (environ 10 $ par mois) ou par jeu.

Les icônes sont soumises aux mêmes lois sur les droits d'auteur que les photos. Soyez donc très attentif aux licences lorsque vous utilisez des icônes sur votre page d'atterrissage : vérifiez si les icônes sont gratuites ou payantes et renseignez-vous sur les conditions dans lesquelles elles peuvent être utilisées.

L'utilisation d'animations doit être modérée afin d'éviter que la page ne se transforme en une présentation PowerPoint de lycée.

Voici comment éviter une animation excessive :

L'animation rend la page plus attrayante. Elle n'a pas d'autre signification que d'être une forme de divertissement et un moyen de rendre la page moins monotone. Si vous animez tout, la page redeviendra monotone, voire ennuyeuse.

Les performances du site web sont un élément important à prendre en compte lors de l'utilisation d'une animation. Veillez à tester les pages d'atterrissage animées sur des ordinateurs plus faibles, car tous les appareils ne sont pas en mesure de charger rapidement l'animation.