Webflow
8
min
Auteur :
Axel Sani

Obtenir l’Effet Wahou grâce à Webflow

On parle d’effet wahou lorsque votre utilisateur est étonné par votre site, lorsque vous arrivez à le surprendre. Cela peut être par la surprise, mais aussi par l’admiration. Cela permettra à l’utilisateur de mieux se concentrer sur vos contenus et de donner plus de valeurs à ce que vous présentez.

L’utilisateur se souviendra ensuite plus facilement de vous et percevra qui vous êtes à travers votre personnalité & branding unique. On peut comparer cela à la première impression que peut faire une personne en arrivant à une soirée. Et oui ! Cela peut faire toute la différence.

Ne pas oublier des animations simples

Oui, cela ne provoquera pas l’effet wahou, mais les animations simples sont la base d’un site internet animé. Cela intervient par exemple lorsque l’on passe la souris sur un bouton. L’inconscient de l’utilisateur est farfelu, il est admis que le manquement à cette règle peut avoir comme conséquence de faire oublier à l’utilisateur qu’il est sur le point de cliquer sur un bouton (l’animation d’un élément au survol permet à l’utilisateur de savoir qu’il peut cliquer dessus, cette technique a remplacé le changement du curseur qu’on peut observer sur certains navigateurs).

Une question d'expérience utilisateur

Il vous faudra donc pour cela vous rendre dans le selector de classe pour activer l’option « hover ». Cela signifie « lorsque la souris est dessus ». Vous êtes ensuite libre de choisir le paramètre que vous souhaitez modifier. L’importance étant que l’utilisateur note ce changement pour comprendre qu’il s’agit d’un élément cliquable.

N’oubliez pas d’ajouter une transition sur la classe initiale pour rendre l’effet plus « fluide ».

Ajouter des animations complexes : place aux interactions

Cette technique est un gros avantage de Webflow. Il faut savoir que le type d’animation que je vais présenter est difficile à réaliser avec d’autres outils et qu’elle demande de vrais compétences si elle doit être réalisée avec du code (par exemple du code Javascript).

Directement depuis le designer sur Webflow

Sur Webflow ces animations sont très faciles à réaliser. Pour en créer une il faut se rendre dans le 4e onglet du panneau de gauche nommé « interaction ». À cet endroit, il faudra choisir si la chose que vous souhaitez animer est un élément du site ou la page entière. On parlera notamment de « trigger » c'est à dire l’élément ou page qui doit déclencher l’animation. Ce déclenchement peut intervenir selon plusieurs actions : le chargement d’une page, le scroll d’une personne, la souris qui se déplace etc… Ensuite c’est très simple, il ne vous reste plus qu’à créer l’animation (à noter que Webflow a déjà créé et propose de nombreuses animations comme des effets de slide, de fade etc…).

Onglet animation Webflow

Des animations limitées

Attention car vous ne pouvez pas faire ce que vous voulez avec une interaction. Il ne s’agit pas d’un simple hover où vous pourrez modifier n’importe quelle propriété de style. Les interactions portent sur des éléments bien précis comme l’opacité, le display, la taille, la couleur d’un élément. Vous ne pouvez pas modifier le padding d’un élément avec une interaction par exemple.

Développer une navigation alternative

C’est ce qui permet réellement d’obtenir une expérience immersive. On peut observer cette tendance dans de nombreux sites artistiques. L’objectif pour ces marques est de se démarquer des conventions web classiques afin de mieux mettre en avant leur singularité.

Proposer une mise en page unique

Pour cela, les marques pourront revoir toute la structure et mise en page de leur webdesign. Elles pourront notamment préférer une navigation à travers le site de manière horizontale. Elles créeront une animation pour faire défiler les sections de droite à gauche pendant que l’utilisateur continue de scroller vers le bas. On pourra également imaginer une navigation sous forme de slide. L’utilisateur doit cliquer sur un bouton pour accéder à une autre vue du site (et provoque ainsi une animation de transition).

Remettre en question les acquis de l'utilisateur

Cette technique peut véritablement questionner l’utilisateur qui ne pourra pas se reposer sur ses acquis web. Il devra remettre en question sa manière de naviguer sur le web et devra prendre plus de temps pour rechercher certains éléments (il portera alors son attention sur des détails qu’il n’aurait pas forcément abordé avec une navigation classique. Si cela est bien mené, cela pourra provoquer chez l’utilisateur une vrai sensation d’effet wahou.

Animer des animations Motion Design

Sur webflow il est facile d’intégrer des motions design via l’outil Lottie. En partant de votre logiciel Adobe After Effet, vous pouvez créer l’animation de vos rêves, l’exporter en .json et l’intégrer directement dans Webflow en tant que Lottie Animation.

Par la suite, vous pourrez déclencher cette animation selon différents trigger : le déplacement de la souris, le scroll de l’utilisateur etc.. Vous pourrez choisir quand l’animation se termine, si elle doit être jouée en boucle etc..

Home page swile.co

Une minorité de site en possède

Bien utilisé, un motion design peut être une arme redoutable pour séduire vos utilisateurs. On peut régulièrement en voir sur des illustrations, démonstration d’application, icons ou même plus grandes images. Il faudra faire attention à la vitesse de chargement de certaines animations qui pourra venir impacter le temps de chargement et les performances de votre site.

Ce qui fait la différence : vos images

Voilà une des raisons pour laquelle le site d’Apple reste (et restera) une référence en terme de webdesign. (Le pôle design a d'ailleurs enquêté à ce sujet en analysant les 5 secrets qui rendent le site d'Apple si puissant)

Pourtant si on jette un oeil au site, il n’y a pas de typographies spéciales, ni de couleurs particulièrement incroyables. Au fur et à mesure des années, Apple a mis en place un webdesign simple, épuré, se basant notamment sur un courant minimaliste.

Les images de l'équipe communication d'Apple

Mais qu’est ce qui a pu faire son succès ? Cela vient sans nul doute de ses images. Elles sont toutes uniques, d’une qualité incroyable. Elles donnent de la profondeur au design en ajoutant par moment une touche d’humain. C’est notamment la raison pour laquelle vous n’êtes pas capable aujourd’hui de recréer le site d’Apple pour votre propre marque. Il est bon de noter que certaines de ces images sont animées en motion design pour rendre l’effet encore plus unique (ce qui est typique des webdesign Apple).

Retenez bien que cet élément peut faire la différence. De la même manière que peut le faire une bonne phrase d’accroche (copywriting). Cela n’est donc pas forcément lié qu’à des éléments externes relevant purement de l’UI de votre site.

Nous vous recommandons d'ailleurs de découvrir les 6 tendances branding de 2022 qui vous aideront à obtenir cet effet Wahou.

Image de présentation de l'Iphone 13

L’effet Wahou : un coup de pouce pour votre branding

Il y a donc différentes manières d’animer votre site : vous pouvez commencer par créer des animations simples en ajoutant des Hover sur les éléments de base de votre webdesign ; avant de définir des animations plus complexes en utilisant l’onglet « interaction » de Webflow.

Vous pourrez aller encore plus loin en modifiant la navigation naturelle du site (et passer à une navigation horizontale par exemple). Enfin, si votre budget le permet, n’hésitez pas à faire appel à un photographe ou un motion designer. Ils pourront créer des choses qu’aucun autre de vos concurrents ne sera capable de recopier.

Si ces travaux sont réussis, cela pourra créer sans nul doute un effet whaou chez vos utilisateurs. Vous aurez tout gagné en associant cet effet cachou au branding de votre marque et à la personnalité de votre entreprise.

plus
plus