Retour aux projets

Institut Québécois d'Ébénisterie

Refonte du site web de l'Institut Québécois d'Ébénisterie

Développement webMotion designDéploimentOptimisation SEO
Direction artistique
Criterium
Année
2024
Transitions visuelles et expérience immersive

Transitions visuelles et expérience immersive

Développer un thème WordPress personnalisé pour un projet à l’image de marque aussi vibrante que celle conçue par Criterium pour l’IQE (Institut Québécois d’Ébénisterie) demande une attention rigoureuse à la cohérence visuelle et à la performance technique. Chaque composante du thème doit refléter l’identité forte de la marque : palette de couleurs riche, typographies affirmées et animations fluides. Les transitions visuelles jouent ici un rôle clé — des de transitions de pages en glissement renforcent l'expérience immersive.

Conception d’un méga-menu sur mesure et accessible

Le développement d’un méga-menu personnalisé fait également partie des éléments techniques du projet. Contrairement aux menus classiques, un méga-menu offre une navigation enrichie permettant d'organiser des liens sous plusieurs niveaux, de façon structurée et accessible. Dans le cas de l’IQE, il peut mettre en valeur à la fois les programmes de formation, les galeries de projets étudiants et les pages de contenus plus formels. Nous avions besoin d'une structure claire, des styles CSS bien organisés par composant grâce à Tailwind CSS et d'une intégration JavaScript bien ficelée à tout ça. Nous avons aussi créé d'autres interactions complexes comme les menus déroulants personnalisés dans le bottin des anciens étudiants, tout en maintenant une bonne accessibilité (via clavier et lecteurs d’écran).

Optimisation avancée des images pour la performance web

Optimisation avancée des images pour la performance web

Enfin, l’optimisation des images est un aspect technique incontournable pour maintenir la rapidité de chargement, particulièrement avec une identité visuelle aussi visuellement riche. Cela implique la conversion automatique des visuels en formats modernes comme WebP, l’utilisation de tailles adaptatives selon les résolutions d’écran via les attributs srcset et sizes, et la mise en cache efficace avec des outils comme WP Rocket ou des configurations avancées de serveur. Une attention particulière est aussi portée à la compression sans perte de qualité, essentielle pour préserver la richesse des textures et des couleurs utilisées dans l’univers graphique du projet.