Histoire d’un logo : l’adret, l’ubac et une pièce coupée en deux
Par Nicolas ·
Neuf états, deux détours et une seule courbe.
Premier billet de ce blog, alors autant commencer par ce que vous voyez avant tout le reste : la pièce orange et bleue en haut de la page. En 2016, sur mon blog perso, je racontais déjà l’histoire d’un logo, version par version (il fallait de l’orange). Dix ans plus tard, rebelote !
Un mot de montagnard
L’adret, c’est le versant d’une vallée de montagne qui regarde le soleil. Celui d’en face, qui reste à l’ombre, c’est l’ubac. Si vous avez grandi dans les Alpes, vous le savez depuis toujours ; sinon, vous le savez maintenant.
Le nom est sorti d’un remue-méninges avec Claude : une poignée de pistes, et Adret est celle qui est restée. Elle décrit l’app mieux que moi : chaque affiche est éclairée par un soleil, et le relief y a un côté lumière et un côté ombre (et dans Adret Pro, vous pouvez déplacer le soleil).
Le logo devait dire ça. Facile à écrire, moins à dessiner.
Quatre directions
Tout part d’une coupe : une moitié au soleil, une moitié à l’ombre, en ambre et ardoise. Quatre façons de la dessiner, toutes de Claude : Illustrator est encore fermé.
- Le versant, un triangle coupé en deux. Le plus direct, et il tient en favicon (la petite icône dans l’onglet du navigateur). Le plus vu aussi : des triangles bicolores, il y en a partout dans l’outdoor.
- Le lever, un soleil au-dessus de deux sommets. Plus chaleureux, mais c’est le cliché du genre.
- Le monogramme, un A. Une icône d’app qu’on reconnaît, mais qui ne dit que le nom.
- La trace, un disque coupé par une ligne.
Je garde la trace. C’est la seule qui montre l’app et pas seulement le nom : le disque coupé, c’est le relief, et la ligne, c’est votre sortie.
Des points sur la trace
Deuxième série : des points sur la ligne. Un départ, une étape, une arrivée, et une ligne décorative devient un parcours.
C’est là que tout bascule. Dans la ligne de partage, la trace n’est plus posée sur la forme : elle est la frontière entre l’ombre et la lumière. Le nom, l’app et le logo disent la même chose d’un seul trait. Retenu !
Deux détours
Le chrono. Une sortie, ça se chronomètre, alors pourquoi pas un cadran autour de la trace : des graduations, une couronne, un arc de temps, un boîtier. Écarté : Adret ne mesure pas le temps, il met en scène une sortie déjà faite. Le chrono raconte l’effort en train de se faire, et ça, c’est le terrain des applis de sport. Mauvais signal.
L’appareil photo. Ce que l’app vous rend, c’est une affiche, autrement dit une image, alors pourquoi pas un objectif, un boîtier, un viseur, un diaphragme. Écarté aussi : le versant bicolore, la trace jalonnée et l’appareil photo, ça fait trois idées empilées qui se disputent l’attention. La trace comme frontière entre l’ombre et la lumière suffit à raconter Adret.
Deux gris, une trace orange
Bref, retour à la trace seule, et changement de palette. L’ambre et l’ardoise se battaient avec le blanc de la trace. Place à deux gris et une trace orange (tiens, de l’orange !), et c’est net : le gris est le décor, l’orange est le sujet. Normal, le sujet, c’est votre trace.
Puis le test qui fait mal, la réduction. Un logo vit aussi dans un onglet, à 16 pixels. À 32, les trois points empâtent la ligne ; à 16, tu ne distingues plus rien. Le gris clair disparaît sur fond blanc, et l’écart entre les deux gris est trop brutal.
Du coup, les gris se rapprochent, et le logo ne se lit plus comme deux blocs collés mais comme une seule surface éclairée de biais, chaude à gauche, froide à droite : la lumière rasante en montagne. Deux points au lieu de trois, le départ et l’arrivée (trois points, ça faisait des étapes, et l’app n’en fait pas). Les points passent à un rayon de 14 pour une ligne de 8 d’épaisseur et se posent sur la courbe elle-même : de vrais jalons plutôt que des renflements. Et la trace file jusqu’aux bords, elle continue hors du cadre.
À 32 pixels, c’est lisible. À 16, la diagonale orange se reconnaît encore. Ouf !
Le S vertical
Dernier essai : faire entrer la trace par le bord gauche et la faire sortir par le bord droit. La lecture change du tout au tout : au lieu d’un versant vu de face, une pente vue de flanc, avec la lumière au-dessus. Plus proche d’un vrai relief, et plus dynamique. Mais plus la trace traverse à l’horizontale, plus la courbe s’aplatit, et moins il reste de place pour un S franc.
Le S vertical tient à toutes les tailles et garde une courbe franche ; le traversant bouge plus, mais sa surface claire écrase tout. Le S vertical va sur l’icône, et le traversant attendra, sur le site ou en fond de page, là où il aura la place.
La série s’arrête sur un carré arrondi gris, une trace orange, deux points, et une liste de choses à faire, dont celle-ci : « Test en noir et blanc pur. Un bon logo survit à un fax. »
Une seule courbe
Puis j’ouvre enfin Illustrator, et je reviens au disque de la première série : une pièce coupée en deux par une seule courbe. J’essaie la trace dans plusieurs orientations, puis je simplifie le tracé, avec des repères pour que les angles tombent pile.
Pour les couleurs, je passe par Adobe Color. Il me faut un orange et un bleu qui tiennent aussi bien sur fond blanc que sur fond sombre (le gris clair qui disparaît sur fond blanc, j’ai déjà donné).
Au-dessus de la courbe, la face éclairée, orange : l’adret. En dessous, la face à l’ombre, bleue : l’ubac. Et la trace suit la courbe, blanche, avec un point au départ et un à l’arrivée.
C’est la même courbe qui fait tout : elle sépare la lumière de l’ombre, et la trace la suit. Et elle entre par le bord gauche pour sortir par le bord droit, la lumière au-dessus. La traversée, finalement.
De la couleur des deux côtés et une trace blanche au milieu, c’est aussi ce que j’avais écarté au début, en plus franc. Soit.
Ensuite, ça va vite. Le logo entre dans le projet. Il remplace l’icône du site. Il devient l’icône de l’app et son écran de démarrage. Ses deux couleurs deviennent celles de l’app.
Logo adopté !
Tout ce chemin pour revenir au disque du début, avec la bonne courbe cette fois. Et dix ans après le logo de 2016, toujours de l’orange !
Et vous, vous êtes plutôt adret ou ubac ?
Bisous,
Nicolas