Le webdesign d'un site professionnel

Par Aurélie Ducasteaux · mis à jour le 30 août 2026

De quoi on parle

Le webdesign est la conception de l'apparence d'un site : mise en page, typographie, couleurs, images, animations. Il vient après le travail de structure, traité dans la page UX et UI design, et avant l'intégration.

Il a une particularité que le graphisme imprimé n'a pas : il n'existe pas de format fixe. La même page s'affiche sur un téléphone de 360 pixels de large et sur un écran de 2 560. Un webdesign n'est donc pas une image, c'est un système de règles qui produit une mise en page cohérente à toutes les tailles.

C'est pourquoi valider un site sur une seule maquette, en grand écran, ne valide presque rien.

La grille

Toute mise en page tient sur une grille, visible ou non. Elle définit la largeur du contenu, les colonnes et les gouttières qui les séparent.

Ce qui compte en pratique :

• La largeur maximale du texte. Une ligne confortable compte de 45 à 75 caractères, espaces compris. Au-delà, l'œil perd la ligne suivante. Sur un grand écran, un texte qui occupe toute la largeur est illisible, quel que soit son intérêt.
• Les marges latérales sur téléphone. Un minimum de 16 à 20 pixels de chaque côté. En dessous, le texte colle au bord et donne une impression d'inachevé.
• Le nombre de colonnes. Douze est la convention la plus répandue parce qu'elle se divise en deux, trois, quatre et six.
• L'alignement. C'est ce qui se perçoit inconsciemment. Des éléments alignés sur un même axe donnent une impression d'ordre ; un décalage de quatre pixels donne une impression de négligence sans qu'on sache pourquoi.

L'échelle typographique

C'est le levier le plus efficace et le moins coûteux d'un webdesign.

Une échelle typographique est une suite de tailles cohérentes entre elles, obtenue en multipliant une taille de base par un rapport constant. Avec une base de 16 pixels et un rapport de 1,25, on obtient 16, 20, 25, 31, 39, 49. Avec un rapport de 1,333, l'écart est plus marqué et le contraste plus fort.

Trois règles suffisent à faire l'essentiel.

Une taille de base d'au moins 16 pixels pour le texte courant. C'est un plancher, pas un objectif. Beaucoup de sites gagneraient à monter à 17 ou 18.

Un contraste d'échelle fort. Un titre à 1,2 fois la taille du texte ne se distingue pas ; à 2,5 ou 3 fois, la hiérarchie se lit sans effort. L'impression de tenue vient de là, bien plus que du choix de la police.

Une interlignage proportionnel. Environ 1,5 fois la taille pour le texte courant, moins pour les titres, qui se resserrent quand ils grossissent.

Sur le nombre de polices : deux familles suffisent presque toujours, une pour les titres et une pour le texte. Trois est un maximum. Chaque famille supplémentaire ajoute du poids à charger et une occasion d'incohérence.

Les couleurs et le contraste

Le contraste entre un texte et son fond se mesure. Il ne se juge pas à l'œil, parce que l'œil s'habitue à ce qu'il regarde depuis trois heures.

Le rapport de contraste s'exprime sous la forme d'un ratio, de 1:1 pour deux couleurs identiques à 21:1 pour du noir pur sur du blanc pur. Les critères de niveau AA des règles pour l'accessibilité des contenus web, dans leur version 2.1, demandent un rapport d'au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte, à partir de 24 pixels ou de 18,66 pixels en gras.

En pratique, cela élimine trois choses très courantes : le gris clair sur blanc, le texte blanc sur une couleur pastel, et le texte posé sur une photographie sans voile assombrissant.

Une palette de site tient en cinq valeurs : un fond, un fond alterné, une encre pour le texte, un gris pour le texte secondaire, et une couleur d'accent. Ajouter des couleurs n'améliore rien et complique tout, à commencer par la vérification des contrastes.

Un point souvent négligé : une couleur ne doit jamais porter seule une information. Un lien identifié uniquement par sa couleur disparaît pour une personne daltonienne. Un soulignement, un pictogramme ou un changement de graisse règle le problème.

Le rythme vertical et l'espace

L'espace blanc n'est pas du vide : il rend le reste lisible.

Une méthode simple et efficace : définir une unité d'espacement, par exemple 8 pixels, et n'utiliser que ses multiples. 8, 16, 24, 32, 48, 64. Tous les espacements du site sortent de cette liste. Le résultat paraît immédiatement plus rigoureux, sans que personne puisse dire pourquoi.

La règle de proximité complète le dispositif : les éléments liés se rapprochent, les éléments distincts s'éloignent. Un titre doit être plus proche du paragraphe qu'il annonce que du paragraphe précédent. C'est une inversion fréquente, et elle rend un texte pénible à lire.

Les images, et leur coût

Une image est le poste le plus lourd d'une page et celui qui décide souvent de la vitesse de chargement.

Ce qui se vérifie sur un devis :

• Les formats modernes. Une même photographie en format compressé récent pèse souvent 30 à 60 % de moins qu'en JPEG à qualité perçue égale.
• Les dimensions servies. Une image de 3 000 pixels de large affichée dans un cadre de 600 est une erreur courante et coûteuse en temps de chargement.
• Le chargement différé des images situées hors de l'écran.
• Les dimensions déclarées dans le code, pour éviter que la page ne saute quand l'image arrive.
• Le texte alternatif, obligatoire pour l'accessibilité et utile au référencement.

Sur le fond, une remarque qui vaut plus que toutes les techniques : les photographies de banque d'images montrant des personnes souriantes en réunion se reconnaissent immédiatement et abîment la crédibilité de tout le reste. Une photographie moyenne des vrais locaux vaut mieux qu'une image parfaite de gens qui n'existent pas.

Les tendances, et ce qu'elles coûtent

Une règle utile : toute animation doit pouvoir être désactivée par la préférence système de réduction des animations, que les navigateurs transmettent. C'est une ligne de code, et cela concerne des personnes pour qui le mouvement provoque un réel inconfort.

Comment juger une maquette

Six questions à poser en réunion de validation, qui déplacent la discussion du goût vers le vérifiable.

1. Quelle est la largeur maximale d'une ligne de texte, en caractères ?
2. Quelle est la taille du texte courant, en pixels ?
3. Quels sont les rapports de contraste des textes sur leurs fonds ?
4. Combien de familles de polices, et quel poids total à charger ?
5. À quoi ressemble cette page sur un écran de 390 pixels de large ?
6. Que voit-on avant de faire défiler, sur téléphone ?

La sixième est la plus révélatrice. Sur beaucoup de maquettes validées, ce qu'on voit sur un téléphone avant de faire défiler est un logo, un menu et une image, sans un mot disant ce que fait l'entreprise.

Le webdesign et l'identité de marque

Un site n'invente pas l'identité visuelle de l'entreprise, il l'applique. Quand les deux sont conçus en même temps, le site sert de terrain d'essai et l'identité en sort déformée ; quand l'identité existe déjà, le site doit s'y tenir sans la copier bêtement.

Ce qui se transpose directement du support imprimé au web :

• le logo et ses règles de zone de protection ;
• les couleurs, à condition de vérifier leurs contrastes à l'écran, ce que l'imprimé n'impose pas ;
• l'esprit typographique, qui se retrouve dans une famille disponible en version web.

Ce qui ne se transpose pas :

• Les couleurs telles quelles. Une couleur de charte définie en quadrichromie n'a pas d'équivalent exact en affichage écran, et l'inverse est encore plus vrai. Une charte sérieuse donne les deux références.
• Les polices. Toutes les familles ne sont pas disponibles sous licence web, et celles qui le sont ne le sont pas toujours dans toutes les graisses. Cette vérification se fait avant de valider une identité, pas après.
• Les compositions. Une affiche est un format fixe, une page web ne l'est pas.

Le point de vigilance juridique : une police de caractères se licencie séparément pour l'usage imprimé et pour l'usage web, et l'auto-hébergement d'un fichier de police sans licence adaptée est une contrefaçon. Cette question se pose au prestataire avant la mise en ligne, et la réponse doit être précise.

Le sujet est traité de l'autre côté, celui de la conception de l'identité, dans le domaine identité visuelle.

Ce qui rate

• La maquette validée uniquement en grand écran.
• Le texte gris clair sur fond blanc, choisi parce qu'il paraît élégant sur l'écran du graphiste.
• Le texte posé sur une photographie sans voile, illisible dès que l'image change.
• Cinq tailles de titre différentes sans logique entre elles.
• Les espacements choisis à l'œil, tous différents de quelques pixels.
• L'animation d'entrée qui retarde l'affichage du contenu principal.
• La page d'accueil superbe et les pages intérieures oubliées, alors que ce sont elles qui reçoivent les visiteurs venus d'un moteur de recherche.

Sources

• Contrastes : Web Content Accessibility Guidelines 2.1, critères de niveau AA, base technique du RGAA 4.1.2.
• Préférence de réduction des animations : spécification CSS des requêtes de média utilisateur.
• Formats d'image et chargement différé : documentation des standards du web et recommandations de web.dev.