Connaissez-vous le « glitch effect » ? Et plus particulièrement cette tendance à l’utilisation d’images déformées ?

Pourtant ce n’est pas nouveau, depuis 2017 cette tendance se renforce à travers son utilisation dans les jeux vidéo, les affiches, les animations, mais aussi les séries : Strangers Things, Black Mirror…

Le « glitch art » est apparu dans les années 2000. Des artistes visuels commencèrent à l’utiliser comme une esthétique tirée de l’univers numérique faisant référence aux nouvelles technologies, à l’ère moderne, et à l’art visuel en général.

Devenu populaire, il est courant de l’associer à différents détails de l’interface du site comme une image statique ou une animation. Faisons un rapide tour d’horizon sur l’utilisation de l’effet glitch en webdesign.

1. L’esthétique «glitch» sur les visuels

Au cours des dernières années, la démarcation entre les projets Web et le secteur audiovisuel s’est estompée et la popularité croissante du HTML5, ainsi que l’optimisation de la vidéo et de la 3D en termes de poids et de temps de chargement, ont ouvert la voie à des tendances telles que l’esthétique glitch.

Très novatrices, ces images déformées attirent l’oeil et incitent aux clics sur les produits.

Sur le site de l’académie de Lusso, les images et les vidéos sont travaillées de façon unique pour présenter les atouts de l’académie.

Les modèles humains apparaissent progressivement sans le glitch, une fois que l’internaute clique sur une image. Une manière très originale de présenter le manifeste de l’académie.

Adasokol.com est un site présentant le travail de Ada Sokòl, une artiste et designer basée à Paris.

Elle présente ses modèles avec l’insertion d’un effet de glitch au passage du curseur de la souris. Ces images déformées ressemblent à une bande-passante de télévision.

Ce type d’animation encourage naturellement l’utilisateur à «jouer» avec le site web, augmentant ainsi son intérêt.

Sur le site de Precision Run, les développeurs ont choisi d’utiliser des images et des vidéos avec un style rétro.

La coloration bicolore et l’effet de distorsion associé à la double exposition, confèrent à toute l’interface, une ambiance sportive des années 80.

Ces images et vidéos contrastent parfaitement avec l’ensemble du site web, résolument plus moderne.

Les images mouvantes de Yuen Ye sont hypnotiques. La créatrice donne un «effet tissu» se mouvant dans le vent pendant le défilement des différentes catégories.

Dans cet environnement minimaliste, l’effet apporte une touche de sophistication agréable à l’œil.

Dans le même esprit,  le site portfolio de Liam Rocketts, très inspirant avec son effet de distorsion voilé.

2. Des transitions uniques avec l’effet glitch

S’étirant à l’infini, le « glitch» permet des transitions étonnantes et des affichages modernes sur des portfolios, des sites e-commerce, des sites d’agence…L’utilisation est infinie !

Sur le site Planetaire, l’effet liquide des transitions est utilisé directement sur la page d’accueil, pour faire défiler les différentes catégories du site web.

Ce type de distorsion donne une certaine fluidité entre les matières et participent à une meilleure expérience utilisateur sur le site internet.

À contrario des transitions fluides, le site de la marque emblématique de Dallara Stradale utilise des transitions atypiques ! 

Ici, l’effet de distorsion accompagne chaque section de la page d’accueil.

Il permet un défilement rapide, et imite avec son flou, la vitesse qui caractérise parfaitement la voiture de course.

3. Soyez créatif !

Démarquez-vous avec l’utilisation de l’effet glitch. Auparavant mis de côté, la distorsion d’image est maintenant un atout non négligeable pour attirer l’attention sur votre site.

Pourquoi pas ne pas expérimenter vous aussi le “VHS glitch” sur vos propres images ? Faites un test en utilisant ce module, et une fois satisfait, intégrez-le dans votre code !

L’utilisation de filtres SVG vous permet de dynamiser votre menu.

Vous retrouverez dans ce pack trois effets de distorsions générés par des filtres SVG qui s’appliquent à votre image lors du survol d’un lien.

Comme le montre cet article, la technique du glitch collabore parfaitement avec des intéractions basées le curseur de la souris et le défilement. À vous de les utiliser correctement pour vous démarquer de la concurrence.

Si vous souhaitez faire appel à un UX Designer pour la création de votre site web, rendez-vous sur Graphiste.com !