Planche de signes

Planche de marques

Un logo se choisit plus qu'il ne se génère. Le travail consiste à placer cinq propositions honnêtes et différentes devant la personne, chacune éprouvée aux tailles où un logo vit réellement, sur une page qu'elle peut juger en une minute. Cette page est la planche de marques. C'est une page à regarder, pas à lire : cinq colonnes d'images et presque pas de mots.

La méthode provient de deux vrais projets d'identité où la personne a choisi une marque dans les quatre-vingt-dix secondes suivant l'ouverture de la planche, et de tests comparant ce qu'un modèle capable produit sans aucune méthode. Les tests ont enseigné deux choses, et les étapes ci-dessous servent les deux.

• La discipline est ce qu'apporte la méthode. Connaissance réelle de la marque avant de dessiner, cinq idées vraiment différentes, validation à 16 pixels, une faiblesse franche nommée pour chaque marque, et un choix qui reste à la personne.
• Le caractère est ce qu'elle ne doit pas perdre. Les marques que les gens préfèrent ont du sens à vue et semblent dessinées avec soin. Une planche de glyphes soignés qui nécessitent chacun une phrase pour signifier quelque chose perd face à une image audacieuse et bien dessinée du nom.

Travaillez vite. Dans les projets sources, la planche était ouverte cinq minutes après la demande. C'est un premier aperçu et un autre tour est peu coûteux, alors choisissez bien, dessinez avec soin et ne peaufinez pas.

Les étapes : connaître la marque, trouver les idées, esquisser et en choisir cinq, construire la planche, la regarder, ouvrir et présenter, effectuer d'autres tours, appliquer le choix.

1. Connaître la marque avant de dessiner

Vous avez besoin de cinq choses. Cherchez-les avant de les demander.

• Le nom, exactement comme la marque l'écrit, dans sa propre typographie, et ce qu'il signifie : le sens littéral, la racine, un idiome qu'il évoque, un jeu de mots.
• Ce qu'elle fait, en une phrase, idéalement comme un changement : ce qui entre et ce qui sort.
• Pour qui elle est et comment elle doit se ressentir, en deux ou trois mots.
• Ce qui existe déjà : la police de caractères utilisée par le site, un ancien logo, le titre, le vocabulaire propre du produit.
• Tout ce que la personne a déjà dit à propos du logo : une contrainte, une esquisse, un logo qu'elle admire.

Dans un projet, lisez d'abord : le README, le texte de la page d'accueil, le titre et les métadonnées de la page, la configuration des polices (@font-face, next/font, la config Tailwind, un lien Google Fonts), tous les fichiers de marque ou de logo, et la conversation jusqu'à présent. Ne demandez que ce que vous n'avez pas pu trouver, en un seul message d'au plus trois courtes questions. Si la personne ne peut pas être interrogée, ou vous a dit d'y aller, alors allez-y, et dites ce que vous avez supposé lorsque vous présentez.

Cela vient en premier car les marques dessinées sans cela ressemblent à des icônes génériques. Sur les planches sources, chaque marque s'appuyait sur quelque chose de spécifique : ce que signifie le nom, une ligne du titre du site, ce que le système fait aux choses qu'il traite.

Le brief par défaut

Sauf indication contraire de la personne, concevez pour cela : une couleur, aussi simple que possible, avec un but, un peu unique.

Cela signifie noir sur un blanc cassé chaud et rien d'autre. S'ils veulent de la couleur, ou si le site a une couleur d'accentuation, choisissez quand même la forme en noir d'abord. La couleur ne doit pas être ce qui rend une forme faible acceptable, et une marque doit fonctionner en une couleur de toute façon (icônes d'onglets, tampons, surfaces sombres). La couleur et les effets arrivent lorsque la marque est appliquée.

2. Trouver des idées provenant de différents endroits

Écrivez environ dix candidats, une ligne chacun. Lisez references/concept-moves.md avant de les lister : il décrit les endroits d'où viennent les bonnes marques, avec des exemples et le piège de chacun.

Visez une diversité de genres, car les goûts des gens se répartissent selon ces lignes :

• une marque construite sur la lettre de la marque ;
• une image du nom, quand le nom est une chose ;
• ce que le produit fait, montré comme une seule forme ;
• un signe ou un motif du propre univers de la marque ;
• une ou deux provenant d'ailleurs.

Règles pour choisir parmi eux :

• Cinq idées, pas cinq styles. Deux marques construites sur la même métaphore comptent pour une. Regroupez les candidats par l'idée sous-jacente et gardez-en un de chaque groupe.
• La plupart doivent se lire à vue. La planche n'explique rien : une marque a son image et un nom court. Donc au moins trois des cinq finales doivent avoir du sens à partir de cela seul : une chose, une lettre, une action que l'on peut voir. Votre message peut approfondir une marque, pas la sauver. Un glyphe nu qui n'est rien sans une phrase (un point et une barre, deux barres obliques, un bloc simple) doit être frappant pour gagner sa place.
• Silhouette avant histoire. Entre deux candidats, gardez la forme la plus forte, pas l'histoire la plus ingénieuse. L'histoire est racontée une fois et la forme est vue tous les jours.
• Nommez les icônes évidentes et rationnez-les. Chaque catégorie en a une : une bulle de dialogue pour le chat, une maison pour l'immobilier, une étincelle pour l'IA, un panier pour les magasins, un bouclier pour la sécurité, une page ou une pile de lignes pour tout ce qui concerne les documents. Le nom en a souvent une aussi (une flamme pour une marque appelée Kiln). Dites lesquelles elles sont pour cette marque. Au maximum une des cinq peut s'appuyer sur l'une d'elles, et seulement fusionnée avec quelque chose que cette marque possède seule. Une marque qui est une page et une autre qui est une flamme en fait deux, pas une chacune. Tout ce que la personne a exclu reste exclu.
• Une idée par marque. Si une marque a besoin du mot "et" pour s'expliquer, c'est deux marques. Séparez-la ou abandonnez la moitié.

Les premières idées se regroupent sur l'évidence. Sur une planche source, trois des cinq premières marques étaient des bulles de dialogue, et la marque qui a gagné provenait d'un tour ultérieur qui en était tenu à l'écart.

Cinq est le bon nombre, sauf si la personne en demande un autre : moins ne donne pas de vrai choix, plus transforme le choix en travail, et cinq colonnes tiennent sur un écran.

3. Esquisser, puis choisir cinq

Dessinez vos candidats avant de vous engager sur l'un d'eux. Copiez assets/contact-sheet.html vers design-lab/logo/candidates.html dans le projet, ajoutez un <symbol> par candidat, rendez-le avec le script de l'étape 5, et regardez l'image. Elle montre chaque candidat en grand, en petit, et comme une vraie icône de 16px agrandie. Gardez les cinq qui sont les plus forts en tant que formes et les plus éloignés en tant qu'idées, et améliorez-les. Consacrez la majeure partie de votre temps de dessin aux deux auxquels vous croyez le plus : la planche a besoin d'au moins une marque que vous expédieriez telle quelle, et une planche de cinq premiers jets égaux perd face à un logo fini.

Une planche de contact est normale. Une seconde sert à redessiner les marques qui fonctionnent presque. Arrêtez-vous là : la personne peut demander un autre tour. Supprimez candidates.html et son image avant de présenter.

Cette étape existe parce qu'un dessin dans votre tête et un dessin sur la page sont des choses différentes. Lors des tests, les passages qui regardaient leurs candidats avant de choisir ont produit des marques nettement meilleures que ceux qui en dessinaient cinq et s'arrêtaient.

Comment dessiner une marque

Chaque marque est un <symbol> sur une grille de 64 par 64.

• Peu de parties, une silhouette. Une à quatre formes ; le script de rendu avertit pour une marque qui en utilise plus. Simple ne signifie pas seulement des rectangles : une arche, une boucle, une cloche évasée ou le ventre d'une lettre est bienvenu lorsqu'il s'agit d'une forme propre. Les deux marques expédiées des projets sources sont quatre rectangles arrondis, et la meilleure marque lors des tests était une seule silhouette de la chose dont la marque porte le nom.
• Formes pleines ou traits épais. Une forme pleine ne porte pas d'attribut fill, car la planche peint le même dessin en noir à un endroit et en blanc à un autre. Une forme dessinée au trait porte fill="none" stroke="currentColor", des bouts et des jonctions arrondis, et une seule épaisseur de trait pour toute la marque, 7 unités ou plus. Pas de dégradés, d'opacité, de filtres, de masques ou de <text>. Une lettre est construite à partir de formes et jamais tapée, car une lettre tapée est la police de quelqu'un d'autre.
• Calculer, ne pas deviner. Pour tout ce qui dépasse les rectangles et les cercles, calculez les points : où un arc rencontre une ligne, où une courbe se termine, une épaisseur uniforme autour d'un virage. Quelques lignes de Python qui impriment le chemin sont plus rapides que de deviner, et les courbes devinées semblent devinées.
• Aligner sur la grille. Unités entières ou demi-unités, espaces égaux, bords alignés, un rayon d'angle pour toute la marque.
• Remplir le cadre uniformément. Laissez chaque marque s'étendre sur environ 48 unités dans sa direction la plus longue, centrée, afin que les cinq aient un poids similaire et que la comparaison soit équitable.
• Concevoir pour l'icône d'onglet. Un espace ou un trait plus fin qu'environ 6 unités se transforme en bouillie à 16 pixels. Les grandes formes et les espaces ouverts survivent, et ils font généralement une meilleure marque à toutes les tailles.
• Suivre le sens de lecture. Une marque qui montre un avant et un après suit le sens d'écriture de la marque : de droite à gauche pour l'arabe ou l'hébreu.

4. Construire la planche

Copiez assets/sheet-template.html vers design-lab/logo/marks-sheet.html dans le projet, en créant les dossiers, et remplissez les six endroits numérotés. Le script du modèle construit chaque colonne à partir de vos symboles, donc chaque marque est dessinée une fois et est identique à toutes les tailles.

La page est volontairement simple : un titre d'une ligne, puis cinq colonnes côte à côte. Chaque colonne montre, du haut vers le bas :

• la marque, en grand ;
• la marque à côté du nom, sur fond clair et sur fond sombre ;
• la marque en tant qu'icône à 64, 32 et 16 pixels, et cette icône de 16 pixels agrandie pour que ses vrais pixels puissent être vus ;
• deux boutons qui téléchargent cette marque seule sur fond transparent, en PNG et en SVG.

Les gens regardent cette page ; ils ne la lisent pas. N'y ajoutez rien : pas de raisons, pas de légendes, pas de ligne sur la façon de la lire, pas de recommandation. Ce que signifie une marque, où elle est faible et laquelle vous choisiriez, tout va dans votre message (étape 6).

• Langue. Écrivez le titre et les noms dans la langue de la marque, celle de son logotype, lorsque la personne la lit clairement. Définissez dir="rtl" pour les scripts de droite à gauche. Si la marque est écrite en deux scripts, la planche montre le principal ; le second verrouillage vient avec le choix.
• Police de caractères. Définissez le nom dans la police de caractères que la marque utilise réellement : les fichiers de police propres au projet via un chemin relatif à la planche, ou la police hébergée que le site charge. Faites correspondre le poids, la casse et l'espacement des lettres que le site donne à son nom. Si la marque n'a pas de police de caractères, choisissez-en une intentionnellement et dites-le.
• Titre. Une ligne courte, par exemple "Cinq logos pour Harbor".
• Noms. Chaque marque reçoit un nom court de un à trois mots, jamais une phrase. Les gens choisissent et se souviennent des marques par leur nom ("J'aime le nœud"), donc le nom fait un vrai travail.
• Lettres. Étiquetez les marques de A à E.
• Nom de fichier. Un nom court en minuscules en lettres latines pour les téléchargements : harbor donne harbor-logo-A.png.

Si le projet a déjà une planche de marques, ne l'écrasez pas. L'étape 7 dit quoi faire.

5. Regarder avant qu'ils ne le fassent

Rendez la planche, puis regardez l'image. Le script se trouve dans le propre dossier de cette compétence et fonctionne sur n'importe quelle page HTML, y compris la planche de contact :

bash "<dossier de cette compétence>/scripts/render.sh" design-lab/logo/marks-sheet.html

Il écrit un PNG à côté du HTML avec le Chromium sans tête dont dispose la machine, et imprime le chemin, suivi d'un avertissement pour toute marque dessinée avec plus de quatre formes ou avec un trait plus fin que 7 unités. Agissez sur ces avertissements. Ouvrez cette image et vérifiez, marque par marque :

• Est-ce bien la planche : cinq colonnes, la bonne police sur le nom, aucun {{placeholder}} oublié ? Un rendu peut capturer silencieusement la mauvaise page ou une police de secours.
• Chaque marque se lit-elle comme ce que son nom dit, sans rien d'autre pour l'expliquer ?
• Une marque se lit-elle comme quelque chose que vous n'aviez pas prévu : un chiffre, une lettre différente, une icône de menu, un logo que vous connaissez déjà ?
• Dans l'icône agrandie de 16 pixels en bas de chaque colonne, les formes restent-elles séparées, ou les espaces se ferment-ils et les parties fines deviennent-elles grises ?
• Quelque chose est-il rogné au bord de son cadre, décentré, ou visiblement plus lourd ou plus léger que ses voisins ?
• Un nom long tient-il toujours à côté de sa marque, et chaque colonne a-t-elle la même hauteur ?
• À côté du nom, la marque s'assied-elle bien avec le nom, ou bégaie-t-elle en répétant la première lettre du nom juste à côté ?

Corrigez ce que vous trouvez et rendez une fois de plus pour confirmer. Une marque qui échoue à 16 pixels est redessinée avec moins de parties, plus grandes, ou remplacée par votre meilleur candidat suivant. Au maximum deux des cinq peuvent être présentées avec une faiblesse connue à 16 pixels, et chacune doit le dire dans sa ligne de faiblesse.

Si le script ne peut pas rendre (il se termine avec une raison), ouvrez le HTML dans un navigateur que vous pouvez capturer d'écran, si vous en avez un. Si vous ne pouvez pas regarder du tout, dites-le lorsque vous présentez.

6. Ouvrir et présenter

Ouvrez la planche pour la personne : open sur macOS, xdg-open sur Linux, start sur Windows. Le HTML est ce qu'il faut ouvrir, et le PNG sert à vérifier et partager. Laissez les deux dans design-lab/logo/, et ne les validez que si la personne ou les règles du projet le disent.

Ne reliez aucune marque au produit et ne créez pas de fichiers de production avant que la personne ait choisi. C'est leur décision, et cela prend deux minutes une fois prise. Les boutons de téléchargement sur la planche servent à essayer une marque dans une diapositive ou une maquette. Les fichiers appropriés viennent avec le choix.

Ensuite, écrivez un court message :

• où se trouve la planche, et qu'elle est ouverte ;
• une ligne par marque, avec la lettre, le nom, ce que c'est et pourquoi cela appartient à cette marque, et sa faiblesse honnête si elle en a une ("la plus proche d'une icône de bâtiment générique", "tranquille et un peu littérale"). La page ne porte rien de cela, donc la ligne est l'endroit où vit le sens d'une marque ;
• votre choix et pourquoi, en une ou deux phrases. Recommandez une marque que vous expédieriez telle quelle : une qui se lit à vue et tient en tant qu'icône de 16 pixels. Si l'idée que vous préférez a un défaut connu, dites que c'est votre idée préférée et nommez une marque différente comme celle à expédier ;
• une question de clôture : laquelle, ou lesquelles deux pousser plus loin. Dites qu'une fois qu'ils ont choisi, vous ferez les fichiers et le mettrez sur le site.

Donnez une vraie opinion et de vraies faiblesses, puis laissez le choix à la personne. Dans les projets sources, la personne a outrepasse la recommandation une fois. Ne leur demandez pas de choisir des couleurs, des styles ou des polices à ce stade, et gardez le message à ces quelques lignes : la page montre et le message explique, chacun une fois.

7. Tours supplémentaires

• "Encore cinq." Écrivez un nouveau fichier, marks-sheet-2.html, et continuez les lettres (F à J) pour que chaque marque garde une lettre unique à travers les tours. Mettez un lien de retour vers la planche précédente sous le titre, comme le modèle le montre. Les cinq nouvelles doivent provenir d'idées que les premières...