18 exemples de pages de destination avec un design intéressant et des puces inhabituelles

Le principal problème des débarquements les plus modernes - ils semblent tous avoir été faits avec une copie carbone. Et où est la créativité, le feu, où la frénésie du design?

Dans cette compilation, j'ai rassemblé des pièces intéressantes et des effets inhabituels. Certaines d’entre elles ont été réalisées par des développeurs et concepteurs Web de Texterra, et d’autres ont été trouvées dans des espaces ouverts Runet. Non sans exemples de design dégoûtant et de pure folie - à la fin de l'article, vous rencontrerez le hamster tueur et Snow Maiden avec un seau.

Voir, être inspiré, appliquer vos idées préférées dans la pratique, les mélanger avec les vôtres et ne pas oublier de procéder à des tests A / B - c'est la seule recette correcte pour créer des pages de renvoi géniales.

Formulaire étendu

Habituellement, sur une page, utilisez le formulaire de demande standard comportant plusieurs champs. Le plus souvent, le client doit spécifier les informations de contact - prénom, nom, mail ou téléphone. Mais dans certains domaines difficiles, il vaut mieux ouvrir le sujet plus en détail. Voici comment cela a été fait dans Texterra: sous la forme d’une page de destination sur dellservers.ru, le client peut sélectionner un module, des paramètres, des tâches de serveur. Peut réinitialiser les valeurs si quelque chose s'est mal passé.

C'est pour quoi? De toute façon, le propriétaire du débarquement aura ses intérêts, même s’il n’ya que deux ou trois champs dans le formulaire. Mais le client sera intéressé à creuser plus profondément. Ne vous contentez pas de commander, mais choisissez votre propre option.

Deux boutons CTA

Sur la page d'arrivée du planificateur de tâches wunderlist.com/ru - deux appels à l'action simultanés qui se renforcent mutuellement: "Créer un compte gratuit" et "Télécharger la liste de lecture". Les utilisateurs cliquent sur les deux liens, la conversion augmente et la page de destination fait parfaitement son travail.

Chiffres spécifiques (résultats)

Ce n'est pas une fonctionnalité nouvelle, mais qui fonctionne toujours. Montrez à vos clients ce que vous avez accompli en chiffres: ceci est plus clair que les phrases abstraites «nous sommes les meilleurs», «nous avons des centaines de projets terminés», etc. Regardez la page de destination de smartprogress.do: vous pouvez voir immédiatement combien de personnes ont déjà rejoint le projet, combien d'objectifs sont définies, combien de réalisations ont été accomplies.

Nous effectuons des atterrissages en tenant compte des intérêts de l’Asie centrale et de la convivialité. 7 jours - et l'atterrissage est prêt. Contact!

Personnalisation

Des atterrissages à motifs sans visage - br-r, ce qui pourrait être triste! Revivez votre page, ajoutez du feu, intéressez un client potentiel. Par exemple, sur la page de création du site Web Texterra, vous trouverez des photos d'employés directement impliqués dans ce processus. Le visiteur entre et voit: aha, ce ne sont pas des développeurs abstraits qui seront impliqués dans ma ressource, mais bien vivants Svyatoslav, Polina, Artyom et d’autres.

Formulaire de réponse pratique

Sur de nombreux sites et atterrissages, vous pouvez poser une question uniquement via le formulaire. Cela signifie que vous devez spécifier le nom et le prénom, laisser le téléphone et l'email. Parfois, en général, vous devez saisir captcha et codes - horreur! Il est clair que cela est fait pour obtenir des pistes. Mais il y a une autre option - comme sur l'atterrissage "Cerebro Target". Si vous êtes inscrit à "VKontakte", vous n'avez rien à remplir, prenez-le et écrivez. Et le client est à l'aise, et le propriétaire est bon - le contact est laissé, vous pouvez continuer à travailler.

Avis clients

Vous pouvez demander aux clients de faire part de leurs impressions et de publier les textes reçus sur la page de destination. Mais le problème, c'est que le visiteur ne vérifiera d'aucune manière - de vraies réponses ou de fausses réponses. Il vaut mieux aller de l'avant et convaincre les visiteurs de cela. Sur huskypark.info, qui a développé VelikaPlaza, sont fournis les mots des clients Instagram avec des liens vers leurs comptes. Tout honnête - allez voir.

Démonstration des résultats

Hipstamatic est une application avec laquelle vous pouvez appliquer divers filtres aux photos de votre téléphone portable. L'atterrissage est efficace, tout d'abord, car il présente de beaux exemples de photos traitées dans cette application. Ainsi, l'utilisateur voit immédiatement le résultat et prend rapidement une décision d'achat.

Effet de parallaxe

Le défilement de la parallaxe est un effet spécial en raison duquel les images d’arrière-plan se déplacent un peu plus lentement que celles du premier plan. Voici comment sur le site valenkivodka.com. Proscroll Landing - une bouteille de vodka vous suivra de haut en bas, en se déplaçant lentement. Des bulles magiques sur tout le fond vous rappellent le festin généreux du Nouvel An. Mentalement avéré!

Animation

En général, l'animation fonctionne beaucoup. Les images et les objets en mouvement attirent et retiennent l'attention de l'utilisateur, dirigent son regard vers les éléments les plus importants de la page de destination (bouton CTA, minuterie, widget, etc.), remplacent partiellement le texte. Un exemple est sur madwell.com. Suivez le lien - les chaînes bougent. Et non seulement ils bougent, ils écoutent chaque mouvement de la souris.

Attention, la question: quelle fonction cette animation remplit-elle? Vous pouvez répondre dans les commentaires à l'article.

Des illustrations

Ne parlons pas banal: les illustrations de l'auteur sont capables de faire revivre l'atterrissage le plus pourri, tout le monde le sait. Il est important que les images répondent au thème du débarquement et aux attentes de son public cible. Voir: sur le site Web des aliments sains pour bébés, les images marcandfisa.com sont stylisées comme des dessins d'enfants. Un succès en Asie centrale: les mères et les pères qui achètent des produits devraient y aller.

Un autre exemple sur la page de destination de satellite-express.ru. L'illustration complète parfaitement le titre: "Le principal problème avec le diabète est de trouver un équilibre."

Multilending

L'offre d'atterrissage change en fonction des demandes des utilisateurs. A marqué "vendre le chalet" - lisez sur le site à propos du chalet. "Garage" marqué - sur le garage. Nous avons écrit plus à propos de cette technologie dans l'article sur la manière de devenir multi-propriétaires nous-mêmes.

Voici un exemple de multi-crédit pour la société Oviont, ce que nous avons fait.

Le client prévoyait de créer des pages de renvoi distinctes pour trois produits: les outils de bureautique.

Sur le premier écran, vous avez une brève description des produits. Chaque bloc avec la description est décoré individuellement. L'utilisateur sélectionne le produit approprié et procède à la description détaillée.

Pour chaque produit, nous avons créé des sections détaillées. La quantité totale de contenu sur le multi-étiquetage est d’environ 30 000 caractères. Chaque page a des sections détaillées:

  • description de la fonctionnalité;
  • modules supplémentaires;
  • questions fréquemment posées sur l'utilisation;
  • les taux;
  • critiques.

La section "Tarifs" sur la page de chaque produit fonctionne différemment. Par exemple, sur la page de tarification Kontur.Ekstern, un utilisateur peut lire les descriptions de trois plans tarifaires, en sélectionner un et s'abonner à un ou deux ans.

Dans ce cas, le recours à la location multiple est justifié, car le visiteur évalue immédiatement trois offres et choisit la bonne. Si vous représentez chaque produit sur une page de destination distincte, certains utilisateurs ne trouveront pas celui dont vous avez besoin et ne passeront pas de commande.

Effet de survol

Lorsque vous survolez le curseur, les images changent de couleur, s'agrandissent, font un zoom avant ou arrière. Cela rend l'atterrissage inhabituel et attire l'attention sur ses éléments individuels. Si vous passez le curseur de la souris sur la ligne "Photos et discussion avec les huskies", une photo d'un chien apparaîtra. Sur la ligne "Family arbor-grill" - l'intérieur de cette tonnelle, etc.

Schémas divisés

Écran partagé ou écran partagé - une technique de conception très efficace. Le but est d'attirer l'attention de l'utilisateur sur chaque partie de l'écran - afin que les informations ne soient pas perdues exactement. Ainsi, vous pouvez annoncer deux produits, deux services, deux avantages importants, etc. Voici comment cela se fait sur la page de destination de baesman.com.

Graphiques 3D et réalité augmentée

L'atterrissage est conçu pour l'application Qubi. Ce jeu est pour les enfants de 3 ans et plus et les adultes. L'essence du jeu est simple. Dans un premier temps, l’utilisateur, selon le schéma proposé, colle un vrai cube de papier, de carton ou de bois.

Ensuite, il installe l'application, l'ouvre sur le smartphone et "regarde" le cube à travers la caméra de l'appareil.

Sur l'écran d'un smartphone ou d'une tablette, le cube prend vie. L'utilisateur joue dans la version tridimensionnelle de "Snake", "2048", "Labyrinth". Dans ce cas, vous devez gérer le jeu en utilisant un vrai cube. Pour contrôler le cube à deux mains, vous devez utiliser un support spécial pour smartphone, que vous pouvez assembler vous-même.

Le modèle tridimensionnel du cube est visible dans l'illustration (gif).

Ce que le client voulait

Le client a demandé de faire un atterrissage, ce qui met l'accent sur la fonctionnalité du jeu: l'utilisation de la réalité augmentée en trois dimensions. En particulier, il souhaitait voir l'effet des faces en mouvement d'un cube en trois dimensions, dont la face active est inscrite sur l'écran de l'appareil du visiteur.

Ce que nous avons fait

Nous avons implémenté la 3D dans les transformations 3D CSS3. Les transitions entre les faces du cube se font en JavaScript pur avec un suivi des événements de glisser et de toucher. Grâce aux transitions inhabituelles entre les écrans, l'utilisateur crée une impression d'écran en trois dimensions. Ceci est particulièrement prononcé sur la version de travail de la page de destination.

Pour la version finale de l'atterrissage, nous avons créé une version plus réaliste du cube. Contrairement à la version de travail, dans la version finale du cube, la rotation s'effectue de l'extérieur, pas de l'intérieur. La sensation en trois dimensions est renforcée par l'animation des en-têtes.

L'atterrissage est totalement adaptatif.

Sélection interactive des couleurs de peinture d'intérieur et de mobilier

La page de renvoi inhabituelle "DSK.Color" permet de choisir indépendamment la couleur des meubles et des objets d'intérieur à l'aide d'une palette interactive.

La société "DSK.Color" peint n'importe quelle surface dans différentes couleurs. Vous pouvez commander la coloration de meubles, appareils ménagers, vélos, instruments de musique et autres articles. Le client peut choisir n'importe quelle couleur.

Le service le plus populaire est la peinture de meubles et d'objets d'intérieur. Cela représente environ 80% du travail du client.

Ce que le client voulait

Le client a demandé de faire un atterrissage brillant et mémorable "avec un appel à tout peindre". Il avait des idées pour créer des images de meubles au format 3D, afin que le visiteur "puisse se tordre et voir l'objet coloré de différents côtés".

Ce que nous avons fait

Nous avons proposé au client une idée: donner au visiteur la possibilité de choisir la couleur du mobilier et des objets d'intérieur.

Pour ce faire, une image de la pièce dans laquelle le visiteur pouvait peindre les objets principaux avec une palette déroulante était proposée à la page de destination. Sur la base des couleurs et des éléments sélectionnés, l'utilisateur peut calculer le coût des services. Le premier prototype ressemblait à ceci.

Le client a vraiment aimé l'idée. Nous avons donc créé un prototype fonctionnel de la page de destination. La partie principale ressemblait à ceci.

Nous avons convenu avec le client de laisser la possibilité de peindre la table, les chaises, les portes et les éléments de cuisine. Ce sont les principaux éléments que l'entreprise peint.

Après avoir accepté le prototype, le concepteur et le concepteur de la mise en page ont rejoint le travail. Le premier a esquissé tous les éléments en svg (il s’agit d’un format graphique). La seconde a déroulé et ajouté une palette de couleurs aux zones svg. Après cela, une fenêtre modale a été implémentée. Grâce à lui, l'utilisateur peut vérifier deux fois les couleurs et les objets et envoyer une demande pour le service.

Préchargeurs insolites et ordinaires

Avec l'aide d'un préchargeur ou d'une spinner, toute page de destination peut être rendue plus pratique et plus attrayante. Dans cette section, nous aborderons les préchargeurs et examinerons les exemples de ces éléments créés par les experts Texterra.

Qu'est-ce qu'un préchargeur et quelles tâches il résout

Un préchargeur ou une roulette est un signe qui apparaît à l'écran avant le chargement de la page. Vous voyez ces éléments quotidiennement lorsque vous utilisez Internet. Vous trouverez ci-dessous un exemple de préchargement.

Le préchargeur résout une tâche pratique: il informe l'utilisateur que la page est en cours de chargement et remplace l'image non attrayante du téléchargement. Cela doit être clarifié.

En raison des caractéristiques techniques des navigateurs, les pages des sites sont chargées de manière inégale. Pendant le chargement, la mise en page peut flotter. Si la page se charge pendant quelques secondes, pas une fraction de seconde, l'utilisateur regarde une image peu attrayante pendant un moment.

Les préchargeurs sont mis en œuvre à l'aide d'outils de développement standard frontaux: HTML, CSS, JavaScript et de bibliothèques et de cadres supplémentaires, tels que jQuery, React.

Comment nous améliorons les atterrissages avec les préchargeurs

Nous créons des préchargeurs uniques, y compris animés. Voici quelques unes de nos œuvres.

  • Qubi

Pour l'atterrissage Qubi, nous avons créé un préchargeur qui répète le menu de navigation. Cela permet à l'utilisateur de comprendre le principe de la gestion de la page avant son chargement.

  • Levellen

Sur le site Web de Levellen Interiors, nous avons utilisé un préchargeur sous la forme d’un logo d’entreprise. C'est un élément supplémentaire de la stratégie de marque du site.

  • Whalenet

Sur la page de destination de Whalenet, vous pouvez voir un disque en forme de rectangle turquoise.

  • Parielle

Le site de Parielle a une précharge classique en forme de cercle.

  • Projectto

Sur le projet d'atterrissage a utilisé un préchargeur sous la forme d'un rectangle.

L'apparence du préchargeur est généralement discutée au stade de la conception de la page de destination.

Interactif

Sur la page de destination du centre d’affaires Fidel, l’opportunité de consulter des bureaux gratuits et de faire une demande de location est exceptionnellement mise en œuvre.

Comment fonctionne l'atterrissage

Landing fournit des informations sur la location de locaux dans un centre d'affaires. Le secret principal de la page de destination se trouve dans la section "Bureaux". Ici, l'utilisateur peut voir la disponibilité de bureaux gratuits à chaque étage du bâtiment.

Lorsque vous passez le curseur de la souris sur un bureau libre, le bouton "Détails" apparaît.

En appuyant sur le bouton, l'utilisateur est dirigé vers la page contenant des informations sur le bureau et ses photos. Sur cette page, vous pouvez laisser une demande de location de locaux.

Caractéristiques de la mise en oeuvre

Notre designer a dessiné les formes de bureaux, les dessins ont été réalisés au format svg. Ces dessins se superposent aux plans d'étage. Lorsque l'administrateur du site dans le panneau de configuration constate que le bureau est libre, le script inclut l'affichage d'une image sur le plan et la possibilité d'accéder à la page avec des informations et un bon de commande. Lorsque l'administrateur constate que le bureau est occupé, le script désactive l'image de l'image sur le plan.

Bonne conception

Dans cet exemple, il n'y a pas de copeaux techniques ni d'effets de conception compliqués - l'ensemble de l'atterrissage prend une belle photo: fond d'écran, couleurs, de délicieuses photos du caviar d'Astrakhan. Une page astrahancaviar.ru - Un bon exemple de la façon dont un designer souhaite acheter un produit. Et manger immédiatement!

Enfin, à propos des plaies - quelques exemples d'atterrissages terribles. Pour contraste, feyspalma, agonie impuissante et tout ça. Je ne décrirai pas ce qui ne va pas en eux - je vous suggère de résoudre ces problèmes vous-même. Ita-a-ak ...

Ecrivez dans les commentaires que ce n'est pas le cas avec ces pages d'atterrissage :-) Eh bien, si le développement d'une carte d'atterrissage est nécessaire, remplissez le formulaire. Appelons, nous consulterons, nous aiderons à décider de la fonctionnalité.

Laissez Vos Commentaires