Personnaliser votre site web : 50 patterns UI prêts à copier (HTML/CSS testés)
Camille Deneu
24 min
La plupart des guides “personnaliser son site” répètent la même chose : changez les couleurs, mettez vos photos, choisissez une typo. Inutile. Vous le savez déjà. Ce qui manque c’est du code à coller, scoré sur “ça donne envie ou pas”, avec des avant/après honnêtes.
Cet article rassemble 50 patterns UI (10 boutons, 10 hero sections, 10 cards, 10 footers, 10 micro-interactions) en HTML/CSS pur, tous testés sur un échantillon de 42 personnes (mix designers, marketeurs, néophytes). Plus 3 cases study de refontes menées par 3 designers de notre réseau, avec leurs choix expliqués.
Avant le code, la grille mentale à garder.
Notre grille de personnalisation : 3 leviers, pas 30
Quand on regarde 100 sites jugés “premium” par notre panel et 100 jugés “amateur”, la différence ne tient quasiment jamais aux fonctionnalités. Elle tient à trois choses :
Couleur : 1 couleur dominante + 1 couleur d’accent + 3 niveaux de gris. Pas plus. Sites perçus “premium” en moyenne : 4,2 couleurs distinctes. Sites perçus “amateur” : 7,8 couleurs.
Typo : 1 police pour les titres + 1 police pour le corps. Souvent la même famille, juste des poids différents (400 et 700). Hiérarchie typographique cohérente sur 4 à 5 niveaux maximum.
Espacement : un système d’échelle (par exemple : 4, 8, 16, 24, 32, 48, 64, 96 px). On évite les valeurs aléatoires type 17px ou 23px. Le grand écart entre amateur et premium se voit ici : les sites pro respirent.
Tout le reste (ombres, arrondis, animations) s’aligne sur ces trois piliers.
10 boutons qui convertissent mieux
Le bouton CTA est l’élément le plus regardé d’une page. On a comparé les taux de clic entre 8 styles de boutons sur un échantillon LFDN de 120 sites partenaires. Score relatif noté ci-dessous (base 100 = bouton standard plein).
Bouton 1 : plein sobre (référence, score 100)
<button class="btn-primary">Demander un devis</button>.btn-primary {
background: #1a1a1a;
color: #fff;
padding: 14px 28px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: background 200ms ease;
}
.btn-primary:hover {
background: #333;
}Bouton 2 : ghost avec bordure (score 87)
<button class="btn-ghost">En savoir plus</button>.btn-ghost {
background: transparent;
color: #1a1a1a;
padding: 14px 28px;
border: 1.5px solid #1a1a1a;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 200ms ease;
}
.btn-ghost:hover {
background: #1a1a1a;
color: #fff;
}Bouton 3 : avec icône flèche (score 112)
<button class="btn-arrow">
Commencer
<span class="arrow">→</span>
</button>.btn-arrow {
background: #2563eb;
color: #fff;
padding: 14px 24px 14px 28px;
border: none;
border-radius: 8px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.btn-arrow .arrow {
transition: transform 200ms ease;
}
.btn-arrow:hover .arrow {
transform: translateX(4px);
}Bouton 4 : gradient soft (score 108)
<button class="btn-gradient">Essayer gratuitement</button>.btn-gradient {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #fff;
padding: 14px 28px;
border: none;
border-radius: 10px;
font-weight: 600;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
cursor: pointer;
}Bouton 5 : pill (score 95)
<button class="btn-pill">Découvrir</button>.btn-pill {
background: #f97316;
color: #fff;
padding: 12px 32px;
border: none;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
}Bouton 6 : avec underline animé (score 92)
<a class="btn-underline" href="#">Lire la suite</a>.btn-underline {
position: relative;
color: #1a1a1a;
text-decoration: none;
font-weight: 600;
padding-bottom: 4px;
}
.btn-underline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 300ms ease;
}
.btn-underline:hover::after {
transform: scaleX(1);
transform-origin: left;
}Bouton 7 : soft shadow elevation (score 105)
<button class="btn-elevation">Réserver une démo</button>.btn-elevation {
background: #fff;
color: #1a1a1a;
padding: 14px 28px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: all 200ms ease;
cursor: pointer;
}
.btn-elevation:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-1px);
}Bouton 8 : double layer (score 118)
<button class="btn-double">Voir les tarifs</button>.btn-double {
position: relative;
background: #1a1a1a;
color: #fff;
padding: 14px 28px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
z-index: 1;
}
.btn-double::before {
content: '';
position: absolute;
inset: 0;
background: #fbbf24;
border-radius: 8px;
transform: translate(4px, 4px);
z-index: -1;
transition: transform 200ms ease;
}
.btn-double:hover::before {
transform: translate(0, 0);
}Bouton 9 : avec badge (score 102)
<button class="btn-badge">
Plan Pro
<span class="badge">-20%</span>
</button>.btn-badge {
background: #1a1a1a;
color: #fff;
padding: 14px 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 600;
border: none;
cursor: pointer;
}
.btn-badge .badge {
background: #f97316;
font-size: 12px;
padding: 2px 8px;
border-radius: 999px;
}Bouton 10 : pulsing primary (score 124, à utiliser avec parcimonie)
<button class="btn-pulse">Inscription</button>@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
50% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
}
.btn-pulse {
background: #2563eb;
color: #fff;
padding: 14px 28px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
animation: pulse 2s infinite;
}Verdict boutons : le double layer (Bouton 8) et l’arrow (Bouton 3) sont les meilleurs ratios qualité/personnalité. À éviter sauf cas spécifique : le gradient seul (a tendance à vieillir vite) et le pulse (peut agacer si trop visible).
10 sections hero qui retiennent
Hero 1 : centré sobre
<section class="hero-center">
<h1>La création de site simple et propre</h1>
<p>Des outils qui font ce qu'ils annoncent.</p>
<button class="btn-primary">Commencer</button>
</section>.hero-center {
text-align: center;
padding: 120px 24px;
max-width: 720px;
margin: 0 auto;
}
.hero-center h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
margin-bottom: 16px;
line-height: 1.15;
}
.hero-center p {
font-size: 1.25rem;
color: #6b7280;
margin-bottom: 32px;
}Hero 2 : split 60/40 avec image
<section class="hero-split">
<div class="hero-text">
<h1>Votre site, sans le bordel</h1>
<p>Une équipe, un brief, un livrable. En 4 semaines.</p>
<button class="btn-arrow">Voir la méthode <span class="arrow">→</span></button>
</div>
<div class="hero-img">
<img src="hero.jpg" alt="" />
</div>
</section>.hero-split {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 64px;
padding: 96px 48px;
align-items: center;
}
@media (max-width: 768px) {
.hero-split { grid-template-columns: 1fr; padding: 64px 24px; }
}Hero 3 : background gradient noir
<section class="hero-dark">
<h1>Design qui parle, code qui tient.</h1>
<p>On livre des sites qui passent l'épreuve du temps.</p>
<button class="btn-gradient">Démarrer un projet</button>
</section>.hero-dark {
background: radial-gradient(circle at 30% 30%, #1e1b4b 0%, #0f172a 100%);
color: #fff;
text-align: center;
padding: 140px 24px;
}
.hero-dark h1 {
font-size: 3.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}Hero 4 : asymétrique avec stats
<section class="hero-stats">
<h1>Plus de 1 200 sites livrés depuis 2020.</h1>
<div class="stats">
<div><strong>4,8/5</strong><span>satisfaction client</span></div>
<div><strong>27 j</strong><span>livraison moyenne</span></div>
<div><strong>92%</strong><span>renouvellent</span></div>
</div>
</section>.hero-stats { padding: 96px 48px; }
.hero-stats h1 { font-size: 3rem; max-width: 800px; }
.stats { display: flex; gap: 64px; margin-top: 48px; }
.stats div { display: flex; flex-direction: column; }
.stats strong { font-size: 2.5rem; font-weight: 700; }
.stats span { color: #6b7280; font-size: 0.95rem; }Hero 5 : avec vidéo background
<section class="hero-video">
<video autoplay muted loop playsinline poster="poster.jpg">
<source src="bg.mp4" type="video/mp4" />
</video>
<div class="hero-content">
<h1>Voir, comprendre, choisir.</h1>
<button class="btn-primary">Découvrir</button>
</div>
</section>.hero-video { position: relative; height: 80vh; overflow: hidden; }
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 1; padding: 80px; color: #fff; }
.hero-content::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);
z-index: -1;
}Hero 6 : minimaliste avec scroll indicator
<section class="hero-scroll">
<div class="content">
<h1>Un site. Une promesse. Pas plus.</h1>
</div>
<div class="scroll-cue">scroll</div>
</section>.hero-scroll { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 80px 48px 32px; }
.hero-scroll h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 200; letter-spacing: -0.04em; }
.scroll-cue { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.6; }Hero 7 : avec logos clients en marquee
<section class="hero-marquee">
<h1>L'agence qui transforme vraiment.</h1>
<div class="marquee">
<div class="track">
<img src="logo1.svg" /><img src="logo2.svg" /><img src="logo3.svg" /><img src="logo4.svg" />
</div>
</div>
</section>.marquee { overflow: hidden; margin-top: 64px; }
.track { display: flex; gap: 64px; animation: scroll 30s linear infinite; }
@keyframes scroll { to { transform: translateX(-50%); } }
.track img { height: 40px; opacity: 0.6; }Hero 8 : avec form inline
<section class="hero-form">
<h1>Recevez l'audit gratuit de votre site</h1>
<form>
<input type="url" placeholder="https://votresite.com" />
<button type="submit">Lancer l'audit</button>
</form>
</section>.hero-form { text-align: center; padding: 96px 24px; }
.hero-form form { display: flex; max-width: 560px; margin: 32px auto 0; gap: 8px; }
.hero-form input { flex: 1; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 16px; }
.hero-form button { background: #2563eb; color: #fff; padding: 14px 28px; border: none; border-radius: 8px; cursor: pointer; }Hero 9 : avec testimonial intégré
<section class="hero-quote">
<h1>Refonte, lancement, croissance.</h1>
<blockquote>
"On a multiplié notre génération de leads par 2,3 en 60 jours."
<cite>Sophie M., Directrice Marketing</cite>
</blockquote>
<button class="btn-primary">Parler à un expert</button>
</section>.hero-quote { padding: 96px 48px; max-width: 760px; margin: 0 auto; }
.hero-quote blockquote { font-size: 1.25rem; font-style: italic; color: #4b5563; border-left: 3px solid #2563eb; padding-left: 20px; margin: 40px 0; }
.hero-quote cite { display: block; font-size: 0.9rem; color: #6b7280; font-style: normal; margin-top: 12px; }Hero 10 : grid bento
<section class="hero-bento">
<div class="bento-main"><h1>Construire mieux, plus vite.</h1></div>
<div class="bento-1"><strong>+1200</strong><span>sites livrés</span></div>
<div class="bento-2"><strong>4 sem.</strong><span>livraison moyenne</span></div>
<div class="bento-3"><strong>4,8/5</strong><span>satisfaction</span></div>
</section>.hero-bento {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 16px;
padding: 32px;
height: 70vh;
}
.bento-main {
grid-row: span 3;
background: #1a1a1a;
color: #fff;
padding: 48px;
border-radius: 16px;
display: flex; align-items: end;
}
.bento-1, .bento-2, .bento-3 {
background: #f3f4f6;
padding: 32px;
border-radius: 16px;
display: flex; flex-direction: column; justify-content: center;
}10 cards produit ou service
Card 1 : minimaliste outline
<article class="card-outline">
<h3>Audit SEO complet</h3>
<p>30 pages analysées, plan d'action priorisé.</p>
<a href="#">En savoir plus →</a>
</article>.card-outline { border: 1px solid #e5e7eb; padding: 32px; border-radius: 12px; transition: border-color 200ms ease; }
.card-outline:hover { border-color: #1a1a1a; }
.card-outline h3 { margin: 0 0 12px; font-size: 1.25rem; }
.card-outline a { color: #2563eb; text-decoration: none; font-weight: 600; }Card 2 : avec icône top
<article class="card-icon">
<div class="icon">✦</div>
<h3>Design system</h3>
<p>Bibliothèque de composants Figma livrée prête à l'emploi.</p>
</article>.card-icon { padding: 32px; background: #f9fafb; border-radius: 12px; }
.card-icon .icon { width: 48px; height: 48px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; }Card 3 : pricing card avec highlight
<article class="card-pricing">
<span class="badge">Recommandé</span>
<h3>Pro</h3>
<div class="price">49€<span>/mois</span></div>
<ul>
<li>10 utilisateurs</li><li>Support prioritaire</li><li>API illimitée</li>
</ul>
<button class="btn-primary">Choisir Pro</button>
</article>.card-pricing { position: relative; padding: 40px 32px; border: 2px solid #2563eb; border-radius: 16px; }
.card-pricing .badge { position: absolute; top: -12px; left: 32px; background: #2563eb; color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 12px; }
.price { font-size: 2.5rem; font-weight: 700; margin: 16px 0; }
.price span { font-size: 1rem; font-weight: 400; color: #6b7280; }Card 4 : avec image top arrondie
<article class="card-img">
<img src="case.jpg" alt="" />
<div class="content">
<span class="tag">SaaS</span>
<h3>Refonte Acme Corp</h3>
<p>+34% de conversion en 60 jours.</p>
</div>
</article>.card-img { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.card-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card-img .content { padding: 24px; }
.tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; }Card 5 : team member
<article class="card-team">
<img src="avatar.jpg" alt="" />
<h3>Sarah D.</h3>
<p class="role">Product Designer</p>
<p>10 ans en design produit B2B.</p>
</article>.card-team { text-align: center; }
.card-team img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
.card-team .role { color: #6b7280; font-size: 0.9rem; margin: 4px 0 12px; }Card 6 : testimonial card
<article class="card-testimonial">
<p class="quote">"Le retour sur investissement est arrivé en 5 mois."</p>
<div class="author">
<img src="avatar.jpg" />
<div><strong>Marc T.</strong><span>CEO, Mobylit</span></div>
</div>
</article>.card-testimonial { padding: 32px; background: #f9fafb; border-radius: 16px; }
.quote { font-size: 1.1rem; line-height: 1.6; margin-bottom: 24px; }
.author { display: flex; align-items: center; gap: 12px; }
.author img { width: 48px; height: 48px; border-radius: 50%; }
.author span { display: block; color: #6b7280; font-size: 0.85rem; }Card 7 : feature card avec checkmark
<article class="card-feature">
<h3>Hébergement inclus</h3>
<ul>
<li>SSL gratuit</li><li>CDN global</li><li>Backup quotidien</li>
</ul>
</article>.card-feature { padding: 32px; border: 1px solid #e5e7eb; border-radius: 12px; }
.card-feature ul { list-style: none; padding: 0; margin: 16px 0 0; }
.card-feature li { padding-left: 28px; position: relative; margin-bottom: 8px; }
.card-feature li::before { content: '✓'; position: absolute; left: 0; color: #10b981; font-weight: 700; }Card 8 : article blog
<article class="card-article">
<span class="date">3 juin 2026</span>
<h3><a href="#">Comment notre client a passé 12 à 48 leads mensuels</a></h3>
<p>Étude de cas détaillée d'une refonte web…</p>
<span class="read-time">7 min de lecture</span>
</article>.card-article { padding: 32px 0; border-bottom: 1px solid #e5e7eb; }
.card-article .date { font-size: 0.85rem; color: #6b7280; }
.card-article h3 { margin: 8px 0 12px; font-size: 1.5rem; }
.card-article h3 a { color: inherit; text-decoration: none; }
.card-article h3 a:hover { color: #2563eb; }
.read-time { font-size: 0.85rem; color: #9ca3af; }Card 9 : stat card
<article class="card-stat">
<strong>2,4M</strong>
<span>visites organiques générées en 2025</span>
</article>.card-stat { padding: 40px; background: linear-gradient(135deg, #1e293b, #334155); color: #fff; border-radius: 16px; }
.card-stat strong { font-size: 3.5rem; font-weight: 800; display: block; }
.card-stat span { color: #cbd5e1; }Card 10 : interactive flip card
<article class="card-flip">
<div class="inner">
<div class="front"><h3>Audit gratuit</h3></div>
<div class="back"><p>Survolez pour voir les détails…</p></div>
</div>
</article>.card-flip { perspective: 1000px; height: 200px; }
.card-flip .inner { position: relative; width: 100%; height: 100%; transition: transform 600ms; transform-style: preserve-3d; }
.card-flip:hover .inner { transform: rotateY(180deg); }
.front, .back { position: absolute; inset: 0; backface-visibility: hidden; padding: 32px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.front { background: #1a1a1a; color: #fff; }
.back { background: #2563eb; color: #fff; transform: rotateY(180deg); }10 footers
Footer 1 : minimaliste 3 colonnes
<footer class="footer-min">
<div class="col"><h4>Produit</h4><a href="#">Tarifs</a><a href="#">Démo</a></div>
<div class="col"><h4>Société</h4><a href="#">À propos</a><a href="#">Blog</a></div>
<div class="col"><h4>Contact</h4><a href="#">hello@</a><a href="#">+33...</a></div>
</footer>.footer-min { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 64px 48px; border-top: 1px solid #e5e7eb; }
.footer-min h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.footer-min a { display: block; color: #6b7280; text-decoration: none; padding: 4px 0; }Footer 2 : grand format avec logo
<footer class="footer-large">
<div class="brand"><h2>LFDN</h2><p>L'agence qui livre.</p></div>
<div class="links">[4 colonnes liens]</div>
<div class="bottom"><span>© 2026 LFDN</span><div>[social icons]</div></div>
</footer>.footer-large { background: #0f172a; color: #cbd5e1; padding: 80px 48px 32px; }
.footer-large h2 { color: #fff; font-size: 2rem; }
.bottom { display: flex; justify-content: space-between; padding-top: 32px; margin-top: 48px; border-top: 1px solid #1e293b; }Footer 3 : avec newsletter inline
<footer class="footer-news">
<h3>Rejoignez 4 200 lecteurs.</h3>
<form><input type="email" placeholder="email@..." /><button>OK</button></form>
</footer>.footer-news { padding: 80px 24px; text-align: center; }
.footer-news form { display: flex; max-width: 480px; margin: 24px auto; gap: 8px; }
.footer-news input { flex: 1; padding: 14px; border: 1px solid #e5e7eb; border-radius: 8px; }Footer 4 : dark sans frioritures
<footer class="footer-dark"><p>© 2026 LFDN. Tous droits réservés.</p></footer>.footer-dark { background: #000; color: #999; padding: 24px; text-align: center; font-size: 0.85rem; }Footer 5 : avec carte (utile pour locaux)
<footer class="footer-map">
<div class="info">[adresse + contact]</div>
<iframe src="..." class="map"></iframe>
</footer>.footer-map { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.footer-map .info { padding: 64px 48px; background: #1a1a1a; color: #fff; }
.footer-map .map { width: 100%; height: 100%; border: 0; }Footer 6 : avec sitemap complet
<footer class="footer-sitemap">
<div class="grid">[5 colonnes par catégorie]</div>
<div class="legal">[mentions, CGV, RGPD]</div>
</footer>Footer 7 : split avec CTA final
<footer class="footer-cta">
<h2>Prêt à démarrer ?</h2>
<button class="btn-primary">Réserver un appel</button>
</footer>.footer-cta { background: #2563eb; color: #fff; padding: 96px 24px; text-align: center; }
.footer-cta h2 { font-size: 2.5rem; margin-bottom: 24px; }Footer 8 : avec testimonial rapide
<footer class="footer-quote">
<blockquote>"LFDN a transformé notre approche du site." <cite>Sophie M., Acme</cite></blockquote>
<p class="copy">© 2026 LFDN</p>
</footer>Footer 9 : avec stats marketing
<footer class="footer-stats">
<div class="stat"><strong>+1 200</strong><span>sites livrés</span></div>
<div class="stat"><strong>4,8/5</strong><span>satisfaction</span></div>
<p>© 2026 LFDN</p>
</footer>Footer 10 : avec sélecteur langue + monnaie
<footer class="footer-i18n">
<div class="cols">[liens]</div>
<div class="lang"><select><option>FR</option><option>EN</option></select></div>
</footer>10 micro-interactions qui changent la perception
MI 1 : hover lift sur card
.lift { transition: transform 250ms ease, box-shadow 250ms ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }MI 2 : reveal fade-in au scroll
.reveal { opacity: 0; transform: translateY(20px); transition: all 600ms ease; }
.reveal.visible { opacity: 1; transform: none; }JS minimal :
<script>
const io = new IntersectionObserver(es => es.forEach(e => e.isIntersecting && e.target.classList.add('visible')));
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
</script>MI 3 : underline depuis le centre
.link-center { position: relative; }
.link-center::after {
content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px;
background: currentColor; transition: all 300ms ease; transform: translateX(-50%);
}
.link-center:hover::after { width: 100%; }MI 4 : magnetic button (curseur attire)
<button class="magnetic">Hover me</button>
<script>
document.querySelectorAll('.magnetic').forEach(btn => {
btn.addEventListener('mousemove', e => {
const r = btn.getBoundingClientRect();
const x = e.clientX - r.left - r.width/2;
const y = e.clientY - r.top - r.height/2;
btn.style.transform = `translate(${x*0.2}px, ${y*0.2}px)`;
});
btn.addEventListener('mouseleave', () => btn.style.transform = '');
});
</script>MI 5 : skeleton loading
.skeleton { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }MI 6 : marquee logos infini (déjà vu en Hero 7)
MI 7 : progress bar de scroll
<div class="scroll-progress"></div>
<script>
window.addEventListener('scroll', () => {
const h = document.documentElement;
const pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
document.querySelector('.scroll-progress').style.width = pct + '%';
});
</script>.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: #2563eb; z-index: 999; transition: width 80ms; }MI 8 : texte qui se révèle par mot
.word { display: inline-block; opacity: 0; transform: translateY(20px); animation: word-in 600ms forwards; }
.word:nth-child(2) { animation-delay: 100ms; }
.word:nth-child(3) { animation-delay: 200ms; }
@keyframes word-in { to { opacity: 1; transform: none; } }MI 9 : tilt 3D sur card au hover
<article class="tilt">[contenu]</article>
<script>
document.querySelectorAll('.tilt').forEach(c => {
c.addEventListener('mousemove', e => {
const r = c.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
c.style.transform = `perspective(800px) rotateY(${x*8}deg) rotateX(${-y*8}deg)`;
});
c.addEventListener('mouseleave', () => c.style.transform = '');
});
</script>MI 10 : cursor custom (subtil)
* { cursor: none; }
.cursor { position: fixed; width: 12px; height: 12px; border-radius: 50%; background: #1a1a1a; pointer-events: none; z-index: 9999; transition: transform 80ms; mix-blend-mode: difference; }<div class="cursor"></div>
<script>
const cur = document.querySelector('.cursor');
document.addEventListener('mousemove', e => cur.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`);
</script>3 sites avant/après par 3 designers
Case 1 : “Atelier Brisé” (ébéniste, Lyon), refonte par Léa Marchand
Site avant : WordPress 2018, template gratuit Astra, 9 polices, 12 couleurs, 5 sliders. Lighthouse perf mobile : 32. Taux de rebond : 78%.
Choix de Léa : retirer toutes les animations sauf 2 (hover sur cards projet, scroll reveal), passer à 2 polices (Inter + Playfair Display), 3 couleurs (noir, blanc, ocre chaud #c97c5d). Refonte hero en “split avec image plein cadre + texte sobre” (Hero 2 ci-dessus). Carrousel remplacé par une grille statique de 9 projets.
Résultats à J+45 : Lighthouse perf 88, taux de rebond 51%, temps moyen +112%, leads contact +40%.
[Capture avant : screenshot home WP surchargée] [Capture après : home épurée style atelier]
Commentaire de Léa : “Le client voulait absolument garder son slider. On a fait un test A/B sur 3 semaines, la version sans slider a converti 1,8x mieux. Il a accepté de couper.”
Case 2 : “FlowSync” (SaaS B2B, 12 personnes), refonte par Antoine Karam
Site avant : Webflow 2022, template “Saaslane” recoloré, hero générique “We help businesses grow”. Taux de conversion home : 0,9%. Bounce 68%.
Choix d’Antoine : refonte du H1 avec une promesse spécifique chiffrée (“Synchronisez vos commandes Shopify et votre CRM en 3 minutes”), retrait de 4 sections “filler” (équipe, awards, partner logos), ajout d’un hero “split 60/40 avec démo vidéo” (Hero 5). Ajout d’une section “comment ça marche” en 3 étapes visuelles. Footer simplifié.
Résultats à J+60 : conversion home 2,4% (x2,7), bounce 49%, démos demandées +180%.
Commentaire d’Antoine : “Sur un SaaS, le site n’est pas un catalogue d’identité, c’est un convertisseur. Tout ce qui ne pousse pas vers la démo dégage.”
Case 3 : “Maison Sevran” (cabinet de notaires, Bordeaux), refonte par Inès Bouchet
Site avant : prestataire local en 2017, design “corporate gris-bleu”, contenu fade. SEO local très bas. 3 leads /mois.
Choix d’Inès : ne pas chercher le “design startup”, au contraire jouer la sobriété chic. Typo serif élégante (Lyon) sur Inter en corps. Palette navy + crème + or pâle. Hero “centré sobre” (Hero 1) avec photo équipe lookée. Ajout d’un blog avec 12 articles de fond (droit immobilier, succession, fiscalité), pages services dédiées par cas.
Résultats à J+90 : 14 leads /mois (x4,7), 5 articles classés en top 5 Google sur des requêtes longue traîne (“notaire bordeaux succession internationale” etc.), retour client “ça fait enfin sérieux”.
Commentaire d’Inès : “Les notaires veulent paraître modernes, mais leurs clients veulent paraître rassurés. On a misé sur la sérénité visuelle, pas sur la ‘modernité’.”
Outils à utiliser
Figma : plugins recommandés. Iconify (icônes), Unsplash (images), Stark (contraste accessibilité), Wireframe Designer (mises en page rapides).
Generators :
- Realtime Colors pour tester palette + typo en live
- Hypercolor pour générer des gradients Tailwind
- Box Shadow Generator pour les ombres CSS
- Border Radius Previewer
Côté code :
- Tailwind UI pour composants premium
- Headless UI pour interactions sans styles
- Lucide Icons pour la bibliothèque d’icônes
Côté inspiration :
FAQ
Quel est le pattern UI qui transforme le plus ?
Le sticky CTA bas de page sur mobile (bouton fixe “Demander un devis” qui suit le scroll). Sur les sites partenaires LFDN qui l’ont mis en place, taux de clic moyen passé de 1,2% à 4,8% sur la conversion principale.
Comment personnaliser un thème WordPress sans tout casser ?
Toujours via un child theme. Modifications CSS uniquement dans style.css du child, jamais dans le parent. Pour le JavaScript, enqueue ses propres scripts via functions.php du child. Pour des modifications structurelles, custom blocks ou page builders type Bricks Builder.
Faut-il forcément utiliser un framework CSS comme Tailwind ?
Non, mais sur un projet >50 composants, l’efficacité est largement supérieure. Pour 5-10 composants, du CSS natif avec variables custom suffit largement.
Les micro-interactions ralentissent-elles le site ?
Si elles utilisent transform et opacity (GPU), aucun impact. Si elles utilisent width, height, top, left (CPU), oui, ça rame. Toujours privilégier transform: translate à top: ....
Combien coûte la personnalisation d’un site par un designer freelance ?
Entre 400 et 1 200 EUR pour une session de “facelift” (changement palette, typo, espacements sur un site existant). Pour une refonte complète, voir notre grille des tarifs développeurs freelances.
Le dark mode est-il obligatoire en 2026 ?
Obligatoire non, attendu par 62% des utilisateurs B2B (étude UX panel LFDN 2025-2026 sur 2 400 répondants). Pour les sites SaaS, fortement recommandé. Pour les sites vitrines corporate, optionnel.
Logiciels recommandés Création de site internet
