Avez-vous remarqué toutes les formes fluides et sans limites dans les projets de conception récemment? L'utilisation de bulles et de gouttes est une tendance. Des simples cercles aux boucles d'interconnexion, aux blobs plein écran qui bougent et se décalent, au simple? Blobby? animations, cette tendance se répand partout.
La bonne chose est que si utiliser des bulles et des gouttes est un élément de design à la mode, il existe tellement de façons de le faire, et vous ne finirez pas avec un design qui donne l'impression que vous essayez simplement d'ajouter un élément à la mode. Nous avons ici une collection de mini-études de cas de conceptions de sites Web illustrant la tendance en matière de bulles et de taches de couleur.
Wed'ze
Wed'ze utilise des blobs de couleurs froides - définis par des éléments quelque peu arrondis sans forme définie - pour mettre en valeur les produits. Le blob met l'accent sur chaque ensemble de lunettes de ski avec un changement de couleur distinct, bien que la forme reste la même.
L'utilisation de la forme et de la couleur intéressantes sur un arrière-plan d'un blanc éclatant crée un point central et crée un produit qui n'est pas tout à fait intéressant, mais qui attire réellement.
Merci à la taille, chaque blob crée également un flux directionnel de gauche à droite sur l'écran, amenant l'utilisateur à regarder la forme, les lunettes, puis la description de l'article.
Groupe Liber Finance
Le groupe Liber Finance utilise une série de bulles animées pour créer un élément artistique. Les bulles (définies davantage comme des éléments de design arrondis et élastiques) comprennent des cercles pleins et pleins avec des pièces fixes et mobiles.
Les bulles de cette conception servent de fil conducteur visuel et connectent des parties du site Web tout au long de la conception. La forme est utilisée sous le parchemin pour attirer l’œil sur du texte et des éléments cliquables, ainsi que pour créer un thème pour un dessin ne contenant pas beaucoup d’informations très visuelles.
L'utilisation de l'animation est un moyen efficace de créer un intérêt avec des formes simples.
Drip Pop
Drop Pop utilise un blob comme marque de logo sur un arrière-plan trop occupé. (Méfiez-vous de la vitesse de déplacement si vous cliquez sur le lien.)
La marque est un élément conteneur du mot-symbole et fonctionne avec l'option de design présentée, car elle permet de voir l'image de marque sur un design coloré et chargé.
Bien que ce traitement de logo soit intéressant ici, il pourrait être plus difficile d’utiliser une technique comme celle-ci à long terme.
Josh Dring
Une série de blobs qui se chevauchent créent un collage visuel pour le site Web du portefeuille de John Dring.
Grâce à l'utilisation de couleurs et de formes intéressantes, le site est chaleureux et invitant. Bien que vous ne soyez peut-être pas tout à fait sûr du type de travail qu'il effectue, le dessin abstrait invite les clics.
Lorsque vous utilisez un fond avec des gouttes, pensez à superposer des éléments pour créer un effet de profondeur. Cela peut aider à attirer le regard et rendre la conception plus attrayante.
Andy Patrick
Andy Patrick utilise également des blobs pour son site Web portefeuille, mais avec une approche totalement différente. Là où l'exemple précédent présente des gouttes statiques, les formes de cette conception se déplacent et se déplacent avec de légères animations.
Chaque blob a également une sensation presque tridimensionnelle grâce à des choix de couleurs dégradés qui soulignent la nature arrondie de chaque blob. On a presque l'impression de pouvoir toucher et toucher ces éléments. (J'imagine qu'ils ont la texture molle et spongieuse d'une bonne balle anti-stress.)
Iqor
Iqor utilise des bulles allongées dans le ciel pour permettre aux utilisateurs de regarder au-delà des nuages et de voir ce que fait la société.
Bien que ces bulles soient de nature statique, elles fournissent un mouvement directionnel grâce à une association avec quelque chose qui bouge (des nuages dans le ciel). Ils fonctionnent exceptionnellement bien grâce aux informations qu’ils contiennent, servant d’élément artistique et informatif.
Studio Volbloed
Studio Volbloed utilise une autre bulle statique pour les images dans le pied de page de la page À propos de, afin de montrer aux femmes derrière la société.
Bien que la plupart des gens considèrent initialement les bulles comme des formes décoratives, elles peuvent également servir d'éléments de conteneur pour les images. Ce qui fait que ces bulles fonctionnent, c’est la belle manière dont les formes se lient pour former une seule image.
La forme circulaire se reflète également à d’autres endroits de la conception pour une présence de bulles légères et harmonieuse sur le plan visuel.
Unter Freiem Himmel
Unter Freiem Himmel utilise deux bulles animées qui ressemblent à des bulles lors du chargement de l'écran. L'animation s'arrête rapidement pour laisser des formes presque parfaitement arrondies au-dessus du nom du site.
Le curseur est aussi une simple bulle.
La beauté simple des bulles animées de cette conception est impressionnante et magnifique. Cet exemple prouve que vous n'avez pas besoin d'ajouter beaucoup d'éléments et de techniques pour créer un design percutant. Il y a une beauté innée dans la simplicité comme le montre ce site.
Hashworks
Le dernier exemple de cette collection provient de Hashworks. À première vue, vous ne verrez peut-être même pas les blobs; ils constituent une unité connectée qui sert de logo à la société. Mais la grande version du logo à droite inclut une animation cool - et très floue. (Cliquez pour le voir en action.)
Le blob animé comprend un tas de pièces qui fonctionnent comme des gouttes d’huile dans l’eau avec une conception fluide avec une séparation nette. Ils bougent, se plient et rebondissent jusqu'à ce que chacun des blobs en mouvement forme le logo à un seul blob connecté.
C'est une de ces animations simples et brillantes que vous pouvez regarder encore et encore parce que c'est tellement bien fait. Cet exemple - bien que n'étant pas un projet de conception complet - est un excellent exemple de cette tendance en action.
Chaque bulle est différente
C’est génial quand une tendance en matière de design comporte une technique que vous pouvez créer vous-même. Contrairement à une tendance de couleur où? Tout le monde? utilise une seule teinte, un espacement ou une tendance de regroupement ayant une sensation similaire; utiliser des bulles et des gouttes peut être très différent pour chaque projet.
Quelques-uns des exemples des mini-études de cas ci-dessus se ressemblent, ils représentent différents types d’industries et proviennent de différentes régions du monde. Et ils ont tous en commun d'utiliser des bulles et des blobs.
Textures de fond
Choisir la bonne texture d’arrière-plan pour votre site Web ou votre projet de conception peut être délicat. Notre série vous apprend à travailler avec les textures d'arrière-plan et à les intégrer, ainsi qu'à trouver des graphismes époustouflants.