9 sites Web avec des animations qui nous inspirent en tant que créateurs Web

Les créateurs de sites Web sont dans une quête sans fin pour mettre à jour leurs sites Web avec les effets de conception les plus avant-gardistes et à la mode qui représentent la vraie valeur de leur produit ou service. Mais entre les palettes de couleurs, la typographie, la réactivité, la stratégie de contenu et bien plus encore, l'idée de techniques de conception avancées peut être quelque peu intimidante. L'un des meilleurs moyens de créer un site Web dont le design vaut la peine est de s'inspirer de vos pairs. Se demander ce que vous aimez dans leurs conceptions, en quoi cela peut être pertinent pour votre conception et comment vous souhaitez le modifier en fonction de vos besoins peut en fait être très simple.

Jetons un coup d'œil à ces neuf exemples d'animations de sites Web créatifs et commençons à apprendre des pros.

Les techniques d'animation utilisées par Handwrytten dans la section héros de leur page d'accueil sont une représentation poignante de leur produit lui-même : combinant stylo et encre. Une valeur clé de cette conception (entre autres) est que le visiteur du site Web comprend immédiatement les avantages offerts par le produit et ce qu'il gagnera en l'utilisant.

La photographie d'une carte manuscrite juxtaposée à l'illustration du dessin animé dit vraiment tout. En ce qui concerne les autres éléments de conception de la page, le jeu de couleurs blanc et noir épuré avec des notes d'orange coucher de soleil offre un équilibre entre sophistication et flair artistique. Après avoir parcouru ce site Web, nous sommes certainement motivés à chercher plus loin et à en savoir plus sur le produit de Handwrytten.

Crisp ajoute des effets d'animation mineurs à leurs illustrations vectorielles qui transmettent un message de marque résonnant malgré la petite taille des illustrations. L'animation discrète de chaque illustration vectorielle ajoute en effet une touche humaine à la personnalité de la marque crisp. Nous aimons particulièrement le feu de joie animé dans la section qui traite du support client. Il ajoute de la vie au design plat et minimaliste qui est élégamment utilisé sur toute la page d'accueil. C'est le moyen idéal d'utiliser ces techniques de design plat à la mode tout en ajoutant la joie de vivre nécessaire à une expérience utilisateur passionnante.

Corebook accueille le visiteur sur son site Web en mode sombre, avec des animations subtiles et élégantes lorsque vous faites défiler le site. À leur manière, Corebook trouve un moyen de concevoir des animations de héros facilement et clairement visibles, malgré le manque de contraste entre le gris foncé sur son fond noir.

Le choix du contenu d'animation est minimaliste mais informatif. Ceci est rendu possible avec seulement quelques formes et couleurs carrées, les animations illustrent le type de produit fini (un livre de marque) que les clients auront en main après avoir rejoint Corebook : leur propre livre de marque qui atteint les normes de l'industrie et a l'air moderne, tendance et sophistiqué.

Best Day Ever utilise une technique d'animation en boucle afin que leurs illustrations d'animaux ne reposent pas sur des déclencheurs pour continuer à bouger. Quelle que soit l'illustration visible par le visiteur du site Web, elle se déplace en permanence tant qu'elle est visible à l'écran.

Il y a une approche axée sur le contenu tout au long de la page, car les mots et les phrases sont brefs et pas plus longs qu'ils ne devraient l'être. C'est exactement ce type d'approche qui se marie si bien avec des animations conviviales, avec la combinaison d'un texte minimal avec un design optimiste et coloré. Les mouvements des animaux donnent non seulement vie au texte avec lequel ils sont associés, mais ils créent une expérience de conversation pour chaque utilisateur.

Le site Web de Best Day Ever est un excellent exemple de la façon dont vous pouvez prendre une idée et un principe de conception (dans ce cas, le thème consistant à combiner fraîcheur énergétique et subtilité) et le représenter de manière cohérente à travers votre palette de couleurs, votre stratégie de contenu et vos effets de conception avancés.

Qui n'aime pas la piscine à balles classique ? En utilisant ses couleurs de marque classiques sur fond blanc, Google frappe encore une fois l'or.

Avec un seul effet de suivi de souris, Google parvient à créer une expérience utilisateur qui donne au visiteur du site Web l'impression d'être dans une piscine à balles ! Et lorsque vous faites défiler la page, tout ce qui se passe, c'est que les boules grossissent. Il n'y a pas de contenu sous les balles, ce qui est exactement ce que c'est dans la réalité.

Google parvient à nous fournir une compréhension immédiate et sensationnelle de ce à quoi sert ce produit, et ils le font avec une simple description de titre de texte de héros et un bouton CTA.

Nous savons que Google est sur le point de nous aider à planifier notre prochaine aventure qui ne nous décevra pas. Et avez-vous vu les effets de changement de couleur lorsque vous survolez le bouton ? C'est la première fois que nous voyons un bouton dont l'effet de survol passe à quatre couleurs distinctes, plutôt que de passer d'une couleur à une autre.

C'est comme rien que nous ayons jamais vu auparavant. Sous nos yeux, nous voyons des formes abstraites animées se déplacer et former une illustration d'un animal. Cela éveille notre curiosité, admirant les beaux animaux et se demandant quels autres animaux ont-ils utilisés ?

C'est exactement le processus de réflexion que vous voulez que votre visiteur de site Web ait. Vous lui racontez une histoire visuelle et vous voulez qu'il passe à la page suivante de cette histoire.

Si vous y réfléchissez bien, la narration et la cause des espèces menacées ont beaucoup en commun : elles visent à la fois à attirer l'attention de l'auditeur et à le convaincre (quoique subtilement) que votre sujet est d'une importance primordiale, c'est-à-dire qu'il vaut la peine d'être écouté.

L'industrie du cannabis est encore assez nouvelle et fraîche, il est donc logique qu'un site Web qui le vend en tant que produit ait besoin d'un look et d'une ambiance qui soient identiques.

Arrêtons-nous d'apprécier combien de techniques de conception se produisent sur la seule page d'accueil : un fond de diaporama derrière des collections d'images animées, des effets 3D, des mots en rotation… et tout est magnifique.

Comment quelqu'un pourrait-il voir cette page d'accueil et ne pas vouloir explorer davantage le site Web ? Ce n'est que si vous faites cela que vous pourrez alors voir les animations à couper le souffle devenir encore plus fabuleuses lorsque vous faites défiler vers le bas.

Nous aimons la façon dont une fois que vous descendez la page, le pot tourne et les objets sur l'arrière-plan coloré glissent vers les marges de la page lorsque l'arrière-plan devient blanc. Tellement créatif. Plus vous descendez, plus les beaux objets 3D maintiennent un effet de défilement vertical vers le haut.

Toutes ces techniques combinées créent le sentiment que vous voulez juste continuer et lire davantage sur le site Web, même juste pour voir les visuels intrigants et ce que les concepteurs ont proposé ensuite.

Si vous naviguez vers les autres pages, vous verrez que les objets 3D du contenu héros de la page d'accueil sont devenus une partie permanente de l'arrière-plan, tout en flottant et en se déplaçant. Ce choix de continuité permet une narration holistique qui rapproche le point de la maison : Nous sommes un produit génial.

Est-ce le jeu de couleurs, la conception 3D, le mouvement d'image discret ou l'illustration de la carte de crédit qui descend dans un mouvement acrobatique lorsque nous faisons défiler la page d'accueil ?

C'est un peu de tout.

La palette de couleurs ici va un long chemin. Les nuances d'orange entourées de beaucoup d'espace blanc et d'une police sans empattement simple et arrondie fonctionnent toutes ensemble de manière si holistique. Mais ce qui prend vraiment le gâteau ici, ce sont les techniques d'animation utilisées pour l'illustration de la carte de crédit.

RappiPay obtient notre vote pour l'originalité et pour un engagement remarquable. Le contenu du site guide le visiteur vers le bas de la page jusqu'à ce qu'il atteigne le fond, car comme la carte de crédit glisse si facilement sur la page, elle déclenche l'apparition d'autres images et illustrations. Et entre l'interaction de la carte de crédit avec d'autres éléments, tels que la révélation de billets de banque ou le dessin de lignes pointillées autour d'une sphère, la carte montre des retournements acrobatiques tout en bas.

Tout comme la carte de crédit raconte bien l'histoire, pleine d'action et de vitalité, elle se termine également en beauté. La découpe circulaire à la fin montrant les achats du propriétaire de la carte nous indique combien de fonctionnalités et de capacités cette carte possède, et comment le propriétaire de la carte l'a vraiment emmenée partout et n'importe où.

Les mots minimaliste et avant-gardiste sont tout ce à quoi nous pouvons penser ici. Si une image vaut mille mots, nous dirions qu'une image animée en dit 5 000 ou probablement plus.

OK, maintenant c'est votre tour. Les techniques d'animation que nous avons énumérées ici ne représentent qu'une infime fraction de ce que les créateurs de sites Web peuvent accomplir lorsqu'ils ajoutent des fonctionnalités animées à leurs sites Web. De plus en plus d'inspiration devient disponible chaque jour, et il y a tellement de choses à voir et à apprendre. Notre devise en tant que concepteurs est de commencer par les bases, et comme vous avez des pratiques d'animation simples à votre actif, votre site Web peut montrer au monde ce que signifie être un moteur et un agitateur.