14 ressources Javascript pour booster l’UX de votre interface

Une expérience utilisateur réussie passe également par des modules accessibles, bien pensés et efficaces pour l’utilisateur. Pour accélérer le déploiement de fonctionnalités, j’ai sélectionné pour vous 14 ressources à utiliser dans vos futurs projets web.

Ce nouvel article regroupe différents plug-ins que vous pourrez implémenter à votre guise dans vos sites. Couvrants plusieurs domaines, vous y trouverez des éléments pour traiter vos images, gérer le chargement d’une page, améliorer la recherche et bien plus encore.

Responsify.space

Commençons cette sélection par un intéressant plug-in jQuery. Celui-ci vous permet de créer une mise en page responsive plein écran, sous forme de grille d’images. Le gros plus de Responsify.space ? Il tient compte des images lors du redimensionnement et permet ainsi de présenter au mieux le contenu, quelque soit la résolution.

jquery-plugin

Bricks.js

Bricks.js est une alternative ultra-rapide et facile à la mise en page Masonry.

jquery-plugin

OkayNav

Lors de la construction d’une navigation horizontale, vous vous êtes très probablement souvent retrouvé confronté au problème du positionnement des liens sur mobile et tablette. Le plug-in Okay Nav propose ainsi de placer les liens dans un menu « off-screen », une fois que ceux-ci quittent la zone utile de l’écran. Malin !

jquery-plugin

jQuery Secret Nav

Envie d’un menu original avec un effet 3D ? jQuery Secret Nav vous permet de le déployer rapidement. Attention, ce type de navigation est plutôt adapté au desktop plutôt qu’au mobile.

jquery-plugin

Light Gallery

Un plug-in ultra light pour une galerie efficace. Elle supporte le touch, propose une fonction de téléchargement des images et fonctionne en plein écran.

jquery-plugin

Chocolat.js

On continue avec la gestion des images avec Chocolat.js, un plug-in de lightbox responsive proposant un affichage orignal. Idéal pour un site e-commerce ou un portfolio par exemple.
jquery-plugin

Photo Swipe

Cette galerie d’images n’a pas besoin de jQuery pour fonctionner. Elle se déploie de manière indépendante grâce à son propre framework. Utilisez-la pour vos interfaces tactiles, elle intègre des fonctionnalités comme le swipe (évidemment!), le pinch to zoom et le vertical swipe pour fermer la galerie.

jquery-plugin

Twenty Twenty

Zurb nous offre un plug-in de comparaison classique mais efficace. Ce fonctionnement est un des meilleurs moyen de montrer la différence entre deux images.

jquery-plugin

jQuery Video Extend

Vous êtes à la recherche d’un plug-in pour insérer une vidéo dans votre contenu ? jQuery Video Extended va encore plus loin. Grâce à ce plug-in, vous avez la possibilité de personnaliser le player à votre guise, en ajoutant votre logo, ajouter des markers avec des labels et j’en passe. Il est bien évidement compatible avec les vidéos Youtube.

jquery-plugin

Be Lazy

Une des référence en terme de lazy loading, Be Lazy est ultra léger (1,2kb) et fonctionne sans jQuery.

jquery-plugin

Pace

Un moyen ultra rapide de mettre en forme un module de chargement sur n’importe quel votre projet. Un très bon moyen de donner un feedback efficace à votre utilisateur.

jquery-plugin

Fullpage transition

Design Modo propose un tutoriel complet pour créer des transitions de pages originales.

jquery-plugin

Tableau comparatif responsive

La gestion d’un tableau dans une mise en page adaptative peut vite devenir un casse-tête. Grâce à ce plug-in de Codyhouse, celle-ci est simplifié en se redimensionnant de manière efficace.

jquery-plugin-13

Advanced Search Form

Une intéressante gestion de moteur de recherche avancé.

jquery-plugin

Avez-vous trouvé votre bonheur dans cette sélection ? 

Pour encore plus de ressources, je vous invite à consulter les archives du blog pour découvrir 25 ressources Javascript et CSS pour vos interfaces en juin 2015 ou encore 25 ressources jQuery et CSS3 pour vos sites web en novembre 2014.

13 commentaires

Laisser un commentaire :

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

*