Le Site de la Semaine – « EFC Lab »

Un logo bien né finit toujours par prendre la mer. D’abord sur une carte de visite, puis sur un en-tête de devis, une plaquette… et un jour, sur un écran. C’est là que beaucoup d’identités visuelles prennent l’eau : les couleurs virent, la typographie n’existe pas en version web, le logo devient illisible dans l’onglet du navigateur.

Nous vous avions présenté la nouvelle identité visuelle d’EFC Lab dans un précédent article. Voici aujourd’hui son tout nouveau site internet, qui reprend la charte graphique sobre et élégante de son activité scientifique. Le projet nous donne l’occasion de parler d’un passage que l’on sous-estime souvent : la traversée d’une charte graphique, du papier vers le web, sans perdre une miette de sa personnalité en route.

Une charte graphique ne s’arrête pas au bord du papier

Une charte graphique, c’est le carnet de bord d’une marque. Elle fixe le logo et ses variantes, les couleurs, les typographies, les marges de sécurité, le style des images, parfois le ton des textes. Pendant longtemps, ces carnets ont été pensés pour l’imprimé : on y trouvait des références de couleurs d’imprimeur, des grammages, des mises en page de papeterie.

Le site internet arrive ensuite, et il pose des questions que le papier ne pose jamais. Comment se comporte le logo sur un fond sombre ? Que devient la mise en page sur un téléphone tenu à la verticale ? Quelle couleur prend un bouton quand on le survole ? Que voit-on pendant la fraction de seconde où la page charge ?

Chez Graph’in !, nous considérons que le site fait partie de l’identité, au même titre que le logo. Quand le même studio dessine les deux, la charte prévoit dès le départ sa déclinaison à l’écran. Quand l’identité existe déjà, nous commençons par la relire avec des yeux de webdesigner, pour repérer ce qui passera tel quel et ce qu’il faudra adapter. C’est la situation d’EFC Lab : une identité fraîchement dessinée, qu’il fallait faire vivre à l’écran avec la même retenue.

Les couleurs : du nuancier d’imprimeur au code hexadécimal

Sur le papier, une couleur se définit en CMJN (cyan, magenta, jaune, noir) ou par une référence Pantone. À l’écran, elle se définit en RVB, et en code hexadécimal dans le code du site (le fameux « #00A19A » qui habille Graph’in ! en est un). Les deux mondes ne se superposent pas parfaitement : certaines teintes très vives à l’écran n’existent pas à l’impression, et certains tons d’imprimeur paraissent ternes une fois convertis.

Une bonne charte donne donc, pour chaque couleur, ses équivalences dans les différents systèmes. Si ce n’est pas le cas, nous les établissons avant de toucher au site, en comparant à l’écran et sur épreuve imprimée. Rien de plus désagréable qu’un logo qui n’a pas tout à fait le même vert sur la plaquette et sur la page d’accueil : le visiteur ne saura pas dire ce qui cloche, mais il sentira que quelque chose cloche.

Le contraste, ce garde-fou qu’on oublie

Une palette sobre aime souvent les gris clairs, les teintes douces, les fins filets. Très chic sur un papier épais, beaucoup moins lisible sur un écran de téléphone en plein soleil. Les règles d’accessibilité du web (les WCAG) recommandent un rapport de contraste d’au moins 4,5 pour 1 entre un texte courant et son fond. Nous vérifions chaque association de couleurs de la charte avec un outil de mesure : celles qui passent servent au texte, les autres sont réservées aux aplats, aux illustrations ou aux éléments décoratifs.

Les couleurs d’état

Un site a besoin de couleurs que le papier ignore : celle d’un lien déjà visité, d’un bouton survolé, d’un message d’erreur dans un formulaire, d’un message de confirmation. Plutôt que d’improviser un rouge vif qui jurerait avec tout le reste, nous les tirons de la palette existante, en jouant sur la clarté ou la saturation. L’identité reste tenue jusque dans les recoins.

Les typographies : la police du logo n’est pas toujours celle du site

Deuxième écueil classique : la police. La typographie qui a servi à dessiner le logo ou à composer la plaquette n’est pas forcément disponible pour le web. Les licences de polices distinguent souvent l’usage bureautique (installer la police sur un ordinateur pour composer des documents) et l’usage web (charger la police sur un site pour tous les visiteurs). Une licence achetée pour l’un ne couvre pas toujours l’autre. Avant de partir à l’abordage, on lit donc les conditions, ou l’on choisit une famille sous licence libre de qualité équivalente.

Il y a aussi une question de confort. Une police de titrage très fine, magnifique en grand sur une affiche, devient fragile en petite taille sur un écran. Nous gardons généralement la typographie identitaire pour les titres, et nous l’associons à une police de lecture pensée pour l’écran, avec des lettres bien ouvertes et une taille de texte confortable (on évite de descendre sous 16 pixels pour le texte courant). Le visiteur reconnaît la marque dans les titres et lit sans plisser les yeux dans les paragraphes.

Enfin, chaque police chargée alourdit un peu la page. Mieux vaut deux familles bien choisies, avec seulement les graisses utilisées, qu’une collection complète qui ne servira jamais.

La sobriété, une affaire d’espace

« Sobre et élégant » : c’est la promesse de la charte d’EFC Lab, et c’est aussi la plus difficile à tenir sur un site. Car la sobriété ne se voit pas, elle se ressent. Elle tient à ce qu’on enlève plutôt qu’à ce qu’on ajoute.

Sur un site sobre, le blanc (ou l’espace vide, quelle que soit sa couleur) est un matériau à part entière. Des marges généreuses autour des blocs, des paragraphes qui respirent, des titres qui ne se bousculent pas. Une grille régulière, pour que les éléments s’alignent sans qu’on y pense. Peu d’effets d’animation, et seulement s’ils servent à guider l’œil.

Pour une activité scientifique, cette retenue a un sens. Le visiteur vient chercher de la rigueur, des explications, de la précision. Une mise en page agitée enverrait le message inverse. La sobriété dit, sans un mot : ici, on prend le temps de bien faire les choses. C’est un peu le paradoxe du minimalisme : moins il y a d’éléments à l’écran, plus chacun doit être parfaitement placé.

Ce qui casse la sobriété (sans prévenir)

• Les images de banques d’images trop génériques, qui ne ressemblent à rien de la marque.
• Les extensions qui ajoutent chacune leur bouton, leur bandeau, leur fenêtre surgissante, dans leurs propres couleurs.
• Les icônes piochées dans trois styles différents.
• Les textes mis en gras, en couleur et en majuscules en même temps, « pour être sûr qu’on le voie ».

Chacun de ces petits écarts semble anodin. Accumulés, ils font couler la meilleure des chartes.

Le logo à l’écran : une famille plutôt qu’une seule version

Sur une carte de visite, le logo a sa place et sa taille. Sur un site, il doit vivre dans des situations très différentes : en grand sur la page d’accueil, en petit dans l’en-tête qui reste collé en haut de l’écran pendant qu’on fait défiler, en minuscule dans l’onglet du navigateur.

Pour ces usages, nous préparons une petite famille de déclinaisons :

• la version principale, pour l’en-tête et le pied de page ;
• une version compacte ou un symbole seul, pour les petits espaces et les écrans de téléphone ;
• le favicon, cette icône de quelques pixels qui s’affiche dans l’onglet, dans les favoris et parfois dans les résultats de recherche ;
• une version claire pour les fonds sombres, si le site en utilise.

Côté technique, nous livrons le logo du site au format SVG chaque fois que c’est possible. C’est un format vectoriel : il reste net sur tous les écrans, du plus modeste au plus haut de gamme, et il pèse très peu. Un logo flou dans l’en-tête, c’est la tache de café sur la chemise blanche : on ne voit plus que lui.

Images et pictogrammes : le même coup de crayon partout

Une identité visuelle ne tient pas qu’au logo. Le style des photos, le traitement des illustrations et le dessin des pictogrammes en font partie. Sur un site, ces éléments sont nombreux : icônes de services, visuels d’en-tête, images d’articles, schémas.

Pour qu’ils parlent d’une seule voix, nous fixons quelques règles simples : un même style d’icônes (trait fin ou plein, coins arrondis ou non), une même épaisseur de trait que celle du logo quand c’est pertinent, un traitement de couleur commun pour les photos, des cadrages qui se ressemblent. Pour une activité scientifique, un schéma clair dessiné dans les couleurs de la charte fera souvent plus pour la crédibilité qu’une photo d’éprouvettes trouvée en ligne.

Le studio de Graph’in ! dessine ces éléments sur mesure quand il le faut : pictogrammes, illustrations vectorielles, visuels d’en-tête. C’est l’avantage d’avoir des illustrateurs à bord.

Tenir le cap après la mise en ligne

Un site vit. On y ajoute des pages, des actualités, des images. Six mois après le lancement, c’est souvent là que la charte commence à dériver : une nouvelle page montée à la hâte, une couleur choisie « à l’œil », une image recadrée n’importe comment.

Pour éviter cette lente dérive, nous construisons les sites WordPress avec des modèles de blocs prêts à l’emploi : un bloc de titre, un bloc texte et image, un bloc de citation, un bouton… tous déjà réglés aux couleurs et aux typographies de la charte. La personne qui met le site à jour assemble ces briques au lieu de tout réinventer. Nous pouvons aussi rédiger une courte page de règles web, en complément de la charte : tailles d’images, couleurs autorisées pour le texte, ton des intitulés.

Et si l’identité évolue un jour, un site bien construit permet de modifier une couleur ou une police à un seul endroit, pour qu’elle change partout. Une heure de travail au lieu d’une refonte.

Votre charte mérite son port d’attache en ligne

Vous avez une identité visuelle soignée, et un site qui ne lui ressemble pas tout à fait ? Ou un nouveau logo qui attend son site ? Graph’in ! conçoit l’identité visuelle et le site internet WordPress qui va avec, entre Nantes et Ancenis et à distance partout en France. Le studio de création graphique et l’équipe web travaillent sur le même pont, ce qui évite bien des naufrages.

Pour d’autres sites sortis du chantier naval, jetez un œil au site de Prométhéis ou à celui de Theoxis, puis parlons de votre projet.

Levez l’encre !

Vos questions, nos réponses