Le Claymorphisme

Le Claymorphisme pour un design qui donne une impression de pâte à modeler. Des effets de relief, des personnages cartoon en 3d et couleurs pastel, c’est le nouveau style dont on entend parler en 2022.
Ce style est utilisé principalement par les start-up dans le secteur technologique, et aussi dans le design d’interface de type CRM ou tableau de bord.

Un proche cousin du neumorphisme

Comme le Neumorphisme le Claymorphisme se base sur les effets de relief en jouant sur les ombres et les lumières, on les différencie dans le rendu souhaité. Alors que sur le Neumorphime on va chercher un aspect épuré et classe, le Claymorphisme va plutôt donné un aspect sympa, qui ne se prend pas la tête, presque un peu enfantin.

Comment faire du Claymorphisme ?

La base de ce type de design, c’est le border-radius, les box-shadow intérieur et extérieur ainsi que les dégradés.

Pour L’exemple nous avons un carré de 250 px/250 px auquel on applique différents box-shadow

body{
   background-image: linear-gradient(to right top, #8bb9ff, #95a5ff, #ac8cf7, #c96de2, #e340c1);
.exemple{
width:250px;
height: 250px;
background: #fff;
border-radius: 1rem;
box-shadow: 5px 5px 7px 5px rgba(0,0,0,0.18), inset -10px -10px 11px 3px rgba(94,154,255,0.3), inset 17px 16px 11px 3px rgba(193,148,255,0.2);
}

De l’animation pour un ensemble cohérent

L’animation est, elle aussi, très importante pour faire vivre ce design, et le rendre crédible, n’hésitez pas à faire un peu de parallaxe, ou de faire flotter vos blocs avec une petite animation de bas en haut. Et surtout pour vos hover, jouer avec les ombres est le meilleur moyen de rendre le tout cohérent.

Une place pour la 3D

Le Claymorphisme se marie très bien avec la 3D, des modèles smooth arrondi et simple. Pour vos modèles des sites propose d’acheter des modèles tout fait comme cgtrader.com pour ne citer qu’un des plus connus, mais il vous faudra un logiciel 3D pour les transformer en image. Pour ça vous pouvez utiliser un Blender qui est un logiciel open source (gratuit) et qui après un petit apprentissage vous permettra aussi de créer vos propres modèles 3D.
Vous pouvez aussi les importer directement si vous utiliser pour votre site du Three JS.

Travaux pratiques

Pour l’exemple nous trouverez un formulaire designer en Claymorphisme. N’hésitez pas m’envoyer vos plus beaux designs Claymorphisés.

josuao

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.