Les cartes sont les blocs de construction du web design moderne. Nielsen Norman Group les définit comme des contenants qui regroupent informations liées en unités scannables et flexibles. Nous concevons des systèmes de cartes qui aident les utilisateurs à parcourir, comparer et décider — que vous montriez 6 services ou 6 000 produits.
VARIANTES DE MODÈLE
Présentez vos offres commerciales dans une grille lisible. Chaque carte inclut une icône, un titre, une description courte et un CTA.
Le pilier du e-commerce. Image, titre, prix, note et CTA d'ajout au panier. Conçu pour un parcours visuel rapide.
Présentez votre équipe avec photo, nom, fonction et bio optionnelle ou liens sociaux.
Présentez vos réalisations avec une image dominante, titre du projet, nom client et tag catégorie. L'image fait l'essentiel de la vente.
Comparez les niveaux côte à côte. Chaque carte inclut le nom du plan, le prix, la liste de fonctionnalités et un CTA.
Affichez les avis clients avec avatar, nom, fonction, entreprise et le texte du témoignage.
Prévisualisez les articles de blog avec image mise en avant, titre, extrait, auteur, date et tag catégorie.
Grille de cartes asymétrique où les cartes ont différentes tailles — certaines prennent 2 colonnes, d'autres sont hautes, d'autres larges.
ANIMATIONS & EFFETS
Les cartes apparaissent une par une avec un léger délai entre chacune, créant un effet de cascade pendant le défilement.
Quand l'utiliser : Toute grille de cartes où le contenu se charge pendant le défilement de l'utilisateur. Crée du rythme et attire l'attention.
La carte s'élève (translateY -4px à -8px) et l'ombre s'approfondit au survol, simulant une profondeur physique.
Quand l'utiliser : Toute carte cliquable. L'interaction de carte la plus commune et attendue.
L'image de la carte s'agrandit légèrement (1.05-1.1x) au survol tandis que le conteneur masque le débordement.
Quand l'utiliser : Cartes portfolio, cartes produit, cartes blog — partout où l'image est l'élément visuel principal.
Un overlay semi-transparent glisse au survol, révélant des informations supplémentaires masquées par défaut.
Quand l'utiliser : Grilles portfolio où vous voulez une grille visuelle épurée mais devez montrer des détails à l'interaction.
Layout style Pinterest où des cartes de différentes hauteurs s'ajustent sans espaces. De nouvelles cartes se chargent dynamiquement.
Quand l'utiliser : Galeries d'images, archives de blog, flux de contenu généré par les utilisateurs avec des hauteurs naturellement différentes.
La carte pivote à 180 degrés au survol pour révéler une face arrière avec un contenu différent.
Quand l'utiliser : Cartes équipe (recto : photo, verso : bio), cartes tarification (recto : fonctionnalités, verso : comparaison). À utiliser avec parcimonie.
BONNES PRATIQUES
EXEMPLES PRIMÉS
Cartes de fonctionnalités sur fond sombre avec bordures gradient subtiles. Minimaliste, dense en informations et techniquement précis. Chaque carte communique une fonctionnalité.
Layout grille bento avec des cartes de différentes tailles. Effets glassmorphiques et animations subtiles rendent les données financières denses approchables.
Cartes produit perfectionnées. Carrousel d'images par carte, overlay prix, note et icône cœur. Montre exactement assez d'informations pour décider de cliquer.
Grille de cartes épurée avec hauteurs cohérentes, catégories claires et vignettes d'aperçu. Le survol révèle un CTA "Utiliser le modèle". Évolue parfaitement.
NOTRE PROCESSUS
Inventoriez tous les éléments qui apparaîtront comme cartes. Définissez le modèle de données : quels champs existent et leurs contraintes de longueur de contenu.
Définissez le nombre de colonnes par breakpoint (4 desktop, 2 tablette, 1 mobile). Fixez l'espacement, le padding et le border-radius.
Concevez la carte dans Figma comme un composant réutilisable avec des variantes : par défaut, survol, actif, chargement, état vide.
Définissez les effets de survol, révélations déclenchées par le défilement et timing de transition. Gardez le temps d'animation total sous 500ms.
Construisez avec CSS Grid ou Flexbox. Architecture basée sur les composants. GSAP pour les animations de défilement, CSS pour les effets de survol.
Testez avec de vraies données, cas limites, multi-navigateur, interaction tactile sur mobile et audit d'accessibilité.
PATTERNS ASSOCIÉS
La section qui présente votre contenu avant la grille de cartes.
En savoir plus →Un modèle de carte spécialisé pour comparer les niveaux de service.
En savoir plus →Cartes de témoignages et grilles de logos qui renforcent la confiance.
En savoir plus →Cartes d'articles et layouts de découverte de contenu.
En savoir plus →FAQ
Les cartes fonctionnent mieux pour parcourir des collections diverses (produits, services, portfolio). Les listes fonctionnent mieux pour du contenu classé ou séquentiel. Les tableaux fonctionnent mieux pour des comparaisons riches en données. Le layout doit correspondre à l'intention de l'utilisateur.
3-4 sur desktop (1280px+), 2 sur tablette (768px), 1 sur mobile (375px). Plus de 4 par ligne rend les cartes individuelles trop petites à parcourir.
Oui, toujours. Des ratios mixtes créent des hauteurs de cartes inégales qui brisent la grille. Utilisez object-fit: cover pour recadrer les images de manière cohérente.
Définissez une hauteur de carte fixe par ligne. Tronquez le texte long avec CSS line-clamp. Concevez pour le pire cas et assurez-vous que le contenu plus court reste équilibré.
Nous auditerons votre layout actuel, identifierons les opportunités de conception basée sur les cartes et proposerons un système évolutif.