Une prédiction quelque peu audacieuse: 2014 restera l'année de la parallaxe. Avant de minimiser cette tendance qui réémerge, réfléchissez-y. Avec les développements en HTML, CSS et jQuery, et davantage de personnes utilisant des connexions Internet à haut débit, il n’est pas exagéré de penser que cette technique astucieuse explose réellement cette année.
Les effets de défilement Parallax sont amusants, conviviaux et permettent de nouveaux types d’idées créatives dans le processus de conception de sites Web. Le résultat final est une technique qui peut être amusante à créer et peut créer une expérience hautement visuelle et interactive pour les utilisateurs.
Qu'est-ce que la parallaxe?
La parallaxe est une technique dans laquelle les couches de contenu sont conçues pour fonctionner et se déplacer ensemble. La façon dont cela fonctionne est que les images d'arrière-plan, du milieu et du premier plan sont créées et conçues pour se déplacer à des vitesses différentes, de sorte que les éléments à l'écran se déplacent.
La parallaxe peut fonctionner avec une fonction de clic ou de défilement (appelée défilement parallaxe) et les éléments peuvent se déplacer de haut en bas ou d'un côté à l'autre. Dans certaines conceptions de parallaxe, tous les éléments se déplacent à l'unisson, de sorte qu'il apparaît que vous passez d'un écran à l'autre. D'autres conceptions de parallaxe permettent plusieurs pièces mobiles de manière à créer presque des animations actives.
Les effets de parallaxe ne sont pas nouveaux. Ils existent depuis des années. (Pensez aux jeux vidéo et aux gifs animés.) Mais jusqu’à récemment, ces effets étaient minimes et souvent ridicules. La technique était difficile à créer et à bien fonctionner, et les concepteurs et développeurs restaient généralement à l’écart.
Mais Apple a de nouveau contribué à faire en sorte que cette technologie soit plus répandue, en utilisant des effets de parallaxe lors du lancement d’iOS 7 l’automne dernier. Et de nombreux concepteurs ont suivi, avec des effets de défilement de parallaxe apparaissant partout sur le Web et dans diverses applications. Mais cette fois-ci, la technique était beaucoup plus raffinée et offrait une expérience utilisateur mémorable.
Ce sera une année décisive
L’accent mis sur l’expérience utilisateur est la raison pour laquelle les effets de parallaxe vont vraiment décoller cette année. La technique peut être utilisée pour créer un site Web mémorable sans trop de clics. Les effets de défilement de parallaxe peuvent créer un sentiment de mystère pour l'utilisateur sous la forme d'une? Histoire? se déroule. À chaque nouveau mouvement, quelque chose de nouveau se dévoile pour l'utilisateur. Cet effet peut créer une intrigue et un désir de continuer à interagir avec un site Web. (Toujours un bonus pour ceux qui suivent le temps sur leur site.)
Parallax propose une approche différente de la présentation du contenu et de la conception. Les concepteurs expérimentent la parallaxe parce que:
- C'est marrant
- Cela crée une expérience utilisateur nouvelle et distincte
- Cela encourage les visiteurs à rester plus longtemps
- Il fait appel à notre sens de la curiosité
- C'est une nouvelle façon de créer une histoire visuelle
Grands effets sur "une page"
Les effets de parallaxe fonctionnent en harmonie avec une autre tendance en matière de conception de sites Web - la conception à page unique. Vous pouvez créer différents écrans de contenu qui ressemblent et agissent presque comme des pages différentes mais qui sont en réalité tous sur une seule page.
Certaines de mes pages préférées de défilement de parallaxe? inclure des effets qui permettent des expériences de visionnement distinctes. Souvent, la couleur change lorsque vous accédez à un nouveau contenu ou un échange d’image se produit. Cyclemon fait un excellent travail avec cet effet d’une manière très simple. Avec chaque écran de défilement, l'utilisateur obtient un nouveau fond (dans une couleur distincte) et un nouveau style de vélo au premier plan. Le site est robuste mais ne s'enlève jamais. Vous pouvez faire défiler chacun des 19? rapidement ou utilisez la navigation légère sur le côté droit de la page pour sauter des sections. (Ce qui vous montre bien tout ce que vous avez sauté en un éclair.)
Le New York Times a également été l’un des leaders en matière de conception de parallaxe avec des fonctionnalités remarquables telles que "Tomato Can Blues". et le primé? Snow Fall.? Le site Web du journal fait un excellent travail en utilisant la parallaxe pour raconter une histoire avec du mouvement, du texte, des vidéos et des images. Dans "Tomate Can Blues," les images de style bande dessinée prennent vie avec un mouvement simple grâce à la parallaxe. Dans? Snow Fall ,? L'histoire longue est racontée avec une combinaison d'effets qui vous permettent de naviguer à travers le contenu.
Plus de parallaxe
Bien qu'il existe des avantages distincts pour une variété de styles de conception différents, la parallaxe a certains de ses propres. Simple, les effets peuvent être très amusants. Cela seul engagera probablement les utilisateurs.
Des effets sympas attireront l'attention des utilisateurs. Mais les techniques de parallaxe peuvent aussi avoir d'autres avantages:
- Style de narration distinct: Avec tout l'accent mis sur le contenu, ce style de création de contenu racontant une histoire est une option viable.
- Appels à l'action: Les effets de parallaxe peuvent être utilisés pour indiquer aux utilisateurs ce que vous souhaitez qu'ils fassent. Que ce soit en cliquant sur un lien, en remplissant un formulaire ou en achetant un article, les effets de parallaxe peuvent amener les utilisateurs à une action directe.
- Engagement: Il ne fait aucun doute que les sites avec des effets de parallaxe efficaces et bien conçus ont des durées d'engagement plus longues avec les utilisateurs.
- Caractériser un produit: Vous pouvez utiliser des effets de parallaxe pour afficher un produit. Pensez aux vues à 360 degrés des articles sur certains sites de vente au détail. Laissez les utilisateurs voir vraiment un article avant de l'acheter.
Conseils de parallaxe
Les effets de parallaxe ne concernent pas tous les types de sites. Vous devez savoir ce que vous voulez obtenir de cette technique avant de l’utiliser simplement parce qu’elle est à la mode.
Et si les effets de parallaxe peuvent se compliquer à la hâte, le mieux est de garder les choses simples. Décidez quel effet vous souhaitez utiliser et respectez-le sur tout le site. Fournissez des pointeurs aux utilisateurs en cas de doute sur le fonctionnement du site. (Par exemple, si un parchemin déplace quelque chose de gauche à droite plutôt que de haut en bas, prévenez les utilisateurs.)
Utilisez la parallaxe pour raconter une histoire. C'est la meilleure utilisation de la technique. Assurez-vous que vos effets reflètent les actions que les utilisateurs effectueraient lorsqu'ils interagiraient avec votre contenu.
Soyez conscient du poids sur le site.Avec tant de choses en arrière-plan et en code, tout ce qui concerne ce type de conception de site doit être correctement optimisé. Échelle des images correctement, gardez votre code propre et assurez-vous que votre site charge rapidement.
Dirigez les utilisateurs dans la bonne direction. Les appels à l'action doivent être clairement étiquetés à l'écran avec des instructions faciles à utiliser.
Pièges de la parallaxe
Les sites Web Parallax peuvent rapidement devenir lourds, poser certains problèmes de référencement, sont souvent incompatibles avec les cadres de conception réactifs, ne permettent pas de liens de page internes et ne fonctionnent pas très bien pour les contenus volumineux.Bien qu'il y ait un débat quant à savoir si tous les utilisateurs aiment ou non les effets de parallaxe - la réponse évidente est non, vous ne pouvez pas plaire à tout le monde tout le temps - il y a quelques inconvénients à considérer. Les sites Web Parallax peuvent rapidement devenir lourds, poser certains problèmes de référencement, sont souvent incompatibles avec les cadres de conception réactifs, ne permettent pas de liens de page internes et ne fonctionnent pas très bien pour les contenus volumineux.
Un site Web lourd de parallaxe devrait être évité. Si le site ne se charge pas rapidement, les utilisateurs n'attendront pas pour voir votre contenu. Créez le site le plus maigre possible, en accordant une attention particulière aux images et aux effets.
L’optimisation des moteurs de recherche prend un coup majeur avec les sites Web d’une seule page de tout type. Parce que la nature du site est simple, il n’ya pas grand chose à faire pour renforcer les mots-clés, créer des liens et contribuer à la recherche. Les médias sociaux sont un moyen de stimuler le référencement, car les sites uniques et différents ont tendance à être partagés.
En matière de responsive design et de mobile, la parallaxe n’est pas encore tout à fait au rendez-vous. Vous avez souvent besoin d'un grand écran pour voir vraiment les effets. La parallaxe est également une technique qui convient le mieux à un projet de portée réduite. Avec trop de contenu, cela peut vite devenir accablant.
5 grands sites de parallaxe
Atlantis World's Fair
Avocats express
Mario Kart
Minhacidade.me
Soleil Noir
Conclusion
Grâce à son caractère simple et amusant, les techniques de conception de la parallaxe sont une chose que nous allons continuer à voir au fil de l’année. Le nombre de sites utilisant déjà une certaine forme d’actions de parallaxe augmente chaque jour, de plus en plus de concepteurs s’essayant à des effets mobiles.
C'est une tendance que j'apprécie. J'aime visiter un site pour la première fois et vouloir vraiment jouer avec le contenu pour voir ce qui se passe ensuite. La parallaxe parle à ma nature généralement curieuse et l’élément ajouté de la narration rend ce type de conception de site Web plus amusant.
Sources d'images: Ben the Bodyguard, Honda CRV, Projet Black Eye, Dangers of Fracking, Arnold Clark et Tinke. (Je vous recommande de cliquer sur les images mentionnées pour avoir une idée de l'ampleur du fonctionnement de la parallaxe de chaque site. Les captures d'écran ne montrent pas toute la beauté du fonctionnement de ces sites.)