Les 6 transitions du nouveau HUGE

Avec pour motto « Make something you love« , la refonte du site HUGE a inspiré la communauté des designers web. L’attention de ces derniers s’est portée sur le scrolljack visible en homepage, qui rend le site totalement inutilisable chez certains utilisateurs mobiles. Dommage pour un site conçu en responsive design.

J’ai pour ma part été davantage attiré par les petits effets de transitions utilisés pour faire ressortir la navigation à l’intérieur du site. Exemple en images de mes 6 effets préférés:

Effet 1: Effet de mouvement et d'opacité variables sur la navigation principale et le logo du site.
Effet 1: Effet de mouvement et d’opacité variables sur la navigation principale et le logo du site.
Effet 2: Navigation en pied de page pour quitter la zone de 'featuring' en homepage.
Effet 2: Navigation en pied de page pour quitter la zone de ‘featuring’ en homepage.
Effet 3: Effet d'animation sur le picto 'burger' qui morphe en picto 'fermer'.
Effet 3: Effet d’animation sur l’icone ‘hamburger’ qui morphe en picto ‘fermer’.
Effet 4: Homepage. L'utilisation du visuel avec la meme forme en "H" est du plus bel effet, et tend à faire oublier le problème du scroll.
Effet 4: Homepage. L’utilisation du visuel avec la meme forme en « H » est du plus bel effet, et tend à faire oublier le problème du scroll.
Effet 5: Zone de chargement en overlay. Très visible, mais très rapide à apparaitre et disparaitre.
Effet 5: Zone de chargement en overlay. Très visible, mais très rapide à apparaitre et disparaitre.
Effet 6: Zoom du visuel en arrière-plan, dé-zoom du texte au premier plan.
Effet 6: Zoom du visuel en arrière-plan, dé-zoom du texte au premier plan.

Dans l’ensemble, le site va encore profiter de son lancement et des retours utilisateurs pour évoluer. Comme le precise le site, « We’ll continue to evolve the site and make it even better. Because we’re not done: design is never finished. »

Laisser un commentaire

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