Le style de votre application
Une charte décrit les couleurs, la typographie et les formes de vos écrans. Vous en réglez deux, séparément : celle de l'application, que voient vos collaborateurs, et celle de l'extranet, que voient vos clients.
| Charte | Où la régler |
|---|---|
| Application | Mode édition → … → Style du site |
| Extranet | Administration → Extranet, section Style |
Une charte unique obligerait à choisir laquelle des deux marques sacrifier : un extranet livré à la marque d'un client n'a pas l'identité de votre outil interne. Régler l'une ne touche donc jamais l'autre.
Les couleurs : cinq familles, une teinte chacune
Vous ne saisissez qu'une teinte par famille. Le produit en tire la pastille, le fond doux, la couleur du texte et celle de la bordure.
| Famille | Ce qu'elle gouverne |
|---|---|
| Principale | Les actions, les liens, ce qu'on clique |
| Succès | Ce qui est validé, payé, terminé |
| Avertissement | Ce qui demande une attention |
| Danger | Ce qui échoue, ce qui supprime |
| Information | Ce qui est en cours, neutre |
Chaque carte de l'écran montre les quatre nuances réellement obtenues, pas celles que vous avez demandées : la recette peut assombrir une teinte pour la rendre lisible, et c'est ce résultat-là qu'il faut juger.
Le texte est poussé jusqu'à un contraste de 4,5:1 avec sa surface. Une teinte pâle donne un libellé plus sombre, jamais un libellé qu'on ne lit pas. Vous n'avez donc pas à vérifier l'accessibilité de votre choix de couleur.
Une famille laissée vide garde la couleur du produit, et « Remettre par défaut » vide la charte sans la supprimer.
La typographie
Deux réglages seulement :
- la police : Archivo (celle du produit), Système, Humaniste, Grotesque, À empattements, Monospace ;
- la taille du corps : 13 px (par défaut), 14, 15 ou 16.
La taille se règle à la racine : toute l'échelle suit dans le même rapport, parce qu'un titre se juge par rapport à son texte et non tout seul. L'écran affiche l'échelle complète avec le rôle de chaque niveau.
Les six choix sont des piles système, plus celle du produit. Une page qui va chercher sa fonte ailleurs y annonce l'adresse de chaque visiteur, et met sa première lettre à l'écran quand ce tiers répond. Ce n'est pas un réglage d'apparence, c'est une décision de confidentialité et de vitesse.
Les formes
Un seul réglage d'angles : Net, Doux (par défaut) ou Arrondi. Il s'applique à tout, boutons, champs, cartes, fenêtres, pour que rien ne dépareille. L'écran montre les quatre rayons dérivés et ce qu'ils habillent.
Juger avant d'enregistrer
Deux sections ferment l'écran :
- Composants : ce que la charte donne vraiment sur un bouton, un statut, un libellé. Un nuancier de carrés ne le dit pas ;
- Simulation : la charte sur un écran entier. Une couleur trop présente ne se remarque qu'une fois posée à côté d'un menu, de chiffres et de statuts. La simulation ne montre que la surface que vous réglez.
Le bouton de thème bascule le vrai thème de l'interface : chaque famille a deux recettes, une par thème, et seule la bascule réelle les montre.
Ce que la charte ne décide pas
Les statuts métier d'un champ « choix » ne prennent jamais la couleur de
votre marque. Ils se rangent en quatre familles (neutre, en cours,
favorable, attention) parce qu'un statut doit vouloir dire la même chose
d'une société à l'autre. Voir Types de champs.
De même, les blocs d'une page portent des noms de jeton (« fond principal doux »), jamais des couleurs : changer la charte repeint donc toutes vos pages existantes, sans avoir à les reprendre.
La charte de l'extranet s'applique dès la page de connexion
Un client qui ouvre votre extranet voit vos couleurs avant de se connecter. C'est le premier écran qu'il voit : il doit annoncer son fournisseur, pas l'éditeur du logiciel.