15 superbes designs de pages de destination
La bonne conception de la page de destination peut faire ou défaire un site Web - car c'est la première chose que vos visiteurs verront. Si vous vous trompez, la plupart des gens ne traînent pas.
Les conceptions de page de destination doivent clairement indiquer le point de vente unique (USP) du produit ou du service et se concentrer sur un seul appel à l'action (CTA), comme amener le visiteur à enregistrer ses coordonnées ou à effectuer un achat. Quel que soit l'objectif, c'est à la conception de la page de canaliser l'utilisateur vers elle, que ce soit par l'utilisation d'espaces blancs, de couleurs contrastées ou de repères directionnels plus explicites. (Et avoir le meilleurs outils de conception Web à portée de main vous aidera à y parvenir.)
Des en-têtes et sous-en-têtes clairs et succincts ainsi que des puces percutantes et faciles à numériser sont à l'ordre du jour. La page de destination doit avoir une marque bien en vue, incorporer souvent une image de héros pour communiquer le produit ou le service en un coup d'œil, et aller droit au but pour éviter que l'attention des utilisateurs ne dérive.
En gardant tout cela à l'esprit, nous avons rassemblé des exemples particulièrement efficaces de conception de pages de destination sur le Web.
Vous cherchez plus d'inspiration de conception? Jetez un œil à notre sélection des meilleures pages d'erreur 404 .
01. Angle2
Angle2 est une agence de design numérique ukrainienne, avec une équipe qui croit de tout cœur au pouvoir de la marque. Apparemment, rien ne les excite plus que de créer des expériences uniques et sur mesure qui `` respirent l'ADN de votre marque '' tout en repoussant les limites de l'interface utilisateur.
Cette nouvelle maison en ligne pour ses services soutient certainement cette affirmation, introduisant non seulement un travail stellaire, mais également deux effets impressionnants. En nous ouvrant sur des polices Montserrat massives trempées dans # 2AF8EB - ou turquoise pour les humains - nous obtenons un entraînement typographique qui vaut la peine d'être savouré. L'astuce devient une caractéristique partout et transmet le sentiment `` angulaire '' avec une superbe illusion de texte inclinée.
Cela utilise essentiellement des éléments gauche et droit pour former une division 50/50 au milieu de la fenêtre. De là, une série de lignes de texte inclinées enveloppées dansLes balises ont des fonctions CSS translate3d appliquées et animées avec TweenMax au survol. En appliquant des couleurs contrastées de chaque côté, il atteint une esthétique pliée à 45 degrés qui définit la conception globale.
L'injection de la couleur d'accent bleu vif dans une palette largement noire et blanche montre également une exécution de bon goût, avec plus de plaisir réservé à la section `` L'équipe '' de portraits de personnes souriantes. Ici, lors de la transition entre chaque photo, vous apercevrez un fabuleux filtre fragmenté qui fonctionne un régal.
02. MADCLEM
Depuis la création du Web, les développeurs et les concepteurs ont poussé et poussé les limites de ce qui est possible, cherchant à faire quelque chose de nouveau ou d'intéressant et repoussant les attentes concernant ce qu'est un site Web et son fonctionnement. Cette expérimentation libre d'esprit est une caractéristique du web étrange et sauvage.
Clément Chenebault's portfolio site, MADCLEM , s'inscrit dans cette riche tradition de repousser les limites, transformant une simple grille de carrés colorés en une masse fluide et malléable de blobbery liquide. Le site entier se plie et se gonfle à chaque mouvement que vous faites, s'agrandit et se contracte pour montrer de petits aperçus des pièces du portefeuille lorsque vous vous frayez un chemin à travers la masse gélatineuse. Le site est une île amusante et ondulée parmi une mer souvent monotone de portefeuilles de concepteurs et de développeurs qui ressemblent à eux.
03. IBM Plex
IBM a récemment publié sa propre police personnalisée, IBM Plex ; il s'agit du premier rafraîchissement de sa police de caractères d'entreprise depuis 1956, c'est donc un gros problème. Pour aider à présenter la police au monde, IBM a demandé au studio XXIX de concevoir et de créer un site Web pour le montrer. L'idée derrière la conception était d'utiliser des images, des animations et des photographies pour raconter l'histoire de Plex tout en présentant la police de manière passionnante.
Ce qui est génial, c'est qu'une grande partie du site sert de moyen de tester la police et d'explorer les multiples styles disponibles à utiliser. Vous pouvez donc vraiment le voir en contexte avant de décider de commencer à l'utiliser dans des projets. Le site est définitivement destiné aux graphistes et rappelle quelque peu une page de portfolio. Surtout parce que, malgré la densité des informations affichées, vous pouvez faire défiler en continu les différentes sections, car vous êtes accueilli par une animation inventive déclenchée par un défilement.
04. Cowboy
Cow-boy est une nouvelle génération de vélos électriques, destinée aux citadins américains. En conséquence, son site Web devait être élégant afin de communiquer la valeur d'un produit qui cherche à révolutionner un marché connu pour produire des vélos peu attrayants et maladroits.
Créé par Ueno, le site utilise une typographie audacieuse, des couleurs vives, de superbes photographies et est vraiment bien construit, offrant une expérience de première classe aux utilisateurs. Le vélo lui-même occupe le devant de la scène et attire immédiatement le regard de l'utilisateur.
Les transitions et le grossissement des fonctionnalités du vélo, lorsque l'utilisateur fait défiler vers le bas, sont subtils afin que le vélo reste central. L'accent mis sur le contenu et non pas sur l'ingénierie de l'expérience signifie également que le site se charge rapidement sur tous les appareils et est très réactif. L'application pour le vélo a sa propre page et les parallaxes entre les fonctionnalités et les données de performance proposées révèlent magnifiquement la nature connectée du produit et la parallaxe dans les limites de l'appareil.
05. Amoureux de l'interface
Conception d'une landing page pour un site dédié à ' amateurs d'interface Ce n'est pas une mince affaire, mais Timothy Achumba - un designer pour Facebook - l'a cloué ici. Le site vise à inspirer les gens, à fournir des conseils pratiques sur le métier de Conception de l'interface utilisateur et célébrez les expériences uniques de différents designers.
La conception met fermement l'accent sur le contenu et utilise un mise en page équilibrée inspiré du premier amour d'Achumba: l'imprimé. «La conception d'Interface Lovers, basée sur une simple grille à trois colonnes tirée d'une mise en page de journal, est simple et propre», dit-il. La belle photographie de portrait attire les visiteurs et souligne l'intérêt du site pour les histoires individuelles.
Pour construire le site, le développeur Iheanyi Ekechukwu a profité de Tachyons, un framework CSS fonctionnel qui permet un contrôle granulaire sur la conception. Le résultat est un superbe design minimaliste, sans cloche ni sifflet.
06. Google Fonts
Initialement lancées en 2010, les polices Google sont désormais vues sur le Web plus de 15 milliards de fois par jour, dans plus de 135 langues à travers le monde. Le Polices Google le site est propre et entièrement réactif, en utilisant Conception matérielle pour sa grille et son style.
Dans son article de blog À propos du projet, le designer Yuin Chien explique que «en intégrant la capacité de jouer avec les combinaisons d'échelle, de couleur et de police, nous invitons tout le monde à découvrir et à utiliser de manière transparente les polices de caractères dans leurs projets». Et elle a raison; l'interface est accueillante et belle. C'est aussi intuitif et amusant à explorer.
Fondamentalement, cela ne vous oblige pas à sauter à travers des cerceaux pour accéder aux polices; ils sont juste là, en haut de la page de destination, prêts à être utilisés. Vous pouvez taper directement dans les champs de texte de la page pour les tester. Et si vous êtes submergé par le choix, Google facilite la réduction des choses avec des cases à cocher pour les catégories de polices et des curseurs pratiques pour le nombre de styles, l'épaisseur, l'inclinaison et la largeur.
07. Revue technologique du MIT
Tant de sites se mettent en quatre pour enregistrer ces pages vues avec des astuces sophistiquées, c'est un soulagement de trouver un site qui garde les choses simples et agréables. Revue technologique du MIT , publié pour la première fois à la fin du 18e siècle, a un long et fier héritage, et son site a été conçu pour présenter un excellent art et être un plaisir à lire.
La page de destination est une joie à voir, en commençant par une histoire de couverture audacieuse, trois histoires secondaires et une liste récapitulative des principales histoires de la journée intitulée «Le téléchargement». Cela permet aux visiteurs d'accéder rapidement à l'essentiel de manière simple.
Un grand CTA rouge S'abonner en haut à droite attire également immédiatement votre attention, canalisant les visiteurs vers les options du site Web payant sans les empêcher de profiter du contenu gratuit disponible.
08. Resn
Examinons maintenant une page qui ne respecte pas la plupart des règles de conception de page de destination, mais qui réussit quand même. Ne jamais faire la queue et utiliser un modèle d'interface utilisateur standard, agence de design Resn a construit une page de destination centrée sur «The Drop», un polygone énigmatique et chatoyant en forme de larme qui agit comme un portail vers la psyché Resn.
Cliquez et maintenez votre souris et vous obtenez, de différentes manières, un kaléidoscope en niveaux de gris sur le thème de la pomme; une chauve-souris avec une planche d'ouija qui utilise ses rayons laser à rayons X pour dépouiller la chair des personnes dans les peintures anciennes; un tube amusant; un Yakult psychédélique qui dispense des cliparts bizarres; et la bonté sait quoi d'autre.
Resn a enfreint de nombreuses règles habituelles pour créer une page de destination, mais le résultat est suffisamment convaincant pour que vous continuiez à fouiller si ce genre de chose fait flotter votre bateau et que vous évitiez de perdre leur temps sinon. «The Drop» fonctionne probablement comme un filtre parfait pour attirer les types de clients avec lesquels l'entreprise souhaite travailler, et c'est une page de destination vraiment magnifique que vous n'oublierez probablement jamais.
09. Présent et correct
Avec sa grille bien agencée d'images glorieuses, le Présent et correct Le site s'adresse à ce qui est sûrement son public principal: les gens qui fétichisent la papeterie.
Un fond de papier millimétré, une coloration gris pâle et une police classique canalisent une ambiance de cahier d'école et chaque panneau affiche un beau produit. Le stock est méticuleusement organisé en catégories affichées dans la barre de menu supérieure, et il est tentant de cliquer sur tout le lot, en commençant par la section `` Ephemera '' au titre intrigant.
10. Monotype
`` Nous sommes l'entreprise derrière le type '', déclare Page de destination de Monotype , et son design sobre mais intelligent va de pair avec cette déclaration confiante. La moitié gauche de la conception de la page de destination est dédiée à l'énoncé de mission de l'entreprise, et il y a une astuce: grâce à une liste déroulante, vous pouvez afficher le texte dans un assortiment de polices, et dans différents poids et styles, pour avoir un avant-goût de Monotype le fait.
Le côté droit de la page est consacré à un lien vers la bibliothèque Monotype, la licence d'entreprise et les actualités de l'entreprise, avec de grandes icônes «M» dans différentes polices, agissant comme des lettrines. Une palette de couleurs sépia en sourdine maintient fermement l'accent sur les polices.
11. Productions LS
Productions LS - une société de production de services d'images fixes et de mouvements basée en Écosse - sait quel est son plus grand atout, et c'est ce qui vous est présenté lorsque vous vous rendez sur son site. Une vidéo en boucle qui remplit la fenêtre présente une sélection du travail de l'entreprise, le tout dans de beaux endroits. Faites défiler vers le bas et vous découvrirez ses trois principaux services: mouvement, images fixes et emplacements.
À ce stade, la page de destination a déjà fait son travail. Tout ce qui se trouve ci-dessous - le lieu magnifique de la semaine, la section `` rencontrer l'équipe '' - n'est que de la vitrine. Si vous cherchez à embaucher LS Productions, vous êtes déjà passé à l'une des principales pages de services, où vous trouverez une mine d'informations pertinentes et bien présentées vous convaincant de la pertinence de l'entreprise.
12. O'Neill
Marque de style de vie américaine O'Neill se concentre largement sur deux choses: le surf et la neige. Et son site américain le montre parfaitement avec une page de destination animée par des images qui vous vend ses gammes de vêtements et son équipement de sport à travers de superbes photographies de grosses vagues et de montagnes enneigées.
Un ensemble de liens déroulants en haut de la page de destination peut vous amener directement à ce que vous voulez si vous savez ce que vous recherchez, mais en dessous, la page de destination se propose de vous séduire, avec plusieurs grandes images animées liens de section et galeries Instagram. Tout cela suffit pour vous précipiter vers la plage - ou le sommet de la montagne la plus proche - mais pas avant de vous approvisionner en équipement O'Neill.
13. Hipstamatic
Pour une application de photographie analogique rétro Hipstamatique , il s'agit de démontrer les fonctionnalités intéressantes, ainsi que l'apparence, la convivialité et la navigation intuitive de l'application, de manière aussi attrayante que possible pour attirer les utilisateurs.
En haut de la page, une bande de galerie défilante présente `` l'esthétique Hipstamatic '' en pratique, tandis qu'un énorme iPhone présente la dernière version de l'application, avec son ClassicMode à l'ancienne et son nouveau ProMode, avec des fonctionnalités plus à jour. . En dessous, un nouveau strapline résume ce qu'est maintenant Hipstamatic: «Faites de belles photos», avec un grand CTA vous dirigeant vers l'App Store.
14. Apple
Il n'est pas surprenant que les maîtres incontestés du design industriel puissent créer un site Web décent et la simplicité sans effort de Apple.com a même gagné un crayon noir D&AD.
La page d'accueil parcourt la vaste gamme de produits de la société et se concentre sur un seul produit chaud du moment. Outre la simple barre de navigation en haut, il s'agit simplement de photographies de produits magnifiquement prises, du nom du produit et de son slogan. Il n'y a même pas de CTA ici - Apple a raisonnablement supposé que son public averti en technologie saura que l'image et le texte sont hyperliens vers plus d'informations. C'est une véritable masterclass de retenue.
15. Pinterest
Pinterest sait ce qu'il veut et n'est pas d'humeur à tourner autour du pot: c'est s'inscrire ou rien. Le scrapbook en ligne populaire est suffisamment confiant dans sa marque et sa réputation en plein essor pour ne pas s'inquiéter trop de se vendre ou de donner aux utilisateurs la possibilité de parcourir certains tableaux et de risquer de se laisser distraire.
Derrière la carte d'inscription, l'un des albums de Pinterest de la photographie glorieuse défile vers le haut, donnant un avant-goût de ce qui est proposé aux utilisateurs. Il s'agit d'une version épurée et embellie de ce que vous obtenez réellement - aucune description verbeuse, aucune publicité ou aucune information de repin n'encombre cette version de la page d'accueil.
Articles Liés:
