Bonjour, camarade lecteur !

Pourquoi avons-nous besoin de landing pages en 10 blocs, si une information important est sur le premier écran et vous pouvez vous limiter aux rubriques « Qui sommes-nous », « Services », « Tarifs » et « Contacts » ? La réponse est simple : pour absorber l'attention acheteur et motiver entrer en relation avec le produit et vous inciter à acheter le produit.

Plus utilisé techniques d'engagement des visiteurs dans le processus d'achat d'un produit est AIDA(de l'anglais Attention-Intérêt-Désir-Action) et PMPHS(Pain-More Pain-Hope-Solution). Guidé par ces techniques, une structure logique est construite page de destination et déterminer les blocs qui seront présents sur le palier.

j'ai collectionné pour toi 20 exemples visuels de blocs exerçant une fonction informative spécifique. Des exemples vous seront utiles si vous, ainsi que faciliter la communication avec le designer et le concepteur de votre landing page.

Dans cet article, vous vous familiariserez avec la première moitié - 10 blocs. Les 10 exemples restants sont dans le prochain article en août.

20 blocs d'atterrissage - choisissez le vôtre

1. Bloquer les composants du produit, de l'équipement ;
2. Garanties globales (triple) ;
3. Un bloc sur les réalisations/avantages de votre entreprise ;
4. Bloquer les employés de l'entreprise ;
5. Bloc sur les services/départements de l'entreprise ;
6. Bloc sur les partenaires/clients ;
7. CTA (Appel à l'action, appel à l'action) ;
8. Bloquer les avantages du client de l'utilisation de votre produit ("Pourquoi nous?");
9. Bloquer le processus de fourniture du service (livraison, mode de transaction) ;
10. Calculatrice de bloc ;
11. Bloquer avec une promotion + limiteur de temps ;
12. Bloquer avec un cadeau + conditions pour recevoir un cadeau ;
13. Bloc avec une carte de l'emplacement de l'entreprise ("Comment s'y rendre");
14. Bloquer avec les informations de contact ;
15. Tableau de comparaison des blocs ;
16. Identification du bloc "Pour qui ?" ;
17. Bloquer la FAQ.

*La numérotation des blocs est approximative - l'ordre des blocs sur la page de destination dépend de la niche. Vous pouvez déterminer l'ordre des blocs en utilisant tous les mêmes outils Yandex Metrica (, faire défiler la carte, cliquer sur la carte) cet article vous aidera.

Contient information clé pour un visiteur atterrissant, USP de votre entreprise. Il est souhaitable que ces informations soient également compétitives. Selon le créneau, ces informations peuvent être: le prix du produit (à partir de 488 roubles pour 1 pièce), le délai de livraison (livraison en 2 jours), le lieu de production (directement depuis l'Allemagne). Plus de détails peuvent être trouvés dans l'article précédent.

Convient à: sujets de vente en gros ; des niches où l'acheteur n'est pas suffisamment conscient des avantages du produit (principalement du produit).

Le bloc peut être la réponse à la question de l'acheteur "Pourquoi est-ce si cher ?" s'il détaille les caractéristiques du produit. Cela est nécessaire pour créer une image plus claire de l'objet du désir dans la tête d'un client potentiel.

3. Bloquer les composants du produit, de l'équipement

Convient à: descriptions de services complexes ; niches pour l'organisation des loisirs; descriptifs des produits.

Si le bloc sur les caractéristiques du produit montre le produit dans son intégralité, alors le bloc sur les composants décompose le produit (bien ou service) en composants.

4. Garantie de bloc (triple)

Convient à: n'importe quelle page de destination.

Le plus souvent situé après le bloc avec le coût du produit. Il est construit sur la base des objections du public cible et les ferme, démontrant les avantages du service dans votre entreprise.

5. Bloc réalisations/bénéfices

Convient à: tout atterrissage ; un produit de marque d'une entreprise bien connue; particulièrement important dans un créneau hautement concurrentiel.

Particulièrement important pour les entreprises dans un créneau hautement concurrentiel. Par exemple, si plusieurs entreprises proposent le même produit, alors celle qui offre les conditions les plus avantageuses pour la transaction et montre la compétence de son entreprise (depuis quelle année l'entreprise existe, le nombre de projets mis en œuvre, les remises et les cadeaux aux habitués clients, le nombre de points de vente, etc.).

6. Blocage sur les employés de l'entreprise

Convient à: créneaux de services

Utile dans les situations où il est important de ne pas QUEL l'acheteur recevra COMMENT résultat sera atteint.

7. Bloc sur les services/départements de l'entreprise

Convient à: sujets de services complexes; des pages de destination avec plusieurs produits dans un domaine d'application.

8. Bloquer les partenaires

Convient à : n'importe quelle page de destination.

Le bloc augmente la confiance du visiteur si les logos de clients célèbres sont utilisés.

Convient à: info-business; prestations de service; niches où le processus compte (COMMENT) obtenir un résultat.

Un excellent ajout aux cas - démonstration visuelle ÉTAIT / A ÉTÉ, ainsi que des infographies et des écrans d'impression avec des statistiques.

Niches où la démonstration est importante :

À suivre…

Aujourd'hui, nous avons discuté des 10 premiers blocs d'atterrissage, nous en publierons d'autres dans un proche avenir - restez à l'écoute !

En explorant les étendues du réseau, beaucoup remarqueront probablement que la plupart des sites sont construits sur une base de grille. Les éléments ou blocs de ces sites sont situés sur la page non pas au hasard, comme il y a plusieurs années, mais dans un certain ordre et structuré (parfois cela ne se remarque pas à première vue). Ces sites sont bien équilibrés et ont tendance à paraître propres et bien rangés. Une grande partie du mérite de cette netteté appartient à la grille, qui sous-tend la conception et offre à l'utilisateur une structure de site claire et non déformée.

Alors que les grilles représentent généralement de simples intersections de lignes horizontales et verticales à un espacement prédéterminé, de nombreux concepteurs les utilisent pour décorer et accentuer des formes géométriques évidentes et chemins visuels. Nous pouvons voir ces chemins et ces formes dans des sites de portfolio, des galeries, des blogs et d'autres projets créatifs. Ce n'est pas surprenant, puisque la grille a un certain nombre de propriétés utiles et des avantages tels que :

• Création de parcours visuels pour guider les utilisateurs
• Combiner divers composants en un seul ensemble
• Tri des informations

Et, bien sûr, la grille est le meilleur moyen de démontrer la beauté des lignes droites (vous n'aurez pas à aller bien loin). Ci-dessous, nous avons préparé des sites Web dans lesquels la grille est plus qu'une simple base de conception.

Conclusion

Comme déjà mentionné, la grille fait partie intégrante de la conception et transforme facilement le chaos en ordre, et dans la conception de sites Web, plus que partout ailleurs, cette fonctionnalité est vraiment importante. La plupart des utilisateurs veulent des informations rapidement et facilement, et aucun meilleure façon que de leur présenter une structure claire et bien organisée.

Non, cela ne signifie pas du tout que apparence Le site doit être linéaire et simple. Parfois, même des formes géométriques simples, habilement "diluées" avec des couleurs, des images et des graphiques (rappelez-vous), peuvent être vraiment attrayantes. Qu'est-ce que tu penses? Une division aussi explicite en blocs ne semble-t-elle pas attrayante ?

La question de l'évolutivité du site est pertinente pour chaque concepteur de sites Web. D'accord, lors de la création du produit visuel d'un auteur, je veux qu'il reste tout aussi beau et pratique pour les utilisateurs de n'importe quel appareil. L'option est inacceptable lorsqu'un blog ou un site Web a fière allure sur un écran avec une résolution de 1920x1080px et est complètement illisible sur un écran de smartphone avec des paramètres de 240x320px.

Il y a 10-15 ans, il n'y avait pas une telle variété et un tel nombre de moniteurs. Par conséquent, la conception de sites Web était facile. Vous créez une conception statique régulière pour une largeur d'écran fixe et vous pouvez être sûr que la plupart des utilisateurs verront le site comme prévu.

Aujourd'hui, non seulement les utilisateurs disposent d'écrans avec une grande variété de résolutions, mais 3,5 milliards de personnes accèdent à Internet à partir d'appareils mobiles - netbooks, tablettes, smartphones, etc. Créer des sites Web en utilisant les anciennes méthodes n'est plus comme il faut.

La première solution qui est venue à l'esprit de nombreux développeurs était de créer uniquement une version "légère" distincte du site pour les appareils mobiles. C'est ce que de nombreux portails majeurs ont fait. Cependant, ces dernières années, le nombre de différents types et sous-types d'appareils à partir desquels les utilisateurs accèdent au réseau a augmenté à un rythme incroyable. Et vous devez également tenir compte du fait que les propriétaires de tablettes ou de smartphones consultent également la version complète du site. Ainsi, les concepteurs et développeurs Web ont finalement eu l'idée d'une conception "réactive".

Jusqu'à présent, vous pouvez rencontrer plusieurs versions de la façon dont différents informaticiens comprennent la "conception réactive". Essayons de comprendre quelles sont les options pour développer une conception de site Web.

Conception statique

"Statique" ou "statique" fait référence à un site composé de pages HTML immuables. Un tel site implique la présence d'un thème fixe avec une largeur fixe et contient le plus souvent une ou littéralement plusieurs pages. Pour afficher un tel site au centre de l'écran, 1000 px suffisent. Le contenu sera toujours centré.

Il convient également de considérer que seule une personne ayant une bonne expérience en développement Web peut mettre à jour un site statique. Il n'a pas de panneau d'administration, donc toutes les modifications doivent être apportées via le code source.

Avantages de la conception statique :

• Gain de temps et d'efforts lors du développement ;
• Nécessite moins de charge d'hébergement ;
• Les images, le matériel vidéo et les bannières peuvent être affichés sans crainte qu'ils se chevauchent ou se déplacent à différentes résolutions d'écran.

Inconvénients de la conception statique :

• Sur le appareil mobile le site sera affiché avec une barre de défilement horizontale ;
• Les moniteurs à écran large affichent plutôt mal un design statique - une option qui n'est pas pour ceux qui recherchent la visibilité.

Il y avait autrefois beaucoup plus de sites statiques - l'émergence et le développement des CMS ont contribué à réduire leur nombre au profit de sites dynamiques. Exemples de sites statiques :

Conception dynamique

"La conception réactive est l'une des tendances les plus actuelles en matière de développement de sites Web, qui est apparue sérieusement et depuis longtemps" - presque tous les sites Web dédiés au développement Web et . Trouver ce que c'est n'est pas difficile. Cependant, il existe quelques subtilités liées à la compréhension et à la perception d'un tel design. Regardons-les.

Conception "caoutchouc"

La principale caractéristique de cette conception est que la largeur des colonnes est définie en pourcentages et non en pixels. Par conséquent, la conception en "caoutchouc" à n'importe quelle résolution de moniteur s'étend sur toute la largeur de l'écran. Faire une telle conception, en particulier lors de l'utilisation d'une mise en page en bloc, est un peu plus difficile qu'une mise en page fixe, mais l'utilisateur ne verra pas de champs vides sur la page. Il convient de noter que la conception en caoutchouc a commencé à être largement utilisée dans RuNet, tandis qu'en Occident, les développeurs sont restés attachés à la conception statique pendant très longtemps.

Cependant, la conception simple en caoutchouc présente certaines limitations et inconvénients. Avec la large gamme de tailles d'écran dont disposent les appareils modernes, il est difficile de mettre en œuvre une conception fluide pour que tout soit aussi beau à n'importe quelle résolution, de sorte que la conception ne «se propage», de sorte que les images et les vidéos ne sortent pas de limites d'îlots, etc. Pour cette raison, d'autres solutions étaient nécessaires pour créer un site véritablement universel.

Conception adaptative

Pour rendre le site aussi beau sur téléphone mobile et sur un grand écran, les développeurs de certains sites ont décidé de développer plusieurs options de conception, en fait indépendantes, pour différents appareils. Lorsqu'un utilisateur visitait le site, le serveur déterminait le type d'appareil et la résolution de l'écran et "offrait" l'une ou l'autre version du site. De plus, chaque version a été pré-optimisée pour différentes résolutions. Des images plus petites ont été utilisées pour les versions pour écrans basse résolution, et certains éléments ont été complètement supprimés. La disposition des blocs elle-même était également différente de la "grande" version.

Le responsive design se justifie lors de la création de projets à grande échelle : portails d'information, boutiques en ligne, forums, sites Web d'entreprise et autres ressources similaires. Il est particulièrement impressionnant sur les moniteurs avec une diagonale d'au moins 15,6 ''.

Le principe d'adaptabilité repose sur la création d'une URL unique qui ajuste le contenu pour s'adapter différents formatsécrans. Exemples:

Voyez comment la disposition du texte et des images change sur différents écrans. Pourquoi c'est cool ? L'une des raisons est que Google préfère ces ressources dans Résultats de recherche. Une autre raison est que ces sites sont plus faciles à concevoir et à entretenir, ce qui facilite le travail de nombreuses personnes.

Conception "réactive"

La dernière méthode proposée par les concepteurs de sites Web était la conception "réactive" (eng. responsive design), qui s'opposait à la conception "adaptative" habituelle (eng. adaptive design), bien que jusqu'à présent ces termes soient souvent confondus et utilisés dans un sens similaire. La conception "réactive" combine les caractéristiques des conceptions adaptatives et "fluides". Il s'adapte automatiquement à n'importe quelle largeur d'écran, tout comme le caoutchouc. Dans le même temps, lors du processus de réglage, l'emplacement des blocs, la taille des images peuvent changer. Certains éléments peuvent également apparaître, disparaître ou changer. Par exemple, l'habituel menu horizontal peut changer en liste déroulante.

Un point encore plus important concerne les endroits à partir desquels les gens viendront sur votre site. Par conséquent, il est très important de prendre en compte toute vitesse Internet, car un grand nombre de personnes vivent dans des régions éloignées où la vitesse Internet n'est même pas de 1 Mb/s. Il existe une étude selon laquelle 57% des utilisateurs quitteront votre site s'il met plus de quelques secondes à se charger. Il n'y a pas si longtemps, Google a commencé à prendre en compte la vitesse lors du classement des sites. elle ne fournit pas grande influenceà la position des sites avec une vitesse de chargement moyenne, mais si la page ne se charge pas dans un certain temps, alors l'algorithme de recherche applique des pénalités à un tel site.

Tout cela nous fait examiner de plus près la vitesse d'Internet et offre à l'utilisateur la possibilité de télécharger du contenu assez rapidement aux vitesses les plus basses. Autrement dit, la conception "réactive" n'est plus seulement une histoire de tailles d'écran, mais divers scénarios, dont les solutions doivent être flexibles et réfléchies "de et vers".

Auparavant, sur Internet, un type de mise en page tabulaire était répandu, auquel . Cependant, au fil du temps, cette approche de création de la structure du site est devenue obsolète et a été remplacée par une disposition en blocs.

Différences entre la mise en page en bloc et tabulaire

Si la disposition tabulaire implique que le contenu de la page se trouve à l'intérieur de la balise

, alors le concept de disposition de bloc est basé sur l'utilisation active de balises universelles est un tableau qui doit être utilisé pour afficher des données tabulaires et rien de plus.

Le seul inconvénient tangible de la mise en page en bloc est que les sites créés dessus peuvent être affichés différemment dans les navigateurs. Pour éviter cela, vous devez rendre la mise en page "inter-navigateur", c'est-à-dire affichée de la même manière par n'importe quel navigateur.

L'essence de la disposition des blocs

À éditeur graphique une mise en page du site est créée: elle indique où se trouvera quelle zone de la page (en-tête, bas, barre latérale, contenu principal) et combien d'espace cela prendra, les images, les arrière-plans sont en cours de préparation.

Chaque partie de la page est placée dans son propre bloc