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.
.gif)
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.
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).
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 ».
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).
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…).
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.
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é.
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).
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.
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..
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.
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)
However, if you take a look at the site, there are no special fonts, or particularly incredible colors. As the years went by, Apple has implemented a simple, refined web design, based in particular on a minimalist trend.
But what could have made it successful? That undoubtedly comes Of his images. They are all Uniques, of a incredible quality. They give depth to the design by adding a human touch at times. This is one of the reasons why you are not able to recreate the Apple site for your own brand today. It is good to note that some of these images are animated in motion design to make the effect even more unique (which is typical of Apple web designs).
Remember that that element can make a difference. In the same way that a good catch phrase (copywriting) can do. This is therefore not necessarily linked only to external elements that are purely related to the UI of your site.
We also recommend that you discover the 6 branding trends of 2022 that will help you get that wow effect.
So there is different ways to animate your site : you can start by creating simple animations by adding Hovers to the basic elements of your web design; before defining more complex animations using the Webflow “interaction” tab.
You can go even further by modifying natural navigation of the site (and switch to horizontal navigation for example). Finally, if your budget allows it, do not hesitate to call on a photographer or a motion designer. They will be able to create things that no other of your competitors will be able to copy.
If this work is successful, This will undoubtedly create a wow effect on your users.. You will have won everything by combining this cachou effect with the branding of your brand and the personality of your company.
