Le défilement parallaxe n'a pas besoin d'être présenté lorsqu'il s'agit de discuter des pratiques de conception les plus attrayantes. Généralement, le Parallax Scrolling est largement observé sur les sites Web WordPress. C'est un effet où l'image d'arrière-plan se déplace à un rythme plus lent que les éléments de premier plan. Cela donne l'illusion d'avoir trois dimensions dans une surface plane à deux dimensions. De nombreux jeux utilisent cette tendance depuis longtemps. Cependant, elle a fait son chemin dans la conception Web relativement récemment et a gagné en popularité. Il est si répandu que vous l'avez probablement vu quelque part lorsque vous avez surfé sur le Web, même si vous ne saviez pas ce que c'était. Le concept de défilement parallaxe fonctionne sur la création d'une illusion qui semble attrayante et unique. Il ajoute une valeur esthétique à la conception Web et attire l'attention sur le contenu du défilement de parallaxe, ce qui aide à mettre en évidence le contenu précieux de l'encombrement.
1. Souvenez-vous toujours de l'objectif principal de votre site Web :
2. N'abusez pas de l'effet de défilement parallaxe :
3. Créez des prototypes d'effets de défilement de parallaxe et testez-les : Épinglez
4. Prévoyez le contenu pour une utilisation mobile :
5. Réactivité de votre site Web :
1. L'histoire des Goonies :
2. Dogstudio :
3. Garde-feu :
Cette tendance en matière de design est née lorsque la tendance du design plat s'est accélérée. Avant la tendance du design plat, le design réaliste était à la mode. Avec cette tendance, l'accent serait mis sur les ombres portées, les reflets et autres astuces similaires pour créer une impression de profondeur et un aspect tridimensionnel. Le design plat était trop bidimensionnel et de telles astuces ne fonctionneraient pas avec eux pour créer un aspect tridimensionnel. Voyant cet écart, le défilement de parallaxe est apparu comme un concept pour introduire trois dimensions dans un design plat.
Afin de comprendre le défilement de parallaxe plus en détail, nous devons d'abord examiner pourquoi il s'agit d'une pratique dans laquelle il vaut la peine d'investir.
Certaines personnes pensent que le défilement de parallaxe est une fonctionnalité supplémentaire qui ajoute de la complexité à l'interface utilisateur sans aucune contribution. Cependant, ce n'est pas vrai car les micro-interactions et les animations font une grande différence pour créer des interfaces utilisateur attrayantes par rapport aux visages utilisateur plats. Il détient une excellente valeur est l'expérience utilisateur (UX).
2. Cela aide le processus de narration :
Broche
Si nous devions raconter une histoire à une autre personne, nous pourrions le faire sans effort. Cependant, avoir la même facilité et le même flux de narration dans la conception de sites Web peut être très difficile. Relier les points, faciliter la transition et garder le public accroché est souvent délicat. Le défilement de parallaxe aide à résoudre ce problème en créant une expérience engageante et immersive pour que l'histoire se déroule. Puisqu'il existe une différence dans la vitesse des éléments d'arrière-plan et de premier plan, le rythme efficace des éléments peut améliorer considérablement l'expérience de narration.
3. Réduction significative des taux de rebond :
Broche
Le taux de rebond fait référence au nombre de personnes qui cliquent sur le site Web et cliquent sur le bouton de retour de l'onglet avant de parcourir le site Web en profondeur. Des taux de rebond fréquents et élevés peuvent affecter considérablement le classement SEO. Les sites Web à défilement parallaxe ont des taux de rebond nettement inférieurs, car la plupart d'entre eux sont des sites à défilement d'une seule page. L'expérience dynamique que les utilisateurs obtiennent en voyant le défilement parallaxe les maintient engagés.
Maintenant que nous avons couvert les avantages de l'utilisation du défilement parallaxe, nous pouvons discuter des différents types de techniques de défilement parallaxe disponibles pour les concepteurs de sites Web. Il existe deux grandes catégories d'effets de parallaxe. Effets de parallaxe basés sur le défilement et effets de parallaxe basés sur la souris.
Les effets de parallaxe basés sur le défilement sont des effets de parallaxe que vous rencontrez lorsque vous faites défiler un site Web. Chaque type de défilement de parallaxe répond à un besoin et à un objectif différents. Certains des effets de défilement de parallaxe sont -
1. Défilement d'arrière-plan de parallaxe :
C'est l'un des moyens les plus anciens et les plus efficaces d'utiliser le défilement de parallaxe. En utilisant cela, lorsque l'utilisateur ferait défiler le site Web, l'image d'arrière-plan changerait. Cela aide à raconter des histoires captivantes avec style.
2. Défilement vertical de parallaxe :
Parallax Vertical Scroll est idéal pour les sites Web où vous souhaitez que les utilisateurs sentent que le site Web se déplace avec eux, en utilisant des éléments flottants qui se déplaceraient à des vitesses différentes. Cela peut également être fait en plusieurs couches.
3. Effet de transparence de parallaxe :
L'effet de transparence Parallax est un effet lisse où le texte ou l'image s'estompe lentement lorsque l'utilisateur fait défiler vers le bas. Il réapparaîtrait également lorsque l'utilisateur ferait défiler vers le haut.
4. Défilement horizontal de parallaxe :
Le défilement horizontal parallaxe crée une impression de mouvement horizontal lorsque l'utilisateur fait défiler le site Web. Les éléments de gauche se rapprochent du centre. Cela crée une sensation de mouvement.
5. Effet d'échelle de parallaxe :
L'effet d'échelle de parallaxe permet à l'utilisateur de créer un zoom avant et un zoom arrière sur l'effet tunnel. Le zoom est proportionnel au rapport d'aspect, il crée donc une illusion unique qui a l'air cool. Cela ressemble à un effet de déformation qui emmène l'utilisateur dans une autre dimension.
Maintenant que nous avons discuté des différentes variations des effets de défilement de parallaxe, nous pouvons passer à la discussion des pratiques de conception essentielles à garder à l'esprit lors de la conception d'un effet de défilement de parallaxe pour votre site Web :
1. Souvenez-vous toujours de l'objectif principal de votre site Web :
Broche
Le défilement parallaxe est amusant et peut devenir captivant. Non seulement pour les téléspectateurs, mais aussi pour le concepteur. Cela ne devrait pas se traduire par un site Web qui a un effet de défilement parallaxe impressionnant et qui ne se concentre pas sur le contenu. Le défilement parallaxe, comme les autres éléments de conception, doit fonctionner comme des repères visuels qui doivent guider le visiteur vers les endroits où vous souhaitez qu'il se trouve. Cela devrait aider à atteindre les objectifs commerciaux tels que vendre un produit, diffuser du contenu ou générer des prospects.
Si vous utilisez trop le défilement parallaxe sans aucun contexte ni objectif à l'esprit, vous pourriez avoir des spectateurs impressionnés sur votre site, mais ils ne se traduiraient pas par des prospects ou des conversions efficaces. Utilisez le défilement parallaxe pour augmenter les chances de ce que vous voulez que l'utilisateur fasse. Un excellent hack pour cela consiste à épingler un CTA convaincant mais subtil au bas de la page. De cette façon, lorsque les utilisateurs parcourraient le site, ils verraient le défilement parallaxe en action. Ils auraient également un ou deux boutons constants, statiques et omniprésents. Cela inciterait le visiteur à cliquer sur le bouton pour voir ce qui se passe.
2. N'abusez pas de l'effet de défilement parallaxe :
Broche
L'effet de défilement de parallaxe a un certain facteur wow qui lui est attaché. Il rompt avec la nature banale et stagnante de tout site Web qui crée un intérêt soudain dans l'œil du visiteur. Étant donné que l'utilisation du défilement parallaxe fait bouger les éléments du site Web à des vitesses différentes, il est essentiel de trouver le bon équilibre entre plaisir et chaos lors de l'utilisation du défilement parallaxe. Si le site Web contient de nombreux éléments en mouvement rapide ou trop d'éléments en mouvement, il peut être difficile pour le visiteur de suivre le rythme. Cela jetterait leur guide visuel sur tout le site Web et créerait de la confusion.
3. Créez des prototypes d'effets de défilement de parallaxe et testez-les : Broche
C'est toujours une bonne idée de construire un prototype interactif avant de le finaliser en phase de développement. Cela aide les concepteurs à tester leur effet de défilement de parallaxe avant de le mettre en ligne. Les concepteurs doivent tester l'effet sur la convivialité et l'expérience utilisateur. Étant donné que la parallaxe est si polyvalente et différente dans son approche, elle peut affecter différentes personnes de différentes manières. Il est facile de s'écarter de la parallaxe utile pour créer des effets de défilement de parallaxe qui causent de la distraction. Par conséquent, testez-le soigneusement avec de vrais utilisateurs qui sont objectifs et qui ont le sens de la conception Web. Aussi, testez-le auprès d'un public général puisque ce sont eux pour qui vous faites l'effet.
4. Prévoyez le contenu pour une utilisation mobile :
Broche
Surfer sur le net n'est plus limité aux ordinateurs. Au lieu de cela, plus de la moitié des utilisateurs préfèrent naviguer sur leurs smartphones et tablettes. Google a également modifié les résultats de son moteur de recherche en fonction de ce qui réglemente et classe les sites Web différemment pour les mobiles par rapport aux ordinateurs de bureau. Cela signifie que si votre site Web se classe bien sur la navigation sur ordinateur, mais qu'il a une conception mobile peu conviviale, il ne sera pas bien classé sur Google lorsque vous le rechercherez via votre téléphone. Le défilement parallaxe n'est pas adapté aux mobiles. Les tablettes le supportent dans une certaine mesure, mais pas les mobiles. La solution pratique pour cela est de ne pas utiliser d'effets de parallaxe pour votre site mobile.
La mise en page de base de votre site doit être conçue de manière à être facilement traduisible sur mobile. Toute section qui se chevauche et déborde doit être surveillée. Les arrière-plans ne doivent pas entrer en conflit avec la lisibilité du contenu. Pour le site mobile, ne conservez que les éléments de conception strictement nécessaires. Cela vous aiderait de deux manières - les utilisateurs utilisant le navigateur sur leur mobile pourraient utiliser des données mobiles. Avoir un site plus léger les aiderait à charger le site plus rapidement et à dépenser moins de données pour parcourir votre site. Cela n'affecterait pas non plus votre classement SEO de cette façon.
5. Réactivité de votre site Web :
Broche
Nous n'avons plus de connexions réseau qui prennent des minutes ou des heures pour charger un site Web. Tout le monde a accès à Internet à la vitesse où les utilisateurs peuvent être sur un site Web pendant une seconde et passer à un autre en une seconde de plus. Avec cette facilité de vitesse vient la facilité des options. Les gens naviguent sur plusieurs sites Web chaque jour. Si votre site Web ne se charge pas relativement rapidement, ils ne resteront pas là pour attendre que votre site Web se charge et montrer son incroyable effet de parallaxe. La parallaxe est une astuce lourde et même lorsque vous l'optimisez ; cela prendrait un coup sur le temps de chargement de la page. Il devient de votre devoir de l'optimiser autant que possible si vous pensez que le défilement de la parallaxe contribue de manière significative à votre site Web.
Maintenant que nous comprenons tous les aspects du défilement parallaxe et comment en tirer le meilleur parti, examinons quelques-uns des sites Web qui ont réussi à implémenter efficacement le défilement parallaxe dans la conception de leur site Web :
1. L'histoire des Goonies :
Broche
Ce site Web a utilisé un effet de défilement de parallaxe dédié pour mettre en évidence le film classique The Goonies. Il utilise un défilement de parallaxe immersif pour parler de l'intrigue du film et d'autres détails tels que le nom du réalisateur, la date de sortie, les profils des personnages, etc. Il est créé à l'aide de WebFlow et fonctionne comme un hommage au film classique. Lorsque vous visitez le site Web, la première interaction utilise l'effet d'échelle de parallaxe qui aide l'utilisateur à se sentir comme s'il voyageait à l'intérieur de l'histoire avec le site Web. Chaque effet de parallaxe est utilisé pour diriger le repère visuel pour le visiteur, et cela se fait sans effort. Il utilise également l'audio pour une expérience de narration immersive.
2. Dogstudio :
Broche
Dogstudio est un studio de création qui allie art, technologie et design. Pour le mettre en valeur, ils ont intelligemment conçu leur site Web. Le centre du site Web comporte un chien qui évolue et pivote lorsque l'utilisateur continue de faire défiler le site Web. La lumière sur le chien continue également de changer lorsque vous passez la souris sur ses projets récents. Il existe également des effets de parallaxe basés sur la souris. Au début de la page Web, si vous passez votre souris vers la gauche, le chien s'incline vers la droite et vice versa. C'est une utilisation efficace du défilement de parallaxe.
3. Garde-feu :
Broche
Firewatch est un jeu créé par Campo Santo. Il existe un site Web pour la promotion de ce jeu qui fait une utilisation subtile mais impressionnante du défilement parallaxe. Lorsque vous visitez le site, vous êtes traité avec une image de bannière qui semble immersive. Lorsque vous faites défiler le site Web vers le bas, l'image et le contenu remontent, créant un effet de défilement parallaxe simple mais efficace. Le site Web utilise 6 couches pour le rendre aussi fluide qu'il l'est. Le reste du site Web est statique, où réside tout le contenu. Cela vous aide à lire le contenu et à vous familiariser avec le jeu sans avoir le mal de mer avec des effets de parallaxe trop poussés. Ils utilisent un effet de parallaxe pour capter l'attention, puis fournissent des informations pertinentes pour capter l'intérêt du visiteur.
Vous savez maintenant pourquoi le défilement parallaxe est une tendance de conception si populaire de nos jours. Il présente de nombreux avantages que les concepteurs de sites Web peuvent exploiter. Il n'y a aucune répétitivité avec un autre site Web en raison des nombreuses variantes de défilement de parallaxe disponibles. Les sites Web mentionnés dans cette liste expliquent également comment l'effet peut être utilisé entièrement à des fins de narration ou comme élément supplémentaire pour améliorer l'ambiance du site Web. Comprenez pourquoi et où vous auriez besoin d'utiliser le défilement parallaxe sur votre site Web et utilisez-le. Ne le forcez pas juste pour la valeur esthétique.
