Logo géométrique sur grille

Plan de construction de logo géométrique

Un plan de construction est une courte liste d'instructions qui reconstruit un logo exactement, à partir d'une toile vierge, sans mesurer ni recopier l'ancien fichier. Si vous ne pouvez pas écrire cette liste, vous avez de la décoration, pas un système. Le livrable est une spécification que vous pouvez décrire, défendre et reproduire, pas une image.

Inspiré par les créateurs de logos qui construisent des symboles à partir de géométries simples : les écrits de James Barnard sur les plans de construction de logos, et les identités construites de Chermayeff & Geismar & Haviv et Bruce Blackburn. La version 2 ajoute la pratique de trois projets open source :

• le skill de conception de logo open source de Kaan Kızıltuğ (batterie de tests, corrections optiques, critique) ;
• les conventions d'icônes du projet Simple Icons (export monochrome à chemin unique) ;
• le compte rendu publié par Inkloom sur la construction de symboles sous règles de construction.

Notes dans references/inspirations.md.

Dix règles

1. Le concept d'abord, la géométrie en dernier. Sachez ce que chaque élément signifie avant de dessiner un cercle. La grille nettoie le design dans les 10 % restants du travail.
2. Le test de reconstruction définit un plan de construction. Quelqu'un peut-il recréer le symbole exactement à partir du diagramme et de quelques instructions simples ?
3. Peu de primitives, partagées. Une famille de formes de base, avec des rayons partagés, des jonctions tangentes et un style de terminaison.
4. Tous les symboles ne se prêtent pas à un plan de construction. Les symboles calligraphiques ou fortement optiques ne se réduisent pas à une géométrie propre. Ne les forcez pas.
5. Ne jamais rétrofit. Les cercles du nombre d'or dessinés sur un logo fini ont l'air alignés et ne prouvent rien.
6. La correction optique est un nombre, pas un ajustement. Écrivez chaque correction dans les règles (voir étape 5).
7. Arrêtez-vous tôt. Arrêtez d'ajouter de la construction une fois que le symbole est reproductible.
8. Explorez largement, puis réduisez. Beaucoup de concepts à une ligne bon marché, quelques constructions, une finale. Conservez chaque itération.
9. Mesurez, n'admirez pas. Chaque candidat a l'air bien à 512. Jugez à 16 px à partir de rendus réels.
10. Livrez la spécification. La liste de règles, le diagramme et les résultats des tests.

Si une construction nécessite de nombreuses mesures, elle n'est pas assez simple. Simplifiez le symbole ou le système.

Procédure

1. Brief aux contraintes. Listez ce que chaque élément signifie. Transformez les adjectifs, le public et les concurrents du brief en paramètres concrets avant de dessiner :

• épaisseur du trait ;
• largeur et proportion ;
• famille géométrique ;
• forme du contre-espace ;
• style de terminaison (rond ou plat) ;
• quels types de symboles conviennent.

Ensuite, listez les clichés de la catégorie (pour un outil de développement : crochets, chevrons, fenêtres de terminal, curseurs). N'utilisez un cliché qu'avec une forme fraîche.

Si une version précédente existe, inspectez les données réelles du fichier (tailles, largeurs de trait, angles d'arc, centres) et rétro-ingénierie son système d'abord. Notez ce qui est arbitraire : tailles hors module, espacements inégaux, masse qui n'est pas centrée.

2. Fixez le cadre et ses recadrages.

• Taille du canevas (512) et chaque recadrage que le symbole doit supporter : avatar circulaire (r = S/2), icône d'application arrondie, favicon carré.
• Cercle de sécurité à 7/8 du rayon de recadrage (224 sur 512). Toute l'encre reste à l'intérieur.
• Ce qui se trouve au centre du recadrage. Si le symbole est construit sur un cercle, placez le centre de ce cercle au centre du recadrage. Deux cercles presque concentriques qui manquent de quelques pixels sont perçus comme une erreur, et l'œil pardonne plus facilement une épaisseur inégale. Centrez sur le centroïde de la zone uniquement lorsque rien dans le symbole ne fait écho au recadrage.
• Si un brief mentionne que le symbole est coupé par un recadrage, décidez à voix haute : sûr pour le recadrage (par défaut) ou débordement intentionnel (un élément dépasse du bord à un point documenté).

3. Choisissez un module et une primitive.

• Unité u qui divise le canevas (8 sur 512). Épaisseur du trait un multiple propre (48 = 6u).
• Préférez les relations qu'une personne peut reconstruire avec un compas et une règle : triplets pythagoriciens (3:4:5), rayon égal à la moitié du canevas.
• Angles par division (90°, 45°, 22.5°) ou par hexagone (60°, 30°). Pas d'angles approximatifs.

4. Placez chaque élément par une règle. Chacun reçoit une instruction d'une ligne, par exemple : "la tige se tient sur le point ouest du cercle et s'élève jusqu'à ce que son capuchon touche le cercle de sécurité."

• Une épaisseur de trait, mesurée perpendiculairement au trait. Un bras à 45° coupé horizontalement à 48 de large n'a que 34 d'épaisseur.
• Un style de capuchon et de jonction pour chaque élément. Les coins pointus à côté de capuchons ronds sont perçus comme deux systèmes.
• Une règle d'espacement, par exemple "chaque espacement équivaut à un trait", ou pour un anneau brisé "divisez-le en secteurs égaux et encrez les secteurs alternés".
• Diamètre du point égal au trait.

5. Optique, sous forme de nombres.

• Masse : pour les symboles sans cercle faisant écho au recadrage, placez le centroïde de la zone sur le centre optique (environ 1 % au-dessus du centre géométrique), pas sur la boîte englobante. Pour les symboles basés sur un anneau, voir étape 2 : l'anneau l'emporte, et l'espace ouvert du côté léger équilibre le poids.
• Dépassement : formes rondes de 1 à 3 % de la hauteur ; pointes de 3 à 6 %. Un point rond à côté de traits droits a besoin d'environ +4 % de diamètre.
• Irradiation : le clair sur foncé paraît plus lourd. Amincissez le fichier inversé de 2 à 5 % et nommez-le comme son propre fichier.
• Lettrage : horizontales 5 à 10 % plus fines que les verticales.

Écrivez chaque correction dans la liste de règles.

6. Exécutez le test de reconstruction. Écrivez les règles en 8 lignes ou moins. Reconstruisez le symbole à partir de la seule liste, en code, et différenciez-le du dessin. Tout ce que vous avez dû mesurer a besoin d'une meilleure règle.

7. Explorez, puis organisez un tournoi.

• Écrivez 12 à 15 concepts d'une phrase dans au moins trois types de symboles. Une bonne répartition :
  • des améliorations du symbole actuel ;
  • des hybrides qui réinterprètent un élément ;
  • des directions fraîches (lettrage, ligature, conteneur, espace négatif, bitmap).
• Construisez-les tous à partir de règles.
• Appliquez les portes, puis notez les survivants (voir le tableau de bord).
• Présélectionnez trois finalistes de directions différentes, pas les trois premiers d'une même famille.
• Rétéretez chaque finaliste pour corriger ce que ses tests ont révélé, puis réitérez le gagnant une fois de plus dans la version finale.
• Conservez les fichiers de chaque tour. Une réitération peut aggraver un symbole. Dites-le et conservez la version antérieure.
• Montrez chaque tour au décideur (une page Figma, un tableau partagé), un cadre étiqueté par version avec son score, avant de demander à quiconque de choisir. Les scores calculés hors de vue donnent l'impression d'être invérifiables.
• Laissez le décideur choisir une liste de présélection à l'œil, puis révisez chaque choix avec son plan de construction. Les scores informent le choix. Ils ne le font pas.

8. Batterie de tests. Utilisez des rendus réels, jamais une capture d'écran réduite.

• Taille : 16, 20, 24, 32, 48, 64, 128, 256 px.
• Nombre de formes : seuil à 50 % et comptez les formes d'encre et les trous fermés à 512, 32 et 16 px. Si le nombre à 16 px diffère de celui à 512 px, les espaces se sont fermés ou le symbole s'est fragmenté.
• Plus petit espace : au moins 1/32 de la largeur du symbole. À 16 px, en dessous d'environ 1,3 px, les espaces se ferment.
• Test des lettres : chaque lettre se lit encore comme elle-même au premier coup d'œil. Répétez le test après tout changement d'épaisseur, de taille d'anneau ou de coupure. Un trait plus épais peut noyer un jambage, et une nouvelle coupure peut transformer un b en bouton de lecture.
• Lectures non intentionnelles : miroir, rotation à 180°, vue minuscule, flou (plissement des yeux).
• Couleur : noir et blanc monochrome, inversé, couleur de la marque, photo, motif.
• Étagère et familiarité : placez le symbole à côté de 4 à 6 symboles de sa catégorie utilisant le même dispositif. S'il semble familier et n'est pas le vôtre, c'est celui de quelqu'un d'autre.
• Jonctions : zoomez à chaque endroit où les traits se rencontrent. Cherchez les encoches, les copeaux et les bosses.
• Composites contextuels : placez le symbole dans les vrais endroits où il vivra, en utilisant une capture d'écran du Dock, de l'écran d'accueil ou de la barre d'onglets de la personne à résolution native, et comparez-le avec ses voisins.
• Mesurez honnêtement : échantillonnez les centres de pixels lors du tramage. Les remplissages de polygones qui incluent les pixels de bord ajoutent une fausse bordure grise et gonflent les chiffres de flou.

9. Coloris. Une inversion échange l'arrière-plan et le premier plan et conserve la géométrie, à part le fichier inversé aminci. Vérifiez le contraste (visez 4,5:1 ou plus). Une couleur unie par version, pas de dégradés dans le maître.

• Un accent, une signification. Si une deuxième couleur est utilisée, donnez-la au seul élément qui porte une signification (par exemple, le curseur ou l'invite qui dit "code"). Un accent graphique a besoin d'au moins 3:1 par rapport à son fond, alors utilisez-le uniquement sur des fonds où il atteint ce niveau.

10. Fichiers de production.

• Contours, pas de traits. Un <path>, un <title>, coordonnées à 2 décimales.
• Arcs écrits comme des arcs. Un symbole construit à partir de primitives a besoin de dizaines d'ancres, pas de centaines.
• Les sous-chemins se chevauchant avec le même enroulement se rendent comme une union (remplissage non nul). C'est correct pour l'écran et l'impression. Unifiez-les dans un éditeur vectoriel pour les découpeuses et la broderie.
• Export d'icône 24 px (convention Simple Icons) :
  • viewBox 24×24, monochrome, un chemin ;
  • touche au moins deux côtés et est centré ;
  • précision 3 décimales ;
  • pas d'attribut fill, width ou height ;
  • couleur de la marque enregistrée sous forme d'hexadécimal à 6 chiffres.
  • Lorsqu'une version monochrome nécessite des segments séparés, utilisez des espaces d'environ 0,5 sur 24 (1/48).
• Version petite taille : si les détails du maître fusionnent à 16 px, dessinez une version séparée à 16 px. Supprimez le plus petit élément et épaississez le trait, puis utilisez-la uniquement à cette taille. N'affaiblissez pas le maître pour qu'il s'adapte.
• Construction sur grille de pixels pour les symboles qui doivent être nets comme un rasoir : utilisez des cellules de canevas/16 (32 sur 512), de sorte qu'une cellule mesure exactement 1 px à 16 px et 2 px à 32 px. Placez uniquement sur des cellules entières. Accrochez les tiges verticales des symboles courbes à une grille de 16 unités pour qu'elles restent nettes à 32 et 64 px.
• Recadrage favicon : les favicons carrés n'ont pas besoin du cercle de sécurité. Recadrez le viewBox sur les limites de l'encre plus une marge de 6 % pour que le symbole s'affiche plus grand.
• Espace de dégagement provient de la propre géométrie du symbole (par exemple, un trait ou un diamètre de point), pas d'un nombre fixe.

11. Point de contrôle avant le kit. Montrez la fiche concept et votre recommandation, puis attendez. Construisez les lockups, les jeux d'icônes et les directives uniquement pour la direction que la personne choisit.

12. Livrez.

• Le maître en versions positive, inversée (amincie) et monochrome.
• Le diagramme de plan de construction.
• Le test de recadrage et le recadrage favicon.
• L'icône 24 px à chemin unique.
• La liste de règles.
• Le tableau de bord avec les mesures.
• Un bref exposé des motifs indiquant ce qui a changé et pourquoi.

Dans Figma, ajoutez de nouveaux cadres à côté de l'original et ne l'écrasez jamais.

Tableau de bord

Portes d'abord. En échouer une disqualifie un candidat, quel que soit son total :

• Recadrage : l'encre la plus éloignée se trouve à l'intérieur ou sur le cercle de sécurité.
• Test des lettres : les lettres prévues se lisent encore.

Ensuite, notez sur 5, pondérez, et montrez votre travail (total /50) :

Critère	Pondération
Lisibilité du favicon : la silhouette dit-elle encore ce qu'elle signifie à 16 px ?	×3
Formes et espaces : le nombre de formes mesurées tient à 32 et 16 px ; plus petit espace	×2
Adéquation au brief : conserve les éléments qui portent la signification	×2
Distinction : tests d'étagère et de familiarité	×2
Artisanat et reconstruction : un poids, une terminaison, optique sous forme de nombres, règles courtes	×1

Le total le plus élevé n'est pas automatiquement le choix. Une version qui gagne en taille en supprimant les éléments qui portent la signification de la marque n'a pas survécu. Dites-le, et nommez-la comme finaliste.

Coupures et espaces. Placez une coupure là où elle ne change pas la lettre ou la forme que vous lisez. Testez chaque nouvelle coupure avec le test des lettres et le test des lectures non intentionnelles.

Outils

scripts/blueprint_kit.py (nécessite shapely, numpy et pillow) couvre :

• primitives : arcs à extrémités arrondies, lignes et points ;
• placement : centrage de la masse et ajustement au cercle de sécurité ;
• sortie SVG : maître et recadrage favicon, plus l'export 24 px Simple Icons ;
• mesure : un trameur de couverture de zone et le nombre de formes et de trous à n'importe quelle taille.

Exécutez python3 scripts/blueprint_kit.py --demo out/ pour le voir sur un symbole de démonstration.

Conventions du diagramme de plan de construction

• Symbole à 25 à 30 % d'opacité sous la construction.
• Une couleur d'accent pour les lignes de construction. Grille dans une teinte atténuée à environ 18 % d'opacité.
• Dessinez :
  • le cercle de recadrage (plein) et le cercle de sécurité (tireté) ;
  • chaque cercle primitif, avec une ligne centrale pleine et des bords de trait tiretés ;
  • les rayons du compas que vous avez utilisés ;
  • le triangle clé ou le rapport, avec des étiquettes numériques.
• Étiquetez les rapports et les règles, pas chaque dimension.

Explication animée (facultative)

Animez une étape à la fois :

1. Cadre (cercle de recadrage et cercle de sécurité)
2. Grille
3. Primitive
4. Angles
5. Triangle de règle
6. Éléments
7. Échafaudage retiré
8. Test de recadrage
9. Test d'échelle

Construisez chaque cadre en SVG avec une géométrie partielle : les arcs grandissent par angle et les lignes par longueur. Évitez les astuces de tiret, que certains moteurs de rendu ignorent. Assemblez un GIF avec une pause sur la dernière image de chaque étape.

Anti-modèles

• Cercles du nombre d'or rétrofités.
• Traits diagonaux coupés à la largeur horizontale, donc ils paraissent plus fins.
• Coins pointus mélangés à des capuchons ronds.
• Espaces inégaux sans règle derrière eux.
• Masse centrée sur la boîte englobante alors que le recadrage est centré ailleurs.
• Éléments touchant le bord du recadrage par accident.
• Ajustements optiques non documentés.
• Des centaines d'ancres dans un symbole fait de cercles et de lignes.
• Un anneau qui partage presque, mais pas tout à fait, le centre du recadrage.
• Notation des versions que le décideur ne peut pas voir.
• Présélectionner trois versions de la même idée.
• Écraser les itérations, ou modifier le maître original sur place.
• Juger de l'évolutivité à 512 px.
• Prétendre avoir effectué un test que vous n'avez pas fait, ou une autorisation de marque que vous ne pouvez pas donner. Recommandez une recherche professionnelle.