4 avril 2026
Vous n'avez pas besoin d'être graphiste pour avoir un site web qui donne envie. La majorité des sites qui convertissent bien ne sont pas des chefs-d'œuvre artistiques — ils respectent simplement quelques principes visuels fondamentaux que n'importe qui peut apprendre en une heure.
Le design web n'est pas une question de goût personnel. C'est une science de la lisibilité et de la confiance. Un visiteur décide en moins de 3 secondes s'il reste sur votre site ou s'il repart chez un concurrent. Ces 3 secondes se jouent sur le visuel, bien avant qu'il lise une seule ligne de texte.
Dans ce guide, vous allez découvrir 5 principes UX accessibles aux débutants, illustrés par des exemples concrets. Appliquez-les et votre site sera déjà meilleur que 80 % des sites de petites entreprises françaises.
Votre page doit raconter une histoire visuelle. L'œil humain suit naturellement une logique de taille et de contraste : il va d'abord au plus grand, puis au plus contrasté, puis au reste.
En pratique : votre titre principal (H1) doit être le texte le plus grand de la page, environ 2 à 3 fois plus grand que votre texte courant. Vos sous-titres (H2, H3) sont intermédiaires. Le corps de texte est plus petit mais toujours lisible — jamais en dessous de 16 pixels.
Bon exemple : « Plombier à Nantes — Devis gratuit en 2h » en grand titre, suivi d'un sous-titre « Intervention rapide 7j/7 », puis le texte de présentation en corps normal.
Mauvais exemple : Tout le texte à la même taille, sans hiérarchie. L'œil ne sait pas où aller, le visiteur décroche.
Un texte gris clair sur fond blanc, ça semble élégant. Mais ça fatigue les yeux et ça exclut une partie de vos visiteurs qui ont des difficultés visuelles. Le Web Content Accessibility Guidelines (WCAG) recommande un ratio de contraste minimum de 4,5:1 entre le texte et l'arrière-plan.
Règle simple : votre texte principal doit être en noir ou très sombre (foncé) sur fond blanc ou très clair — et l'inverse pour les sections colorées. Testez votre contraste gratuitement sur le site WebAIM Contrast Checker en entrant vos codes couleur.
Les liens doivent être visuellement distinguables du texte normal : couleur différente, souligné, ou les deux. Ne les rendez pas invisibles au nom de l'esthétique.
Votre CTA (Call To Action) est le bouton le plus important de votre page. C'est lui qui déclenche les contacts, les devis, les achats. Il doit être impossible à rater.
Un bon bouton CTA doit : avoir une couleur qui tranche nettement avec le reste de la page (souvent une couleur chaude comme l'orange ou le vert si votre charte est bleue), être suffisamment grand (minimum 44x44 pixels sur mobile), contenir un verbe d'action clair (« Demander un devis », « Appeler maintenant », « Voir nos tarifs »).
Bon exemple : Site bleu marine avec un bouton orange vif « Obtenir mon devis gratuit » au centre de la page d'accueil.
Mauvais exemple : Un lien texte discret tout en bas de page « Nous contacter » en bleu standard, noyé dans le reste du contenu.
L'espace blanc (ou espace négatif) est l'espace vide entre les éléments de votre page. Les débutants ont tendance à remplir chaque centimètre carré, craignant que leur site « paraisse vide ». C'est l'erreur inverse qu'il faut faire.
L'espace blanc ne gaspille pas l'espace — il dirige l'attention. Il isole les éléments importants, rend le texte plus lisible et donne une impression de qualité et de professionnalisme. Les grandes marques (Apple, Hermès, Aesop) utilisent massivement l'espace blanc pour signaler le luxe et la confiance.
En pratique : augmentez les marges entre vos sections, espacez vos paragraphes, ne collez pas vos images contre le texte. Si votre page vous semble « aérée », c'est probablement bien.
La police : Utilisez une seule famille de polices pour tout le site, deux au maximum (une pour les titres, une pour le corps). Les polices sans-serif comme Inter, Lato ou Open Sans sont excellentes pour le web — lisibles sur tous les écrans. Évitez les polices décoratives pour le corps de texte.
Taille minimum : 16px pour le texte courant. Sur mobile, les polices trop petites obligent à zoomer, ce qui frustre les visiteurs.
Les images : Une seule mauvaise image peut détruire la crédibilité de tout un site. Évitez les photos stock génériques aux sourires trop parfaits que tout le monde reconnaît. Préférez vos propres photos — même prises au smartphone — ou des photos stock de qualité sur des plateformes comme Unsplash ou Pexels. Compressez toujours vos images avant de les mettre en ligne (outil gratuit : Squoosh) pour ne pas ralentir votre site.
Je ne suis pas graphiste, comment choisir mes couleurs ? Partez d'une couleur principale liée à votre secteur ou à votre charte existante (logo, carte de visite). Ajoutez une couleur d'accentuation pour vos boutons — choisissez une couleur complémentaire ou contrastante. Il existe des outils gratuits comme Coolors.co qui génèrent automatiquement des palettes harmonieuses. Limitez-vous à 2-3 couleurs maximum pour conserver une cohérence visuelle.
Mon site doit-il être « beau » ou « fonctionnel » ? Les deux ne s'opposent pas, mais si vous deviez choisir : fonctionnel prime toujours. Un site simple, clair et rapide convertit mieux qu'un site spectaculaire mais confus. Les erreurs de fonctionnalité (bouton introuvable, texte illisible, formulaire qui bug) coûtent des clients. Les erreurs esthétiques légères, moins.
Combien de polices puis-je utiliser ? Maximum deux. Une pour les titres, une pour le corps du texte. Au-delà, votre site semble amateur et brouillon. Si vous n'êtes pas sûr, utilisez une seule police en jouant sur les graisses (regular, medium, bold) pour créer la hiérarchie.
Ces 5 principes — hiérarchie visuelle, contraste, CTA visible, espace blanc et typographie soignée — sont accessibles à n'importe qui sans formation en design. Appliquez-les et votre site inspirera confiance dès les premières secondes.
Pour aller encore plus vite, site1euro.fr propose des templates déjà optimisés selon ces principes, conçus spécifiquement pour les artisans et TPE françaises. Votre site professionnel est à portée de main — pour 1 euro, sans avoir à toucher une seule ligne de code.
Pret a creer votre site web professionnel ?
Site vitrine ou e-commerce — a partir de 1 euro/jour, maintenance incluse.
Creer mon site a 1 euro/jour →