← Article précédent Article suivant →
Publié le 30 janvier 2016

Une carte interactive style Material Design pour vos sites e-commerce.

CSS3 Carte Interactive E-Commerce Material

La petite histoire


N'étant pas graphiste, il y a quelques jours j'ai décidé de laisser libre cours à mon imagination en tentant d'aller chatouiller l'esprit artistique. En naviguant alors sur la toile à la recherche d'inspiration, je me suis tout naturellement tourné du côté du Material Design. Personnellement, je vois ce concept de design comme un langage améliorant l'expérience utilisateur. Je me suis dit qu'une carte permettant la présentation d'un article pour un site e-commerce pourraît s'avérer être sympa à réaliser. Un site e-commerce ici pour l'exemple, mais la carte peut également être utilisée dans d'autres contextes.

Dans un premier temps, j'ai repaint le fond à l'aide d'une couleur grise, puis ajouté un cadre au centre de la page. Quelques minutes plus tard, ce cadre comportait :
  • L'en-tête de la carte rempli par une photo
  • Le bouton flottant pour la mise en favoris de l'article
  • Un emplacement pour une brève description
  • Le pied de la carte accompagné d'un bouton de paiement
Ensuite, la partie amusante commence, les animations. C'est assez drôle de déterminer les animations que nous allons créer car c'est toujours assez complexe. Aussi, concernant ces animations, il faut déterminer :
  • Le point d'entrée, après quel évènement
  • La durée, trop court, pas assez, trop long
  • Le timing, à quel moment
  • La courbe de vitesse
  • Le point de sortie, comment la finaliser
J'ai pu concrétiser mon schéma de pensée via notre fidèle technologie CSS3 et un peu de JavaScript pour les évènements (quand on clic alors on ajoute / supprime une classe CSS particulière).

MaterialUp


MaterialUp est un site regroupant quotidiennement des créations portant sur le Material Design. A l'heure actuelle, deux nouvelles branches exposants des thèmes différents sont nées telles que :
  • iOSUp : iOS & OS X design
  • SiteUp : Web design
  • UpLabs : Regroupement des trois branches existantes

Démo Intéractive (via MaterialUp)


http://www.materialup.com/posts/e-commerce-material-design-card-morphing