Double Scroll

Tendance du webdesign : double scroll

Double Scroll

Directement inspirés par les interfaces mobiles, certains sites osent ce que l’on pourrait nommer le « double scroll« …

Annonce

L’utilisation du défilement de page pour créer des effets originaux sur les sites est en vogue depuis maintenant bien 2 ou 3 ans, voir plus. Avec la ligne de flottaison définitivement enterrée, plus de soucis aujourd’hui les gens scrollent. La parallaxe, le scroll « story-telling« , entre autres ont permis d’apporter de la dynamique et de la profondeur dans notre expérience de navigation. Terminé le scroll long et fastidieux, terminé les sites plats et sans intérêt, vive le one-page et le scrolling à gogo !

Comme toutes les tendances, la parallaxe s’est elle aussi essoufflée après avoir lassé les concepteurs web et les internautes. Les webdesigners et devs-frontend n’ont pourtant pas dit leur dernier mot.

Une expérience en deux colonnes

Découlant directement des ces tendances passées, mixées avec une expérience utilisateur très représentée sur tablette et mobile, voici le double scroll. Ce n’est peut-être pas le terme adapté, mais il me semble adéquat pour décrire cet effet. Imaginez un site divisé en deux colonnes. Lorsque vous vous mettez à descendre dans la page, les deux colonnes défilent à une vitesse différente pour créer un effet original. Jeu sur la typographie ou sur les photos tout est fait pour casser la routine. Pour être plus concret, voici quelques exemples :

ACTV/ RCVR de Puma

La page d’accueil présente le site avec une double entrée. Lors du scroll, les pages sont littéralement séparées en deux, pour venir se réunir à un point donné. Au final le concept marketing présentant deux produits complémentaires est totalement reproduit dans l’expérience utilisateur. Bien vu !

Double Scroll

Double Scroll

Double Scroll

Double scroll

Fade or Eddy

Idée dans la même veine, le site Fade or Eddy s’inspire et illustre totalement le concept de la marque : la dualité, pour ou contre. Exploitant de grandes photos, l’internaute est invité à découvrir les produits en cliquant sur les éléments centraux interactifs. La navigation peut également se faire par un drag and drop sur les colonnes.

Double Scroll

Double Scroll

Double Scroll

Carles Palacio

Le site du photographe Carles Palacio nous offre une vision différente de cette technique. Les photos en plein écran défilent en se séparant en deux lors du clic ou de la navigation au clavier. Le scroll désactivé, mais l’esprit est le même.

Double Scroll

Double Scroll

Vespillo

Le site du film Vespillo ne possède pas une expérience en double scroll mais gère sa mise en page de la même manière. Toujours en fullscreen, les deux colonnes alternent du texte et des images. Le tout est fluide et contrôlable au clavier.

Double Scroll

Double Scroll

Pour conclure :

Véritable tendance du webdesign ou simple coïncidence, cette technique est originale pour gérer les sites à doubles entrées ou les infographies animées par exemple. Grâce à cette petite innovation, le principe du scroll animé est désormais modernisé et s’inscrit dans une démarche d’expérience utilisateur commune aux interfaces tactiles et de bureau.

Ressources :

Iscroll 4

Que pensez-vous de cet effet ?

23 commentaires

Laisser un commentaire :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.