Folha de marcas

O que Folha de marcas faz?

Um logótipo é mais escolhido do que gerado. O trabalho é colocar cinco ideias honestas e diferentes à frente da pessoa, cada uma comprovada nos tamanhos que um logótipo realmente vive, numa página que ela possa julgar em um minuto. Essa página é a folha de marcas. É uma página para olhar, não para ler: cinco colunas de imagens e quase nenhuma palavra.

O método vem de dois trabalhos reais de identidade onde a pessoa escolheu uma marca em noventa segundos após abrir a folha, e de testes contra o que um modelo capaz produz sem nenhum método. Os testes ensinaram duas coisas, e os passos abaixo servem a ambas.

• Disciplina é o que o método adiciona. Conhecimento real da marca antes de desenhar, cinco ideias verdadeiramente diferentes, prova a 16 pixels, uma fraqueza clara nomeada para cada marca, e uma escolha que fica com a pessoa.
• Carácter é o que não se pode perder. As marcas que as pessoas preferem fazem sentido à vista e parecem desenhadas com cuidado. Uma folha de glifos arrumados que precisam de uma frase para significar alguma coisa perde para uma imagem ousada e bem desenhada do nome.

Trabalhe rapidamente. Nos trabalhos de origem, a folha foi aberta cinco minutos após o pedido. É um primeiro olhar e outra ronda é barata, por isso escolha bem, desenhe com cuidado e não polaca.

Os passos: conhecer a marca, encontrar as ideias, esboçar e escolher cinco, construir a folha, olhar para ela, abrir e apresentar, realizar novas rondas, aplicar a escolha.

1. Conheça a marca antes de desenhar

Precisa de cinco coisas. Procure-as antes de pedi-las.

• O nome, exatamente como a marca o escreve, na sua própria grafia, e o que significa: o significado literal, a raiz, um idioma que ecoa, um trocadilho.
• O que faz, numa frase, idealmente como uma mudança: o que entra e o que sai.
• Para quem é e como deve sentir, em duas ou três palavras.
• O que já existe: o tipo de letra que o site usa, um logótipo antigo, o título do site principal, o vocabulário próprio do produto.
• Qualquer coisa que a pessoa já disse sobre o logótipo: uma restrição, um esboço, um logótipo que admira.

Num projeto, leia primeiro: o README, o texto da página de aterragem, o título da página e metadados, a configuração de fontes (@font-face, next/font, o config Tailwind, um link Google Fonts), quaisquer ficheiros de marca ou logótipo, e a conversa até agora. Pergunte apenas pelo que não encontrou, numa única mensagem de no máximo três perguntas curtas. Se a pessoa não puder ser questionada, ou lhe disser para simplesmente avançar, então avance e diga o que assumiu quando apresentar.

Isto vem primeiro porque marcas desenhadas sem isto saem como ícones de stock. Nas folhas de origem, cada marca baseava-se em algo específico: o que o nome significa, uma linha do título do site, o que o sistema faz às coisas que manipula.

O briefing padrão

A menos que a pessoa tenha dito o contrário, desenhe para isto: uma cor, o mais simples possível, com um propósito, um pouco único.

Isso significa preto sobre um off-white quente e nada mais. Se quiserem cor, ou o site tiver uma cor de realce, ainda assim escolha a forma a preto primeiro. A cor não deve ser o que torna uma forma fraca aceitável, e uma marca tem de funcionar a uma cor de qualquer forma (ícones de separador, selos, superfícies escuras). Cor e efeitos chegam quando a marca é aplicada.

2. Encontre ideias de lugares diferentes

Escreva cerca de dez candidatos, uma linha cada. Leia references/concept-moves.md antes de os listar: descreve os lugares de onde vêm boas marcas, com exemplos e a armadilha em cada um.

Aponte para uma variedade de tipos, porque o gosto das pessoas divide-se ao longo destas linhas:

• uma marca construída sobre a letra da marca;
• uma imagem do nome, quando o nome é uma coisa;
• o que o produto faz, mostrado como uma forma;
• um sinal ou padrão do próprio mundo da marca;
• um ou dois de mais longe.

Regras para escolher entre eles:

• Cinco ideias, não cinco estilos. Duas marcas baseadas na mesma metáfora contam como uma. Agrupe os candidatos pela ideia subjacente e mantenha um de cada grupo.
• A maioria deve ler-se à vista. A folha não explica nada: uma marca tem a sua imagem e um nome curto. Portanto, pelo menos três das cinco finais devem fazer sentido só a partir disso: uma coisa, uma letra, uma ação que se vê. A sua mensagem pode aprofundar uma marca, não salvá-la. Um glifo nu que não é nada sem uma frase (um ponto e uma barra, duas barras, um bloco simples) tem de ser impressionante para ganhar um lugar.
• Silhueta antes da história. Entre dois candidatos, mantenha a forma mais forte, não a história mais engenhosa. A história conta-se uma vez e a forma vê-se todos os dias.
• Nomeie os ícones óbvios e racione-os. Cada categoria tem um: um balão de fala para chat, uma casa para propriedade, uma faísca para IA, um carrinho para lojas, um escudo para segurança, uma página ou uma pilha de linhas para qualquer coisa relacionada com documentos. O nome tem frequentemente um seu próprio também (uma chama para uma marca chamada Kiln). Diga quais são para esta marca. No máximo uma das cinco pode basear-se em qualquer um deles, e apenas fundido com algo que esta marca possui exclusivamente. Uma marca que é uma página e outra que é uma chama são duas, não uma cada. Qualquer coisa que a pessoa tenha excluído fica de fora.
• Uma ideia por marca. Se uma marca precisar da palavra "e" para a explicar, são duas marcas. Divida-a ou deixe cair metade.

As primeiras ideias aglomeram-se no óbvio. Numa folha de origem, três das primeiras cinco marcas eram balões de fala, e a marca que ganhou veio de uma ronda posterior que foi mantida longe deles.

Cinco é o número certo, a menos que a pessoa peça outro: menos não dá nenhuma escolha real, mais transforma a escolha em trabalho, e cinco colunas cabem num ecrã.

3. Esboce, depois escolha cinco

Desenhe os seus candidatos antes de se comprometer com algum. Copie assets/contact-sheet.html para design-lab/logo/candidates.html no projeto, adicione um <symbol> por candidato, renderize-o com o script do passo 5 e olhe para a imagem. Mostra cada candidato grande, pequeno e como um ícone real de 16px ampliado. Mantenha os cinco que são mais fortes como formas e mais distantes como ideias, e melhore-os. Coloque a maior parte do seu tempo de desenho nos dois em que mais acredita: a folha precisa de pelo menos uma marca que enviaria tal como está, e uma folha de cinco primeiros rascunhos iguais perde para um logótipo acabado.

Uma folha de contacto é normal. Uma segunda é para redesenhar marcas que quase funcionam. Pare aí: a pessoa pode pedir outra ronda. Apague candidates.html e a sua imagem antes de apresentar.

Este passo existe porque um desenho na sua cabeça e um desenho na página são coisas diferentes. Nos testes, as execuções que olharam para os seus candidatos antes de escolher fizeram marcas claramente melhores do que as execuções que desenharam cinco e pararam.

Como desenhar uma marca

Cada marca é um <symbol> numa grelha de 64 por 64.

• Poucas partes, uma silhueta. Uma a quatro formas; o script de renderização avisa sobre uma marca que usa mais. Simples não significa apenas retângulos: um arco, um enrolamento, um sino alargado ou a taça de uma letra é bem-vindo quando é uma forma limpa. Ambas as marcas que foram enviadas dos trabalhos de origem são quatro retângulos arredondados, e a melhor marca nos testes foi uma silhueta única da coisa que dá nome à marca.
• Formas sólidas ou linhas grossas. Uma forma sólida não carrega atributo fill, porque a folha pinta o mesmo desenho a preto num lugar e a branco noutro. Uma forma desenhada a linha carrega fill="none" stroke="currentColor", pontas e junções redondas, e uma largura de traço para toda a marca, 7 unidades ou mais. Sem gradientes, opacidade, filtros, máscaras ou <text>. Uma letra é construída a partir de formas e nunca digitada, pois uma letra digitada é a fonte de outra pessoa.
• Calcule, não adivinhe. Para além de retângulos e círculos, calcule os pontos: onde um arco encontra uma linha, onde uma curva termina, uma espessura uniforme à volta de uma curva. Algumas linhas de Python que imprimem o caminho são mais rápidas do que adivinhar, e curvas adivinhadas parecem adivinhadas.
• Ajuste à grelha. Unidades inteiras ou meias, espaços iguais, arestas alinhadas, um raio de canto em toda a marca.
• Preencha a caixa uniformemente. Deixe cada marca abranger cerca de 48 unidades na sua direção mais longa, centrada, para que as cinco carreguem peso semelhante e a comparação seja justa.
• Desenhe para o ícone do separador. Um espaço ou linha mais fino do que cerca de 6 unidades transforma-se em lama a 16px. Formas grandes e espaços abertos sobrevivem e geralmente fazem uma marca melhor em todos os tamanhos.
• Siga a direção de leitura. Uma marca que mostra um antes e um depois corre na direção em que o script da marca se lê: da direita para a esquerda para árabe ou hebraico.

4. Construa a folha

Copie assets/sheet-template.html para design-lab/logo/marks-sheet.html no projeto, criando as pastas, e preencha os seis lugares numerados. O script do modelo constrói cada coluna a partir dos seus símbolos, pelo que cada marca é desenhada uma vez e é idêntica em todos os tamanhos.

A página é simples de propósito: um título de uma linha, depois cinco colunas lado a lado. Cada coluna mostra, de cima para baixo:

• a marca, grande;
• a marca ao lado do nome, em claro e em escuro;
• a marca como ícone a 64, 32 e 16 pixels, e esse ícone de 16 pixels ampliado para que os seus pixels reais possam ser vistos;
• dois botões que descarregam essa marca sozinha num fundo transparente, como PNG e como SVG.

As pessoas olham para esta página; não a leem. Não adicione nada a ela: nem razões, nem legendas, nem linha sobre como lê-la, nenhuma recomendação. O que uma marca significa, onde é fraca e qual escolheria vão todos na sua mensagem (passo 6).

• Idioma. Escreva o título e os nomes no idioma da marca, aquele em que o seu wordmark está, quando a pessoa claramente o lê. Defina dir="rtl" para scripts da direita para a esquerda. Se a marca está escrita em dois scripts, a folha mostra o principal; o segundo lockup vem com a escolha.
• Tipo de letra. Defina o wordmark no tipo de letra que a marca realmente usa: os próprios ficheiros de fonte do projeto através de um caminho relativo à folha, ou a fonte alojada que o site carrega. Iguale o peso, a caixa e o espaçamento entre letras que o site dá ao seu nome. Se a marca não tiver tipo de letra, escolha um de propósito e diga-o.
• Título. Uma linha curta, por exemplo "Cinco logótipos para Harbor".
• Nomes. Cada marca recebe um nome curto de uma a três palavras, nunca uma frase. As pessoas escolhem e lembram-se de marcas pelo nome ("Gosto do nó"), por isso o nome faz trabalho real.
• Letras. Atribua as letras A a E às marcas.
• Nome do ficheiro. Um nome curto em minúsculas com letras latinas para as descargas: harbor dá harbor-logo-A.png.

Se o projeto já tiver uma folha de marcas, não a substitua. O passo 7 diz o que fazer.

5. Olhe para ela antes deles

Renderize a folha, depois olhe para a imagem. O script está na própria pasta desta skill e funciona em qualquer página HTML, incluindo a folha de contacto:

bash "<pasta desta skill>/scripts/render.sh" design-lab/logo/marks-sheet.html

Escreve um PNG ao lado do HTML com o Chromium sem cabeça que a máquina tiver e imprime o caminho, seguido de um aviso para qualquer marca desenhada com mais de quatro formas ou com uma linha mais fina que 7 unidades. Aja sobre esses avisos. Abra essa imagem e verifique, marca a marca:

• É a folha: cinco colunas, o tipo de letra certo no wordmark, sem {{placeholders}} sobrantes? Uma renderização pode capturar silenciosamente a página errada ou uma fonte de fallback.
• Cada marca lê-se como o que o seu nome diz, sem mais nada para a explicar?
• Alguma marca lê-se como algo que não pretendia: um dígito, uma letra diferente, um ícone de menu, um logótipo que já conhece?
• No ícone de 16px ampliado no fundo de cada coluna, as formas mantêm-se separadas, ou os espaços fecham-se e as partes finas tornam-se cinzentas?
• Alguma coisa está recortada na borda da sua caixa, descentrada ou visivelmente mais pesada ou mais leve que as suas vizinhas?
• Um nome longo ainda cabe ao lado da sua marca, e cada coluna tem a mesma altura?
• Ao lado do wordmark, a marca senta-se bem com o nome, ou gagueja ao repetir a primeira letra do nome mesmo ao lado dela?

Corrija o que encontrar e renderize novamente para confirmar. Uma marca que falha a 16px é redesenhada com menos peças maiores ou substituída pelo seu próximo melhor candidato. No máximo duas das cinco podem ser mostradas com uma fraqueza conhecida a 16px, e cada uma deve dizê-lo na sua linha de fraqueza.

Se o script não conseguir renderizar (sai com uma razão), abra o HTML num navegador que possa capturar o ecrã, se tiver um. Se não conseguir olhar, diga-o quando apresentar.

6. Abra e apresente

Abra a folha para a pessoa: open no macOS, xdg-open no Linux, start no Windows. O HTML é a coisa a abrir, e o PNG é para verificar e partilhar. Deixe ambos em design-lab/logo/ e faça commit deles apenas se a pessoa ou as regras do próprio projeto o disserem.

Não ligue nenhuma marca no produto e não faça ficheiros de produção antes de a pessoa ter escolhido. Essa é a decisão deles e leva dois minutos uma vez tomada. Os botões de descarga na folha são para experimentar uma marca num slide ou numa maquete. Os ficheiros adequados vêm com a escolha.

Depois, escreva uma mensagem curta:

• onde está a folha e que está aberta;
• uma linha por marca, como letra, nome, o que é e por que pertence a esta marca, e a sua fraqueza honesta se a tiver ("mais próximo de um ícone de edifício genérico", "quieto e um pouco literal"). A página não carrega nada disto, por isso a linha é onde o significado de uma marca vive;
• a sua escolha e porquê, numa ou duas frases. Recomende uma marca que enviaria tal como está: uma que se lê à vista e se mantém como ícone de 16px. Se a ideia de que mais gosta tem uma falha conhecida, diga que é a sua ideia favorita e nomeie uma marca diferente como a que enviaria;
• uma pergunta de encerramento: qual, ou quais dois para levar mais além. Diga que, assim que escolherem, fará os ficheiros e a colocará no site.

Dê uma opinião real e fraquezas reais, depois deixe a escolha com eles. Nos trabalhos de origem, a pessoa anulou a recomendação uma vez. Não lhes peça para escolherem cores, estilos ou fontes neste momento, e mantenha a mensagem nessas poucas linhas: a página mostra e a mensagem explica, cada um uma vez.

7. Rondas seguintes

• "Mais cinco." Escreva um novo ficheiro, marks-sheet-2.html, e continue as letras (F a J) para que cada marca mantenha uma letra única nas rondas. Coloque uma ligação de volta à folha anterior sob o título, como o modelo mostra. Os novos cinco devem vir de ideias que as anteriores não tocaram. Volte ao passo 2 e faça uma nova ronda de candidatos. Nenhuma ideia da primeira ronda volta, a menos que a pessoa a peça.
• "Melhore estes dois." Aperfeiçoe as duas marcas nomeadas. Se conseguir fundir as suas melhores partes numa só, faça-o. Coloque-as lado a lado na mesma folha, em "F" e "G", e diga o que mudou. Se uma não melhorar, diga que a enviaria como está.
• "Faça aquele que gostei." Pare aqui. A escolha está feita. Vá para o passo 8.

Mantenha as rondas curtas. A pessoa recebe uma folha de cada vez, nunca duas ao mesmo tempo. No máximo três rondas. Depois disso, a pessoa tem ou uma escolha ou material suficiente para dizer que a direção não funciona.

8. Aplique a escolha

Quando a pessoa escolher uma marca, faça:

• Ficheiro SVG: extraia o <symbol> escolhido para o seu próprio ficheiro em design-lab/logo/, nomeado marca-nomeada-letra.svg. Adicione xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64". Envolva os caminhos estáticos num <g id="marca-nomeada">, coloque a marca no centro na orientação da leitura, e remova quaisquer partes inativas ou rascunho.
• Ficheiro PNG: renderize o SVG como um PNG transparente de 512×512 usando o script de renderização se aceitar SVG, ou faça um de outra forma. Coloque-o ao lado do SVG.
• Lockup do nome: crie um lockup horizontal da marca e do nome da marca no tipo de letra da marca, centrado verticalmente, com um espaço entre eles de cerca de 12 a 16 unidades. Coloque-o como <svg> autónomo em design-lab/logo/lockup-marca-nomeada.svg.
• Favicon SVG: adicione a marca como <svg viewBox="0 0 64 64"> no cabeçalho do site, como marca no separador. Teste se funciona.
• Favicon ICO: normalize o SVG a um ficheiro .ico de 32×32 ou múltiplos. O favicon tem de ser uma forma sólida a uma cor, sem transparência, ou a marca não aparece nos separadores escuros. Se o SVG for oco, preencha-o.
• Ícone de aplicação: normalize o SVG a um PNG de 192×192 e 512×512 para manifestos de aplicação web se o projeto tiver um manifesto.
• Implementação: Onde o projeto coloca os seus ficheiros reais: /public/ para Vite/Next.js estático, /static/ para Django, /src/assets/ para frameworks que o constroem. Copie os ficheiros para lá. No React, importe o SVG como componente ou URL. Nos componentes, use a marca e o lockup onde o README ou o design mostra o logótipo: cabeçalho, rodapé, página de carregamento, separador, página 404.

Não aplique cor, gradientes ou efeitos a menos que a pessoa peça. A marca vem a uma cor: preto num fundo claro, ou branco num fundo escuro. Se pedirem variantes de cor, ou se o site tiver uma área de marca distinta, faça uma versão na cor de realce do site. Mantenha-a plana.

Marque a escolha no ficheiro projeto README.md se existir, ou nesta conversa, para que qualquer execução futura saiba o que foi decidido.

Depois disto, a tarefa está completa. Não há mais nada para desenhar, a menos que a pessoa peça outro logótipo.