Catégories
Astuces et Design

Tendance de conception: formes et motifs géographiques (avec animation)

La géométrie élégante est une tendance de conception qui revient sans cesse. Cette fois, la nouvelle tournure est que les formes et les éléments de conception incluent des touches d'animation pour donner vie aux formes et aux motifs. Il est plus facile que jamais de mettre en œuvre une animation sur le Web, de manière simple et largement prise en charge.

C'est aussi une petite technique de conception astucieuse qui peut ajouter un intérêt visuel à presque n'importe quoi et qui fonctionne pour tous les types d'éléments, des logos ou des icônes aux arrière-plans en passant par les images de héros.

Jetons un œil à cette tendance de conception de sites Web en action.

Fond géo animé

tendance design

L'effet de vague dans cette animation de fond compilée de formes géométriques est brillant.

Il fournit un mouvement doux et subtil tout en gardant l'accent sur les mots, en maintenant la lisibilité et en veillant à ce que l'appel à l'action soit bien visible.

La combinaison de formes géométriques et d'animation fonctionne en raison de la couleur, du timing et de la simplicité. L'animation ressemble et se comporte comme une vraie chose. Ce n'est pas agaçant et ne gêne pas le contenu. (Ce sont des erreurs courantes avec les animations d'arrière-plan.)

La meilleure partie est que si les formes géométriques sont à la mode, elles vont ici avec la marque et le contenu. Le fond «vague» est une interprétation créative de «l'océan» dans le nom de la marque oceanstart. Il est subtil et rassemble tout pour un design tendance qui est à la hauteur.

Formes 3D et animation

tendance design

Lorsque vous considérez les formes géométriques comme une tendance de conception, ce qui vous vient à l'esprit ressemble probablement beaucoup plus à l'exemple de Oceanstart, mais la tendance n'est pas limitée à l'espace bidimensionnel.

Donnez vie aux formes avec une animation 3D. Ici, l'agence Beans le fait avec une combinaison de coloration monotone, de formes géométriques et de caractères de haricot.

C'est simple, bizarre et très engageant. La tendance fonctionne ici parce que c'est le fil du design qui rassemble tout. Les formes de la scène aident à rendre les personnages plus réalistes.

C'est la beauté de quelque chose d'aussi simple qu'une forme géométrique, ce sont des éléments que vous pouvez saisir visuellement et qui se sentent réels dans un design.

Mouvement tactile

tendance design

Les formes géométriques que vous pouvez presque atteindre, toucher et déplacer sont au centre de certaines applications de cette tendance. (Et ils sont souvent assez intelligents.)

Chacune des formes de la grille de la page d'accueil de Lucky Beard présente un mouvement subtil et évident. Les formes géométriques s'inclinent et se déplacent sur un axe, se tordent et se déplacent en avant et en arrière, et même pulsent les unes par rapport aux autres.

Chaque forme semble créer une petite histoire en soi. Chacun est enraciné dans une animation tactile qui semble si réelle que vous pensez pouvoir la toucher.

Ce qui est super amusant et intéressant à propos de cette utilisation des formes géométriques, c'est que cette association n'est pas quelque chose à laquelle vous pensez généralement avec les formes géométriques. Ils sont rarement aussi clairement liés à un mouvement de style réaliste. Mais cela fonctionne à merveille.

Chargement de l'animation du logo

tendance design

Maintenant, c'est une utilisation soignée des formes géométriques – utilisez une version animée de votre logo comme animation de chargement. Boom! La notoriété de la marque en tant que précurseur rapide de la conception du site Web.

Le logo géométrique s'anime également dans d'autres parties du dessin, comme lors du défilement.

Le seul inconvénient de cette application de la tendance est que l'utilisation d'un logo géométrique est probablement une utilisation plus permanente ou de longue date. Ne suivez cette voie que si vous aimez vraiment les formes géométriques et prévoyez de les utiliser pendant un certain temps. (La bonne nouvelle est que c'est une tendance qui a une certaine résistance.)

tendance design

Une autre façon d'incorporer des formes et des motifs géométriques animés dans la conception de votre site Web consiste à faire défiler la parallaxe. Ce type d'animation de défilement peut créer un bel élément de mouvement pour les couches d'arrière-plan géométrique et de premier plan.

L'astuce pour le faire fonctionner est la subtilité. Les couches qui se déplacent trop rapidement ou qui comportent trop de mouvements peuvent donner aux visiteurs du site Web une sensation de malaise (comme le mal des transports). Un joli mouvement facile semble plus naturel et ne laissera pas les utilisateurs confus.

L'exemple ci-dessus utilise le défilement de parallaxe avec des formes remplies de lignes qui se remplissent et se déplacent lorsque vous parcourez la page. Le mouvement est si subtil que si vous faites défiler trop lentement, vous risquez même de le manquer.

Animations de survol géométrique

tendance design

Déterminer la bonne vitesse pour le mouvement et l'animation est un art en soi. Ce qui est trop rapide pour certains utilisateurs peut être trop lent pour d'autres. Il y a beaucoup de préférences personnelles en ce qui concerne les vitesses d'animation.

Évitez que cela ne devienne un problème avec les formes géométriques et les animations liées aux états de survol et aux emplacements des curseurs. Cela donne à chaque utilisation un contrôle complet sur le mouvement dans la conception.

KDCAP fait un bon travail avec plusieurs niveaux d'animations de survol qui sont faciles à voir avec un curseur qui «explose» lorsqu'il se rapproche d'un élément cliquable.

Formes géographiques comme thème de conception

tendance design

Presque tout peut être converti en une forme géométrique, comme le prouve l'affichage visuel pour le Groupe Delassus. Chaque élément du curseur de héros possède des objets communs qui ont été transformés en représentations géométriques.

Il y a une motion en deux parties ici:

  • rebondir les états de vol stationnaire pour les objets à l'écran
  • Diapositives qui se lisent automatiquement de l'une à l'autre

Ce qui distingue ce design, c'est la familiarité avec les objets et la nouveauté du nouveau style qui leur a été appliqué. Les diapositives monotones aident également à concentrer les objets en mouvement.

Animation de la chronologie

tendance design

Voici une façon d'utiliser des formes géométriques que vous n'auriez peut-être pas envisagées: Créez une animation de chronologie avec des formes comme point focal.

La combinaison de formes et d'éléments de couleur peut créer des images visuelles pour des projets qui pourraient manquer d'autres options, telles que des photos ou des vidéos. Le mélange des formes et des couleurs peut être attrayant et intéressant. L'animation donne vie à tout.

Conclusion

Certaines tendances de conception de sites Web sont destinées à être essayées dans au moins un de vos projets. L'utilisation de formes géométriques et d'animation ensemble en fait partie.

Il s'agit d'une option très polyvalente qui peut fonctionner avec une variété de types de contenu et se confond bien avec d'autres principes esthétiques. De plus, l'utilisation de formes géométriques est une tendance qui semble persister. L'utilisation de ce concept ne rendra pas votre site Web obsolète.

Laisser un commentaire

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