identite-visuelle
Choisir les couleurs de son site : théorie, contrastes et accords
Rôles d'une palette, méthode de construction, seuils de contraste et accords chromatiques pour choisir des couleurs lisibles et cohérentes.
Interfaces, chartes graphiques, couleurs, métier du design web
Une page que l'on ne lit pas a rarement un problème de goût
Elle a un problème de hiérarchie : trois titres de même poids, un bouton noyé dans la masse, un texte gris clair sur fond gris pâle. Ce média démonte les pages comme on démonte une plante en planche d'herbier, zone par zone, pour montrer ce qui guide l'œil, ce qui le perd, et ce que coûte réellement un travail de design sur le marché français.
Lire les principes de hiérarchieQuatre entrées dans le sujet
La conception d'interface et ses règles de lisibilité, l'identité visuelle et ses chartes, le métier de webdesigner vu du côté du parcours et des tarifs, et ce qui bouge dans les pratiques.
Ce que fait chaque zone d'une page, et ce qui la fait rater
Une page d'accueil se lit en quelques secondes. Chaque zone y joue un rôle précis, et son échec se diagnostique presque toujours au même endroit.
1
Bandeau de navigation
Il répond à une seule question : où suis-je et où puis-je aller. Cinq à sept entrées suffisent pour un site vitrine, au-delà le lecteur ne les lit plus, il les balaye. Le logo renvoie à l'accueil, c'est une convention si ancrée qu'on ne la discute plus.
Cinq à sept entrées
3
Preuve et réassurance
Chiffres, références, garanties ou méthodologie : la zone qui justifie l'accroche. Elle se place juste après elle, avant que le doute ne s'installe. Un bloc de réassurance sans contenu vérifiable produit l'effet inverse de celui recherché.
Juste après l'accroche
5
Appel à l'action
Un objectif principal par page, un seul bouton qui le porte, et une formulation qui décrit l'action plutôt que le clic. Deux boutons de même poids visuel côte à côte annulent le bénéfice de la hiérarchie que toute la page a construit.
Un objectif par page
2
Zone d'accroche
Le premier écran doit dire ce que l'on trouve ici, à qui cela s'adresse et par où commencer. Une accroche qui décrit une émotion sans nommer l'objet laisse le visiteur en suspens. Le rapport texte sur image se vérifie sur mobile avant de se vérifier sur grand écran.
Une promesse nommée
4
Corps éditorial
Les blocs de contenu proprement dits, alternés pour éviter la monotonie de lecture. Une largeur de texte de quarante-cinq à soixante-quinze caractères par ligne reste le repère le plus stable en typographie web, au-delà l'œil perd la ligne suivante au retour.
45 à 75 signes
6
Pied de page
Zone de service et de conformité : mentions légales, plan du site, contacts, rappels de navigation. C'est aussi la dernière chance de retenir un lecteur descendu jusqu'en bas, donc l'endroit où un lien de découverte a du sens.
Service et conformité
Ces repères valent pour une page d'accueil de site vitrine ou de média. Une fiche produit, une page de connexion ou un tableau de bord obéissent à d'autres logiques, où la densité d'information prime sur la respiration.
Six principes que l'on retrouve sur toutes les pages qui tiennent
Ils ne sont ni des modes ni des goûts personnels : ce sont des constantes de perception, observables sur une maquette avant même qu'un contenu réel ne soit posé.
Contraste
Deux éléments qui doivent être distingués se distinguent franchement, ou pas du tout. Un gris à peine plus foncé qu'un autre produit une hésitation, pas une hiérarchie. Le contraste se joue sur la taille, la graisse, la couleur et l'espace, rarement sur un seul de ces leviers.
Éviter les demi-écarts
Alignement
Chaque élément se rattache visuellement à un autre par un bord commun. Une grille de douze colonnes reste la structure la plus répandue sur le web parce qu'elle se divise en deux, trois, quatre et six. Un élément qui flotte hors grille est perçu comme une erreur avant d'être perçu comme une intention.
Une grille tenue
Proximité
Ce qui va ensemble se place ensemble. Un titre collé à son paragraphe et séparé du bloc suivant demande moins d'effort qu'une succession d'espaces identiques. L'espace au-dessus d'un titre doit toujours être plus grand que l'espace en dessous.
Grouper par le vide
Répétition
Les mêmes éléments jouent le même rôle sur toutes les pages : un bouton primaire garde sa forme, sa couleur et son comportement de bout en bout. La cohérence n'est pas une contrainte esthétique, c'est ce qui permet au lecteur d'apprendre l'interface en une page au lieu de cinq.
Un composant, un rôle
Respiration
L'espace vide n'est pas de l'espace perdu, c'est ce qui donne du poids au reste. Les mises en page les plus denses sont aussi celles que l'on abandonne le plus vite. Doubler la marge autour d'un bloc important le met davantage en valeur qu'augmenter sa taille.
Doubler la marge
Hiérarchie typographique
Trois niveaux de titre suffisent dans l'immense majorité des pages, avec un écart de taille suffisamment net pour être perçu sans comparer. Deux familles de caractères, l'une pour les titres et l'autre pour le texte courant, couvrent presque tous les besoins d'un site.
Trois niveaux, deux familles
Ces principes se vérifient en plissant les yeux devant la maquette : si la structure reste lisible quand les mots deviennent flous, la hiérarchie tient. Si tout s'aplatit, c'est le contraste ou l'espacement qui manque, jamais la couleur.
Le mot posé
Charte graphique
Document de référence qui fixe les règles visuelles d'une marque et les rend reproductibles par quelqu'un d'autre que son auteur. Une charte utile tient en quelques pages et couvre cinq blocs. Les couleurs d'abord, avec leurs codes exacts en hexadécimal pour l'écran, leurs équivalents pour l'impression, et surtout leurs usages : quelle couleur porte une action, laquelle porte une alerte, laquelle ne sert qu'en aplat de fond. Les typographies ensuite, avec les familles retenues, les graisses autorisées, les tailles de référence et les interlignages associés, car une police choisie sans échelle typographique se retrouve utilisée en douze tailles différentes au bout de trois mois. Les composants récurrents ensuite : boutons, champs de formulaire, cartes, encadrés, avec leurs états au survol, au clic et en cas d'erreur. Le traitement des images ensuite : formats, recadrages, filtres éventuels, présence ou non de personnes. Les règles d'espacement enfin, exprimées en multiples d'une unité de base, souvent quatre ou huit pixels, ce qui évite les marges arbitraires qui donnent une impression de bricolage. Une charte graphique n'est pas une identité visuelle : l'identité est le résultat, la charte est le mode d'emploi qui permet de le reproduire sans le déformer.
À lire en priorité
Les dossiers les plus consultés, des règles de lisibilité aux fourchettes de tarifs pratiquées en France.
Questions fréquentes sur le design web et le métier
Combien coûte la création d'un site vitrine par un webdesigner freelance ?
Les repères de marché observés en France situent un site vitrine de quelques pages entre 2 500 et 8 000 euros pour un travail sur mesure, et entre 800 et 2 000 euros quand la conception part d'un modèle existant à personnaliser. Un site à forte identité, avec direction artistique, illustrations propres et animations, dépasse couramment 6 000 euros. Les écarts tiennent surtout au nombre de gabarits de pages à concevoir, au niveau de personnalisation et à la présence ou non de rédaction dans la prestation. Un tarif journalier de 300 à 600 euros reste la fourchette la plus souvent constatée chez les indépendants confirmés.
Faut-il savoir coder pour être webdesigner ?
Pas obligatoirement, mais la connaissance des contraintes techniques change la qualité des maquettes livrées. Un designer qui comprend comment un navigateur redimensionne un bloc, ce que coûte une police chargée en cinq graisses ou pourquoi une ombre portée complexe pèse sur la performance produit des maquettes réalisables telles quelles. Beaucoup de profils travaillent sans écrire de code de production tout en lisant couramment une structure de page, et cette compréhension partagée réduit les allers-retours avec les développeurs.
Combien de couleurs faut-il retenir pour un site ?
Une couleur principale, une couleur secondaire, une couleur d'accent utilisée avec parcimonie, plus une échelle de gris pour les textes et les fonds. La répartition classique attribue environ soixante pour cent de la surface à la teinte dominante, souvent un neutre, trente pour cent à la secondaire et dix pour cent à l'accent. Le point de vigilance ne porte pas sur le nombre mais sur le contraste : un texte courant doit rester lisible sur son fond, et cette vérification se fait avec un outil de mesure, pas à l'appréciation.
Quelle différence entre UI et UX ?
L'UX désigne l'expérience globale du visiteur : ce qu'il cherche, le chemin qu'il emprunte, les obstacles rencontrés, le sentiment qui reste après la visite. L'UI désigne l'interface elle-même : ce que l'on voit et ce que l'on manipule, couleurs, typographies, boutons, espacements. Une interface superbe posée sur un parcours confus reste inutilisable, une navigation limpide dans une interface illisible aussi. Les deux se travaillent ensemble, et sur les petits projets c'est souvent la même personne qui les porte.
Combien de temps prend la conception d'un site ?
Pour un site vitrine, comptez de trois à huit semaines entre le cadrage et la mise en ligne, dont une part importante ne dépend pas du designer : la fourniture des contenus par le commanditaire reste le premier facteur de retard observé sur ce type de projet. La phase de maquettage occupe généralement une à trois semaines selon le nombre de gabarits, l'intégration une à deux semaines, et les allers-retours de validation le reste. Un projet dont les textes et les images sont prêts avant le démarrage se livre presque toujours dans le bas de la fourchette.