Logo geométrico em grade

Blueprint de Logótipo Geométrico

Um blueprint é uma lista curta de instruções que reconstrói um logótipo exatamente, a partir de uma tela em branco, sem medir ou traçar o ficheiro antigo. Se não consegues escrever essa lista, tens decoração, não um sistema. O resultado é uma especificação que podes descrever, defender e reproduzir, não uma imagem.

Inspirado por designers de logótipos que constroem marcas a partir de geometria simples: os escritos de James Barnard sobre blueprints de logótipos, e as identidades construídas de Chermayeff & Geismar & Haviv e Bruce Blackburn. A versão 2 adiciona prática de três projetos open-source:

• A skill de design de logótipos open-source de Kaan Kızıltuğ (bateria de testes, correções óticas, crítica);
• As convenções de ícones do projeto Simple Icons (exportação monocromática de caminho único);
• O relato publicado da Inkloom sobre construção de marcas sob regras de construção.

Notas em references/inspirations.md.

Dez regras

1. Conceito primeiro, geometria por último. Sabe o que cada elemento significa antes de desenhares um círculo. A grelha arranja o design nos últimos 10% do trabalho.
2. O teste de reconstrução define um blueprint. Consegue alguém recriar a marca exatamente a partir do diagrama e de algumas instruções simples?
3. Poucos primitivos, partilhados. Uma família de formas base, com raios partilhados, junções tangentes e um estilo terminal.
4. Nem toda a marca se adequa a um blueprint. Marcas caligráficas ou fortemente óticas não se reduzem a geometria limpa. Não as forces.
5. Nunca retrofitar. Círculos da proporção áurea desenhados sobre um logótipo acabado parecem alinhados e não provam nada.
6. A correção ótica é um número, não um ajuste. Escreve cada correção nas regras (ver passo 5).
7. Para cedo. Para de adicionar construção assim que a marca for reproduzível.
8. Explora amplamente, depois estreita. Muitos conceitos baratos de uma linha, algumas construções, um final. Mantém cada iteração.
9. Mede, não admires. Cada candidato parece bom a 512. Julga a 16px a partir de renderizações reais.
10. Entrega a especificação. A lista de regras, o diagrama e os resultados dos testes.

Se uma construção precisar de muitas medidas, não é suficientemente simples. Simplifica a marca ou o sistema.

Procedimento

1. Brief para restrições. Lista o que cada elemento significa. Transforma os adjetivos, o público e os concorrentes do brief em parâmetros concretos antes de desenhar:

• peso do traço;
• largura e proporção;
• família geométrica;
• forma do contracampo;
• estilo terminal (redondo ou plano);
• quais tipos de marca se encaixam.

Depois lista os clichés da categoria (para uma ferramenta de desenvolvimento: parênteses retos, chevrons, janelas de terminal cursores). Usa um cliché apenas com uma forma fresca.

Se existir uma versão anterior, inspeciona os dados do ficheiro real (tamanhos, larguras de traço, ângulos de arco, centros) e faz engenharia reversa do seu sistema primeiro. Nota o que é arbitrário: tamanhos fora do módulo, lacunas desiguais, massa que fica descentrada.

2. Fixa o enquadramento e os seus cortes.

• Tamanho da tela (512) e todos os cortes que a marca deve sobreviver: avatar circular (r = S/2), ícone de aplicação arredondado, favicon quadrado.
• Círculo seguro a 7/8 do raio do corte (224 em 512). Toda a tinta fica dentro dele.
• O que fica no centro do corte. Se a marca for construída sobre um círculo, coloca o centro desse círculo no centro do corte. Dois círculos quase concêntricos que falham por alguns pixéis leem-se como um erro, e o olho perdoa mais cedo um peso desigual. Centra no centróide da área apenas quando nada na marca ecoar o corte.
• Se um brief mencionar a marca cortada por um corte, decide em voz alta: seguro para corte (o padrão) ou sangria deliberada (um elemento ultrapassa a aresta num ponto documentado).

3. Escolhe um módulo e um primitivo.

• Unidade u que divide a tela (8 em 512). Peso do traço num múltiplo limpo (48 = 6u).
• Prefere relações que uma pessoa possa reconstruir com compasso e régua: triplos pitagóricos (3:4:5), raio igual a metade da tela.
• Ângulos por divisão (90°, 45°, 22.5°) ou por hexágono (60°, 30°). Sem ângulos de quase-acerto.

4. Coloca cada elemento por uma regra. Cada um recebe uma instrução de uma linha, por exemplo: "a haste está no ponto oeste do círculo e sobe até a sua tampa tocar o círculo seguro."

• Um peso de traço, medido perpendicularmente ao traço. Um braço de 45° cortado com 48 de largura horizontal tem apenas 34 de espessura.
• Um estilo de tampa e junção para cada elemento. Cantos vivos ao lado de tampas redondas leem-se como dois sistemas.
• Uma regra de lacuna, por exemplo "cada lacuna igual a um traço", ou para um anel partido "divide-o em setores iguais e pinta alternados".
• Diâmetro do ponto igual ao traço.

5. Ótica, como números.

• Massa: para marcas sem círculo a ecoar o corte, coloca o centróide da área no centro ótico (cerca de 1% acima do centro geométrico), não na caixa envolvente. Para marcas baseadas em anel, ver passo 2: o anel vence, e o espaço aberto no lado leve equilibra o peso.
• Overshoot: formas redondas 1 a 3% da altura; pontos 3 a 6%. Um ponto redondo ao lado de traços retos precisa de cerca de +4% de diâmetro.
• Irradiação: claro sobre escuro lê-se mais pesado. Adelgaça o ficheiro invertido 2 a 5% e nomeia-o como o seu próprio ficheiro.
• Lettering: horizontais 5 a 10% mais finas que as verticais.

Escreve cada correção na lista de regras.

6. Executa o teste de reconstrução. Escreve as regras em 8 linhas ou menos. Reconstrói a marca a partir apenas da lista, em código, e compara-a com o desenho. Qualquer coisa que tenhas medido precisa de uma regra melhor.

7. Explora, depois executa um torneio.

• Escreve 12 a 15 conceitos de uma frase em pelo menos três tipos de marca. Uma boa distribuição:
  • refinamentos da marca atual;
  • híbridos que reinterpretam um elemento;
  • direções novas (letraforma, ligadura, contentor, espaço negativo, bitmap).
• Constrói todos a partir de regras.
• Aplica os portões, depois pontua os sobreviventes (ver o cartão de pontuação).
• Pré-seleciona três finalistas de direções diferentes, não os três primeiros de uma família.
• Reitera cada finalista para corrigir o que os seus testes expuseram, depois reitera o vencedor mais uma vez para o final.
• Mantém os ficheiros de cada ronda. Uma reiteração pode piorar uma marca. Diz isso e mantém a versão anterior.
• Mostra cada ronda onde o decisor trabalha (uma página Figma, um quadro partilhado), um frame legendado por versão com a sua pontuação, antes de pedir a alguém para escolher. Pontuações calculadas fora da vista parecem não verificáveis.
• Deixa a pessoa escolher uma pré-seleção a olho, depois revisa cada escolha com o seu blueprint. As pontuações informam a escolha. Não a fazem.

8. Bateria de testes. Usa renderizações reais, nunca uma captura de ecrã redimensionada.

• Tamanho: 16, 20, 24, 32, 48, 64, 128, 256px.
• Contagem de formas: limiar a 50% e conta formas de tinta e buracos fechados a 512, 32 e 16px. Se a contagem a 16px diferir da de 512px, as lacunas fecharam-se ou a marca fragmentou-se.
• Lacuna mais pequena: pelo menos 1/32 da largura da marca. A 16px, abaixo de cerca de 1.3px, as lacunas fecham-se.
• Teste de letra: cada letra ainda se lê como ela própria à primeira vista. Repete o teste após qualquer alteração ao peso, tamanho do anel ou quebras. Um traço mais pesado pode afogar uma ascendente, e uma nova quebra pode transformar um b num botão de reprodução.
• Leituras não intencionais: espelha, roda 180°, vê pequeno, desfoca (estrábico).
• Cor: uma cor preto e branco, invertido, cor da marca, uma fotografia, um padrão.
• Prateleira e familiaridade: coloca a marca ao lado de 4 a 6 marcas da sua categoria que usem o mesmo dispositivo. Se parecer familiar e não for tua, é de outro.
• Junções: amplia para cada lugar onde os traços se encontram. Procura por entalhes, farpas e caroços.
• Composições de contexto: coloca a marca nos lugares reais onde viverá, usando uma captura de ecrã da própria Dock, ecrã inicial ou barra de separadores da pessoa na resolução nativa, e compara-a com os seus vizinhos.
• Mede honestamente: amostra centros de pixéis ao rasterizar. Preenchimentos de polígono que incluem pixéis de borda adicionam uma falsa borda cinzenta e inflacionam números de desfocagem.

9. Esquemas de cor. Uma inversão troca fundo e primeiro plano e mantém a geometria, à parte do ficheiro invertido adelgaçado. Verifica o contraste (aponta para 4.5:1 ou mais). Uma cor plana por versão, sem gradientes no mestre.

• Um acento, um significado. Se for usada uma segunda cor, dá-a ao único elemento que carrega um significado (por exemplo, o cursor ou prompt que diz "código"). Um acento gráfico precisa de pelo menos 3:1 contra o seu fundo, por isso usa-o apenas em fundos onde atinja isso.

10. Ficheiros de produção.

• Contornos, não traços. Um <path>, um <title>, coordenadas com 2 casas decimais.
• Arcos escritos como arcos. Uma marca construída a partir de primitivos precisa de dezenas de âncoras, não centenas.
• Subcaminhos sobrepostos com a mesma orientação renderizam como uma união (preenchimento diferente de zero). Isso é adequado para ecrã e impressão. Une-os num editor vetorial para cortadores e bordados.
• Exportação de ícone de 24px (convenção Simple Icons):
  • viewBox 24×24, monocromático, um caminho;
  • toca pelo menos dois lados e está centrado;
  • precisão de 3 casas decimais;
  • sem atributos fill, width ou height;
  • a cor da marca registada como um hexadecimal de 6 dígitos.
  • Onde uma versão monocromática precisar de segmentos separados, usa lacunas de cerca de 0.5 em 24 (1/48).
• Corte de tamanho pequeno: se os detalhes do mestre se fundirem a 16px, desenha uma versão separada de 16px. Remove o elemento mais pequeno e engrossa o traço, depois usa-a apenas nesse tamanho. Não enfraqueças o mestre para caber.
• Construção em grelha de pixéis para marcas que devem ser perfeitas: usa células de tela/16 (32 em 512), para que uma célula seja exatamente 1px a 16px e 2px a 32px. Coloca apenas em células inteiras. Ajusta as hastes verticais de marcas curvas a uma grelha de 16 unidades para que fiquem nítidas a 32 e 64px.
• Corte de favicon: favicons quadrados não precisam do círculo seguro. Recorta o viewBox para os limites da tinta mais uma margem de 6% para que a marca desenhe maior.
• Espaço livre vem da própria geometria da marca (por exemplo, um traço ou um diâmetro de ponto), não de um número fixo.

11. Ponto de verificação antes do kit. Mostra a folha de conceitos e a tua recomendação, depois espera. Constrói bloqueios, conjuntos de ícones e diretrizes apenas para a direção que a pessoa escolher.

12. Entrega.

• O mestre em versões positiva, invertida (adelgaçada) e uma cor.
• O diagrama do blueprint.
• O teste de corte e o corte de favicon.
• O ícone de 24px de caminho único.
• A lista de regras.
• O cartão de pontuação com medidas.
• Uma breve justificação que diga o que mudou e porquê.

No Figma, adiciona novos frames ao lado do original e nunca o sobrescrevas.

Cartão de pontuação

Primeiro os portões. Falhar qualquer um deles elimina um candidato, seja qual for a sua pontuação total:

• Corte: a tinta mais distante fica dentro do círculo seguro.
• Teste de letra: as letras pretendidas ainda se leem.

Depois pontua de 0 a 5, pondera e mostra o teu raciocínio (total /50):

Critério	Peso
Leitura do favicon: a silhueta ainda diz o que significa a 16px?	×3
Formas e lacunas: contagens de forma medidas mantêm-se a 32 e 16px; lacuna mais pequena	×2
Adequação ao brief: mantém os elementos que carregam significado	×2
Distinção: testes de prateleira e familiaridade	×2
Ofício e reconstrução: um peso, um terminal, ótica como números, regras curtas	×1

O total mais alto não é automaticamente a escolha. Uma versão que vence em tamanho ao remover os elementos que carregam o significado da marca não sobreviveu. Diz isso e nomeia-a como a segunda classificada.

Quebras e lacunas. Coloca uma quebra onde ela não altera qual letra ou forma lês. Testa cada nova quebra com o teste de letra e o teste de leituras não intencionais.

Ferramentas

scripts/blueprint_kit.py (precisa de shapely, numpy e pillow) cobre:

• primitivos: arcos, linhas e pontos com tampas redondas;
• colocação: centralização da massa e ajuste ao círculo seguro;
• saída SVG: mestre e corte de favicon, mais a exportação Simple Icons de 24px;
• medição: um rasterizador de cobertura de área e a contagem de formas e buracos em qualquer tamanho.

Executa python3 scripts/blueprint_kit.py --demo out/ para ver num logótipo de demonstração.

Convenções do diagrama do blueprint

• Marca a 25 a 30% de opacidade sobre a construção.
• Uma cor de acento para linhas de construção. Grelha num tom suave com cerca de 18% de opacidade.
• Desenha:
  • o círculo de corte (sólido) e o círculo seguro (tracejado);
  • cada círculo primitivo, com uma linha central sólida e arestas de traço tracejadas;
  • os raios do compasso que usaste;
  • o triângulo ou razão chave, com etiquetas numéricas.
• Etiqueta razões e regras, não todas as dimensões.

Explicador de animação (opcional)

Anima um passo de cada vez:

1. Enquadramento (corte e círculo seguro)
2. Grelha
3. Primitivo
4. Ângulos
5. Triângulo de regra
6. Elementos
7. Andaime removido
8. Teste de corte
9. Teste de escala

Constrói cada frame como SVG com geometria parcial: arcos crescem por ângulo e linhas por comprimento. Evita truques de traço, que alguns renderizadores ignoram. Monta um GIF com uma pausa no último frame de cada passo.

Anti-padrões

• Círculos da proporção áurea retrofite.
• Traços diagonais cortados à largura horizontal, pelo que se leem mais finos.
• Cantos vivos misturados com tampas redondas.
• Lacunas desiguais sem regra por trás.
• Massa centrada na caixa envolvente enquanto o corte está centrado noutro lugar.
• Elementos a tocar na aresta do corte por acidente.
• Ajustes óticos não documentados.
• Centenas de âncoras numa marca feita de círculos e linhas.
• Um anel que quase, mas não exatamente, partilha o centro do corte.
• Versões que o decisor não pode ver.
• Pré-selecionar três versões da mesma ideia.
• Sobrescrever iterações, ou editar o mestre original no lugar.
• Julgar escalabilidade a 512px.
• Reclamar um teste que não executaste, ou libertação de marca registada que não podes dar. Recomenda uma pesquisa profissional.