Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

Web design : pourquoi utiliser l’effet glitch ?

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

Publié par Emeline Rizoud

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.

animation de site glitch effect

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.

image distortion glitch effect pour site e-commerce

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.

image glitch effect distortion effect web design pour graphiste

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.

portfolio glitch effect images mouvantes

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.

glitch effect vehement effet

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 !

exemple de glitch dans les transitions website

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.

animation glitch effect

À 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.

glitch effect distortion photoshop effet animation graphiste

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 !

animation SVG filtre glitch effect

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 !

 

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

6 conseils pour créer le logo d’une association humanitaire

Cherchant à améliorer les conditions de vie des populations pauvres, les associations humanitaires ont malheureusement fort à faire partout à travers le monde. Leur travail...

Publié le par Solenne Ricard
Graphisme

5 outils pour trouver de superbes dégradés de couleur

Les dégradés de couleurs ont le vent en poupe, notamment en webdesign. Mais trouver une combinaison de couleurs harmonieuse qui permettra de former un beau gradient...

Publié le par Leo Chatillon